Elementor WordPress Sayfa Oluşturucu Eklentisi: Kapsamlı Teknik Rehber

Bu çalışma, WordPress ekosisteminin en popüler sayfa oluşturucu eklentisi olan Elementor'u kapsamlı bir şekilde incelemektedir. 2016 yılında piyasaya sürülen ve günümüzde 18 milyondan fazla aktif web sitesinde kullanılan Elementor, sürükle-bırak arayüzü ile kod bilgisi gerektirmeden profesyonel web siteleri oluşturmayı mümkün kılmaktadır. Çalışmada temel ve ileri seviye özellikler, Theme Builder, WooCommerce entegrasyonu, AI yetenekleri ve performans optimizasyonu teknik detaylarıyla ele alınmaktadır.

Eklenti Linki: Elementor WordPress Eklentisi

---

1. Bölüm | Başlangıç:

1.1 Elementor Nedir?

Elementor, WordPress için geliştirilmiş görsel bir sayfa oluşturucu (page builder) eklentisidir. Kullanıcıların herhangi bir kodlama bilgisi olmadan, sürükle-bırak (drag and drop) arayüzü aracılığıyla web sayfaları tasarlamasına olanak tanır. WYSIWYG (What You See Is What You Get) prensibiyle çalışan editör, yapılan değişiklikleri anlık olarak önizleme imkanı sunar.

1.2 Tarihsel Gelişim

Kronolojik Gelişim:

1.3 Neden Elementor?

Elementor'un Öne Çıkan Avantajları:

1. Kod Gerektirmez: Görsel arayüz ile tam kontrol
2. Gerçek Zamanlı Düzenleme: Değişiklikleri anında görme
3. Responsive Tasarım: Mobil, tablet ve masaüstü optimizasyonu
4. Geniş Widget Kütüphanesi: 100+ hazır bileşen
5. Template Sistemi: Binlerce hazır şablon
6. Genişletilebilirlik: Yüzlerce addon eklenti desteği
7. Performans Odaklı: Google ortaklığıyla optimizasyon
8. AI Entegrasyonu: Yapay zeka destekli içerik üretimi

---

2. Kurulum ve Temel Yapılandırma

2.1 Sistem Gereksinimleri

Minimum Gereksinimler:

WordPress Sürümü: 6.0 veya üzeri
PHP Sürümü: 7.4 veya üzeri (PHP 8.0+ önerilir)
MySQL Sürümü: 5.6 veya üzeri
Bellek Limiti: 256MB (512MB önerilir)
max_execution_time: 300 saniye
upload_max_filesize: 64MB

Önerilen Hosting Özellikleri:

• SSD depolama
• LiteSpeed veya Nginx web sunucusu
• PHP OPcache aktif
• Gzip sıkıştırma
• SSL sertifikası

2.2 Kurulum Adımları

WordPress Admin Panel Üzerinden:

1. WordPress Dashboard > Eklentiler > Yeni Ekle
2. Arama kutusuna "Elementor" yazın
3. "Elementor Website Builder" eklentisini bulun
4. "Şimdi Kur" butonuna tıklayın
5. "Etkinleştir" butonuna tıklayın

Manuel Kurulum (FTP):

1. wordpress.org/plugins/elementor adresinden ZIP dosyasını indirin
2. ZIP dosyasını açın
3. FTP ile wp-content/plugins/ dizinine yükleyin
4. WordPress Dashboard > Eklentiler bölümünden etkinleştirin

2.3 İlk Yapılandırma

Elementor > Ayarlar menüsünden:

Genel Ayarlar:
├── Post Types: Elementor'un çalışacağı içerik türleri
├── Disable Default Colors: Tema renklerini devre dışı bırak
├── Disable Default Fonts: Tema fontlarını devre dışı bırak
└── Enable Unfiltered File Uploads: SVG yükleme izni

Performans Ayarları:
├── CSS Print Method: External File (önerilir)
├── Optimized DOM Output: Aktif
├── Improved Asset Loading: Aktif
└── Lazy Load Background Images: Aktif

Gelişmiş Ayarlar:
├── Google Fonts: Aktif/Devre Dışı
├── Font Awesome: Aktif/Devre Dışı (Inline SVG önerilir)
└── Safe Mode: Sorun giderme için

---

3. Editör Arayüzü ve Temel Kavramlar

3.1 Editör Bileşenleri

Ana Editör Paneli:

┌─────────────────────────────────────────────────────────┐
│  ☰ Hamburger Menu    |    Page Title    |    ⚙️ ⊕ 👁️  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────┐                                            │
│  │ Widgets │    ┌─────────────────────────────────┐    │
│  │ Panel   │    │                                 │    │
│  │         │    │      CANVAS AREA                │    │
│  │ 🔍Search │    │      (Live Preview)            │    │
│  │         │    │                                 │    │
│  │ ▣ Basic │    │  ┌─────────────────────────┐   │    │
│  │ ▣ Pro   │    │  │      SECTION            │   │    │
│  │ ▣ Theme │    │  │  ┌───────┬───────┐     │   │    │
│  │ ▣ Woo   │    │  │  │Column │Column │     │   │    │
│  │         │    │  │  │Widget │Widget │     │   │    │
│  │         │    │  │  └───────┴───────┘     │   │    │
│  └─────────┘    │  └─────────────────────────┘   │    │
│                 └─────────────────────────────────┘    │
├─────────────────────────────────────────────────────────┤
│    📱 Responsive    |    ↩️ History    |    💾 Publish  │
└─────────────────────────────────────────────────────────┘

3.2 Sayfa Yapısı Hiyerarşisi

Elementor'da sayfalar üç ana yapısal öğeden oluşur:

1. Section (Bölüm):

- Sayfanın temel yapı taşları
- Tam genişlik veya kutulu (boxed) olabilir
- Arka plan rengi, görsel, video içerebilir
- Birden fazla kolon barındırır

2. Column (Kolon):

- Section içinde yer alan dikey bölümler
- Yüzdelik genişlik ayarı (örn: 50%-50%, 33%-33%-33%)
- Kendi arka plan ve padding ayarları
- Widget'ları barındırır

3. Widget:

- İçerik öğeleri (metin, görsel, buton vb.)
- Kolonlar içine sürükle-bırak ile eklenir
- Her widget'ın Content, Style, Advanced sekmeleri vardır

3.3 Container (Flexbox) Yapısı

Elementor 3.6+ ile tanıtılan modern yapı:

Geleneksel Yapı:        Container Yapısı:
Section                 Container
└── Column              ├── Widget
    └── Widget          ├── Container (nested)
                        │   └── Widget
                        └── Widget

Container Avantajları:

• Daha az DOM elementi
• Flexbox ve Grid desteği
• Daha hızlı yükleme
• Esnek hizalama seçenekleri
• İç içe container desteği

Flexbox Özellikleri:

/* Container Flex Ayarları */
display: flex;
flex-direction: row | column;
justify-content: flex-start | center | flex-end | space-between | space-around;
align-items: flex-start | center | flex-end | stretch;
flex-wrap: nowrap | wrap;
gap: 20px;

---

4. Widget Kategorileri ve Kullanımları

4.1 Ücretsiz Temel Widget'lar

Basic (Temel) Widget'lar:

General Widget'lar:

4.2 Elementor Pro Widget'ları

Theme Elements:

Site Yapısı:
├── Site Logo: Dinamik logo widget
├── Site Title: Site başlığı
├── Page Title: Sayfa başlığı
├── Nav Menu: Navigasyon menüsü
├── Search Form: Arama formu
└── Breadcrumbs: Breadcrumb navigasyonu

İçerik Öğeleri:
├── Post Title: Yazı başlığı
├── Post Excerpt: Yazı özeti
├── Post Content: Yazı içeriği
├── Featured Image: Öne çıkan görsel
├── Author Box: Yazar bilgisi
├── Post Comments: Yorumlar
├── Post Navigation: Önceki/Sonraki yazı
└── Archive Posts: Arşiv listesi

Pro Exclusive Widget'lar:

4.3 WooCommerce Widget'ları

Ürün Widget'ları:

Ürün Gösterimi:
├── Products: Ürün grid/listesi
├── Product Categories: Kategori listesi
├── Product Images: Ürün galeri
├── Product Title: Ürün başlığı
├── Product Price: Fiyat gösterimi
├── Product Rating: Yıldız derecelendirme
├── Product Stock: Stok durumu
├── Product Meta: Ürün meta bilgileri
├── Product Content: Ürün açıklaması
├── Product Data Tabs: Ürün sekmeleri
├── Additional Information: Ek bilgiler
├── Product Related: İlgili ürünler
├── Product Upsells: Upsell ürünleri
└── Add to Cart: Sepete ekle butonu

Mağaza Widget'ları:
├── Archive Products: Ürün arşivi
├── Archive Title: Arşiv başlığı
├── Archive Description: Arşiv açıklaması
├── Products (Woo): WooCommerce ürün grid
├── Woo Breadcrumbs: WooCommerce breadcrumb
├── Custom Add to Cart: Özel sepet butonu
├── Cart: Sepet sayfası
├── Checkout: Ödeme sayfası
├── My Account: Hesabım sayfası
├── Purchase Summary: Sipariş özeti
└── Menu Cart: Mini sepet widget

---

5. Theme Builder

5.1 Theme Builder Konsepti

Theme Builder, Elementor Pro'nun en güçlü özelliklerinden biridir. WordPress temanızın tüm bileşenlerini (header, footer, single post, archive vb.) görsel olarak tasarlamanıza olanak tanır.

Erişim:

WordPress Dashboard > Templates > Theme Builder

5.2 Template Türleri

Site Parts (Site Parçaları):

Header (Üst Bilgi):
├── Site logosu
├── Navigasyon menüsü
├── Arama kutusu
├── Sosyal medya ikonları
└── CTA butonları

Footer (Alt Bilgi):
├── Copyright bilgisi
├── İletişim bilgileri
├── Footer menüsü
├── Newsletter formu
└── Sosyal medya linkleri

Single Post (Tekil Yazı):
├── Post başlığı
├── Öne çıkan görsel
├── Yazar bilgisi
├── Yayın tarihi
├── İçerik
├── Etiketler/Kategoriler
├── Yorum alanı
└── İlgili yazılar

Single Page (Tekil Sayfa):
├── Sayfa başlığı
├── Sayfa içeriği
└── Özel tasarım öğeleri

Archive (Arşiv):
├── Arşiv başlığı
├── Yazı listesi
├── Filtreleme
├── Pagination
└── Sidebar

Search Results (Arama Sonuçları):
├── Arama başlığı
├── Sonuç listesi
└── "Sonuç bulunamadı" mesajı

404 Page:
├── Hata mesajı
├── Arama kutusu
└── Anasayfaya dön butonu

5.3 Display Conditions (Görüntüleme Koşulları)

Template'in nerede görüntüleneceğini belirler:

Include (Dahil Et):
├── Entire Site: Tüm sitede
├── Singular:
│   ├── All Posts: Tüm yazılar
│   ├── All Pages: Tüm sayfalar
│   ├── Front Page: Ana sayfa
│   ├── Post Categories: Belirli kategoriler
│   ├── Post Tags: Belirli etiketler
│   └── By Author: Belirli yazarlar
├── Archive:
│   ├── All Archives: Tüm arşivler
│   ├── Category Archives: Kategori arşivleri
│   ├── Tag Archives: Etiket arşivleri
│   ├── Author Archives: Yazar arşivleri
│   └── Date Archives: Tarih arşivleri
└── WooCommerce:
    ├── Shop Page: Mağaza sayfası
    ├── Product Pages: Ürün sayfaları
    └── Product Categories: Ürün kategorileri

Exclude (Hariç Tut):
├── Belirli sayfaları hariç tutma
└── Belirli kategorileri hariç tutma

5.4 Header Oluşturma Örneği

Adım Adım Header Tasarımı:

1. Templates > Theme Builder > Header > Add New
2. Template adını girin (örn: "Main Header")
3. Create Template butonuna tıklayın
4. Şablon kütüphanesinden seçim yapın veya sıfırdan başlayın

Örnek Yapı:
┌─────────────────────────────────────────────────────────┐
│ Container (Row, Space Between, Center)                  │
│ ┌────────────┬───────────────────────┬────────────────┐│
│ │ Site Logo  │     Nav Menu          │  CTA Button    ││
│ │            │ Home About Services   │  Contact Us    ││
│ └────────────┴───────────────────────┴────────────────┘│
└─────────────────────────────────────────────────────────┘

5. Publish > Display Conditions > Entire Site
6. Save & Close

Sticky Header Ayarı:

Section/Container seçin > Advanced Tab > Motion Effects:
├── Sticky: Top
├── Sticky On: Desktop, Tablet, Mobile
├── Offset: 0
└── Effects Offset: 50

Transparent Header:

/* Section ayarları */
Background Type: Classic
Color: Transparent

/* Scroll sonrası renk değişimi için */
/* Motion Effects > Scrolling Effects veya */
/* Custom CSS ile JavaScript kullanılabilir */

---

6. Popup Builder

6.1 Popup Türleri

Kullanım Senaryolarına Göre:

Klasik Popup:
├── Newsletter aboneliği
├── Duyuru/Kampanya
├── Uyarı mesajları
└── Cookie consent

Slide-In:
├── Contact form
├── Chat widget benzeri
└── Sosyal medya takip

Full Screen:
├── Welcome mat
├── Age verification
└── Özel teklif

Bar (Üst/Alt):
├── Kampanya duyurusu
├── Shipping bilgisi
├── Countdown timer
└── Cookie notice

6.2 Popup Oluşturma

Erişim ve Oluşturma:

1. Templates > Popups > Add New
2. Popup adını girin
3. Create Template
4. Şablon seçin veya sıfırdan tasarlayın

Popup Settings:

Settings (⚙️ ikonu):
├── Layout:
│   ├── Width: 600px (özel)
│   ├── Height: Fit to Content / Min Height
│   ├── Position: Center Center
│   ├── Overlay: Yes/No
│   └── Close Button: Yes, X Position
├── Animation:
│   ├── Entrance Animation: Fade In, Zoom In, Slide In
│   └── Exit Animation: Fade Out, Zoom Out
└── Advanced:
    ├── Prevent Scroll: Yes/No
    ├── Disable Page Scrollbar: Yes/No
    └── Close on Overlay Click: Yes/No

6.3 Trigger (Tetikleyici) Ayarları

On Page Load (Sayfa Yüklendiğinde):

Conditions > Triggers:
├── On Page Load:
│   ├── Show After: X saniye
│   └── Within Session: Bir kez / Her zaman

On Scroll:

├── On Scroll:
│   ├── Direction: Down / Up
│   ├── Scroll To: % of page
│   └── Within Session: Once / Always

On Click:

├── On Click:
│   ├── X Clicks
│   └── Anchor: #popup-trigger

On Exit Intent:

├── On Exit Intent:
│   ├── Enabled: Yes
│   └── Within Session: Once

Inactivity (Hareketsizlik):

├── After Inactivity:
│   └── After: X saniye hareketsizlik

6.4 Advanced Rules (Gelişmiş Kurallar)

Advanced Rules:
├── Show After X Page Views
├── Show After X Sessions
├── Show Up To X Times
├── When Arriving From: Search Engine / External URL / Specific URL
├── Show When URL Contains: parameter
├── Hide For Logged In Users
├── Device: Desktop / Mobile / Tablet
└── Browser: Chrome / Firefox / Safari

---

7. Form Builder

7.1 Form Oluşturma

Form Widget Özellikleri:

Content Tab:
├── Form Name
├── Form Fields:
│   ├── Text Field
│   ├── Email Field
│   ├── Textarea
│   ├── URL Field
│   ├── Tel Field
│   ├── Number Field
│   ├── Date Field
│   ├── Time Field
│   ├── Select (Dropdown)
│   ├── Radio Button
│   ├── Checkbox
│   ├── Acceptance (GDPR)
│   ├── Hidden Field
│   ├── Password Field
│   ├── HTML
│   ├── reCAPTCHA
│   └── Honeypot (spam protection)
├── Submit Button:
│   ├── Text
│   ├── Size
│   ├── Column Width
│   └── Icon
└── Actions After Submit:
    ├── Email
    ├── Email 2
    ├── Redirect
    ├── Webhook
    ├── Popup (Open/Close)
    ├── MailChimp
    ├── Drip
    ├── ActiveCampaign
    ├── GetResponse
    ├── ConvertKit
    ├── MailerLite
    └── Slack

7.2 Form Validation

Field Options:
├── Required: Yes/No
├── Field Type: Text, Email, URL, Password
├── Min/Max Length
├── Pattern (Regex): Custom validation
├── Allowed File Types (File upload)
└── Max File Size

7.3 Multi-Step Form

Multi-Step Form Yapısı:
├── Step Field (Form Fields'a ekle)
├── Pagination:
│   ├── None
│   ├── Text: Step 1 of 3
│   ├── Icon
│   └── Progress Bar
├── Previous Button: Text, Icon
└── Step navigasyonu

7.4 Form Submissions (Pro)

Elementor > Submissions:
├── Form entries listesi
├── Export to CSV
├── Filter by date
├── Filter by form
└── Entry details görüntüleme

---

8. WooCommerce Builder

8.1 Single Product Template

Ürün Sayfası Öğeleri:

Tipik Ürün Sayfası Yapısı:

┌─────────────────────────────────────────────────────────┐
│ ┌─────────────────────┬───────────────────────────────┐│
│ │                     │  Product Title                ││
│ │   Product Images    │  ★★★★☆ (Rating)               ││
│ │   (Gallery)         │                               ││
│ │                     │  $99.00 (Price)               ││
│ │   ◉ ○ ○ ○          │                               ││
│ │   Thumbnails        │  Short Description            ││
│ │                     │                               ││
│ │                     │  [Add to Cart] [-] 1 [+]      ││
│ │                     │                               ││
│ │                     │  SKU: ABC123                  ││
│ │                     │  Categories: Electronics      ││
│ └─────────────────────┴───────────────────────────────┘│
│                                                         │
│ ┌─────────────────────────────────────────────────────┐│
│ │  Description | Additional Info | Reviews (3)        ││
│ │ ─────────────────────────────────────────────────── ││
│ │  Full product description content...                ││
│ └─────────────────────────────────────────────────────┘│
│                                                         │
│ ┌─────────────────────────────────────────────────────┐│
│ │  Related Products                                   ││
│ │  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐                  ││
│ │  │ Img │ │ Img │ │ Img │ │ Img │                  ││
│ │  └─────┘ └─────┘ └─────┘ └─────┘                  ││
│ └─────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

8.2 Shop/Archive Template

Mağaza Sayfası Düzeni:

┌─────────────────────────────────────────────────────────┐
│  Archive Title: "Shop" or Category Name                 │
│  Archive Description                                    │
├─────────────────────────────────────────────────────────┤
│  Breadcrumbs: Home > Shop > Category                    │
├─────────────────────────────────────────────────────────┤
│  [Filter] [Sort: Default ▼] Showing 1-12 of 36         │
├─────────────────────────────────────────────────────────┤
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
│  │  ████   │ │  ████   │ │  ████   │ │  ████   │      │
│  │  ████   │ │  ████   │ │  ████   │ │  ████   │      │
│  │ Title   │ │ Title   │ │ Title   │ │ Title   │      │
│  │ $99.00  │ │ $149.00 │ │ $79.00  │ │ $199.00 │      │
│  │[AddCart]│ │[AddCart]│ │[AddCart]│ │[AddCart]│      │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
│                                                         │
│  [1] [2] [3] ... [Next →]                              │
└─────────────────────────────────────────────────────────┘

8.3 Cart ve Checkout Templates

Cart Widget Özellikleri:

Cart Page Elements:
├── Cart Table:
│   ├── Product Image
│   ├── Product Name
│   ├── Unit Price
│   ├── Quantity Selector
│   ├── Subtotal
│   └── Remove Button
├── Coupon Field
├── Update Cart Button
├── Cart Totals:
│   ├── Subtotal
│   ├── Shipping Options
│   ├── Tax
│   └── Total
└── Proceed to Checkout Button

Checkout Widget Özellikleri:

Checkout Page Elements:
├── Billing Details Form
├── Shipping Details Form
├── Order Notes
├── Order Review Table
├── Payment Methods
├── Terms & Conditions
└── Place Order Button

---

9. Elementor AI

9.1 AI Özellikleri Genel Bakış

Elementor AI, yapay zeka teknolojisini web tasarımına entegre eden özellikler sunar:

AI Capabilities:
├── Text Generation:
│   ├── Başlık oluşturma
│   ├── Paragraf yazma
│   ├── Metin düzenleme/kısaltma
│   └── Ton değiştirme (casual, formal, vb.)
├── Image Generation:
│   ├── Text-to-Image
│   ├── Image Variations
│   ├── Background Replacement
│   ├── Generative Fill
│   └── Image Expand
├── Code Generation:
│   ├── Custom CSS
│   └── Custom Code snippets
└── Container Generation:
    └── AI Website Builder (Layout oluşturma)

9.2 Text Generation

Kullanım:

1. Herhangi bir metin widget'ı seçin
2. AI butonuna (✨) tıklayın
3. Prompt girin veya mevcut metni düzenleyin

Özellikler:
├── Write with AI: Sıfırdan içerik oluştur
├── Edit with AI: Mevcut metni düzenle
│   ├── Make it shorter
│   ├── Make it longer
│   ├── Simplify language
│   ├── Fix spelling & grammar
│   ├── Change tone (Professional, Casual, Friendly)
│   └── Translate
└── Custom prompt: Özel talimat ver

9.3 Image Generation

Text-to-Image:

Image Widget > AI Button:
1. Describe your image (prompt girin)
2. Select image type:
   ├── Photograph
   ├── Digital Art
   ├── 3D Render
   ├── Painting
   └── Drawing
3. Select style (optional):
   ├── Realistic
   ├── Minimalist
   ├── Abstract
   └── Vintage
4. Select aspect ratio:
   ├── 1:1 (Square)
   ├── 3:2 (Landscape)
   ├── 2:3 (Portrait)
   └── 16:9 (Widescreen)
5. Generate (4 varyasyon oluşturur)
6. Select & Insert

Generative Fill:

1. Mevcut bir görseli düzenle
2. Fırça ile düzenlemek istediğiniz alanı işaretle
3. Ne eklemek istediğinizi açıklayın
4. Generate
5. En iyi sonucu seçin

Background Replacement:

1. Image widget'ta görseli seçin
2. AI > Replace Background
3. Yeni arka planı tanımlayın
   Örnek: "modern office with glass windows"
4. Generate
5. Sonucu uygula

9.4 AI Fiyatlandırması

AI Credit Planları:
├── Free Trial: Sınırlı kullanım
├── Starter: 24K text/code VEYA 725 image
├── Power: 50K text/code VEYA 1,500 image
└── Visionary: 100K text/code VEYA 3,000 image

---

10. Performans Optimizasyonu

10.1 Built-in Performance Features

Elementor Performans Ayarları:

Elementor > Settings > Performance:
├── CSS Print Method: External File
├── Optimized Image Loading: ✓
│   ├── fetchpriority="high" on LCP images
│   └── loading="lazy" for below-fold images
├── Improved Asset Loading: ✓
├── Element Caching: ✓
├── Lazy Load Background Images: ✓
├── Inline Font Icons: ✓ (Font Awesome yerine inline SVG)
└── Optimized DOM Output: ✓

Elementor > Settings > Features:
├── Optimized Gutenberg Loading: ✓ (Gutenberg CSS/JS'i kaldır)
├── Remove Default Handlers: ✓
└── Additional Custom Breakpoints: Gerektiğinde

10.2 Görsel Optimizasyonu

Best Practices:

Görsel Boyutları:
├── Maksimum genişlik: 1920px (full-width için)
├── Maksimum dosya boyutu: < 200KB (ideal)
├── Format önceliği: WebP > JPEG > PNG

WordPress Media Settings:
├── Thumbnail: 150x150
├── Medium: 300x300
├── Large: 1024x1024
└── Full: Original

Optimizasyon Plugins:
├── ShortPixel
├── Imagify
├── Smush
└── EWWW Image Optimizer

10.3 Caching Stratejisi

Önerilen Cache Eklentileri:

Page Caching:
├── WP Rocket (Ücretli, Elementor uyumlu)
├── LiteSpeed Cache (Ücretsiz, LiteSpeed hosting)
├── W3 Total Cache (Ücretsiz)
└── WP Super Cache (Ücretsiz)

Cache Ayarları:
├── Page Cache: Enabled
├── Browser Cache: Enabled
├── Database Optimization: Weekly
├── Minify CSS: Enabled
├── Minify JS: Enabled
├── Combine CSS: Dikkatli (Elementor ile test edin)
└── Combine JS: Dikkatli

10.4 CSS/JS Optimizasyonu

Asset Cleanup:

Gereksiz Plugin/Widget Devre Dışı Bırakma:
├── Elementor > Settings > Features
│   └── Kullanılmayan özellikleri kapatın
├── Addon Plugin Ayarları:
│   └── Unused widgets'ı disable edin
└── Asset Cleanup Plugins:
    ├── Perfmatters
    ├── Asset Cleanup Pro
    └── WP Asset Clean Up

10.5 Tema Seçimi

Performans Odaklı Temalar:

Önerilen Temalar:
├── Hello Elementor (Elementor resmi, en hafif)
├── Astra (Hafif, hızlı, Elementor uyumlu)
├── GeneratePress (Minimal, performans odaklı)
├── Kadence (Modern, hızlı)
└── Blocksy (Yeni nesil, performanslı)

Kaçınılması Gerekenler:
├── Çok sayıda built-in özellik içeren temalar
├── Kendi builder'ı olan temalar
└── Demo import gerektiren ağır temalar

10.6 Layout Best Practices

DOM Optimizasyonu:
├── Gereksiz section/column kullanmaktan kaçının
├── Container yapısını tercih edin
├── Nested element sayısını minimize edin
└── Global widget kullanarak tekrarları azaltın

Above-the-Fold Optimizasyonu:
├── Hero section'da karmaşık widget'lardan kaçının
├── Kritik CSS'i inline yapın
├── LCP görselini optimize edin
└── Lazy loading'i first viewport dışında uygulayın

---

11. Responsive Tasarım

11.1 Breakpoint Sistemi

Varsayılan Breakpoints:

Desktop: > 1024px (varsayılan)
Tablet: 768px - 1024px
Mobile: < 768px

Custom Breakpoints (Pro):
├── Widescreen: > 2400px
├── Laptop: 1024px - 1366px
├── Tablet Extra: 768px - 1024px
├── Mobile Extra: 480px - 767px
└── Custom değerler tanımlanabilir

11.2 Responsive Ayarları

Device-Specific Controls:

Her widget/section için:
├── 🖥️ Desktop ayarları
├── 📱 Tablet ayarları
└── 📱 Mobile ayarları

Responsive edilebilir özellikler:
├── Typography (font size, line height)
├── Padding/Margin
├── Width/Height
├── Column order
├── Visibility (Hide on device)
├── Background image
├── Flex direction
└── Alignment

11.3 Mobile Optimization

Mobile-Specific Teknikler:
├── Touch-friendly butonlar (min 44x44px)
├── Hamburger menü kullanımı
├── Tek kolonlu layout
├── Daha büyük font boyutları (16px+)
├── Yeterli tap target spacing
├── Horizontal scroll önleme
└── Sticky header yüksekliğini azaltma

---

12. Dynamic Content ve Custom Fields

12.1 Dynamic Tags

Dynamic Content Kaynakları:

Post/Page Data:
├── Post Title
├── Post Excerpt
├── Post Content
├── Featured Image
├── Post URL
├── Post Date
├── Post Time
├── Post Terms (categories, tags)
├── Author Info
└── Comments Number

Site Data:
├── Site Title
├── Site Tagline
├── Site URL
├── Site Logo
├── User Info
└── Current Date/Time

ACF (Advanced Custom Fields):
├── Text Fields
├── Image Fields
├── URL Fields
├── Gallery Fields
└── Repeater Fields

Other Sources:
├── WooCommerce Product Data
├── Media Data
├── Request Parameters
└── Shortcodes

12.2 Custom Fields Entegrasyonu

ACF (Advanced Custom Fields) ile:

1. ACF ile custom field oluşturun
2. Elementor'da widget ekleyin
3. Dynamic tag butonuna tıklayın (🔌)
4. ACF Field seçin
5. İlgili field'ı seçin

12.3 Loop Builder

Custom Query ile Dinamik Listeleme:

Loop Builder Özellikleri:
├── Query Source:
│   ├── Posts
│   ├── Pages
│   ├── Custom Post Types
│   └── WooCommerce Products
├── Query Parameters:
│   ├── Post Type
│   ├── Posts per page
│   ├── Order by
│   ├── Order (ASC/DESC)
│   ├── Include/Exclude by ID
│   ├── Filter by taxonomy
│   └── Date query
├── Layout:
│   ├── Grid
│   ├── Masonry
│   └── Carousel
└── Alternate Template:
    └── No results template

---

13. Güvenlik ve En İyi Uygulamalar

13.1 Güvenlik Önlemleri

Genel WordPress Güvenliği:
├── Güncel WordPress, tema ve eklentiler
├── Güçlü şifreler
├── İki faktörlü kimlik doğrulama
├── Güvenlik eklentisi (Wordfence, Sucuri)
├── Regular backup
└── SSL sertifikası

Elementor Özel:
├── Role Manager ile kullanıcı yetkileri
├── Safe Mode kullanımı
├── Unfiltered uploads dikkatli kullanım
└── Form spam koruması (reCAPTCHA, Honeypot)

13.2 Backup Stratejisi

Backup Kapsamı:
├── WordPress veritabanı
├── wp-content klasörü
│   ├── themes
│   ├── plugins
│   └── uploads
└── Elementor data (veritabanında)

Backup Eklentileri:
├── UpdraftPlus
├── BackWPup
├── Duplicator
└── All-in-One WP Migration

Backup Sıklığı:
├── Günlük: Veritabanı
├── Haftalık: Full site
└── Değişiklik öncesi: Manuel backup

13.3 Version Control

Elementor History Panel:
├── Her kayıtta revision oluşturur
├── Revisions > Geçmiş sürümlere dön
└── Sınırsız revision (Pro)

Best Practices:
├── Büyük değişiklikler öncesi backup
├── Staging ortamda test
├── Değişiklikleri aşamalı yayınla
└── Rollback planı hazırla

---

14. Elementor Eklentileri (Addons)

14.1 Popüler Addon Eklentileri

Ücretsiz Addons:
├── Essential Addons for Elementor (100+ widget)
├── Premium Addons for Elementor (90+ widget)
├── Happy Addons (90+ widget)
├── Starter Templates (Şablon kütüphanesi)
└── Unlimited Elements (100+ widget)

Ücretli Addons:
├── Crocoblock Suite:
│   ├── JetElements (50+ widget)
│   ├── JetWooBuilder (WooCommerce)
│   ├── JetEngine (Dynamic content)
│   ├── JetSmartFilters (AJAX filters)
│   └── JetMenu (Mega menu)
├── Ultimate Addons for Elementor
├── The Plus Addons
├── Dynamic.ooo
└── PowerPack Elements

14.2 Özel Amaçlı Eklentiler

WooCommerce:
├── ShopEngine
├── ShopLentor (WooLentor)
├── JetWooBuilder
└── CoDesigner

Forms:
├── MetForm
├── Fluent Forms
└── JetFormBuilder

SEO:
├── Rank Math (Schema integration)
├── Yoast SEO (Breadcrumbs)
└── All in One SEO

Performance:
├── Jepack Boost
├── Perfmatters
└── Asset Cleanup

---

15. Fiyatlandırma ve Lisans

15.1 Elementor Planları

FREE (Ücretsiz):
├── 40+ Basic widgets
├── 30+ Template kitleri
├── Responsive design
├── Drag & drop editor
└── Topluluk desteği

ESSENTIAL ($59/yıl - 1 site):
├── 60+ Pro widgets
├── Theme Builder
├── Form Builder
├── WooCommerce Builder
├── Popup Builder
├── 10 Cloud templates
└── Destek

ADVANCED ($99/yıl - 3 site):
├── Tüm Essential özellikler
├── 90+ Pro widgets
├── Dynamic Content
├── Custom Fonts
├── 20 Cloud templates
├── Form Submissions
└── Marketing integrations

EXPERT ($199/yıl - 25 site):
├── Tüm Advanced özellikler
├── 50K Cloud templates
├── Elementor AI (başlangıç)
└── Öncelikli destek

AGENCY ($399/yıl - 1000 site):
├── Tüm Expert özellikler
├── VIP destek
└── Whitelabel seçenekleri

15.2 Elementor AI Fiyatlandırması

AI Planları (Ayrı abonelik):
├── Starter: Dahil (belirli kullanım)
├── Power: $2.99/ay
└── Visionary: $4.99/ay

Credit sistemi:
├── Text: 1 credit/request
├── Code: 1 credit/request
├── Image: 33 credits/4 variations
└── Container: 20 credits/layout

---

16. Sorun Giderme

16.1 Yaygın Sorunlar ve Çözümleri

Editör Yüklenmiyor:
├── Browser cache temizle
├── Diğer eklentileri devre dışı bırak
├── Tema değiştir (Hello Elementor)
├── Memory limit artır (256MB+)
└── Safe Mode etkinleştir

Değişiklikler Kaydedilmiyor:
├── Autosave aktif mi kontrol et
├── Sunucu disk alanı kontrol et
├── Veritabanı optimize et
├── POST max size artır
└── max_execution_time artır

Sayfa Yavaş Yükleniyor:
├── Görselleri optimize et
├── Cache eklentisi kullan
├── Kullanılmayan widget'ları kaldır
├── Font sayısını azalt
└── CDN kullan

Widget'lar Görünmüyor:
├── Elementor güncellemesi kontrol et
├── Addon uyumluluğunu kontrol et
├── Widget visibility ayarlarını kontrol et
└── Regenerate CSS (Tools > Regenerate CSS)

16.2 Debug Araçları

Elementor Tools:
├── Regenerate CSS: CSS dosyalarını yeniden oluştur
├── Sync Library: Template kütüphanesini senkronize et
├── Replace URL: URL değiştirme (migration)
├── Version Control: Önceki sürüme dön
└── Safe Mode: Sadece Elementor ile test

WordPress Debug:
├── WP_DEBUG: true
├── WP_DEBUG_LOG: true
└── wp-content/debug.log kontrol

---

17. Bölüm | Son:

Elementor, WordPress ekosisteminin en kapsamlı ve güçlü sayfa oluşturucu eklentilerinden biridir. Sürükle-bırak arayüzü, geniş widget kütüphanesi, Theme Builder, WooCommerce entegrasyonu ve AI özellikleriyle hem başlangıç seviyesi kullanıcılar hem de profesyonel web geliştiricileri için ideal bir araçtır.

Temel Bulgular:

1. Erişilebilirlik: Kod bilgisi olmadan profesyonel web siteleri oluşturma imkanı
2. Esneklik: Theme Builder ile tam tema kontrolü
3. E-ticaret: WooCommerce ile tam entegrasyon
4. Performans: Google ortaklığıyla sürekli optimizasyon
5. Yapay Zeka: AI destekli içerik ve görsel üretimi
6. Genişletilebilirlik: Geniş addon ekosistemi

Öneriler:

• Başlangıç için Hello Elementor teması kullanın
• Performance ayarlarını optimize edin
• Gereksiz addon/widget yüklemekten kaçının
• Regular backup alın
• Staging ortamda test yapın
• Güncellemeleri takip edin

---

Kaynakça

1. Elementor. (2024). "Elementor Page Builder Plugin." elementor.com
2. Elementor. (2024). "Theme Builder Documentation." elementor.com/academy
3. Elementor. (2024). "WooCommerce Builder Guide." elementor.com/features
4. Elementor. (2024). "AI Website Builder." elementor.com/products/ai
5. WordPress.org. (2024). "Elementor Website Builder Plugin." wordpress.org/plugins/elementor
6. Elementor. (2024). "Performance Optimization Guide." elementor.com/help
7. Elementor. (2024). "Popup Builder Tutorial." elementor.com/help
8. Elementor. (2024). "Form Builder Documentation." elementor.com/help
9. Crocoblock. (2024). "Speed Up Elementor Website." crocoblock.com/blog
10. Kinsta. (2024). "Complete Guide to Elementor Popups." kinsta.com/blog

---

Bu makale, Elementor WordPress eklentisinin kapsamlı bir teknik incelemesini sunmaktadır. İçerik, web geliştiricileri ve dijital pazarlamacılar için hazırlanmıştır.

Eklenti İndirme: Elementor WordPress Eklentisi