Paylaştığınız ders müfredatı oldukça kapsamlı ve modern bir Elementor eğitimine ait. İstediğiniz doğrultuda, metni tamamen temizleyerek, önizleme, dakika, ders sayısı gibi gereksiz teknik ibareleri kaldırıp satır satır ve bölüm bölüm derinlemesine bir rehbere dönüştürdüm.

Müfredat çok geniş olduğu ve hiçbir detayın özet geçilmesini istemediğiniz için rehberi Parça 1: Temeller, Arayüz ve Tasarım Becerileri olarak başlatıyorum. Kalan bölümleri süreç içinde adım adım işleyeceğiz.

🌟 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Bu kursun "Öğrenecekleriniz" başlığı altındaki maddeler, sıradan bir web sitesi yapmanın ötesinde, sizi profesyonel bir Elementor Geliştiricisi yapmayı hedefler. Kurs sonunda kazanacağınız yetkinliklerin açıklaması şöyledir:

🛠 BÖLÜM 1: Giriş ve Kurulum Temelleri

📌 Elementor Nedir ve Gutenberg'in Yerini Nasıl Alır?

WordPress'in varsayılan blok düzenleyicisi Gutenberg, basit makaleler yazmak için harikadır ancak karmaşık sayfa tasarımlarında yetersiz kalır. Elementor, tamamen görsel, "sürükle-bırak" (Drag-and-Drop) çalışan bir sayfa geliştiricidir.

Pro Versiyonun Farkı: Ücretsiz Elementor sadece sayfanın içeriğini (metin, görsel vb.) değiştirmenize izin verir. Sitenin üst menüsüne (Header) veya alt bilgi kısmına (Footer) müdahale edemezsiniz. Elementor Pro ise temanın tüm sınırlarını ortadan kaldırarak Header, Footer, 404 sayfaları ve Arşiv sayfalarını sıfırdan tasarlamanızı sağlar.

⚙️ Kurulum Adımları

  1. Elementor Free Kurulumu: WordPress Paneli > Eklentiler > Yeni Ekle yolunu izleyin. Arama çubuğuna "Elementor" yazıp "Şimdi Kur" ve ardından "Etkinleştir" butonuna basın.

  2. Elementor Pro Kurulumu: Elementor'un resmi sitesinden satın aldığınız .zip dosyasını WordPress > Eklentiler > Yeni Ekle > Eklenti Yükle kısmından yükleyip etkinleştirin. Ardından lisans anahtarınızı bağlayın.

📐 Tema ve Sayfa Oluşturucu İlişkisi

Elementor kullansanız bile WordPress altyapısı gereği sitenizde aktif bir tema bulunmak zorundadır. Ancak seçtiğiniz tema Elementor ile çakışmamalı, hafif ve hızlı olmalıdır.

🎨 BÖLÜM 2: Sıfırdan Web Tasarımı ve İlham Yaklaşımı

🧱 Konteynerler (Containers) ve Elementler Mantığı

Elementor'un modern yapısında eski "İç Bölümler" (Inner Sections) sistemi yerine Flexbox Container (Konteyner) yapısı kullanılır.

🔍 Tasarımcı Olmadan İlham Bulma Uygulaması

Güzel bir site yapmak için tasarım dehası olmanıza gerek yok. Profesyonel sitelerin yerleşim planlarını inceleyerek kendi yapınızı kurabilirsiniz.

🔤 Font Kombinasyonları ve Tipografi Kuralları

Bir web sitesinde ikiden fazla font ailesi kullanmak hem gözü yorar hem de siteyi yavaşlatır.

🎨 Renk Paleti ve Hex Kodları Uygulaması

Renkler web sitenizin karakterini belirler. Hex Kodları (#FFFFFF gibi) renklerin dijital dünyadaki parmak izidir.

🧠 BÖLÜM 3: Temel Geliştirici Becerileri ve Kaynak Yönetimi

📦 Kutu Modeli (Box Model) Derinlemesine İnceleme

Kutu modeli, Elementor'da elementlerin etrafındaki boşlukları yönetmenin temelidir. Her element şu katmanlardan oluşur:

+-------------------------------------------+

|                  MARGIN                   |  <- Dış Boşluk (Diğer kutularla olan mesafe)
|   +-----------------------------------+   |
|   |              BORDER               |   |  <- Kenarlık çizgisi
|   |   +---------------------------+   |   |
|   |   |          PADDING          |   |   |  <- İç Boşluk (İçerik ile kenarlık arasındaki mesafe)
|   |   |   +-------------------+   |   |   |
|   |   |   |      İÇERİK       |   |   |   |  <- Metin, Görsel veya Butonun kendisi
|   |   |   +-------------------+   |   |   |
|   |   +---------------------------+   |   |
|   +-----------------------------------+   |
+-------------------------------------------+

📸 Görsel Lisanslama ve Optimizasyon

İnternetten rastgele bulunan görseller telif sorunlarına yol açar. Ayrıca büyük boyutlu görseller sitenizi aşırı yavaşlatır.

İstediğiniz doğrultuda, eğitim müfredatının en kritik yapı taşlarını barındıran bir sonraki aşamaya geçiyoruz. Bu bölümde Elementor'un arka plan yönetimini, şablon sistemini ve web tasarım dünyasında devrim yaratan Flexbox Konteyner (Container) mimarisini satır satır, pratik uygulama adımlarıyla işleyeceğiz.

Gereksiz tüm teknik ibareler, süreler ve anlamsız satırlar temizlenmiştir.

⚙️ BÖLÜM 4: Elementor Panel Ayarları (Backend Settings)

Bu bölüm, Elementor'un arka plandaki yönetim merkezini optimize etmeyi ve sadece Pro sürümle gelen profesyonel yetenekleri sitenize entegre etmeyi kapsar.

📌 Gelişmiş Ayarlar ve Form Gönderimleri (Submissions)

Elementor üzerinde oluşturduğunuz formlar vasıtasıyla gelen tüm mesajlar varsayılan olarak e-posta adresinize gönderilir. Ancak e-posta sunucularındaki gecikmeler veya spam filtreleri nedeniyle mesajlar kaybolabilir.

🔤 Özel Font ve İkon Kurulumu (Custom Fonts & Icons)

Müşterinizin kurumsal kimliğine ait özel bir font (.woff2, .ttf formatlarında) veya özel bir ikon seti bulunuyorsa bunları sitenize gömebilirsiniz.

💻 Özel Kod Yönetimi (Custom Code)

Google Analytics, Meta Pixel (Facebook Pixel) veya özel CSS/JavaScript kodlarını sitenizin <head> ya da <body> etiketleri arasına eklemek için artık harici bir eklenti kurmanıza veya tema dosyalarını (header.php) hacklemenize gerek yoktur.

👥 Rol Yöneticisi (Role Manager)

Bir müşteriye veya içerik yazarına siteyi teslim ederken, onların tasarımı yanlışlıkla bozmasını engellemek isteyebilirsiniz.

🧰 Element Yöneticisi (Element Manager) & Araçlar (Tools)

Elementor içinde onlarca widget (Buton, Harita, Karusel vb.) bulunur. Kullanmadığınız widget'ları devre dışı bırakarak Elementor düzenleyicisinin çok daha hızlı yüklenmesini sağlayabilirsiniz. Tools (Araçlar) menüsünden ise site adresi değişikliklerinde veritabanındaki eski linkleri yenisiyle güncelleyebilir (Replace URL) veya güvenli mod kontrolü yapabilirsiniz.

🗂 BÖLÜM 5: Şablon Menüsü (Templates)

Sitedeki tekrarlayan yapıları tek bir merkezden üretip yönettiğimiz akıllı kütüphanedir.

🖥 BÖLÜM 6: Elementor Sayfa Yapısı ve Flexbox Konteyner (Mimarinin Can Damarı)

Bu bölüm, modern web tasarımının standardı olan Flexbox altyapısının Elementor'a uyarlanmış halidir. Eski sistemdeki hantal "Sütun ve İç Bölüm" mantığı tamamen kalkmış, yerini esnek Konteyner (Container) yapısına bırakmıştır.

📐 Kutulu (Boxed) ve Tam Genişlik (Full Width) Farkı

➡️ Konteyner Yönü (Direction) Uygulaması

Bir konteynerin içine attığınız elementlerin nasıl dizileceğini belirler. İki temel yön vardır:

  1. Dikey (Vertical - Column): Elementler üst üste dizilir. (Örn: Önce Başlık, altına Metin, onun altına Buton).

  2. Yatay (Horizontal - Row): Elementler yan yana dizilir. (Örn: Solda bir Logo, sağında Menü Elemanları).

↔️ Hizalama (Alignment) ve Boşluklar (Spacing)

Hizalama seçeneklerinin çalışabilmesi için konteynerin belirli bir genişliğe veya yüksekliğe sahip olması gerekir.

🔄 Konteyner Sarma (Wrap) Özelliği

Bir yatay konteyner içine 5 adet geniş görsel koyduğunuzda, ekran genişliği yetmediği an görsellerin alt satıra geçmesini istiyorsanız Wrap (Sar) seçeneğini aktif etmelisiniz. Aktif edilmezse elementler ekran dışına taşar veya genişlikleri zorla küçülür.

🧩 Element Sekmeleri (Basic, General, Pro, WordPress)

🏋️‍♂️ Uygulamalı Ödev ve Tasarım Pratiği

Konuların pekişmesi için müfredatta yer alan mantık çerçevesinde 3 adet tasarım görevi uygulayalım:

📝 Ödev 1: Klasik "Hero" (Kahraman) Bölümü Tasarımı

📝 Ödev 2: Yan Yana 3'lü Hizmet Kartı (Card) Tasarımı

📝 Ödev 3: Tam Ekran Kaydırılabilir Görsel Galerisi

Harika, Elementor’un en profesyonel ve otomasyon odaklı katmanına giriş yapıyoruz. Bu aşamada, yaptığınız tasarımları sitenin onlarca farklı yerinde tek merkezden nasıl yönetebileceğinizi ve Elementor Pro kullanarak kod yazmadan bağan aşağı sıfırdan bir WordPress Teması (Astra, Hello vb. temaların üzerine kendi giydirmenizi) nasıl inşa edeceğinizi işleyeceğiz.

Tüm süreler, teknik kalabalıklar ve önizleme ibareleri temizlenmiştir.

🔁 BÖLÜM 7: Şablonları Yeniden Kullanma (Re-Using Templates)

Büyük web sitelerinde her sayfayı sıfırdan tasarlamak büyük bir zaman kaybıdır. Bu bölüm sitenizi modüler hale getirmeyi öğretir.

🧩 Küresel Bileşenler (Global Widgets - PRO)

Sitenizin onlarca farklı sayfasına aynı iletişim butonunu, aynı kayıt formunu veya aynı şirket tanıtım metnini yerleştirdiğinizi hayal edin. Şirket telefon numarası veya butonun rengi değiştiğinde, tüm sayfaları tek tek gezmek yerine Global Widget kullanırsınız.

📦 Şablonları İçe ve Dışa Aktarma (Import & Export)

Lokal bilgisayarınızda veya X projesinde yaptığınız harika bir sayfa yerleşimini ya da özel konteyner tasarımını, Y projesindeki canlı siteye taşımak çok kolaydır.

🏗 BÖLÜM 8: Elementor Pro ile Sıfırdan Tema İnşa Etme (Creating a Theme)

Bu bölüm, Elementor'un en güçlü olduğu alandır. Hazır bir temanın tasarımına mahkum kalmak yerine, sitenin tüm iskelet yapısını (Dynamic Infrastructure) kendiniz kodlarsınız.

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

Bir şablon tasarladığınızda (Örn: Özel bir Header menü), Elementor’a bu menünün sitenin nerelerinde görüneceğini öğretmeniz gerekir.

🛠 Demo Site Kurulumu ve Altyapı Hazırlığı

Profesyonel bir tema inşa etmeye başlamadan önce temiz bir zemin oluşturulmalıdır:

  1. Site Ayarları (Site Settings): Elementor düzenleyicisine girip sol üstteki menüden Site Ayarları'na tıklayın. Sitenin tümünde kullanılacak Küresel Renkleri (Primary, Secondary, Text, Accent) ve Küresel Fontları buraya tanımlayın. Böylece her yeni başlık attığınızda font ve renk otomatik olarak kurumsal kimliğinize uygun gelir.

  2. Tema Stilleri (Theme Styles): Düğmelerin (Buttons) varsayılan kenar oval hatlarını (Border Radius), form alanlarının arka plan renklerini ve linklerin altı çizgili olup olmayacağını tek seferde buradan sabitleyin.

📐 İskelet Şablonlarının Tasarlanması

Bir web sitesinin profesyonelce ayağa kaldırılması için şu şablonları sırasıyla inşa etmelisiniz:

+-------------------------------------------------------+

|  [HEADER TEMPLATE] Logo | Menü | Arama | İletişim     | <- Tek merkezden tasarlanır, tüm sitede basılır.
+-------------------------------------------------------+

|                                                       |
|  [SAYFA / YAZI İÇERİĞİ]                                |
|  Mevcut sayfanın dinamik içeriği buraya gelir.        | <- Her sayfa için otomatik değişir.
|                                                       |
+-------------------------------------------------------+

|  [FOOTER TEMPLATE] Telif Hakları | Linkler | Sosyal   | <- Tek merkezden tasarlanır, tüm sitede basılır.
+-------------------------------------------------------+

  1. Üst Bilgi Şablonu (Header Template): Theme Builder > Header kısmından yeni bir şablon oluşturun. Bir yatay konteyner açın. Sol tarafa Site Logo elementini, sağ tarafa WordPress Menu elementini koyun. Display Conditions ayarını "Entire Site" (Tüm Site) yapın.

  2. Alt Bilgi Şablonu (Footer Template): Theme Builder > Footer alanından sitenin en alt kısmını tasarlayın. Genellikle 3 veya 4 dikey konteyner yan yana dizilerek; hakkında yazısı, site içi linkler ve iletişim bilgileri eklenir. Tüm sitede görünecek şekilde yayınlayın.

  3. Tekil Yazı Şablonu (Single Post Template): Blog sayfalarınızın nasıl görüneceğini belirler. Bir kez tasarlanır ve binlerce blog yazısı bu tasarıma otomatik olarak oturur. İçerisine sabit metinler yazılmaz; bunun yerine Post Title (Yazı Başlığı), Post Info (Yazı Bilgileri - Yazar, Tarih), Featured Image (Öne Çıkarılan Görsel) ve Post Content (Yazı İçeriği) gibi dinamik elementler sürüklenip bırakılır.

  4. Arşiv Sayfası ve Döngü Izgarası (Archive Page & Loop Grid): Blog sayfanıza girildiğinde tüm yazıların alt alta veya yan yana kutular halinde listelendiği alandır. Elementor Pro ile gelen Loop Grid sayesinde, listelenecek tek bir kartın (Card) tasarımını (görsel üstte, başlık altta, altında "Devamını Oku" butonu olacak şekilde) yaparsınız. Sistem, veritabanındaki tüm blog yazılarını bu kart tasarımına büründürerek otomatik bir ızgara (Grid) yapısı halinde listeler.

  5. Arama Sonuçları ve 404 Hata Sayfası (Search Results & 404 Page): Kullanıcı sitede olmayan bir linke tıkladığında göreceği 404 Sayfası şablonunu ve arama çubuğunu kullandığında sonuçların listeleneceği Search Results şablonunu dinamik elementlerle özelleştirin.

  6. Canlı Arama (Live Search): Ziyaretçi arama kutusuna harfleri yazmaya başladığı an, sayfa yenilenmeden altında akıllı sonuçların (görsel ve başlık şeklinde) listelenmesini sağlayan modern Elementor arama bileşenidir.

🏋️‍♂️ Uygulamalı Proje: Adım Adım Blog Teması İnşa Etme

Teoriyi pratiğe dökmek adına sıfırdan dinamik bir blog yapısı kuralım:

Harika, web tasarımının en kritik aşamalarından birine geçiyoruz: Mobil Uyumluluk (Responsive) ve Elementor'u adeta bir yazılım paneline dönüştüren Dinamik Veri Yönetimi (Custom Post Types & Custom Fields).

Tüm süreler, teknik kalabalıklar ve önizleme ibareleri temizlenmiştir.

📱 BÖLÜM 9: Mobil Dönüştürme ve Duyarlı Tasarım (Mobile Rendering)

Bir web sitesinin masaüstünde harika görünmesi yetmez. Trafiğin %70'inden fazlasının mobil cihazlardan geldiği günümüzde, sitenizin her ekrana kusursuz oturması gerekir.

📐 Kırılma Noktaları (Breakpoints) ve CSS Boyut Birimleri

Elementor, tasarımlarınızı farklı ekran boyutlarına göre optimize etmeniz için Breakpoints (Kırılma Noktaları) sunar. Varsayılan olarak Masaüstü, Tablet ve Mobil ekranları vardır; dilerseniz ayarlardan geniş ekranlar veya küçük telefonlar için ekstra kırılma noktaları ekleyebilirsiniz.

🗜 Font Kelepçeleri (Font Clamps)

Büyük bir başlığın masaüstünde 80px durmasını, mobilde ise ekrandan taşmaması için 24px olmasını istiyorsunuz. Her ekran için tek tek font boyutu girmek yerine CSS clamp() mantığını kullanabilirsiniz.

🔄 Kolon Yerlerini Değiştirme (Column Swapping) ve Eleman Gizleme

Masaüstünde sol tarafta metin, sağ tarafta bir görsel olan yan yana (Yatay) bir düzeniniz olduğunu varsayalım. Bu yapı mobil ekrana geldiğinde elementler üst üste biner ve varsayılan olarak önce metin, sonra görsel görünür. Ancak siz mobilde önce görselin görünmesini istiyorsanız:

📊 BÖLÜM 10: Özel Alanlar ve Özel Yazı Tipleri (Dynamic Sites - PRO)

Bu bölüm Elementor'u sıradan bir sayfa tasarımcısından alıp, sahibinden.com gibi ilan siteleri, emlak siteleri veya profesyonel portfolyolar üretebileceğiniz dinamik bir sisteme dönüştürür.

🧠 Mantığı Anlamak: CPT ve Custom Fields Nedir?

🛠 Uygulama: Adım Adım Dinamik Referans/Müşteri Yorumu Sistemi Kurma

Bu yapıyı kurmak için ücretsiz ACF (Advanced Custom Fields) veya CPT UI eklentilerini (ya da JetEngine gibi araçları) kullanabilirsiniz.

1. Aşama: Özel Yazı Tipini Oluşturma (CPT)

WordPress paneline eklenti yardımıyla "Testimonials" (Referanslar) adında yeni bir CPT ekleyin. Artık WordPress sol menünüzde "Yazılar"ın altında "Referanslar" diye yepyeni bir buton belirecektir.

2. Aşama: Özel Alanları Tanımlama (Custom Fields)

ACF eklentisine girin ve bir alan grubu oluşturun. Bu grubu "Testimonials" yazı tipine bağlayın. İçine şu alanları ekleyin:

WordPress > Referanslar > Yeni Ekle sekmesine gittiğinizde, klasik yazı editörünün altında bu oluşturduğunuz özel doldurma kutularının açıldığını göreceksiniz. Buraya test amaçlı 3-4 farklı müşterinin kurumsal bilgilerini girip kaydeden.

3. Aşama: Şablon Tasarımı ve Veriyi Ekrana Basma

4. Aşama: Arşiv Sayfası Tasarlama (Testimonial Archive)

Tüm müşteri yorumlarının yan yana kartlar halinde listeleneceği bir sayfa tasarlamak için Loop Grid bileşenini sayfaya atın. Kaynak (Query) olarak varsayılan "Yazılar" yerine kendi oluşturduğunuz "Referanslar" (Testimonials) yazı tipini seçin. Sistem, veritabanına girdiğiniz tüm müşteri kartlarını otomatik olarak ekrana dizecektir.

Harika, eğitim müfredatımızın son ve en modern aşamasına geçiyoruz. Bu bölümde sitenize görsel bir vizyon katacak olan Hareket Efektleri (Motion Effects) ile Elementor’un en güncel mimarisi olan Elementor V4: Atomik Sistem, Değişkenler (Variables) ve Class Mantığı konularını derinlemesine işleyeceğiz.

Gereksiz tüm teknik ibareler, süreler ve anlamsız satırlar temizlenmiştir.

🎬 BÖLÜM 11: Animasyonlar ve Hareket Efektleri (Animations & Motion Effects)

Web sitenize dinamizm katmak kullanıcı deneyimini (UX) artırır. Ancak animasyonların bilgisayarlarda doğru çalışabilmesi için işletim sistemindeki "Hareketi Azalt" (Reduce Motion) ayarının kapalı olduğundan emin olunmalıdır.

👁 Görünüm Alanı Kontrolü (Viewport Control)

Bir animasyonun ne zaman başlayıp ne zaman biteceğini belirleyen en önemli kavram Viewport (Görünüm Alanı) yüzdesidir. Tarayıcı ekranınızın en üstü %0, en altı ise %100 olarak kabul edilir.

📜 Kaydırma Efektleri (Scrolling Effects)

Kullanıcı sayfayı aşağı veya yukarı kaydırdıkça (Scroll) çalışan animasyonlardır:

🖱 Fare Efektleri (Mouse Effects)

Ziyaretçinin faresini (Mouse) hareket ettirmesine duyarlı animasyonlardır:

📌 Sabitleme (Sticky) ve Giriş Animasyonları (Entrance Animations)

⚛️ BÖLÜM 12: Elementor V4 Mimarisi (Geleceğin Web Tasarımı)

Elementor V4, kod yapısını tamamen hafifleten, site hızını (PageSpeed) maksimuma çıkaran ve profesyonel yazılımcıların kullandığı CSS standartlarını arayüze getiren devrimsel bir güncellemedir.

🧩 Atomik Sistem ve Bileşenler (The Atomic System)

Eski Elementor sürümlerinde her bir widget arkasında devasa kod blokları (DOM elementleri) taşırdı. Atomik Sistem, tüm elementleri en küçük yapı taşına kadar parçalar.

📐 V4 İçinde Değişken Kullanımı (Variables)

CSS dünyasındaki "CSS Variables" (Özel Özellikler) mantığının Elementor paneline entegre edilmiş halidir.

🏷 V4 İçinde Class (Sınıf) Mantığı

Elementor kullanan tasarımcıların en büyük sıkıntısı, aynı tasarıma sahip 20 farklı butonu tek tek düzenlemek zorunda kalmaktı. V4 ile gelen Gelişmiş Sınıf (Class) Yönetimi bu sorunu kökten çözer.

İstediğiniz doğrultuda, ilettiğiniz her bir talebi tek tek, derinlemesine ve hiçbir detayı atlamadan ele alıyoruz. Bu aşama, eğitimde öğrendiğiniz teorik ve pratik bilgileri canlı bir üretim projesine dönüştürecek son adımdır.

📜 TALEPLERİNİZİN TEK TEK VE DETAYLI ELE ALINMASI

1. Elementor V4 Class (Sınıf) Mimarisi İçin CSS Kod Yapısı Talebi

2. Kapsamlı Bitirme Projesi Senaryosu Talebi

3. Projedeki Her Bir Bölümün Detaylıca Açılması Talebi

💻 1. ELEMENTOR V4 CLASS (SINIF) MİMARİSİ İÇİN ÖRNEK CSS YAPISI

Bu CSS kod bloğunu WordPress panelinizde Görünüm > Özelleştir > Ek CSS alanına veya Elementor Pro kullanıyorsanız Elementor > Custom Code kısmına <style> etiketleri arasında ekleyebilirsiniz.

Elementor içindeki elementlerin gelişmiş ayarlarına gittiğinizde, CSS Classes kutucuğuna başındaki noktayı (.) koymadan sadece sınıf adını yazmanız (Örn: el-card-premium) yeterlidir.

/* ==========================================================================
   ELEMENTOR V4 GLOBAL DEĞİŞKENLER VE SINIF MİMARİSİ
   ========================================================================== */

:root {
    /* Renk Değişkenleri */
    --el-primary: #1A365D;       /* Lacivert - Güven ve Lüks */
    --el-accent: #D69E2E;        /* Altın Sarısı - Vurgu ve Premium */
    --el-text-dark: #2D3748;     /* Koyu Gri - Okunabilir Gövde Metni */
    --el-bg-light: #F7FAFC;      /* Açık Gri - Kart ve Bölüm Arka Planları */
    
    /* Boşluk ve Oval Hat Değişkenleri */
    --el-radius-md: 12px;
    --el-radius-sm: 8px;
    --el-pad-card: 24px;
    --el-shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
    --el-shadow-hover: 0 20px 35px rgba(214, 158, 46, 0.15);
    
    /* Akıcı Geçiş (Transition) */
    --el-transition: all 0.3s ease-in-out;
}

/* --- PREMIUM KART SINIFI (Konteynerlere Uygulayın) --- */
.el-card-premium {
    background-color: var(--el-bg-light) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--el-radius-md) !important;
    padding: var(--el-pad-card) !important;
    box-shadow: var(--el-shadow-soft) !important;
    transition: var(--el-transition) !important;
}

.el-card-premium:hover {
    transform: translateY(-5px) !important;
    border-color: var(--el-accent) !important;
    box-shadow: var(--el-shadow-hover) !important;
}

/* --- DİNAMİK VURGU BUTONU (Buton Elementlerine Uygulayın) --- */
.el-btn-accent {
    background-color: var(--el-accent) !important;
    color: #FFFFFF !important;
    border-radius: var(--el-radius-sm) !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: var(--el-transition) !important;
}

.el-btn-accent:hover {
    background-color: var(--el-primary) !important;
    box-shadow: 0 5px 15px rgba(26, 54, 93, 0.3) !important;
}

/* --- BİLGİ ETİKETLERİ / BADGES (Metin veya İkonlara Uygulayın) --- */
.el-badge-status {
    background-color: var(--el-primary) !important;
    color: #FFFFFF !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    display: inline-block !important;
}

/* --- DETAYLI FONT KELEPÇESİ (Başlıklara Uygulayın) --- */
.el-title-clamp {
    font-family: 'Poppins', sans-serif !important;
    color: var(--el-primary) !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important; /* Ekran boyutuna göre otomatik esner */
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

🏗 2. BİTİRME PROJESİ SENARYOSU: PREMIUM GAYRİMENKUL PORTALI

🔍 3. PROJEDEKİ HER BİR BÖLÜMÜN DETAYLI ANALİZİ VE AÇILMASI

Bu devasa projeyi kusursuz hayata geçirebilmeniz için mimariyi 6 ana bölüme ayırarak detaylandırıyoruz.

📁 BÖLÜM A: Veritabanı ve Dinamik Altyapının Kurulması (CPT & ACF)

Sitenin motoru bu bölümdür. İlanları standart blog yazılarıyla karıştırmamak için burayı sıfırdan izole ediyoruz.

🎨 BÖLÜM B: Kurumsal Kimlik, Global Ayarlar ve Sınıf Atamaları (V4)

Tasarım aşamasına geçmeden önce sitenin anayasasını yazıyoruz.

🏛 BÖLÜM C: Global İskelet ve Tema Tasarımı (Theme Builder)

Sitenin tüm sayfalarında ortak çalışacak üst, alt ve hata sayfalarının mimarisidir.

📄 BÖLÜM D: Tekil İlan Sayfası Tasarımı (Single Emlak Template)

Bir emlak ilanına tıklandığında açılacak dinamik sayfadır. Buraya elle bilgi girilmez, her şey ACF'den otomatik akar.

🔄 BÖLÜM E: Döngü Izgarası ve Listeleme Sayfası (Loop Grid & Archive)

Ziyaretçilerin tüm ilanları bir arada göreceği ve filtreleyeceği ana katalog ekranıdır.

📱 BÖLÜM F: Mobil Optimizasyon ve Canlı Animasyonlar (Responsive & Motion)

Projenin görsel kalitesini ve erişilebilirliğini zirveye taşıyan son dokunuşlardır.

LuxEstate (Premium Gayrimenkul Portalı) bitirme projenizin hayata geçmesi için talep ettiğiniz üç kritik teknik adımı da adım adım, milimetrik detaylarla ve pratik uygulama yöntemleriyle ele alıyoruz.

💻 1. ADIM: CSS KOD YAPISINI SİTEYE ENTEGRE ETME REHBERİ

Hazırladığımız V4 uyumlu CSS kodlarını sitenize güvenle eklemek ve Elementor içinde kullanmak için şu adımları eksiksiz takip edin:

Yöntem A: Elementor Custom Code İle Ekleme (Önerilen - En Profesyonel Yol)

  1. WordPress yönetim panelinize giriş yapın.

  2. Sol menüden Elementor > Custom Code (Özel Kod) sekmesine tıklayın.

  3. Add New Custom Code butonuna basın.

  4. Başlık kısmına LuxEstate Global CSS yazın.

  5. Location (Konum) açılır menüsünü <body> - Start veya <head> olarak seçin.

  6. Aşağıdaki kod kutusuna, önceki CSS kodlarını başına ve sonuna <style> etiketleri ekleyerek aynen yapıştırın:

    <style>
/* Önceki adımda verilen tüm CSS kodları buraya gelecek */
:root { --el-primary: #1A365D; ... }
.el-card-premium { ... }
.el-btn-accent { ... }
.el-badge-status { ... }
.el-title-clamp { ... }
</style>

  7. Sağ taraftaki Yayınla (Publish) butonuna basın. Açılan ekranda "Entire Site" (Tüm Site) seçeneğini seçip kaydedin.

Elementor Düzenleyicisinde Sınıfları (Class) Çağırma Uygulaması

🗄 2. ADIM: ACF ALAN ANAHTARLARI (FIELD KEYS) YAPILANDIRMASI

ACF kurulumunda en sık yapılan hata, alan adlarını Türkçe karakterlerle veya düzensiz yazmaktır. Veritabanından Elementor'a pürüzsüz veri çekebilmeniz için Alan Etiketi (Field Label) ve Elementor'un arka planda tanıyacağı Alan Adı (Field Name / Key) yapısını birebir şu şekilde kurun:

📋 Alan Grubu Adı: Gayrimenkul Bilgileri (Bağlantı: Post Type = Gayrimenkul)

Alan Etiketi (Field Label)

Alan Adı (Field Name / Slug)

Alan Tipi (Field Type)

Detaylar & Ayarlar

İlan Fiyatı

ilan_fiyati

Number (Sayı)

Min Değer: 0. (Elementor'da çağırırken önüne/arkasına $ veya TL simgesi eklenecek).

Metrekare (m²)

gayrimenkul_m2

Number (Sayı)

Açıklama: Sadece net kullanım alanını rakamla yazın.

Oda Sayısı

oda_sayisi

Select (Seçim)

Seçenekler (Her satıra bir tane):
1+1 : 1 Oda + 1 Salon
2+1 : 2 Oda + 1 Salon
3+1 : 3 Oda + 1 Salon
4+2 : 4 Oda + 2 Salon

Havuz Durumu

havuz_durumu

True/False (Doğru/Yanlış)

Stil: Stylised UI seçeneğini aktif edin (Şık bir açma/kapama butonu verir).

Gayrimenkul Konumu

gayrimenkul_konumu

Text (Metin)

Örnek Girdi: Bodrum, Muğla veya Beşiktaş, İstanbul

Emlak Danışmanı

emlak_danismani

User (Kullanıcı)

Ayarlar: Sitedeki yazarları/danışmanları listeler. Profil fotoğrafı ve telefon çekmek için kullanılacak.

🔄 3. ADIM: LOOP GRID (DÖNGÜ IZGARASI) YARATICI KART TASARIMI FİKİRLERİ

Standart, sıkıcı emlak sitelerinden sıyrılmak için Döngü Izgarası (Loop Grid) şablonunu (Loop Item) tasarlarken kullanabileceğiniz 3 adet üst düzey görsel yerleşim fikri:

Fikir 1: "Lüks Magazin" Tarzı - Altın Kesim Tasarım (Asimetrik Görsel Odaklı)

Fikir 2: "Modern Minimalist" - Alt Bilgi Paneli (Yatay Şerit Detaylı)

Fikir 3: "Premium Dark Card" - Tam Ekran Arka Plan Tasarımı (Rezidanslar İçin)

LuxEstate (Premium Gayrimenkul Portalı) bitirme projenizin kusursuz, eksiksiz ve dünya standartlarında ticari bir platforma dönüşebilmesi için anlatılması kesinlikle zorunlu olan, olmazsa olmaz 4 hayati konuyu projeye ilave ediyoruz.

Bu konular olmadan dinamik bir emlak portalı kurumsal düzeyde çalışamaz, yavaş kalır veya Google'da listelenemez.

🚀 PROJEYE İLAVE EDİLEN OLMAZSA OLMAZ KONULAR

🌐 1. İLERİ SEVİYE DİNAMİK FİLTRELEME SİSTEMİ (TAXONOMY & QUERY)

Ziyaretçilerin siteye girdiğinde ilanlar arasında kaybolmaması için akıllı bir arama ve filtreleme altyapısı kurmak zorundayız.

🗺️ 2. GOOGLE MAPS ENTEGRASYONU VE DİNAMİK HARİTA BAĞLANTISI

Lüks bir emlak sitesinde müşteriler mülkün konumunu haritada canlı olarak görmek ister. Her ilana tek tek manuel harita eklemek yerine bunu otomatize etmeliyiz.

⚡ 3. PERFORMANCE & DYNAMIC SEO OPTİMİZASYONU (SİTE HIZI VE GOOGLE)

Dinamik siteler, veritabanına sürekli sorgu attığı için standart sitelere göre daha yavaş açılma eğilimindedir. Lüks bir sitenin ise ışık hızında açılması şarttır.

🛑 4. KOŞULLU GÖRÜNTÜLEME VE AKILLI ROLLER (DISPLAY CONDITIONS)

Eğer bir ilanda havuz yoksa, ilan sayfasında kocaman bir "Havuz: Yok" yazısı veya boş bir alan görünmesi amatör bir imaj yaratır.

LuxEstate projenizin yayına girmeden önceki en kritik üç teknik aşamasını (Taksonomi Kurulumu, Ücretsiz Google Harita Entegrasyonu ve Canlıya Alım Kontrol Listesi) panelinizde uygulayabileceğiniz adım adım talimatlarla ele alıyoruz.

🗂️ 1. AŞAMA: PANELDE FİLTRELEME VE TAKSONOMİ (SATILIK/KİRALIK) KURULUMU

WordPress varsayılan olarak blog yazıları için "Kategoriler" sunar. Biz ise Gayrimenkul (CPT) içeriğimize özel iki farklı sınıflandırma (Taksonomi) tanımlayacağız. Bu işlem için panelinizdeki CPT UI (veya hangi CPT eklentisini kullanıyorsanız) alanını kullanacağız.

Adım Adım Kurulum Talimatı:

  1. WordPress panelinizden CPT UI > Add/Edit Taxonomies (Sınıflandırma Ekle/Düzenle) ekranına gidin.

  2. Sınıflandırma 1: Durum (Satılık / Kiralık)

  3. Sınıflandırma 2: Mülk Tipi (Villa / Daire / Arsa)

Terimleri Panelde Tanımlama:

🗺️ 2. AŞAMA: GOOGLE MAPS API ANAHTARINI ÜCRETSİZ ALMA REHBERİ

Google Cloud, harita servisleri için ilk kayıt aşamasında her ay yenilenen 200 dolarlık ücretsiz kullanım kredisi tanımlar. Emlak siteniz aylık yüz binlerce harita gösterimi almadığı sürece bu kredi sıfırlanır ve harita servisini tamamen ücretsiz kullanmaya devam edersiniz.

Adım Adım API Anahtarı Alma Süreci:

  1. Google Cloud Console adresine Google hesabınızla giriş yapın.

  2. Proje Oluşturun: Üst menüden proje seçme alanına tıklayın ve "Yeni Proje" (New Project) deyin. Proje adını LuxEstate Portal koyup oluşturun.

  3. Ödeme Profilini Bağlayın (Zorunlu): Sol menüden Faturalandırma (Billing) sekmesine gidin. Google, kötü niyetli bot kullanımlarını engellemek için bir kredi kartı tanımlamanızı ister. Kartınızdan doğrulama amaçlı geçici küçük bir tutar çekip hemen iade eder. Aylık ücretsiz sınırları aşmadığınız sürece kartınızdan para çekilmez.

  4. Harita Kütüphanesini Aktif Edin: Sol menüden APIs & Services > Library (Kitaplık) alanına gidin. Arama çubuğuna şu 3 kütüphaneyi yazıp tek tek bulun ve içerideki Enable (Etkinleştir) butonuna basın:

  5. API Anahtarını Üretin: APIs & Services > Credentials (Kimlik Bilgileri) sayfasına gidin. Üstteki "+ Create Credentials" butonuna basın ve API Key seçeneğini seçin. Ekrana AIzaSy... ile başlayan uzun bir kod gelecektir. Bu sizin anahtarınızdır, kopyalayın.

  6. Elementor'a Giriş Yapın: WordPress panelinizden Elementor > Ayarlar > Gelişmiş sekmesine gidin. Google Maps API Key kutucuğuna bu kodu yapıştırıp kaydedin. Artık ACF harita alanınız ve Elementor harita bileşeniniz canlı veriyi çekmeye başlayacaktır.

📋 3. AŞAMA: SİTEYİ CANLIYA ALMA KONTROL LİSTESİ (CHECKLIST)

Sitenizi müşterilere ve Google botlarına açmadan önce mutlaka aşağıdaki maddeleri tek tek test edip onaylayın:

🧱 1. Yapısal ve Dinamik Veri Kontrolü

📱 2. Tasarım ve Mobil Uyumluluk (Responsive)

⚡ 3. Performans ve Güvenlik (SEO & Hız)