Tüm sitenizi şekillendirmek için Divi 5'in varsayılan ön ayarlarını kullanarak

Option grup ön ayarlarının gelişi Divi 5'te çok sayıda yeni olasılık açtı. Nick, bunun yıllar içinde Divi'ye vurmak için en önemli özellik olduğunu söyledi ve onları test ederken, neden neden söylediğini göreceksiniz .

Zaten öğe hazır ayarlarına alışkınsınız, ancak seçenek grup ön ayarları, kullanmayı asla bırakmayacağınız yepyeni bir tasarım kontrolü katmanı ekler. Ancak, her iki ön ayar türü “ varsayılan ön ayarları ” destekler. Aşağıdaki 2000 kelime boyunca size göstermek istediğim şey bu.

Divi 5'te varsayılan ön ayarlar nelerdir?

Varsayılan ön ayarlar, web sitelerinizde düzenlemek isteyeceğiniz ilk ön ayarlardır. Birçok yönden, bunlar tema özelleştirici için toplam bir yedektir.

Bir sayfayı düzenledikten hemen sonra çalışabileceğiniz iki tür varsayılan ön ayarınız var - varsayılan öğe ön ayarları ve varsayılan seçenek grup ön ayarları . Önce öğe ön ayarlarını kapsayalım çünkü daha tanıdık olduğu için, ancak tüm tasarımlarınızı seçenek grup ön ayarlarıyla başlatmak isteyeceksiniz.

Varsayılan öğe ön ayarları

Eleman ön ayarları, web sitenizde birçok kez kullanacağınız bir öğeyi tasarlamak için hızlı bir şekilde çalışır. Eleman ön ayarlarıyla, bulanıklık modülü gibi bir modül alabilir ve modülün varsayılan ön ayarını düzenleyebilirsiniz. Varsayılan ön ayar düzenlendikten sonra, sitenize yeni bir bulanıklık modülü eklenirken aynı stilleri kullanır (çünkü yeni öğeler varsayılan ayarları kullanır).

Varsayılan öğe ön ayarını nasıl düzenlenir

Varsayılan bir ön ayar düzenleme basittir. Varsayılan ayarları değiştirmek istediğiniz öğeye tıklayın (bu durumda bir metin modülü). Sağ üstte, önceden ayarlanmış seçiciyi tıklayın.

Açılır menüsünde en az bir ön ayar görmelisiniz - o öğenin varsayılan ön ayarını. Ayarları (dişli simgesi) bulun ve ayarlar seçeneklerini belirli sayfa öğesinden varsayılan ön ayar için ayarlar seçeneklerine değiştirmek için tıklayın.

Ekmek kırıntıları (üzerinde çalıştığınız öğenin iç içe konumunu gösteren) kaybolduğunda ve “ ön ayar ” kelimesi Ayarlar panelinin sol üstte göründüğünde bir ön ayar düzenlediğinizi bileceksiniz. Ayrıca önceden ayarlanmış seçicinin “ varsayılan ön ayar ” dediğini ve maviye döndüğünü de fark edeceksiniz. Buradan, düzenlemek istediğiniz Eleman seçeneği grubuna gidin. Bu durumda, bu modül için metin içeriğinin boyutunu düzenlemek için Tasarım Sekmesi> Metin> Metin Boyutuna gitmeye karar verdim.

Değişikliklerinizin site çapında tutulması için “Ön Ses Kaydet” i tıklayın.

Bilmiyorsan
Bir süredir Divi'nin etrafındaysanız, modül ön ayarlarını biliyorsunuz. Eleman ön ayarları modül ön ayarlarıyla aynıdır, ancak bunlara modül ön ayarları çağırmak kafa karıştırıcıydı, çünkü ön ayarlar bölümler ve satırlar gibi modül dışı elemanlarda da kullanılabilir.

Divi 5'teki bir sayfanın tel çerçevesi görünümü. Bir modül olmak için kriterleri değil, daha ziyade bir konteyner için bu satırın nasıl ön ayarlara sahip olduğuna dikkat edin.

Varsayılan öğe ön ayarları, modüle farklı bir özel eleman ön ayarını (aşağıda daha fazla) uygulayarak veya stilleri doğrudan belirli bir modüle veya öğeye uygulayarak “geçersiz kılınabilir”. Divi, CSS gibi, özgüllük kurallarıyla çalışır ve bu durumda, bir modüle uygulanan ayarlar doğrudan varsayılan öğe ön ayarına uygulanan ayarlardan daha spesifiktir.

Ancak blokta ilk önce divi web sitelerinizi tasarlamanız gereken yeni bir ön ayar var.

Varsayılan seçenek grup ön ayarları

Divi'nin yeni seçenek grup ön ayarları, benzer seçenek gruplarını kullanabilecek çeşitli modülleri ve öğeleri kapsayan varsayılan stiller oluşturmanıza olanak tanır. Tüm bunlar “ varsayılan” seçenek grup ön ayarlarıyla yapılır. Bu yeni seçenek grupları kavramının ayrıntıları hakkında bulanıksanız, yazımızda daha fazla bilgi edinebilirsiniz, bu da size onlar hakkında bilmeniz gereken her şeyi anlatır.

Seçenek Grup Ön Ayarları hakkında bilgi edinin

Kısacası, farklı modüllerin farklı bileşimleri vardır (dört farklı öğeyi karşılaştıran bir örnek için aşağıdaki tabloya bakın).

Bir öğenin kompozit özellikleri diğerinin üst üste geldiğinde, stilleri seçenek grup düzeyinde paylaşabilirler - farklı modüller ve öğeler arasında benzer motifler tasarlarken zamandan tasarruf ettiğiniz anlamına gelir (birçok modül boyunca başlık metni gibi). Özellikle başlıklar, gövde metni, gölgeler, animasyonlar, yapışkan işlevsellik, sınırlar, aralık ve düğmelerle, web sitelerini çok, çok daha hızlı tasarlayacaksınız.

Varsayılan seçenek grup ön ayarını nasıl düzenlenir

Varsayılan bir seçenek grubu ön ayarını düzenlemek için bir modül veya satır/bölümün ayarları paneline gidin. Mevcut seçenek gruplarının (metin, başlık metni, düğmesi, arka plan vb.) Seçenekler ön ayarları destekleyen gruplar, o OG alanının sağ tarafında ilerlediğinde önceden ayarlanmış bir simgeyi ortaya çıkarır. Bu seçenek grubu için varsayılan ve özel ön ayarları göstermek için ön ayar simgesini tıklayın.

İşte tek bir modülün belirli bir yönünü düzenlemek ve aynı yönü bir seçenek grubu ön ayarıyla düzenlemek arasındaki farkı gösteren bir video.

UI, şu anda düzenlediğiniz seçenek grubu için UI ışıktan karanlığa değiştiğinde (bu durumda tam tersi) bir seçenek grubu ön ayarını düzenlediğinizi biliyorsunuz. Etkili olmaları için değişiklikleri kaydetmelisiniz.

Varsayılan ve özel ön ayarlar arasındaki fark nedir?

Varsayılan ön ayarlar, bir sayfaya veya şablona yerleştirilen yeni öğelere (modüller/bölümler/satırlar) otomatik olarak uygulanan stillerdir. Ne olursa olsun, Divi içindeki her öğe ve her seçenek grubunun varsayılan bir ön ayarı olacaktır. Varsayılan stillerin nereden geldiği aşağıya bakın.

Özel ön ayarlar , varsayılan ön ayarlar olarak yönetilmesi ve uygulanması kolay olan ancak otomatik olarak kullanılmayan ek ön hazır ayarlardır (bu özel ön ayarları varsayılan yerine uygulamanız gerekir). Tasarımın ihtiyaçları ne olursa olsun, karanlık bölümler, kenar çubukları ve yoğun içerik ekranları gibi özel durumlarda kullanılırlar.

Her web sitesi mümkün olduğunca varsayılan seçenek grup ön ayarları kullanılarak tasarlanmalıdır. Ardından, tasarım özelliklerine göre benzer durumları işlemek için ek özel seçenek grup ön ayarları oluşturulmalıdır. Bu OG ön ayarları kapsamında olmayan her şey varsayılan öğe ön ayarları ve özel öğe ön ayarlarıyla tasarlanabilir. Hala tasarlanması gereken kalan kenar durumları için tek tek modüllere stilleri doğrudan uygulayabilirsiniz.

Divi, tüm yeni özelliklerin yayınlanmasıyla heyecan verici bir aşamada. Gelişmiş birimler ve tasarım değişkenleri düştüğünde, tüm CSS birimleri ve işlevleriyle CSS değişkenlerini ayarlayabilirsiniz. Oradan, bu CSS değişkenlerini tüm ön ayarlarınızda kullanabilir ve tasarım iş akışınızı yaklaşık 10 kat daha tutarlı ve daha hızlı hale getirebilirsiniz.

Element ön ayarlarında yuvalama opsiyon grubu ön ayarlarına izin verecek şekilde planlanmış bir özellik vardır, bu da bunlara yerleştirilmiş opsiyon grubu ön ayarlarının mantığı ile öğe ön ayarları oluşturmanıza olanak tanır. Bu, bir OG ön ayarını düzenlediğinizde, ilgili eleman ön ayarlarını da değiştireceği (ve bunun tersi bir dereceye kadar) anlamına gelir.

Gelecek, Divi 5'teki tasarımcılar ve geliştiriciler için parlak görünüyor!

Özel bir ön ayar nasıl varsayılan bir ön ayara dönüştürülür

Varsayılan ön ayarlarımız var ve ayrıca özel ön ayarlarımız var. Varsayılan bir yerine özel bir ön ayar nasıl uygulanacağını gördük, ancak ya da varsayılan olarak yapmak isteyeceğimiz kadar çok hoşlanırsak?

Bu kolay. Eleman ön ayarlarına veya seçenek grubu ön ayarlarına gidin. Varsayılanınızı yapmak ve yıldız simgesini tıklamak istediğiniz özel ön ayarın üzerine gelin. Sonra değişikliklerinizi kaydedin . Ön ayarınız artık tüm web sitenizde varsayılan ön ayardır.

Varsayılan ön ayarlar içindeki stiller nereden geliyor?

Düzenlenmemiş varsayılan ön ayarlar, tema özelleştiricisinde bulunan stil değerlerini devralın. Neredeyse tüm WordPress temaları hala tema özelleştiricisinin bazı yönlerini kullanır (hatta blok temalar), ancak Divi bağlı olması için bunu yapmıştır, ancak kullanılması gerekmez . Muhtemelen gelecekte bir noktada özelleştiriciyi değiştireceğiz, ancak şimdilik, modern WordPress temalarının bile bir tuhaflığı olan WordPress Core'dan taşınan bir kalıntı.

Diyelim ki finansal danışman başlangıç ​​sitesini kullandım (somut bir örnek olarak). Tema özelleştiricisinde, başlık metni boyutu 30px olarak ayarlanmıştır.

Bir sayfa için görsel düzenleyiciye girerek, bir başlık veya metin modülü için “ varsayılan ön ayar ” ı tıklayarak ve H1 yüksekliği için tasarım> başlık metni altında kontrol ederek varsayılan ön ayarlarda kullanılan aynı değerin (30px) görebiliyorum.

Bir Divi 5 alanındaki gri değer, bu durumda, tema özelleştiriciden miras alınan kalıtsal bir değer olduğu anlamına gelir.

Ancak bu sadece bu başlangıç ​​sitesi tarafından ayarlanan varsayılan. İçe aktarılan bir düzen paketinden ön ayarları kullandıysanız veya sıfırdan başladıysanız, tema özelleştiricisinde farklı varsayılan değerler ayarlanır.

Bir web sitesi oluşturmak için varsayılan ön kümeler nasıl kullanılır

Yapılarınızı birkaç sayfa tel kafesle başlatmanızı öneririm. Tasarladığınız için bildiğiniz şeylerle her şeyi birkaç sayfaya koyun.

İşi halletmek için en basit modüllere güvenmeyi ve mümkün olduğunda aynı modüllerin kullanımını tekrarlamayı deneyin. Sayfanızın tel çerçevelerinin çoğunu oluşturmak için başlık, metin, bulanıklık, menü, görüntü, akordeon/geçiş ve video modüllerini nasıl kullanabileceğinizi düşünün. Gerektiğinde diğer modülleri ekleyin, ancak çoğu şey için çekirdek bir modül kümesine yapışmak, hem seçenek grubunu hem de eleman varsayılan ön ayarlarını kullanmayı çok daha hızlı hale getirecektir.

Bu sayfada bölümler, satırlar, sütunlar, metin, bulanıklık, görüntü, düğme ve menü modülleri kullanılır. Bu özel sayfa için olabildiğince basit tutarak, tasarlamam gereken seçenek gruplarının sayısını azaltıyorum.

Ardından, varsayılan seçenek grup ön ayarlarıyla en kapsamlı değişikliklerinizi tasarlamaya başlamak isteyeceksiniz. Çoğu tasarım için bu:

1. Bölüm Aralığı : Üst/alt kenar boşluklarını, sol/sağ kenar boşluklarını ve gerekli dolguları ekleyin.
2. Bölüm Arka Plan Renkleri : Çoğu durumda kullanmak istediğiniz varsayılan seçenek grubu ön ayarı ve alternatif/kontrast arka plan rengi için özel bir seçenek grubu ön ayarını oluşturun. Arka plan seçeneği grup ön ayarına varsayılan ön ayarların sütunların arka planına da uygulanabileceğini unutmayın.
3. Tipografi : H1-H6'larınızla başlayın. Modül kullanımınıza bağlı olarak, bunları başlık ve metin modülleri için başlık metni altında varsayılan seçenek grup ön ayarlarında başlatmak isteyeceksiniz ve bulanıklık modülleri gibi şeyler için başlık metni . Ardından, Metin Modüllerinde Metin Seçenek Grubuna ve Blurb Modülü gibi şeylerde bulunan gövde metni seçenek gruplarına odaklanarak normal metin üzerinde çalışın.
4. Diğer Tasarım Ayarları : Sınırlar, kutu gölgeleri, filtreler (resimleri şekillendiriyorsanız) ve animasyonlar için seçenek grup ön ayarları oluşturun. Bunlar için, varsayılan ön ayarları kullanma eğilimindeyim, ancak sayfa öğelerine seçici olarak uygulayabileceğim özel ön ayarlar oluşturuyorum.
5. Gelişmiş Ayarlar : Bu, yukarıdaki adıma benzer, ancak geçişler ve kaydırma efektleri gibi şeyler için seçenek grup ön ayarları oluşturuyorum. Ayrıca varsayılan ön ayarları kullanma eğilimindeyim, ancak sayfa öğelerine seçici olarak uygulayabileceğim özel ön ayarlar oluşturuyorum.

Varsayılan seçenek grup ön ayarlarını bu şekilde oluşturmak, stillerinizi sitenize otomatik olarak uygulamaya başlayacaktır. Varsayılan bir OG güncellendiğinde, web sitelerinizdeki ilgili öğeler bu değişiklikleri otomatik olarak kabul eder.

Varsayılan ön ayarlar size saatler tasarruf edecektir

Varsayılan ön ayarlar, hem öğe hem de seçenek grubu çeşidi, büyük miktarda zaman kazandırır. Divi 5'in yanan hızlı inşaatçısını kullanarak bu özelliklerle inşaat sitelerine başlamanızı bekleyemem. Ve bu, Divi 5'te yayınlanan yeni özelliklerin sonu bile değil.

Divi'nin yeni ve planlanan özellikleri ile parmaklarınızın ucunda gerçek bir tasarım sistemine sahip olacaksınız. Önce varsayılan ön ayarları kullanarak bir site düzenlemeyi denediniz mi? Nasıl gitti? Aşağıdaki yorumda bize bildirin ve bu özellikleri nasıl kullandığınızı paylaşın.

Divi 5 İndir Divi Hakkında Her Şey Öğrenin 5 Divi 5 Demo Deneyin