Divi tema ayarı için ana kılavuz
Divi Tema Ayarlaması, Divi temasında ayarlamalar yapmak için güçlü ve konforlu bir araçtır. Visual Builder gibi, Divi Tema Özelleştirici, tahmin oyunlarını özelleştirme sürecinden ortadan kaldıran görsel ön uç ve tasarım değişikliklerinin özelleştirilmesine olanak tanır. Verimli kullanılırsa, bu araç iyi bir zaman olabilir ve gelecekteki projeler için başlayabilir. Bugünün gönderisi, tema ayarının nasıl çalıştığını daha iyi anlamanıza yardımcı olmayı amaçlamaktadır, böylece gelecekteki projeler için verimliliği artırmak için kullanabilirsiniz. Özellikle Divi için seçeneğe vurgu yaparak tema ayarında bulunan neredeyse tüm seçenekleri ekledim. Bir yandan, bu yazı, yol boyunca birkaç derinlemesine açıklama ve tasarım ipuçları sunan belgelerin bir parçası olarak hizmet vermektedir. Ayrıca, bir sonraki projenizde kullanılacak özelleştirici ayarlarını nasıl dışa aktaracağınızı da göstereceğim.
Tartışacak birçok şeyimiz var, bu yüzden baştan başlayalım. Temayı ayarlama zihninde WordPress ile inşa edilmiş WordPress 3.4’te tanıtıldı. Bu rahat özellik, WordPress kullanıcılarının temalarında yaptıkları değişikliklerin önizlemesini gerçek zamanlı olarak görmelerini ve ardından değişiklikleri tek bir tıklamayla kaydetmelerini sağlar. Birçok pencere ve sayısız tazeleme almak için kullanılan şey artık bir tarayıcı penceresinde hızlı bir şekilde yapılabilir. İşte TwentyEventeen temasında özelleştirici teması seçeneğinin bir örneği:
Öte yandan, Divi Tema Özelleştirici, bu özelleştirici temasının her türlü özel seçenekle birlikte geliştirilmiş bir sürümü olarak oluşturulmuştur. Kullanıcılar için bu, Divi ayarlama işlemini çok daha kolay hale getirir. Ve düzenleme yaparken (aynı anda) rahat bir tasarım aracı haline getirirken ayarlamaları gerçekten görebilmeniz. Divi Tema Özelleştirici hala birçok standart WordPress özelleştirici seçeneğine sahiptir, ancak daha fazlası da vardır. Gördüğünüz gibi, Divi tema özelleştiricisine eklenen daha fazla ayar var. Şimdi bunu daha derinlemesine keşfetmeye başlayalım. Genel Ayarlar
Temanızı ayarlamaya başladığınızda, en iyisi yukarıdan genel ayarlarla başlamak ve aşağı inmek olduğunu düşünüyorum. Site kimliği Bu bölüm Divi için benzersiz değildir. Bu, siteniz için site başlığını ve sloganını değiştirmek için rahat bir yerdir. Divi temasına ekleyebileceğiniz favicon simgesinin aksine tarayıcılar ve uygulamalar için kullanılan site simgesini de girebilirsiniz. Görüntü ayarları Düzen ayarları, parçalar ve satırlar arasında ne kadar boşluk ve daha sonra ana içeriğinizin maksimum kısmının ne kadar geniş bir kısmını belirleyerek tema çerçevenizi ayarlamanıza olanak tanır. Kutu Düzenini Etkinleştir Burada, sitenizi site içeriğinizi çerçeveleyen ve ayarlanabilir bir arka plan gösteren bir kutu düzenine dönüştürebilirsiniz. Web sitesi içeriğinin genişliği, içeriğinizin maksimum genişliğini ayarlayabileceğiniz yerdir. İçeriğiniz duyarlı düzende olduğundan, daha küçük bir boyuta ayarlanacaktır, ancak burada ayarlanan maksimum genişlikten daha geniş olmaz. Varsayılan 1080px olarak ayarlanır. Bu, çoğu standart dizüstü bilgisayar ve masaüstü bilgisayar için iyi bir genişliktir. Web sitesi genişliği Her satırdaki sütun arasındaki yatay boşluk (marj) sayısına göre oluk genişliğinin genişliği. Oluk genişliği için isteğe bağlı değer, sütun arasındaki sıfır marjı temsil eden 1 ila 4 arasında değişir. 2, sütun arasında% 3’lük sağ marjı temsil eder. 3, sütunda% 5.5 sağ marjı temsil eder. 4, sütunlar arasında% 8 sağ marjı temsil eder. Bu özel kenar çubuğu genişliğini kullanın, temanız için varsayılan yan bıçakların genişliğini belirleyin. Bu, temanızdaki bir yan çubuk olan ve Divi Builder kullanılarak yapılmayan tüm sayfalar için geçerlidir. Bu seçenek çizgisinin kısmı ve yüksekliği, her bölüm ve satır için dikey alan miktarını (üst ve alt dolgu) ayarlar. Varsayılan olarak, dolgu bölümü üst ve altta 50 pikseldir. Satırlar için varsayılan dolgu üst ve altta 30px’dir. Ancak, bir özelleştirici kullanarak dolgu bölümünü veya satırını değiştirerek, dolgu değeri tema ayarındaki kadran seçeneğindeki numaralara göre bir yüzde olarak değişir.
Örneğin, “0”% 0 üst ve alt pedleri temsil eder, “1” üst ve alt rulmanların% 1’ini temsil eder, “2”% 2’yi temsil eder. Dolgu yüzdesi, kabın genişliğine (parça veya satır) dayanır. Yani parçanın gerçek genişliği 1080px ise ve parçanın yüksekliğini 1’e ayarladıysanız, bu … 1080px x 0.01 = 10.8 piksel … üst ve altta 10.8px dolma. Seçim 0 ila 10 arasında değişmektedir, böylece%10 dolguya sahip olabilirsiniz. Diğer öğeleriniz için rengi değiştirmeye başlamadan önce tema aksan rengi, önce değiştirmeniz gerekir. Değiştirdikten sonra ayarlarınızı kaydedin ve yayınlayın ve sayfanızı yenileyin. Şimdi güncellenmiş tema aksan rengi diğer öğeleri otomatik olarak doldurmalıydı.
Tema aksanının renginin güncellenmesi de aşağıdakileri güncelleyecektir:
Vücut bağlantısının rengi Widget gölgelik rengi
Widget mermi rengi
Sosyal altbilgi simgesi sevgili renk
Simgeler için varsayılan renk
Aktif Bağlantı Renk Altbilgisi Menüsü
İkincil menünün arka plan rengi
Slayt ve tam ekran başlık tarzı slayt rengi
Hücresel menü renkleri için Hamburger menü simgesi
Ana menünün aktif rengi
Açılır menü satırı rengi
İkincil menünün arka plan rengi
İkincil açılır menünün arka plan rengi
İkincil menünün arka plan rengi
Ana menü bağlantısının rengi etkin
Aktif Bağlantı Renk Altbilgisi Menüsü
Tipografi
Bu, web sitenizin kullanıcılar ve geliştiriciler tarafından göz ardı edilme eğiliminde olan en önemli yönlerinden biridir. Bu seçeneği görmezden gelerek hata yapmayın. Bu ayrıntıyı doğru almak büyük bir fark yaratabilir. Modül seviyesinde ayarlamalar yapmanıza gerek olmadığı için temanız için varsayılan tipografiyi de uzun vadede kaydedebilir. Varsayılan boyut 14px’dir. Tasarım İpucu: 14 piksel standart metin boyutu için biraz fazla küçük. Temel gövde yazı tipi boyutunuz için gerçekten 16px’den az olamazsınız. Neredeyse 40 yaş ve üstü olan biz minnettar olacağız. Aslında, çoğu tarayıcı temel standart yazı tipi ölçümleri olarak 16px kullanır. Bireysel metnin her satırının çizgisinde yüksek vücut çizgilerinin yüksekliği. Tasarım İpucu: Çizginin yüksekliği “EM” uzunluğu ile ölçülür. Varsayılan Divi, içerik metni için 1.7EM’dir. Bu EM değeri, geçerli yazı tipi öğesi boyutuna dayandığı ve bu nedenle üst içi satır değeri (veya bizim durumumuzda geçerli yazı tipi boyutu) ile deşarj edildiğinden Pixel değerinden (PX) daha iyidir. “1.7em” değeri temel olarak geçerli yazı tipi boyutunun 1.7 katını temsil eder. Mevcut yazı tipi boyutunuz 16px ise, hattın yüksekliği 27.2 piksel olacaktır. Bu size üstte 5.6 piksel ekstra alan ve altta 5,6 piksel verir. Bu, okunabilirlik için iyi bir başlangıç (kopyalar arasında boşluk) gibi görünüyor.
Divi kafa metin boyutu, varsayılan H1 başlık metin boyutunuzu burada ayarlamanızı sağlar. Bu, Divi öğesini tam geniş başlık modülünün başlığı gibi etkiler. Diğer başlık seviyesi boyutunu (H2, H3, vb.) Ayarlamak istiyorsanız, ek CSS’ye eklemenizi öneririm (bu daha sonra yayınlamada tartışılacaktır). Tasarım İpucu: Çoğu durumda, sayfa başına yalnızca bir başlığınız olacaktır, bu nedenle hesaplanmasını sağlayın. Bunu kitabın kapağındaki başlık olarak düşünün. Birinin fark edildiği ilk şey bu. Ve popüler sloganın aksine, insanlar hala bu durumda, özellikle bu durumda kitapları değerlendirir. Başlık metninin boyutu için varsayılan değer 30 pikseldir. Bu başlamak için iyi bir güvenli önlemdir. Özellikle bazı başlıklar daha uzun bir kopya gerektireceğinden. Bununla birlikte, büyüyen monitör ekranının boyutunu karşılamak için daha büyük bir başlık boyutu seçme eğilimindeyim. Ayrıca, çoğu müşteri, daha büyük bir yazı tipi boyutuyla daha iyi görünen “Hakkımızda” ve “Bize Ulaşın” gibi basit ve kısa başlıklara sahip bir web sitesine ihtiyaç duyar. H1 başlığımı en az 48px’e ayarlamayı seviyorum. Harfler arasında yatay boşlukları ayarlayan mektupların başı boşluk başı. Üstbilgi aralık değerleri tüm başlık seviyelerini (H1, H2, H3, H4, H5, H6), blokquotes ve slayt başlıklarını etkiler. Tasarım İpucu: Bu, daha büyük metinler için harfleri azaltmak ve daha küçük metinler için harfleri arttırmak için iyi bir tasarım tekniğidir. Başlıklar açısından, daha büyük (kalın) yazı tipi ağırlığına sahip daha büyük metin, uzay alanında -1px’teki bir azalma ile daha iyi görülebilir.
Bununla birlikte, aynı başlığı büyük harfe koyarsanız, harf alanını 1-2px’e yükseltmenin daha iyi görüneceğini görebilirsiniz. Kafanın başlığı, harf alanının değeri ile aynıdır, başlık çizgisinin yüksekliği etkiler Başlığın tüm seviyeleri (H1, H2, H3, H4, H5, H6), Blok Quotes ve Slayt Başlığı. Yazı tipi boyutu daha büyük olduğundan, 1EM varsayılan ayarlardır. Özellikle başlık iki veya daha fazla sıraya gittiğinde, 1EM ve 1.3EM arasındaki bir yerde çizginin yüksekliği iyi görünüyor. Head Font Style, yazı tipi başlık stilinizi değiştirmek için bu seçeneği kullanır. Divi’deki varsayılan yazı tipi başlığı ve gövde yazı tipi açık sans’dır, ancak Divi tema özelleştiricisinin aralarından seçim yapabileceğiniz yaklaşık yüz yazı tipi vardır! Bu varsayılan yazı tipinden ve temanız için en uygun testten yararlanın. Tasarım İpucu: Font ortakları için ilham için, Google yazı tipini bir araya getirmeye yardımcı olan fontpair.co’yu görebilirsiniz. Divi, kutunun dışındaki tüm bu yazı tiplerini desteklemeyecektir, ancak birlikte iyi çalışan çiftleri görmek için Divi tarafından desteklenen yazı tiplerini arayabilirsiniz.
Renk Gövde Bağlantısı Vücut bağlantısının rengi, tema aksanınızın rengi ile miras alınır. Ama burada her zaman değiştirebilirsiniz. Tasarım İpucu: İsterseniz, ek CSS kullanarak tüm vücut bağlantılarınıza alt satır özniteliğini ekleyebilirsiniz (yazının sonuna bakın). Buradaki vücut metninin rengi vücut metninizin rengini değiştirebilirsiniz. New York Times ve Smashing Magazine gibi popüler bloglar, vücut metninin rengi için #333333 kullanıyor. Bence bu beyaz arka planda daha iyi okuma eğilimindedir. Kafa metninin rengi buradaki başlığınızın rengini değiştirebilirsiniz. Hala siyah kullanıyorsanız, biraz öne çıkması için içerik metninden biraz daha karanlık olacağım. #121212 gibi bir şey başarılı olacak. Bu arka plan, temanızın arka planı ayarlanmıştır. Divi temaları için, bu seçenek gerçekten sadece kutu düzeni için geçerlidir. Burada değiştirmedikçe varsayılan arka plan rengi beyazdır (#ffffff). İsterseniz bir arka plan resmi de ekleyebilirsiniz.
Düzen ayarları için hepsi bu. Bir düzen aldıktan sonra, daha spesifik unsurlar görmeye başlayabilirsiniz. Palto ve Navigasyon
Başlıklar ve navigasyon menüleri, temanızın en önemli unsurları olabilir. Bu bölümün istediğiniz her tür başlığı yapmak için birçok seçeneği vardır. Başlık Biçimi Stil Four Style Style, web sitenizde tek bir tıklama ile yeni bir görünüm sağlayabilir.Bu stil merkezlenmiş, merkezlenmiş logo, slayt ve tam ekran içerir.Sitenize benzersiz bir özellik olabilecek dikey navigasyon da ekleyebilirsiniz.Ve gezinene kadar navigasyonu gizlemeyi seçebilirsiniz.Bu, navigasyon bıçakları paraziti olmadan en iyi paroda daha fazla içeriği vurgulamak isteyen bir sayfa sitesi için yararlı olacaktır.Ana menü çubuğu Ana menü çubuğunuz, web sitesi başlığınızdaki ana menüdür. Ana menünüzün görünümünü tamamen ayarlayabilirsiniz. Tasarım İpucu: Divi tema özelleştirici ile menüyü mükemmelleştirmeye başlamadan önce menü bağlantınızın ne olduğunu bilmeniz gerekir. Duyarlı bir menü ayarlayacağınızı unutmayın, bu nedenle menünün tüm ekran boyutlarında iyi göründüğünden emin olmak için zaman ayırın. Bunu ayarlamanın altındaki cihaz simgesini tıklayarak veya yalnızca tarayıcınızın boyutunu ayarlayarak yapabilirsiniz. İlgileniyorsanız, duyarlı navigasyonunuzu burada nasıl düzelteceğinizi öğrenebilirsiniz. Bu tam genişliği, tarayıcı penceresinin tam genişliğiyle menüyü genişletin. Logo resmini gizle İsterseniz, burada logo görüntüsünü menünüzden tamamen gizleyebilirsiniz. Buradaki menünün yüksekliği, menünün yüksekliğini istediğiniz her şeye değiştirebilirsiniz. Buna rağmen, menüden çok büyük yapmamaya dikkat edin, çünkü ana sayfa içeriğiniz yerine menüde değerli gayrimenkulden kurtulabilirsiniz. Maksimum Yüksek Logo Burada, daha büyük veya daha küçük hale getirmek için logonuzun maksimum genişliğinin yüzdesini artırabilir veya azaltabilirsiniz. Metin boyutu, harf alanı, yazı tipi, yazı tipi stili, metin rengi, aktif bağlantı rengi Bu seçenek menü bağlantısını istediğiniz şekilde ayarlamanıza olanak tanır. Bu arka plan rengi, ana menünüzün arka plan rengini değiştirmenizi sağlar. Tasarım İpucu: Başlığınız için yarı şeffaf bir renk (veya tamamen şeffaf) kullanırsanız, Divi görülmeden alttaki başlığı otomatik olarak kaplar. Bu oldukça harika bir etki yaratır. Örneğin, bu, şeffaf bir arka plana ve doğrudan altında tam geniş bir gölgeye sahip merkezi bir başlık kuvvetidir. Divi’nin arka plan görüntüsünü başlayıcıya uyacak şekilde otomatik olarak nasıl ayarladığını unutmayın: Ayarlar açılır menüsünü ayarlar ve ana menü stilini devralmanız gerekmez. Burada açılır menünüz için benzersiz bir tasarım oluşturabilirsiniz. Bir römorkör menü görüntülerken özel bir animasyon bile ekleyebilirsiniz. İkincil menü çubuğu Burada sağlanan seçenekleri kullanarak ikincil menü çubuğunu ayarlayabilirsiniz. Etkinleştirildiğinde, ikincil menü çubuğu tarayıcınızın en üst kısmındaki ana menü çubuğunun üzerindedir. E -posta adresleri, sosyal medya bağlantıları ve ikincil menüler dahil olmak üzere ek unsurları barındırabilir. Varsayılan olarak, ikincil menüye girmedikçe veya başlık öğesinin altına öğeler eklemediğiniz sürece ikincil menü gizli kalacaktır. Menüyü görmek için tema ayarını saklamanız ve yenilemeniz gerekebilir. Sabit Gezinme Ayarları Navigasyon hala “onarılmış” menü durumunu ifade eder veya kullanıcı sayfayı aşağı çektiğinde tarayıcı penceresinin üstünde tuzağa düşürülür. Varsayılan olarak, navigasyon, site içeriğini görüntülemek için daha büyük bir görünüm alanı sağlamak için yüksek büzülmeye devam eder. Tasarım İpucu: Ana menünün arka plan rengini, arkasındaki içeriklerin bir kısmını ortaya çıkarmak için yarı sayaç renginde kalacak şekilde de ayarlayabilirsiniz. Bu onu daha yanlış ancak yine de erişilebilir hale getirir. Gölgelik unsuru Başlık öğesi, başlığa ekleyebileceğiniz ek bir öğedir. Bu öğeler arasında sosyal simgeler, arama simgeleri, telefon numaraları ve e -postalar bulunur. Arama simgesine ek olarak, tüm bu öğeler ikincil menüde görüntülenecektir. Varsayılan olarak Sosyal Memonlar Facebook, Twitter, Google+ ve RSS için simgeler görüntüler. Bu profili Divi tema seçeneğinde düzenleyebilirsiniz. Dipnotlar Varsayılan olarak, altbilgi bölümü içerikle doldurulmadıkça gizlenir. Ayrıca, altbilgi varsayılan olarak sitenin en altında görüntülenen alt bıçaklarla eşitlenmemeli ve altbilgi ve sosyal simgeler içermelidir.
Buradaki düzen, altbilginiz için 5 düzen arasından seçim yapabilirsiniz. Ayrıca, varsayılan olarak #222222 olarak ayarlanan altbilgideki arka plan rengini de ayarlayabilirsiniz. Tasarım İpucu: Bu bölüm tüm site sayfalarınızda görüntülenecektir (boş bir sayfa şablonu seçmediğiniz sürece). Bu nedenle, tüm site sayfalarınızla eşleşmesi için rengi daha nötr hale getirmek mantıklıdır. Araç
Altbilgiye bir widget eklerseniz, widget ekranını buradan ayarlayabilirsiniz. Widget Divi için benzersiz değildir. Bu, WordPress üzerine inşa edilmiştir ve görünüm> widget’ların altındaki WordPress kontrol panelinde bulunabilir. Orada bir widget ekleyebileceğiniz altbilginin dört alanını görebilirsiniz. Bu bölüme eklediğiniz herhangi bir widget, altbilgi alanınızda görüntülenecektir. Bununla birlikte, tema ayarını (bununla ilgili en sevdiğim şeylerden biri) bırakmak zorunda kalmadan widget alanına da erişebilirsiniz. Dipnot öğeleri
Burada sosyal simgeni ikincil menüde olduğu gibi aşağıdaki bıçaklarda görüntülemeyi seçebilirsiniz. Dipnotlar menüsü Bir altbilgi menünüz varsa, burada düzenleyebilirsiniz. Alt çubuk web sitenizin en altında ve varsayılan olarak altbilgi ve sosyal simge kredilerinizi görüntüler. Burada, sosyal ikon yazı tiplerinin boyutunu ve rengini değiştirme de dahil olmak üzere bu öğenin stilini ayarlayabilirsiniz. Altbilgi kredinizi düzenleyin Varsayılan altbilgi kredisini de bu kutuda istediğiniz HTML ile değiştirebilir. Bu bölüm, istediğiniz varsayılan düğme stilini kontrol eder. Düğme Stili Burada temanız için düğme stilini ayarlayabilirsiniz. Burada her seçeneği ayrıntılı olarak tartışmayacağım. Düğmeyi nasıl düzenleyeceğiniz hakkında daha fazla bilgi için Düğme Modülünde belgelerimizi görebilirsiniz. Metin Rengi Dikkat ederseniz, varsayılan olarak, düğmenin rengi genel ayarlarda ayarlanan tema aksanı ile devralınır. Bu yalnızca metni “karanlık” olarak ayarlanan modüller içindir. Ve modül metni “ışık” olarak ayarlandığında düğme beyazdır. Ancak, düğmeniz için özel bir metin rengi ayarlar ayarlamaz, bu renk belirli bir modüldeki karanlık ve parlak metin sürümü için ayarlanır. Tasarım İpucu: Tema aksanınızın rengini bırakın Düğmenizin karanlık ve parlak sürümünü modülünüze ekleyebilmeniz için düğme metninizin rengini ayarlayın. Stil Noktası Düğmeyi Burası, Hover düğmenizin durum stilini ayarlayabileceğiniz yerdir. Kullanıcıların tıklayacaklarının aslında bir düğme olduğunu anlamaları önemlidir. Hover’ın etkisini eklemek bunu akılda tutar ve etkileşim kurmaya teşvik eder. Varsayılan bir divi olmak parlak bir arka plan ekledi ve ok simgesini sağa canlandırdı. Ancak, istediğiniz her şeye dönüştürebilirsiniz. Tasarım İpucu: Arka planı daha koyu veya daha parlak bir renge değiştirirseniz, düğmenin çeşitli şekillerde değişmesini sağlamak kadar önemli değildir. Ayrıca, imleci işaret ederken düğmenizde benzersiz bir etki vermek için harfler mesafesi ekleyebilir veya sınır yarıçapını ayarlayabilirsiniz. Bu Posbagian blogu, bir gönderide post başlık içeriğinin stilini değiştiriyor. Bu, blog sayfanızdaki veya blog modülünüzdeki blog teklifinizin görünümünü değiştirmez. Bazen blogunuzun başlık gönderisi, sitenizin diğer kısımlarındaki başlıktan farklı görünmesi gerekir. Bu, ayarlamayı yapacağınız yerdir. Post başlık modülünü kullanmayı seçerseniz, bu seçenek etkili olmayacaktır. Hücresel tarzım bu bölümü sever. Burada sitenizin görünümünü mobil cihazlarda ayarlayabilir ve sonuçları gerçek zamanlı olarak görebilirsiniz. Tablet ve telefon stili Ayarın sağındaki bir tablet veya telefon ve pencere seçebilirsiniz. Daha sonra düzenin altındaki genel ayarlarda yaptığımız gibi, parçanın yüksekliğini, çizginin yüksekliğini, gövde metni boyutunu ve başlık metni boyutunu ayarlayabilirsiniz. Tasarım İpucu #1: Telefon düzeni için yapmayı sevdiğim bir ayar, hattın yüksekliğini “0” olarak ayarlamaktır. Bu, cep telefonlarında kaydırılırken daha iyi bir içerik akışı yaratır, çünkü çizgiler arasındaki mesafeyi ortadan kaldırır. Tasarım İpucu #2: Siteniz için uygun yazı tipi ölçeğini bulun. Bu, başlığım için takip etmek istediğim iyi bir şey: Masaüstü: 48px Tablet: 40px Telefon: 32px Mellular Menü Bunu görmezden gelin veya hücresel menünüz için gerçekten benzersiz bir başlık yapmayı kaçırabilirsiniz. Logoyu yalnızca mobil cihazlarda gizleyebilir ve renk arka planını ve metni değiştirebilirsiniz. Renk uyumu Bu hızlı çözümler için rahat olabilir. Ancak, tema ayarında bu renklerin bazılarını daha sonra değiştirmeyi planlıyorsanız bir renk şeması kullanmanızı önermiyorum. Ayarlandıktan sonra, bu renk özelleştiricide değiştirilemez, çünkü ortaya çıkan CSS kurallar içerir! Önemlidir. Bence en iyisi, bu ayarın varsayılana izin vermektir. Menü ve widget artık WordPress kontrol panelinde menüleri veya widget’ları körü körüne düzenlemek zorunda değildir. Şimdi bu öğeyi ekleyebilir ve ayarlayabilir ve bunun gerçek zamanlı olarak sayfanızda gerçek olduğunu görebilirsiniz. Konforu seviyorum! Statik Ön Sayfa Varsayılan olarak, WordPress en son yayınınızı ön sayfadaki (ana sayfa) görüntüler. Bunu bu bölümde istediğiniz herhangi bir statik sayfaya dönüştürebilirsiniz. Ayrıca gönderi sayfanızı (veya blog sayfanızı) da belirleyebilirsiniz. Bunu bu yazıyı yazmak için bilmiyorum, ancak ayardan ayrılmak zorunda kalmadan temaların ayarlanmasından yeni bir sayfa kullanabilirsiniz. Ek CSS bölümü, tema ayarlarınıza son bir dokunuş vermek için harika bir fırsat sunar. Divi temasının ayarlanmasıyla kontrol edilemeyen herhangi bir tarzda değişiklikler, burada bazı özel CSS ile yapabilirsiniz. Customerer, CSS değişikliklerini gerçek zamanlı olarak görmenize izin verdiğinden, temanız için gereken ayarları harici stil sayfasında ileri geri gitmekten çok daha kolay hale getirebilirsiniz. Ek CSS Örneği Örnek #1: Tüm başlıkların boyutunu ayarlayın Ek CSS’nin iyi bir örneği, kalan başlık etiketleriniz için düzenlemedir. Divi, başlık yazı tipiniz için ayarları ayarlamanıza izin verir, ancak bu yalnızca H1 başlığınız içindir. Diğer başlık etiketi özelleştirme (H2, H3, H4, vb.) Girmek için ek bir CSS kutusu kullanabilirsiniz. Aşağıdaki ölçeği kullanmayı seviyorum: 16, 18, 21, 24, 36, 48. H2 { yazı tipi boyutu: 36px; } H3 { yazı tipi boyutu: 24 piksel; } H4 { yazı tipi boyutu: 21px; } H5 { yazı tipi boyutu: 18px; } H6 { yazı tipi boyutu: 16px;}
Örnek #2: Alt paragrafın dolgusunu, içerik metin çizgisinin yüksekliğini 1.7EM olarak ayarlarsanız, aynı değeri bir süresi korumak için aynı değeri paragraflar arasındaki alt dolgunuza ayarlamak isteyebilirsiniz. Tutarlı dikey taban çizgisi ve ritim.Başka bir deyişle, paragraflar arasındaki mesafe çizginin yüksekliğine eşittir.Bunu yapmak için aşağıdakileri ekleyebilirsiniz: P {Palyding-Diptom: 1.7em}
EM uzunluğunun değeri ana yazı tipinin boyutuna dayandığından, temel yazı tipinin boyutunu tema ayarındaki başka bir şeye değiştirirseniz, 1.7EM değeri ayarlanır.Örnek #3: Alt satır özniteliğini ekle bağlantıya Alt satır özniteliğini gövde bağlantısına ekleyin.A {
Metin dekorasyonu: alt hat;
}
Bir sonraki proje ayarlama Divi temanız için divi ayar ayarlarını dışa aktarma ve içe aktarma Divi teması, kullanıcıların ayarlama ayarlarını dışa aktarmasına veya içe aktarmasına olanak tanıyan bir taşınabilirlik seçeneğine sahiptir. Bu, geliştiricilerin gelecekteki projelerinde kullanım için bir tür ayarlama ayarları yapmaları için harika bir fırsat sunar. İlk olarak, bir web sitesi oluştururken hangi ayarlamaları yapacağınızı öğrenmek için zaman ayırmanızı öneririm. Ayarları tanımladıktan sonra, Divi tema özelleştiricisine ayarlamayı girebilir ve ardından bir sonraki projeyi başlatabilmeniz için ayarları dışa aktarabilirsiniz. Bunu yapabildiğinizde neden aynı şeyi tekrar tekrar yapmaya devam ediyorsunuz? Ayrıca, bu, herhangi bir önemli ayarlamayı kaçırmadığınızdan emin olacaktır. Ayarlarınızı dışa aktarmak için Divi temasının üst kısmındaki taşınabilirlik simgesini tıklayın. Dışa aktarma dosyası adınızı verin ve “Ayarlar Dışa Aktar” Divi düğmesini tıklayın
Artık divi tema ayarındaki aynı taşınabilirlik simgesini tıklayıp dışa aktarma yerine ithalat seçerek bu .json dosyasını gelecekte kullanabilirsiniz. O zaman tek yapmanız gereken .json dosyasını yüklemek ve “Divi ayar ayarlarını içe aktar” ı tıklamaktır.
Ve hepsi bu. Divi ayar ayarlarında neler dahildir? Ayarlama düzenlemesi temel olarak ilk 7 bölümdeki her şeyi içerir.
Genel Ayarlar
Palto ve Navigasyon
dipnot
Top
Blog
Hücresel kuvvet
Renk uyumu
Son 4 parça özellikle WordPress içindir ve diğer Divi kurulumlarına alınmayacaktır. Bu bölümler şunları içerir:
Menü
Araç
Statik Ön Sayfa Ek CSS Ek CSS’nin taşınmadığını belirtmek önemlidir. Bir sonraki yapıda zaman tasarruflarında bir artış sağlamak için bu ayarlara güvenebilirsiniz. Eğer öyleyse, bir sonraki projenize ayar ayarlarıyla ekleyebilmeniz için CSS ile bir alt tema oluşturmanızı öneririm. Divi’nin ayar stilinin Divi özelleştirici için nasıl saklandığı (Divi seçenekleri ve Divi Builder ile birlikte) Divi, sayfa açık süresini azaltmak için tarayıcı tarafından önbelleklenebilecek statik CSS kaynakları sunar. Bu, kuvvetin sayfaya yazdırılmadığı, ancak ayrı bir statik CSS dosyasında saklandığı anlamına gelir. Ayar ayarlarını her kaydettiğinizde, statik CSS dosyaları güncellenir. Bu da eklediğiniz ek CSS içerir. Divi tema özelleştiricisinin kapanış düşünceleri bazı oldukça güçlü seçeneklerle birlikte gelir ve ayarlama sürecinin rahat ve kullanımı eğlencelidir. Ve bu seçeneğin neler yapabileceğini daha iyi anlamak, Divi ile web siteleri oluşturma şeklinizi kesinlikle geliştirecektir. Bunu yapmadıysanız, bir proje için optimal temel ayarlarınızı keşfetmek, özelleştiriciye bağlanmak ve bir dışa aktarma dosyası oluşturmak için zaman ayırın. Yeni bir projeye başlarken verilecek teşvik (ve kendine güven) tarafından şaşıracaksınız. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
