Divi Tema Özelleştirici için En İyi Kılavuz

Divi Tema Özelleştirici, Divi Teması'nda özelleştirmeler yapmak için güçlü ve kullanışlı bir araçtır. Visual Builder gibi, Divi Tema Özelleştirici de görsel ön uç özelleştirmelerine ve tahmin oyununu özelleştirme sürecinden çıkaran tasarım değişikliklerine izin verir. Bu araç verimli kullanılırsa, gelecekteki projeler için harika bir zaman tasarrufu ve hızlı başlangıç ​​olabilir.

Bugünkü gönderi, Tema Özelleştirici'nin nasıl çalıştığını daha iyi anlamanıza yardımcı olmak içindir, böylece gelecekteki projeler için üretkenliği artırmak için kullanabilirsiniz. Divi'ye özgü seçeneklere vurgu yaparak Tema Özelleştirici'de bulunan hemen hemen tüm seçenekleri ele alıyorum. Bir bakıma, bu gönderi, yol boyunca bazı derinlemesine açıklamalar ve tasarım ipuçları sunan bir belgeleme parçası olarak hizmet ediyor. Ayrıca bir sonraki projenizde kullanmak üzere Özelleştirici ayarlarını nasıl dışa aktaracağınızı da göstereceğim.

Ele alacağımız çok şey var, o yüzden en baştan başlayalım.

Akılda WordPress ile Oluşturuldu

Özelleştirici teması WordPress 3.4'te tanıtıldı. Bu kullanışlı özellik, WordPress kullanıcılarının temalarında yaptıkları değişiklikleri gerçek zamanlı olarak önizlemelerine ve ardından bu değişiklikleri tek bir tıklamayla kaydetmelerine olanak tanır. Eskiden birden çok pencere ve sayısız yenileme gerektiren işlemler artık tek bir tarayıcı penceresinde hızla yapılabilir.

TwentySeventeen temasındaki Tema Özelleştirici seçeneklerine bir örnek:

Gördüğünüz gibi, WordPress'in arka ucundaki farklı sayfalarda bulunan birçok WordPress özelliğine (Site Kimliği, Menüler, Widget'lar, vb.) artık bu ön uç özelleştiricide tek bir yerden erişilebilir.

Öte yandan, Divi Tema Özelleştirici, Divi'ye özgü her türlü seçenekle bu Tema Özelleştirici'nin geliştirilmiş bir sürümü olarak oluşturulmuştur. Kullanıcılar için bu, Divi'yi özelleştirme sürecini çok daha kolay hale getirir. Ve düzenlerken (eşzamanlı olarak) özelleştirmeleri gerçekten görebilmeniz, bunu kullanışlı bir tasarım aracı haline getiriyor.

Divi Tema Özelleştirici hala birçok standart WordPress Özelleştirici seçeneğine sahiptir, ancak aynı zamanda çok daha fazlası vardır.

Gördüğünüz gibi Divi Theme Customizer'a eklenen çok daha fazla ayar var. Şimdi bunları daha derinlemesine incelemeye başlayalım.

Genel Ayarlar

Temanızı özelleştirmeye başladığınızda, Genel Ayarlar ile en baştan başlayıp aşağı doğru ilerlemenin en iyisi olduğunu düşünüyorum.

Site Kimliği

Bu bölüm Divi'ye özgü değildir. Bu, sitenizin site başlığını ve sloganını değiştirmek için uygun bir yerdir. Divi Tema Seçenekleri'ne ekleyebileceğiniz favicon simgesinden farklı olarak, tarayıcılar ve uygulamalar için kullanılan bir site simgesi de girebilirsiniz.

Düzen Ayarları

Düzen ayarları, bölümler ve satırlar arasında ne kadar boşluk olduğunu ve ana içerik bölümünüzün maksimum genişliğinin ne olacağını belirleyerek temanızın çerçevesini ayarlamanıza olanak tanır.

KUTULU DÜZENİ ETKİNLEŞTİR

Burada sitenizi, sitenizin içeriğini çerçeveleyen ve özelleştirilebilen bir arka plan ortaya çıkaran bir kutu düzenine dönüştürebilirsiniz.

SİTE İÇERİĞİ GENİŞLİĞİ

Burası, içerik bölümünüzün maksimum genişliğini ayarlayabileceğiniz yerdir. İçeriğiniz duyarlı bir düzende olduğundan, daha küçük boyutlara ayarlanır ancak burada ayarlanan maksimum genişlikten daha fazla genişlemez.

Varsayılan, 1080 piksel olarak ayarlanmıştır. Bu, çoğu standart dizüstü ve masaüstü bilgisayar için iyi bir genişliktir.

SİTE OLUK GENİŞLİĞİ

Cilt payı genişliği, her satırdaki sütunlar arasındaki yatay boşluk (marj) miktarına karşılık gelir.

Oluk genişliği aralığı için isteğe bağlı değerler 1 ila 4 arasındadır.

1, sütunlar arasındaki sıfır kenar boşluğunu temsil eder.
2, sütunlar arasında %3'lük bir sağ kenar boşluğunu temsil eder.
3, sütunlar arasında %5.5'lik bir sağ kenar boşluğunu temsil eder.
4, sütunlar arasında %8'lik bir sağ kenar boşluğunu temsil eder.

ÖZEL KENAR ÇUBUĞU GENİŞLİĞİ KULLAN

Bu, temanız için varsayılan kenar çubuğu genişliğini ayarlar. Bu, temanızda kenar çubuğu olan ve Divi Builder kullanılarak oluşturulmamış tüm sayfalar için geçerlidir.

BÖLÜM VE SIRA YÜKSEKLİĞİ

Bu seçenekler, her bölüm ve sıra için dikey boşluk (üst ve alt dolgu) miktarını ayarlar.

Varsayılan olarak, bölüm dolgusu üstte ve altta 50 pikseldir . Satır için varsayılan dolgu, üstte ve altta 30 pikseldir . Ancak, Özelleştirici kullanılarak bölüm veya satır dolgusu değiştirildiğinde, dolgu değeri, tema özelleştiricideki seçenek kadranı üzerindeki sayıya karşılık gelen bir yüzdeye dönüşür.

Örneğin, "0" üst ve alt dolgunun %0'ını, "1" üst ve alt dolgunun %1'ini, "2" %2'sini vb. temsil eder. Dolgu yüzdesi, kabın (bölüm veya sıra) genişliğine bağlıdır. Yani bölümün gerçek genişliği 1080 piksel ise ve bölüm yüksekliğini 1 olarak ayarladıysanız, bu şu anlama gelir:

1080 piksel x 0,01 = 10.8 piksel

… üstte ve altta 10.8 piksel dolgu.

Seçenekler 0 ile 10 arasında değişir, böylece %10'a kadar dolguya sahip olabilirsiniz.

TEMA VURGU RENK

Eğer diğer unsurların renklerini değiştirerek başlamadan önce, ilk olarak bu değişmelidir. Değiştirdikten sonra ayarlarınızı kaydedip yayınlayın ve sayfanızı yenileyin. Şimdi güncellenen Tema Vurgu Rengi, diğer öğeleri otomatik olarak doldurmuş olmalıdır.

Tema Vurgu Renginin güncellenmesi aşağıdakileri de güncelleyecektir:

• Gövde Bağlantı Rengi
• Widget Başlık Rengi
• Widget Madde İşareti Rengi
• Altbilgi Sosyal Simgeler Fareyle üzerine gelme rengi
• Simgeler için varsayılan renk
• Alt Bilgi Menüsü Etkin Bağlantı Rengi
• İkincil menü arka plan rengi
• İçeri Kaydır ve Tam Ekran Başlık Stili arka plan rengi
• Mobil menü rengi için Hamburger Menü Simgesi
• Birincil Menü Aktif Bağlantı Rengi
• Açılır Menü Çizgi Rengi
• İkincil Menü Arka Plan Rengi
• İkincil Açılır Menü Arka Plan Rengi
• İkincil Menü Arka Plan Rengi
• Aktif Birincil Menü Bağlantı Rengi
• Alt Bilgi Menüsü Etkin Bağlantı Rengi

tipografi

Bu, web sitenizin kullanıcılar ve geliştiriciler tarafından ihmal edilen en önemli yönlerinden biridir. Bu seçenekleri gözden kaçırma hatasına düşmeyin. Bu ayrıntıları doğru almak büyük bir fark yaratabilir. Temanız için varsayılan tipografinizi ayarlamak için zaman ayırmak, modül düzeyinde özelleştirmeler yapmanız gerekmeyeceği için uzun vadede size zaman kazandırabilir.

GÖVDE METİN BOYUTU

Bu, temanız için varsayılan gövde metnini değiştirir. Varsayılan boyut 14 pikseldir.

Tasarım İpucu: Görünüşe göre 14 piksel, standart bir gövde metni boyutu için biraz fazla küçük. Temel seviye vücut yazı tipi boyutunuz için gerçekten 16 pikselden daha az gitmemelisiniz. 40 yaş ve üzeri olan bizler size teşekkür edeceklerdir. Çoğu tarayıcı bile standart taban düzeyi yazı tipi boyutu olarak 16 piksel kullanır.

GÖVDE ÇİZGİ YÜKSEKLİĞİ

Her bir metin satırının satır yüksekliği.

Tasarım İpucu : Çizgi yüksekliği “em” uzunluk değeriyle ölçülür. Gövde metni için Divi'nin varsayılan değeri 1.7em'dir. Bu em değeri bir piksel (px) değerinden daha iyidir çünkü öğenin geçerli yazı tipi boyutuna bağlıdır ve bu nedenle üst satır içi değerle (veya bizim durumumuzda geçerli yazı tipi boyutuyla) ölçeklenir. “1.7em” değeri temel olarak mevcut yazı tipi boyutunun 1,7 katını temsil eder. Yani mevcut yazı tipi boyutunuz 16 piksel ise, satır yüksekliği 27.2 piksel olacaktır. Bu size üstte 5.6 piksel ve altta 5.6 piksel ekstra alan sağlar. Bu, okunabilirlik için iyi bir öncü (kopya satırları arasındaki boşluk) gibi görünüyor.

BAŞLIK METİN BOYUTU

Divi, varsayılan h1 Başlık metin boyutunuzu burada ayarlamanıza olanak tanır. Bu, Fullwidth Header Module başlıkları gibi Divi öğelerini etkiler. Diğer başlık düzeylerinin (h2, h3, vb.) boyutunu ayarlamak istiyorsanız, bunları Ek CSS'ye eklemenizi öneririm (bu, yazının ilerleyen bölümlerinde ele alınacaktır).

Tasarım İpucu: Çoğu durumda, sayfa başına yalnızca bir başlığınız olacak, bu yüzden sayın. Bunu bir kitabın kapağındaki isim olarak düşünün. Bir kişinin ilk fark ettiği şeydir. Ve popüler sloganın aksine, özellikle bu durumda, insanlar hala kitapları kapaklarına göre yargılıyorlar.

Başlık metni boyutu için varsayılan değer 30 pikseldir. Bu, başlamak için iyi bir güvenli boyuttur. Özellikle bazı başlıklar daha uzun kopya gerektireceğinden. Ancak, büyüyen monitör ekranlarına uyum sağlamak için daha büyük bir başlık boyutuna yönelme eğilimindeyim. Ayrıca, çoğu müşterinin daha büyük yazı tipi boyutlarıyla daha iyi görünen "Hakkımızda" ve "Bize Ulaşın" gibi basit ve kısa başlıkları olan web sitelerine ihtiyacı vardır. h1 başlıklarımı en az 48 piksel olarak ayarlamayı seviyorum .

BAŞLIK HARF ARALIĞI

Harf aralığı, harfler arasındaki yatay boşluğu ayarlar. Başlık Harf Aralığı değeri, tüm başlık düzeylerini (h1, h2, h3, h4, h5, h6), blok alıntıları ve slayt başlıklarını etkiler.

Tasarım İpucu: Daha büyük metinler için harf aralığını azaltmak ve daha küçük metinler için harf aralığını artırmak iyi bir tasarım tekniğidir. Başlıklar söz konusu olduğunda, daha büyük yazı tipi ağırlığına (kalın) sahip daha büyük metin, -1 piksel azaltılmış harf aralığıyla daha iyi görünebilir.

Ancak, aynı başlığı büyük harfle yazarsanız, harf aralığını 1-2 piksele çıkarmanın daha iyi görüneceğini görebilirsiniz.

BAŞLIK ÇİZGİ YÜKSEKLİĞİ

Harf aralığı değerinde olduğu gibi, başlık satırı yükseklik değeri tüm başlık düzeylerini (h1, h2, h3, h4, h5, h6), blok alıntıları ve slayt başlıklarını etkiler. Daha büyük yazı tipi boyutu nedeniyle, varsayılan ayar 1em'dir. Özellikle başlık iki veya daha fazla satıra gittiğinde, 1em ile 1,3em arasında bir satır yüksekliğinin iyi göründüğünü düşünüyorum.

BAŞLIK YAZI TİPİ TARZI

Başlıklarınızın yazı tipi stilini değiştirmek için bu seçenekleri kullanın.

BAŞLIK VE GÖVDE YAZI TİPİ

Divi'deki varsayılan yazı tipi Open Sans'tır , ancak Divi Tema Özelleştirici'de seçim yapabileceğiniz neredeyse yüz yazı tipi vardır! Bu yerleşik yazı tiplerinden yararlanın ve hangilerinin temanız için en uygun olduğunu test edin.

Tasarım İpucu: Font eşleştirmeleri için ilham almak için Google Fonts'u birlikte eşleştirmeye yardımcı olan fontpair.co'ya göz atabilirsiniz. Divi, kutudan çıktığı haliyle tüm bu yazı tiplerini desteklemeyecektir, ancak birlikte iyi çalışan eşleştirmeleri görmek için Divi'nin desteklediği yazı tiplerini arayabilirsiniz.

GÖVDE BAĞLANTI RENGİ

Gövde bağlantı rengi, tema vurgu renginiz tarafından devralınır. Ama her zaman burada değiştirebilirsiniz.

Tasarım İpucu: İsterseniz, Ek CSS kullanarak tüm gövde bağlantılarınız için bir alt çizgi özelliği ekleyebilirsiniz (yazının sonuna bakın).

GÖVDE METİN RENGİ

Burada gövde metninizin rengini değiştirebilirsiniz. New York Times ve Smashing Magazine gibi popüler Bloglar, gövde metin renkleri için #333333 kullanır. Bu bence beyaz bir arka planda daha iyi okuma eğiliminde.

BAŞLIK METİN RENGİ

Burada başlıklarınızın rengini değiştirebilirsiniz. Siyah bir gölge ile yapışıyorsanız, biraz öne çıkması için gövde metninden biraz daha koyu giderdim. #121212 gibi bir şey işe yarayabilir.

Arka plan

Bu seçenek, temanızın arka planını ayarlar. Divi Teması için bu seçenek gerçekten yalnızca kutu düzeni için geçerlidir . Burada değiştirmediğiniz sürece varsayılan arka plan rengi beyazdır (#ffffff). Dilerseniz arka plan resmi de ekleyebilirsiniz.

Düzen Ayarları için bu kadar. Düzeni yerleştirdikten sonra daha spesifik öğelere bakmaya başlayabilirsiniz.

Başlık ve Gezinme

Başlık ve gezinme menüsü, muhtemelen temanızdaki en önemli unsurdur. Bu bölüm, istediğiniz hemen hemen her tür başlık oluşturmak için birçok seçeneğe sahiptir.

Başlık Formatı

Başlık Stili

Dört başlık stili, web sitenize yalnızca tek bir tıklamayla yepyeni bir görünüm kazandırabilir. Bu stiller arasında Ortalanmış, Ortalanmış Satır İçi Logo, Kaydırmalı ve Tam Ekran bulunur.

Sitenize benzersiz bir özellik olabilecek dikey gezinme de ekleyebilirsiniz. Ayrıca, kaydırma yapana kadar gezinmeyi gizlemeyi seçebilirsiniz. Bu, gezinme çubuğunun dikkati dağılmadan ekranın üst kısmında daha fazla içeriği vurgulamak isteyen tek sayfalık bir site için faydalı olacaktır.

Birincil Menü Çubuğu

Birincil menü çubuğunuz, web sitenizin başlığının içindeki ana menüdür. Birincil menünüzün görünüşünü tamamen özelleştirebilirsiniz.

Tasarım İpucu: Divi Tema Özelleştirici ile menüyü mükemmelleştirmeye başlamadan önce menü bağlantılarınızın ne olacağını gerçekten bilmeniz gerekir. Duyarlı bir menü tasarlayacağınızı unutmayın, bu nedenle menünün tüm ekran boyutlarında harika göründüğünden emin olmak için zaman ayırın. Bunu, özelleştiricinin altındaki cihaz simgelerine tıklayarak veya tarayıcınızın boyutunu ayarlayarak yapabilirsiniz. Eğer ilgileniyorsanız, duyarlı navigasyonunuzu nasıl düzelteceğinizi buradan öğrenebilirsiniz.

Tam Genişlik Yap

Bu, menüyü tarayıcı penceresinin tam genişliği boyunca genişletir.

Logo Resmini Gizle

İsterseniz burada logo görüntüsünü menünüzden tamamen gizleyebilirsiniz.

Menü Yüksekliği

Burada menü yüksekliğini istediğiniz gibi değiştirebilirsiniz. Bununla birlikte, ana sayfa içeriğiniz yerine bir menüde değerli gayrimenkullerinizi boşa harcayabileceğiniz için menü yüksekliğinizi çok büyük yapmamaya dikkat edin.

Logo Maksimum Yükseklik

Burada logonuzu büyütmek veya küçültmek için maksimum genişlik yüzdesini artırabilir veya azaltabilirsiniz.

Metin Boyutu, Harf Aralığı, Yazı Tipi, Yazı Tipi Stili, Metin Rengi, Etkin Bağlantı Rengi

Bu seçenekler, menü bağlantılarını istediğiniz şekilde özelleştirmenize olanak tanır.

Arka plan rengi

Bu, birincil menünüzün arka plan rengini değiştirmenize olanak tanır.

Tasarım İpucu: Başlığınız için yarı saydam (veya tamamen saydam) renkleri kullanırsanız, Divi otomatik olarak başlığın altındaki bölümün üzerine görünmez bir şekilde biner. Bu oldukça havalı bir etki yaratır. Örneğin, bu, şeffaf bir arka plana ve doğrudan altında tam genişlikte bir üstbilgiye sahip ortalanmış bir başlık stilidir. Divi'nin arka plan görüntüsünü başlığın arkasına tam olarak sığacak şekilde nasıl otomatik olarak ayarladığına dikkat edin:

Açılır Menü Ayarları

Açılır menünüzün ana menünün stilini devralması gerekmez. Burada açılır menünüz için benzersiz bir tasarım oluşturabilirsiniz. Açılır menüyü görüntülerken özel animasyon bile ekleyebilirsiniz.

İkincil Menü Çubuğu

Burada, sağlanan seçenekleri kullanarak ikincil menü çubuğunuzu özelleştirebilirsiniz.

Etkinleştirildiğinde, ikincil menü çubuğu, tarayıcınızın en üstündeki birincil menü çubuğunun üzerinde bulunur. Bir e-posta adresi, sosyal medya bağlantıları ve ikincil bir menü dahil olmak üzere ek öğeler içerebilir.

Varsayılan olarak, ikincil bir menü girmediğiniz veya Başlık Öğeleri bölümünün altına öğe eklemediğiniz sürece ikincil menü gizli kalacaktır. Menüyü görmek için tema özelleştiriciyi kaydetmeniz ve yenilemeniz gerekebilir.

Sabit Navigasyon Ayarları

Sabit Gezinme, kullanıcı sayfayı aşağı kaydırdığında menünün "sabit" veya tarayıcı penceresinin en üstüne takılı olma durumunu ifade eder. Varsayılan olarak, sabit gezinme, sitenin içeriğini görüntülemek için daha büyük bir görünüm sağlamak üzere yükseklik olarak küçülür.

Tasarım İpucu: Arkasındaki içeriğin bir kısmını ortaya çıkarmak için Sabit Birincil Menü Arka Plan Renginizi yarı saydam bir renge de ayarlayabilirsiniz. Bu, onu daha az müdahaleci ancak yine de erişilebilir kılar.

Başlık Öğeleri

Başlık öğeleri, başlığınıza ekleyebileceğiniz ek öğelerdir. Bu öğeler sosyal simgeler, bir arama simgesi, bir telefon numarası ve bir e-posta içerir. Arama simgesinin yanı sıra, tüm bu öğeler ikincil menüde görüntülenecektir.

Sosyal Simgeler

Varsayılan olarak Divi, Facebook, Twitter, Google+ ve RSS için simgeler görüntüler. Bu profilleri Divi'nin Tema Seçeneklerinde düzenleyebilirsiniz.

altbilgi

Varsayılan olarak alt bilgi bölümü, içerik tarafından doldurulmadığı sürece gizlidir. Ayrıca altbilgi, varsayılan olarak sitenin en altında görüntülenen ve altbilgi kredilerini ve sosyal simgeleri içeren Alt Çubuk ile karıştırılmamalıdır.

Düzen

Burada altbilgi bölümünüz için 5 düzen arasından seçim yapabilirsiniz.

Ayrıca varsayılan olarak #222222 olarak ayarlanan bir altbilgi arka plan rengi de ayarlayabilirsiniz.

Tasarım İpucu: Bu bölüm sitenizin tüm sayfalarında görüntülenecektir (boş bir sayfa şablonu seçmediğiniz sürece). Bu nedenle, sitenizin tüm sayfalarıyla eşleşmesi için rengi daha nötr hale getirmek mantıklıdır.

Widget'lar

Alt Bilgi Bölümlerinize widget'lar eklediyseniz, bu widget'ların burada nasıl görüneceğini belirleyebilirsiniz.

Widget'lar Divi'ye özgü değildir. Bunlar wordpress'te yerleşiktir ve Wordpress panosunda Görünüm > Widget'lar altında bulunabilir. Burada, widget ekleyebileceğiniz dört Altbilgi Alanı görebilirsiniz. Bu bölümlere eklediğiniz tüm widget'lar alt bilgi alanınızda gösterilecektir.

Bununla birlikte, tema özelleştiriciden ayrılmak zorunda kalmadan da widget alanlarına erişebilirsiniz (bununla ilgili en sevdiğim şeylerden biri).

Altbilgi Öğeleri

Burada, ikincil menüde olduğu gibi sosyal simgelerinizi alt çubuğunuzda göstermeyi seçebilirsiniz.

Altbilgi Menüsü

Altbilgi menünüz varsa, burada stil verebilirsiniz.

Alt çubuk

Alt çubuk, web sitenizin en altında bulunur ve varsayılan olarak altbilgi kredilerinizi ve sosyal simgelerinizi görüntüler. Burada, sosyal simge yazı tipi boyutunu ve rengini değiştirmek de dahil olmak üzere bu öğelerin stilini özelleştirebilirsiniz.

Altbilgi Kredilerini Düzenle

Ayrıca varsayılan altbilgi kredilerini bu kutunun içinde istediğiniz html ile değiştirebilirsiniz.

Düğmeler

Bu bölüm, varsayılan düğme stillerinin ne olmasını istediğinizi kontrol eder.

Düğme Stili

Burada, temanız için düğmelerinizin stilini özelleştirebilirsiniz. Burada her bir seçenek üzerinde çok fazla ayrıntıya girmeyeceğim. Düğmelerin nasıl stillendirileceği hakkında daha fazla bilgi için düğme modülündeki belgelerimize gidebilirsiniz.

Metin Rengi

Fark ederseniz, varsayılan olarak düğme rengi, Genel Ayarlar'da ayarlanan Tema Vurgu Rengi tarafından devralınır. Bu yalnızca metinleri "karanlık" olarak ayarlanmış modüller içindir. Modül metni “ışık” olarak ayarlandığında düğmeler beyazdır. Ancak, düğmeleriniz için özel bir metin rengi ayarladığınızda, bu renk belirli bir modül içindeki hem koyu hem de açık metin sürümleri için ayarlanır.

Tasarım İpucu: Tema Vurgu Renginizin düğmelerinizin metin rengini ayarlamasına izin verin, böylece Modüllerinizde düğmenizin koyu ve açık sürümlerini ekleme yeteneğini sürdürebilirsiniz.

Düğmeler Vurgulu Stil

Bu, düğmelerinizin üzerine gelme durumunun stilini özelleştirebileceğiniz yerdir.

Kullanıcıların tıklamak üzere oldukları şeyin aslında bir düğme olduğunu anlamaları önemlidir. Bir vurgulu efekti eklemek, bunu zihinlerde sağlamlaştırır ve onları etkileşime teşvik eder. Varsayılan olun Divi, açık renkli bir arka plan ekler ve sağda bir ok simgesini canlandırır. Ancak istediğiniz gibi değiştirebilirsiniz.

Tasarım İpucu: Arka planı daha koyu veya daha açık bir renge değiştirip değiştirmemeniz, düğmenin bir şekilde değişmesini sağlamak kadar önemli değildir. Düğmenize fareyle üzerine gelindiğinde benzersiz bir efekt vermek için harf aralığını artırabilir veya kenarlık yarıçapını ayarlayabilirsiniz.

Blog

Postalamak

Bu bölüm, tek bir gönderideki gönderi başlığı içeriğinin stilini değiştirir. Bu, blog sayfanızdaki veya blog modülünüzdeki blog alıntılarınızın görünümünü değiştirmez. Bazen blog yazısı başlıklarınızın sitenizin geri kalanındaki başlıklardan farklı görünmesi gerekir. Bu ayarlamaları yapacağınız yer burasıdır.

Post Header Module'ü kullanmayı seçerseniz, bu seçenekler etkili olmaz.

Mobil Stiller

Bu bölümü seviyorum. Burada sitenizin mobil cihazlarda nasıl görüneceğini ayarlayabilir ve sonuçları gerçek zamanlı olarak görebilirsiniz.

Tablet ve Telefon Stilleri

Tablet veya Telefon'u seçebilirsiniz ve Özelleştirici'nin sağındaki pencere, sayfanın cihazda nasıl göründüğünü size gösterecek şekilde otomatik olarak ayarlanacaktır. Ardından, Düzen altındaki Genel Ayarlar'da yaptığımız gibi, Bölüm Yüksekliği, Satır Yüksekliği, Gövde Metin Boyutu ve Başlık Metin Boyutunu ayarlayabilirsiniz.

Tasarım İpucu 1: Telefon düzenleri için yapmayı sevdiğim bir özelleştirme, Satır Yüksekliğini “0” olarak ayarlamaktır. Bu, telefonda gezinirken satırlar arasındaki boşluğu ortadan kaldırdığı için daha iyi bir içerik akışı sağlar.

Tasarım İpucu #2: Sitenize uygun bir yazı tipi ölçeği bulun. İşte başlıklarım için takip etmeyi sevdiğim iyi bir tane:

Masaüstü: 48 piksel

Tablet: 40 piksel

Telefon: 32 piksel

Mobil Menü

Bunu gözden kaçırmayın, aksi takdirde mobil menünüz için tamamen benzersiz bir başlık oluşturmayı kaçırabilirsiniz. Logoyu sadece mobil cihazlarda gizleyebilir, arka plan ve metin renklerini değiştirebilirsiniz.

Renk şemaları

Bunlar hızlı bir çözüm için uygun olabilir. Ancak, bu renklerden bazılarını daha sonra tema özelleştiricide değiştirmeyi planlıyorsanız, renk şemalarını kullanmanızı tavsiye etmem. Bir kez ayarlandığında, oluşturulan CSS !important kuralını içerdiğinden, bu renkler Özelleştirici'de geçersiz kılınamaz.

Bence, bu seti varsayılan olarak bırakmak en iyisidir.

Menüler ve Widget'lar

Artık wordpress panosunda menülerinizi veya widget'larınızı körü körüne düzenlemek zorunda değilsiniz. Artık bu öğeleri ekleyip özelleştirebilir ve gerçek zamanlı olarak sayfanızda hayat bulmalarını görebilirsiniz. Rahatlığı seviyorum!

Statik Ön Sayfa

Varsayılan olarak, WordPress en son yayınınızı ön sayfanızda (ana sayfa) görüntüler. Bunu, bu bölümde istediğiniz herhangi bir statik sayfa olarak değiştirebilirsiniz. Ayrıca Yazılar Sayfanızı (veya blog sayfanızı) da belirleyebilirsiniz.

Bunu bu gönderiyi yazana kadar bilmiyordum, ancak Tema Özelleştirici içinden, Özelleştiriciden hiç ayrılmak zorunda kalmadan Ön Sayfanız veya Blog Sayfanız olarak hizmet vermek üzere yeni bir sayfa dağıtabilirsiniz.

Ek CSS

Ek CSS bölümü, tema kurulumunuza son rötuşları yapmak için harika bir fırsat sunar. Divi Tema Özelleştirici'nin kontrol edemediği stil değişiklikleri ne olursa olsun, burada bazı özel CSS ile yapabilirsiniz. Özelleştirici, CSS değişikliklerini gerçek zamanlı olarak görmenize izin verdiği için, temanızda bu gerekli ayarlamaları harici bir stil sayfasında ileri geri gitmekten çok daha kolay yapabilirsiniz.

Ek CSS Örnekleri

Örnek 1: Tüm Başlıkların Boyutunu Ayarlayın

Ek CSS'ye iyi bir örnek, kalan başlık etiketleriniz için stil olabilir. Divi, başlık yazı tipinizin ayarını özelleştirmenize olanak tanır, ancak bu yalnızca h1 başlıklarınız içindir. Başlık etiketleri (h2, h3, h4, vb…) özelleştirmelerinin geri kalanını girmek için Ek CSS kutusunu kullanabilirsiniz. Şu ölçeği kullanmayı seviyorum: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Örnek #2: Alt Paragraf Dolgusunu Gövde Çizgisi Yüksekliğiyle Eşleştirme

Gövde metni satır yüksekliğini 1,7em olarak ayarlarsanız, tutarlı bir satır taban çizgisi ızgarası ve dikey ritim sağlamak için paragraflar arasındaki alt dolgunuza da aynı değeri ayarlamak isteyebilirsiniz. Başka bir deyişle, paragraflar arasındaki mesafe satır yüksekliğine eşittir. Bunu yapmak için aşağıdakileri eklemeniz yeterlidir:

p { padding-bottom: 1.7em}

em uzunluk değeri ana yazı tipi boyutunu temel aldığından, temel yazı tipi boyutunu tema özelleştiricide başka bir şeyle değiştirdiyseniz, 1,7em değeri buna göre ayarlanır.

Örnek 3: Bağlantılarınıza Alt Çizgi Özelliği Ekleyin

Gövde bağlantılarına alt çizgi özelliği ekleyin.

a {
    text-decoration: underline;
}

Sonraki Projeniz için Divi Özelleştirici Ayarlarını Dışa ve İçe Aktarma

Divi Tema Özelleştiricileri, kullanıcıların Özelleştirici Ayarlarını dışa veya içe aktarmasına olanak tanıyan bir taşınabilirlik seçeneğine sahiptir. Bu, geliştiricilere gelecekteki projelerinde kullanmak üzere bir tür özelleştirici ayar şablonu oluşturmaları için harika bir fırsat sunuyor.

İlk olarak, bir web sitesi oluştururken hangi özelleştirmeleri yapma eğiliminde olduğunuzu anlamak için zaman ayırmanızı öneririm. Bu ayarları belirledikten sonra, bu özelleştirmeleri Divi Theme Customizer'a girebilir ve ardından sonraki projelerinize önde başlamak için bu ayarları dışa aktarabilirsiniz. Zaten yaptırabilecekken neden aynı şeyleri tekrar tekrar yapmaya devam ediyorsun? Ayrıca, bu, önemli özelleştirmeleri atlamadığınızdan emin olmanıza yardımcı olacaktır.

Ayarlarınızı dışa aktarmak için Divi Tema Özelleştirici'nin üst kısmındaki taşınabilirlik simgesine tıklayın.

Dışa aktarma dosyasına bir ad verin ve “Divi Özelleştirici Ayarlarını Dışa Aktar” düğmesini tıklayın.

Artık bu .json dosyasını gelecekte Divi Tema Özelleştirici'deki aynı taşınabilirlik simgesine tıklayarak ve dışa aktarma yerine İçe Aktar'ı seçerek kullanabilirsiniz. Ardından tek yapmanız gereken .json dosyasını yüklemek ve “Divi Özelleştirici Ayarlarını İçe Aktar”a tıklamak.

Ve bu kadar.

Divi Özelleştirici Ayarları Neleri İçerir?

Kişiselleştirici ayarları, temel olarak ilk 7 bölümdeki her şeyi içerir.

1. Genel Ayarlar
2. Başlık ve Gezinme
3. altbilgi
4. Düğmeler
5. Blog
6. Mobil Stiller
7. Renk şemaları

Son 4 bölüm WordPress'e özgüdür ve diğer Divi Kurulumlarına taşınmaz. Bu bölümler şunları içerir:

1. Menüler
2. Widget'lar
3. Statik Ön Sayfa
4. Ek CSS

Ek CSS'nin aktarılmadığına dikkat etmek önemlidir. Bir sonraki yapınızda size zaman kazandıran bir destek sağlamak için bu ayarlara güveniyor olabilirsiniz. Bu durumda, bir sonraki projenizde Özelleştirici Ayarlarınızla ekleyebilmeniz için o CSS ile bir alt tema oluşturmanızı öneririm.

Divi Özelleştirici Stilleri Nasıl Depolanır?

Divi Özelleştirici için (Divi Seçenekleri ve Divi Builder ile birlikte), Divi, sayfa yükleme süresini azaltmak için tarayıcılar tarafından önbelleğe alınabilen statik CSS kaynakları sunar. Bu, stillerin sayfada yazdırılmadığı, ayrı bir statik CSS dosyasında depolandığı anlamına gelir. Özelleştirici Ayarlarınızı her kaydettiğinizde, statik CSS dosyası güncellenir. Bu, eklediğiniz tüm Ek CSS'leri de içerir.

Kapanış Düşünceleri

Divi Theme Customizer, bazı oldukça güçlü seçeneklerle birlikte gelir ve özelleştirme süreci, çalışmak için hem uygun hem de eğlencelidir. Ve bu seçeneklerin neler yapabileceğine dair daha derin bir anlayış kazanmak, Divi ile web siteleri oluşturma şeklinizi kesinlikle iyileştirecektir. Henüz yapmadıysanız, bir proje için en uygun temel ayarlarınızın ne olacağını keşfetmek için biraz zaman ayırın, bunları Özelleştiriciye takın ve bir dışa aktarma dosyası oluşturun. Yeni bir projeye başlarken bunun size sağlayacağı desteğe (ve güvene) şaşıracaksınız.

Yorumlarda sizden haber bekliyorum.

Şerefe!