Gentellella Admin Template: Profesyonel Admin Panelleri İçin Bootstrap Tabanlı Şablon

Gentellella, Bootstrap tabanlı ücretsiz bir admin şablonudur. Modern ve kullanıcı dostu bir arayüz sunar, özellikle yönetim panelleri, dashboard uygulamaları ve admin araçları geliştirmek isteyenler için idealdir. Bu yazıda Gentellella’nın özelliklerini, kurulumunu ve temel bileşenlerini inceleyeceğiz.

Gentellella Nedir?

Gentellella, açık kaynaklı bir Bootstrap admin şablonudur. Temel özellikleri:

Bootstrap 3/4 tabanlı
Responsive (duyarlı) tasarım
Temiz ve modern UI/UX
Çok sayıda bileşen: Grafikler, tablolar, formlar, menüler
Ücretsiz ve açık kaynak (MIT Lisansı)

Kullanım Alanları

Yönetim panelleri
Dashboard uygulamaları
CRM ve ERP sistemleri
Veri analiz araçları

Gentellella Kurulumu

pexels-photo-270557-270557-1024x682 Gentellella Admin Template: Profesyonel Admin Panelleri İçin Bootstrap Tabanlı Şablon

Gentellella’yı projenize eklemenin birkaç yolu var:

1. GitHub’dan İndirme

Gentellella’yı direkt GitHub’dan indirebilirsiniz:

bash

git clone https://github.com/puikinsh/gentelella

📌 GitHub Repo: https://github.com/puikinsh/gentelella

2. npm ile Kurulum (Bootstrap 4 Sürümü)

bash

npm install gentelella

3. CDN ile Kullanım (Hızlı Başlangıç)

html

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/gentelella@1.4.0/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/gentelella@1.4.0/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<!-- Gentellella Temel CSS -->
<link href="https://cdn.jsdelivr.net/npm/gentelella@1.4.0/build/css/custom.min.css" rel="stylesheet">

Gentellella Temel Bileşenleri

1. Sidebar (Yan Menü)

Gentellella’nın en belirgin özelliği, düzenlenebilir yan menüsüdür. Örnek kod:

html

<div class="col-md-3 left_col">
    <div class="left_col scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="site_title">
                <i class="fa fa-paw"></i> <span>Gentellella</span>
            </a>
        </div>
        <div class="clearfix"></div>
        <!-- Menü içeriği -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>Genel</h3>
                <ul class="nav side-menu">
                    <li><a href="index.html"><i class="fa fa-home"></i> Anasayfa</a></li>
                    <li><a href="form.html"><i class="fa fa-edit"></i> Formlar</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

📌 Özellikler:

Scroll desteği (scroll-view)
Font Awesome ikonları (fa fa-home)
Responsive uyumlu

2. Dashboard (Gösterge Paneli)

Gentellella, istatistiksel veriler için çeşitli grafik ve widget’lar sunar:

html

<div class="row">
    <div class="col-md-4 col-sm-6">
        <div class="x_panel">
            <div class="x_title">
                <h2>Satış Grafiği</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <canvas id="salesChart"></canvas>
            </div>
        </div>
    </div>
</div>

📌 Kullanılan Kütüphaneler:

Chart.js (Grafikler için)
jQuery (Dinamik veri yükleme)

3. Formlar ve Tablolar

Gentellella, Bootstrap tabanlı gelişmiş form ve tablo yapıları sunar:

html

<div class="x_panel">
    <div class="x_title">
        <h2>Kullanıcı Listesi</h2>
    </div>
    <div class="x_content">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Ad</th>
                    <th>E-posta</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Ahmet Yılmaz</td>
                    <td>ahmet@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Gentellella ile Proje Geliştirme

Örnek Proje: Admin Paneli

HTML Şablonu Oluştur (index.html)
Sidebar ve Header Ekle
Dashboard Widget’larını Yerleştir
API veya Statik Verilerle Grafikleri Doldur

Özelleştirme İpuçları

Renk teması değiştirme: custom.css dosyasını düzenle
Yeni menü ekleme: sidebar-menu’ye yeni <li> ekle
Dark Mode: dark-theme.css ekleyerek gece teması yap

Sonuç

Gentellella, hızlı ve profesyonel admin panelleri oluşturmak için mükemmel bir şablondur. Bootstrap tabanlı olduğu için kolay özelleştirilebilir ve responsive uyumludur. Eğer bir yönetim paneli projesi geliştiriyorsanız, Gentellella harika bir başlangıç noktası olacaktır.