Divi Tema ve Builder ile WordPress Site Kurma

Divi, Elegant Themes tarafından geliştirilen ve WordPress dünyasının en çok satan ürünlerinden biri olan bir tasarım sistemidir. İlk bakışta "bir WordPress teması" gibi görünse de aslında iki farklı şeyi tek pakette sunar: hazır bir tema iskeleti ve bu iskeletin üzerine sürükle-bırak mantığıyla sayfa tasarlamanızı sağlayan güçlü bir görsel oluşturucu (visual builder). Bu ikili yapı sayesinde tek bir satır kod yazmadan başlık bölümleri, fiyat tabloları, iletişim formları, galeri ızgaraları ve tam sayfa açılış tasarımları kurabilirsiniz. Tam da bu esneklik, Divi'yi ajanslar ve serbest çalışan tasarımcılar arasında bu kadar yaygın kılan şeydir.

Bu rehberde Divi'nin hem tema hem de builder olarak nasıl çalıştığını, en yakın rakibi Elementor'dan hangi noktalarda ayrıldığını ve Visual Builder içindeki bölüm-satır-modül hiyerarşisini pratik örneklerle anlatacağız. Hazır layout paketlerinin işinizi nasıl saatlerce hızlandırdığını, global renk ve yazı tipi ayarlarıyla tüm sitede tutarlılığı nasıl sağlayacağınızı göstereceğiz. En önemlisi, Divi'yi kullanmaya başlamadan önce bilmeniz gereken kritik bir konuya, yani "shortcode kilitlenmesi" denen ve tema değiştirdiğinizde içeriğinizi bozan tuzağa özel bir bölüm ayıracağız. Amacımız, Divi'yi bilinçli ve doğru altyapıyla kullanmanıza yardımcı olmak.

Divi Nedir? Tema mı, Builder mı?#

Divi'yi anlamanın anahtarı, iki ayrı bileşenden oluştuğunu kavramaktır. Birincisi Divi Theme, yani WordPress'e kurduğunuzda aktif tema olarak çalışan bütün. İkincisi Divi Builder, yani sayfa ve yazılarınızı görsel olarak tasarladığınız oluşturucu motor. Divi Builder aslında ayrı bir eklenti olarak da satılır; bu sayede başka bir tema kullanırken bile builder'dan yararlanabilirsiniz. Ancak çoğu kullanıcı ikisini bir arada, yani Divi temasıyla birlikte gelen builder'ı tercih eder.

Bu ayrım pratikte şu anlama gelir: Divi temasını etkinleştirdiğinizde siteniz baştan sona Divi'nin kontrolüne girer. Header (üst bilgi), footer (alt bilgi), blog listeleri, arşiv sayfaları ve tekil yazı şablonlarının tamamı Divi'nin Theme Builder aracıyla görsel olarak düzenlenebilir hâle gelir. Klasik bir WordPress temasında bu alanlar PHP şablon dosyalarıyla belirlenirken, Divi bunları görsel bir arayüze taşır. WordPress teması seçmenin genel mantığını hatırlamak isterseniz WordPress tema seçimi rehberimiz bu kararı daha geniş bir çerçevede ele alıyor.

Divi'yi kurmadan önce sunucunuzun yeterli PHP kaynağına sahip olduğundan emin olun. Builder oldukça büyük bir JavaScript arayüzü yüklediği için düşük bellek limitlerinde beyaz ekran veya "yükleniyor" takılması yaşanabilir. Önerilen minimum php.ini değerleri şöyledir:

memory_limit = 256M
max_execution_time = 120
max_input_time = 120
post_max_size = 64M
upload_max_filesize = 64M
max_input_vars = 3000

Özellikle max_input_vars değeri önemlidir; Divi'nin ayar panelleri çok sayıda form alanı gönderdiği için varsayılan 1000 değeri ayarların yarım kaydedilmesine yol açabilir.

Divi Builder ile Elementor Arasındaki Fark#

Divi'yi değerlendirirken en sık sorulan soru, onu Elementor'dan neyin ayırdığıdır. İkisi de görsel sayfa oluşturucudur, ancak felsefeleri ve iş modelleri farklıdır. En temel ayrım lisanslamadadır: Elementor eklenti tabanlıdır ve genellikle site başına yıllık abonelikle satılır; Divi ise Elegant Themes üyeliğiyle sınırsız site hakkı sunar ve ömür boyu (lifetime) lisans seçeneği vardır. Bir ajans için bu, maliyet açısından ciddi bir farktır.

En kritik teknik fark içeriğin nasıl saklandığıdır. Divi, tasarladığınız her bölümü [et_pb_section], [et_pb_row], [et_pb_module] gibi kısa kodlar (shortcode) olarak veritabanına yazar. Elementor ise tasarımı ayrı bir meta veri yapısında tutar. Bu ayrım, "tema değiştirirsem ne olur?" sorusunun cevabını doğrudan belirler ve ilerideki bölümde ayrıntısıyla ele alacağız. Kısacası Divi'nin sunduğu sınırsız lisans ve entegre yapı büyük bir avantajken, shortcode bağımlılığı da dikkat edilmesi gereken bir bedeldir.

Visual Builder ve İlk Tanışma#

Divi'nin kalbi Visual Builder'dır. Bir sayfayı düzenlerken üstteki "Divi ile Düzenle" (Enable Visual Builder) butonuna tıkladığınızda, sitenizin gerçek görünümü üzerinde çalışmaya başlarsınız. Gördüğünüz şey son hâlidir; bir öğeye tıkladığınızda ayar penceresi açılır, metni doğrudan yerinde düzenlersiniz. Bu "önden düzenleme" (front-end editing) yaklaşımı, arka planda kod ya da kısa kodla uğraşmadan tasarım yapmanızı sağlar.

Visual Builder'ı ilk açtığınızda üç seçenek sunulur: sıfırdan boş bir sayfa oluşturmak, hazır bir layout paketinden başlamak veya var olan bir sayfayı kopyalamak. Yeni başlayanlar için en sağlıklı yol, önce hazır bir layout seçip onun üzerinde oynayarak yapıyı öğrenmektir. Arayüzün mor renkli yüzen kontrol çubuğundan geri alma (undo), kaydetme, mobil önizleme ve wireframe (tel kafes) görünümü gibi işlevlere ulaşırsınız. Wireframe görünümü özellikle karmaşık sayfalarda bölümlerin iç içe yapısını görmek için çok kullanışlıdır.

Builder'ın hızlı çalışması için tarayıcı tarafında ciddi kaynak gerektiğini unutmayın. Sunucunuzda ise Divi'nin ürettiği statik CSS ve JavaScript dosyalarının verimli sunulması gerekir. Nginx kullanıyorsanız Divi'nin et-cache klasöründeki dosyaları ve genel statik varlıkları önbelleğe alarak sayfa hızını belirgin biçimde artırabilirsiniz:

location ~* \.(css|js|woff2|jpg|jpeg|png|webp|svg)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
    access_log off;
}

# Divi'nin ürettigi birlestirilmis statik dosyalar
location /wp-content/et-cache/ {
    expires 7d;
    add_header Cache-Control "public";
}

Bölüm, Satır ve Modül Hiyerarşisi#

Divi'de her tasarım üç katmanlı bir hiyerarşiye oturur ve bu mantığı kavradığınızda builder aniden çok daha anlaşılır hâle gelir. En dışta Section (Bölüm) bulunur; bunlar sayfayı yatay şeritlere ayıran mavi bloklardır. Bir açılış sayfasında hero alanı bir bölüm, tanıtım metni başka bir bölüm, fiyatlandırma başka bir bölüm olur. Bölümlere arka plan rengi, görsel, video veya degrade verebilirsiniz.

Bölümün içinde Row (Satır) yer alır; yeşil renkle gösterilir ve içeriği sütunlara ayırır. Bir satırı tek sütun, iki eşit sütun, üçte bir-üçte iki gibi onlarca farklı yapıda kurabilirsiniz. Satırlar, tasarımınızın ızgara (grid) düzenini belirler. En içte ise Module (Modül) bulunur; gri renkle gösterilen ve gerçek içeriği taşıyan yapı taşlarıdır. Metin, görsel, buton, başlık, sekme, akordeon, iletişim formu, blog akışı, fiyat tablosu ve daha fazlası birer modüldür.

Bu üçlü yapının en güçlü yanı, her katmanı tek tek kopyalayabilmeniz, kaydedebilmeniz ve kütüphaneye (Divi Library) ekleyebilmenizdir. Sık kullandığınız bir iletişim bölümünü kütüphaneye kaydedip başka sayfalarda tek tıkla çağırabilirsiniz. Ayrıca bir modülün stil ayarlarını kopyalayıp başka bir modüle yapıştırarak tutarlı bir görünümü hızla yayabilirsiniz. Modüllerin işlevini eklentilerle karıştırmayın; iletişim formu gibi kritik veriler için Divi'nin kendi modülü yeterli olsa da, gelişmiş ihtiyaçlarda WordPress eklenti önerileri rehberimizdeki özel çözümleri de değerlendirebilirsiniz.

Hazır Layout Paketleri#

Divi'nin en çok zaman kazandıran özelliği hazır layout paketleridir. Elegant Themes, restoran, avukatlık bürosu, fitness salonu, fotoğrafçı portföyü, e-ticaret ve kurumsal gibi yüzlerce sektöre özel, profesyonelce tasarlanmış tam site paketleri sunar. Her paket; anasayfa, hakkımızda, hizmetler, iletişim gibi birbiriyle uyumlu birden fazla sayfa içerir. Visual Builder içinde "Layout'lardan Yükle" (Load From Library) seçeneğiyle bu paketlere ulaşır, canlı önizlemesini görür ve tek tıkla içe aktarırsınız.

Hazır paketlerle çalışmanın doğru yolu, onları bir başlangıç noktası olarak görmektir. Paketi yükledikten sonra kendi metinlerinizi, görsellerinizi ve markanızın renklerini yerleştirerek özgün bir sonuç elde edersiniz. Görselleri toplu olarak değiştirmek isterseniz, tasarımı içe aktarmadan önce yerel bir test kopyasında denemek akıllıcadır. WP-CLI kullanıyorsanız Divi'yi ve gerekli eklentileri komut satırından hızlıca kurabilir, sonra layout'ları arayüzden yükleyebilirsiniz:

# Divi temasini kur ve etkinlestir (zip dosyasi elinizdeyse)
wp theme install ~/downloads/Divi.zip --activate

# Bir child theme etkinlestirmek isterseniz
wp theme activate divi-child

# Divi'nin statik varlik onbellegini temizle (tasarim guncellemelerinden sonra)
wp option delete et_core_page_resource_remove
wp cache flush

Layout paketlerini kendi kütüphanenize kaydederek şirket standardınıza dönüştürebilirsiniz. Örneğin bir ajanssanız, sık kullandığınız bölümleri "global" olarak işaretlediğinizde bir yerde yaptığınız değişiklik tüm sayfalara yansır. Bu, çok sayfalı sitelerde bakım maliyetini ciddi biçimde düşürür.

Theme Builder ve Global Ayarlar#

Divi'yi sıradan bir builder'dan ayıran özelliklerden biri Theme Builder'dır. Panelde "Divi > Theme Builder" bölümüne girdiğinizde sitenizin genel şablonlarını, yani header'ı, footer'ı, blog yazısı şablonunu, arşiv ve arama sonuç sayfalarını görsel olarak tasarlarsınız. Belirli bir kategoriye ya da yazı tipine özel şablonlar atayabilir, örneğin "portföy" yazılarına farklı bir düzen verebilirsiniz. Bu, klasik temalarda PHP dosyalarıyla yapılan işi tamamen görsel bir sürece dönüştürür.

Tutarlı bir tasarım için Divi'nin global renk ve yazı tipi ayarlarını kullanın. Tema Özelleştirici (Divi > Theme Customizer) üzerinden marka renklerinizi bir palet olarak tanımlar, tüm modüllerde bu renkleri tek tıkla seçersiniz. Böylece kurumsal renginizi değiştirmeniz gerektiğinde tek yerden güncelleme yaparsınız. Aynı mantık tipografi için de geçerlidir; başlık ve gövde yazı tiplerini merkezi olarak belirlediğinizde sitenin her köşesi uyumlu görünür.

Global ayarların yedeğini almak, tema geçişlerinde ya da bir sorun yaşandığında hayat kurtarır. Divi ayarlarının büyük kısmı wp_options tablosunda et_ ön ekiyle saklanır. Bu kayıtları görmek ve yedeklemek için şöyle bir sorgu kullanabilirsiniz:

-- Divi ile ilgili tum ayar kayitlarini listele
SELECT option_name, LENGTH(option_value) AS boyut
FROM wp_options
WHERE option_name LIKE 'et\_%'
ORDER BY boyut DESC;

Tasarım yaparken görsellerin ve builder varlıklarının hızlı yüklenmesi için bir CDN kullanmak isterseniz, statik dosyaları bir alt alan adı üzerinden sunabilirsiniz. Bunun için basit bir DNS kaydı yeterlidir:

cdn.orneksite.com.   3600   IN   CNAME   dagitim.cdnsaglayici.net.

Bu kayıttan sonra bir önbellek eklentisiyle Divi'nin ürettiği CSS ve JS dosyalarını cdn.orneksite.com üzerinden dağıtabilir, ana sunucunuzun yükünü azaltabilirsiniz.

Divi Shortcode Kilitlenmesi (Lock-in) Uyarısı#

Divi'ye başlamadan önce mutlaka anlamanız gereken en önemli konu budur ve çoğu yeni kullanıcı bunu ancak iş işten geçtikten sonra fark eder. Divi Builder ile tasarladığınız her içerik, veritabanına kısa kod (shortcode) olarak yazılır. Yani "Fiyatlarımız" başlıklı güzel bir bölüm aslında arka planda şuna benzer:

[et_pb_section][et_pb_row][et_pb_column type="4_4"]
[et_pb_text]Metniniz burada[/et_pb_text]
[/et_pb_column][/et_pb_row][/et_pb_section]

Divi teması aktifken bu kısa kodlar tarayıcıda düzgün tasarıma dönüşür. Ancak bir gün başka bir temaya geçmeye karar verirseniz, o temanın bu kısa kodları yorumlayacak kodu olmadığı için içeriğiniz çıplak [et_pb_...] etiketleri olarak, yani okunamaz bir metin yığını hâlinde görünür. Yıllarca emek verdiğiniz onlarca sayfanın bir anda bozulması demektir bu. Sektörde buna "Divi lock-in", yani Divi kilitlenmesi denir ve tema seçimini uzun vadeli bir taahhüt hâline getirir.

Bu riski yönetmenin birkaç yolu vardır. Öncelikle Divi ile başlarken bunun bir bağlılık olduğunu kabul edin; kısa vadede tema değiştirmeyi planlıyorsanız Divi doğru seçim olmayabilir. İkinci olarak, kritik içeriği (uzun blog yazıları gibi) mümkün olduğunca Gutenberg blok editörü ya da düz metinle yazın; Divi Builder'ı yalnızca açılış sayfaları gibi görsel ağırlıklı yerlerde kullanın. Böylece bir geçiş gerektiğinde bozulacak içerik miktarı sınırlı kalır. Üçüncü olarak, tema değiştirmeye karar verdiğinizde önce hangi sayfaların Divi kısa kodu barındırdığını tespit edin:

-- Divi Builder ile olusturulmus icerikleri say
SELECT COUNT(*) AS divi_sayfa_sayisi
FROM wp_posts
WHERE post_status = 'publish'
  AND post_content LIKE '%[et_pb_section%';

Bu sorgu size temizlenmesi gereken içerik hacmini gösterir. Geçiş sırasında bu kısa kodları elle temizlemek yerine, güvenilir bir "shortcode temizleyici" eklentisi kullanmak ya da bu işi bir uzmana devretmek daha güvenlidir. Böyle bir geçişi tek başınıza yapmak istemiyorsanız, profesyonel bir site taşıma hizmeti içerik kaybı olmadan taşınmanıza yardımcı olur.

Performans ve Doğru Barındırma#

Divi güçlü olduğu kadar kaynak da tüketen bir sistemdir. Çok sayıda modül, animasyon ve global stil, sayfaların ağırlaşmasına yol açabilir. Bu yüzden Divi ile hızlı bir site kurmanın iki ayağı vardır: doğru yapılandırma ve sağlam barındırma. Yapılandırma tarafında Divi'nin "Performans" sekmesindeki seçenekleri açın; dinamik CSS, dinamik modül çerçevesi, kritik CSS ve tembel yükleme (lazy loading) gibi ayarlar sayfa boyutunu belirgin biçimde küçültür. Kullanmadığınız Google fontlarını devre dışı bırakmak ve gereksiz jQuery bağımlılıklarını azaltmak da fark yaratır.

Barındırma tarafında ise Divi'nin PHP ve bellek iştahını karşılayabilecek bir altyapı şarttır. Paylaşımlı bir pakette dahi olsanız NVMe diskli, LiteSpeed veya iyi ayarlanmış Nginx/PHP-FPM çalıştıran, yeterli bellek ayrılmış bir ortam tercih edin. Trafik arttıkça ya da çok sayıda Divi sitesi yönetiyorsanız, izole kaynak sunan bir sanal sunucuya geçmek performansı stabil tutar. WordPress'e özel olarak ayarlanmış bir WordPress hosting paketi Divi için sağlam bir başlangıç olurken, daha büyük projelerde bir VDS sunucu tam kaynak kontrolü verir. Düzenli yedekleme de burada kritiktir; builder'da yanlış bir toplu değişiklik sayfaları bozabileceği için otomatik yedekleme çözümüyle geri dönüş noktanız her zaman hazır olmalıdır.

Son olarak, Divi güncellemelerini asla doğrudan canlı sitede denemeyin. Bir hazırlık (staging) kopyasında güncelleyip test ettikten sonra canlıya alın. Divi'nin sık çıkan sürümleri bazen modül davranışını değiştirir; kritik bir kurumsal sitede bu tür sürprizleri önden yakalamak, ziyaretçilerin bozuk bir sayfayla karşılaşmasından çok daha iyidir.

Sıkça Sorulan Sorular#

Divi bir tema mı yoksa sayfa oluşturucu mu?#

İkisi birden. Divi hem WordPress'e kurulan tam bir tema hem de o temanın içinde gelen görsel sayfa oluşturucudur. Divi Builder ayrı bir eklenti olarak da satılır, bu sayede başka bir tema kullanırken bile builder'dan yararlanabilirsiniz. Ancak en yaygın kullanım, Divi temasını etkinleştirip hem tasarımı hem de header, footer ve blog şablonlarını tek çatı altında yönetmektir.

Divi ile Elementor arasında hangisini seçmeliyim?#

Bu kararı iş modeliniz ve tema bağlılığına bakışınız belirler. Divi, sınırsız site hakkı ve ömür boyu lisans seçeneğiyle çok sayıda proje yöneten ajanslar için ekonomik olurken; içeriği kısa kod olarak sakladığı için tema değiştirmeyi zorlaştırır. Elementor ise başlangıçta daha sade bir öğrenme eğrisi sunar ve içeriği ayrı bir yapıda tuttuğu için tema geçişleri nispeten kolaydır ama genellikle site başına yıllık abonelik ister. Uzun vadeli tek bir markaya yatırım yapıyorsanız Divi, esneklik önceliğinizse Elementor mantıklı olabilir.

Divi'den başka bir temaya geçince içeriğim bozulur mu?#

Evet, bu Divi'nin en bilinen dezavantajıdır. Divi Builder ile tasarladığınız her bölüm veritabanına kısa kod olarak yazıldığı için, başka bir temaya geçtiğinizde o tema bu kodları yorumlayamaz ve içeriğiniz çıplak [et_pb_...] etiketleri olarak görünür. Bu yüzden geçişten önce hangi sayfaların Divi kısa kodu içerdiğini tespit etmeli, güvenilir bir temizleyici kullanmalı veya bu işi bir uzmana yaptırmalısınız. Kritik içeriği en baştan Gutenberg ile yazmak da bu riski azaltır.

Divi sitemi yavaşlatır mı?#

Yanlış yapılandırıldığında yavaşlatabilir, çünkü çok sayıda modül ve animasyon sayfa boyutunu büyütür. Ancak Divi'nin performans sekmesindeki dinamik CSS, kritik CSS ve tembel yükleme seçeneklerini açar, kullanmadığınız fontları kapatır ve bir önbellek eklentisiyle desteklerseniz makul hızlar elde edebilirsiniz. Bunun yanında NVMe diskli, yeterli belleğe sahip bir barındırma altyapısı da performansın olmazsa olmazıdır; Divi'yi düşük kaynaklı bir ortamda çalıştırmak kaçınılmaz olarak yavaşlığa yol açar.

Hazır layout paketlerini kullanmak SEO açısından sorun yaratır mı?#

Hayır, hazır layout kullanmak doğrudan bir SEO sorunu değildir. Önemli olan içeriğin özgünlüğü ve sayfa hızıdır. Hazır bir paketi yükleyip kendi özgün metinlerinizi, görsellerinizi ve markanızı yerleştirdiğinizde arama motorları açısından bir sakınca oluşmaz. Dikkat etmeniz gereken nokta, paketle gelen ağır görselleri optimize etmek ve gereksiz modülleri temizleyerek sayfayı hafif tutmaktır.

Divi güncellemelerini nasıl güvenle yapmalıyım?#

Güncellemeleri asla doğrudan canlı sitede denemeyin. Önce sitenizin bir hazırlık (staging) kopyasını oluşturun, Divi'yi orada güncelleyip tüm önemli sayfaları gözden geçirin, sorun yoksa değişikliği canlıya alın. Güncellemeden önce mutlaka tam bir yedek almak da şarttır; çünkü büyük sürüm geçişleri bazen modül davranışını değiştirebilir. Bu disiplin, ziyaretçilerinizin bozuk bir sayfayla karşılaşma ihtimalini ortadan kaldırır.

Kapanış#

Divi, tek pakette tema ve güçlü bir görsel oluşturucu sunarak kod yazmadan profesyonel siteler kurmanızı sağlayan olgun bir sistemdir. Bölüm-satır-modül hiyerarşisini kavradığınızda, hazır layout paketlerini kendi markanıza uyarladığınızda ve global renk-yazı tipi ayarlarıyla tutarlılığı sağladığınızda hızla etkileyici sonuçlar alırsınız. Buna karşılık, içeriğin kısa kod olarak saklanmasından doğan "lock-in" riskini baştan kabul etmeli; kritik içeriği koruyacak ve geçişleri kolaylaştıracak alışkanlıklar edinmelisiniz.

Divi ne kadar güçlü olursa olsun, gerçek performansı ancak altındaki barındırma kadar iyidir. NVMe diskli, WordPress'e göre ayarlanmış bir WordPress hosting paketiyle sağlam bir temel atabilir, büyüyen projeleriniz için izole kaynak sunan VDS sunucu seçeneklerini değerlendirebilir ve her ihtimale karşı otomatik yedekleme ile geri dönüş noktanızı hazır tutabilirsiniz. Divi güncellemeleri, tema geçişleri ve bakım gibi işleri kendiniz üstlenmek istemiyorsanız, bu yükü uzmanlara devreden bir WordPress bakım hizmeti de her zaman yanınızda. Doğru araç ve doğru altyapı bir araya geldiğinde, Divi ile kurduğunuz site hem güzel hem de hızlı olur.