Divi Life'ın Header Layout Pack'ine Genel Bakış ve İnceleme

Divi Life'ın Başlık Düzeni Paketi, Divi Tema Oluşturucu için herhangi bir Divi web sitesine uyacak şekilde şekillendirilebilen bir dizi başlıktır. Başlıklar, kodla eklenen yeni stille kalabalığın arasından sıyrılıyor. Düzen paketi, her biri için üç stil içeren altı başlık tasarımı içerir. Bu makalede, ihtiyaçlarınıza uygun olup olmadığına karar vermenize yardımcı olması için başlık düzeni paketine bakacağız.

Divi Life Başlık Düzen Paketini İçe Aktarma

Düzenleri Divi Tema Oluşturucu ile kullanmadan önce, bunları Divi Kitaplığınıza aktarmanız gerekir. Neyse ki, bu basit ve anlaşılır bir işlemdir:

1. Düzenleri indirin ve bilgisayarınızdaki bir klasöre açın.
2. WordPress kontrol paneli menüsünde Divi > Divi Kitaplığı'na gidin.
3. Ekranın üst kısmında İçe ve Dışa Aktar'ı seçin.
4. Açılır pencerede İçe Aktar'ı seçin, Dosya Seç'i seçin ve yüklemek istediğiniz düzene gidin (hepsini bir kerede yüklemek istiyorsanız TÜM Divi-Life-Başlık-Şablonlar'ı seçin .
5. Divi Builder Düzenlerini İçe Aktar'a tıklayın ve yüklemenin tamamlanmasını bekleyin.

Düzenler artık kitaplığınızda mevcut olacak. Yukarıdaki örnekte, tüm şablonları yüklemeyi seçtim. Tema Oluşturucu artık tüm düzenlere erişebilir. Header 1'de sadece kod ve menü ayarlamaları yapmanız gerekecek. Gerisi olduğu gibi çalışıyor.

Divi Theme Builder'da Global Başlık Oluşturma

Divi Tema Oluşturucu'yu açın ve genel bir başlık eklemek için tıklayın. Kitaplıktan Ekle'yi seçin.

Kayıtlı Düzenleriniz adlı sekmeyi seçin ve istediğiniz düzeni seçin. İçe aktarmasını bekleyin.

Düzeni özelleştirmek için düzenle simgesini tıklayın.

Header-1-a'yı seçtim. Bu, tel kafes görünümündeki düzeni gösterir. Özel CSS ve JS içeren bir kod modülü içerir. Modüllerin çoğu, özel CSS için Sınıf Kimlikleri içerir. Kodun bir kısmı tema oluşturucu önizlemesinde çalışmayabilir. Başlığı ön uçta görüntülemenizi öneririm.

Değişiklik yapmak istiyorsanız ve değişiklikler yapılana kadar başlığın görüntülenmesini istemiyorsanız, bir test sayfası oluşturmayı ve genel bir başlık yapmadan önce bu sayfaya başlığı atamayı düşünebilirsiniz.

İçeriği ve Stili Değiştirme

Ardından, menünüzü seçmeniz, logonuzu eklemeniz ve renkleri web sitenize uyacak şekilde özelleştirmeniz yeterlidir. Başlık, standart modülleri kullanır, bu nedenle bu, herhangi bir başlık gibi çalışır. Yukarıdaki örnekte menümü seçtim.

Düğme zaten özel stiller kullanıyor. Sadece tasarladığınız renkleri ve yazı tiplerini ekleyin. Değişiklikleri kaydetmek için tıklayın.

Ayrıca, ana ekranda değişiklikleri kaydettiğinizden emin olun. Belirli bir gönderiye üstbilginin bir sürümünü ekledim, böylece üstbilgiyi varsayılan web sitesi şablonuna bırakmadan ve genel hale getirmeden önce test edebilirim.

Başlık Örnekleri

Test sitemde şablonların nasıl göründüğüne bir göz atın. 6 düzen önceden şekillendirilmiş açık, koyu ve parlak renkli bir versiyona sahiptir. Bu, tasarımınıza uyan bir başlık seçmeyi ve ardından ihtiyaçlarınıza göre ayarlamayı kolaylaştırır. Ayrıca fareyle üzerine gelindiğinde renk değiştiren düğmeleri de vardır.

Farklı arka plan renkleri ve ekran boyutları ile bunların bir karışımına bakacağız. Pizzeria düzen paketindeki ana sayfa ve açılış sayfası düzenlerini kullanıyorum.

Başlık 1 Düzeni

Başlık 1, bir kod modülü, menü, arama ve CTA'yı oluşturmak için bir düğme içerir.

İçe aktarma işlemi değerleri doğru tutmuyor, bu nedenle CSS'deki üç satırın değiştirilmesi gerekecek.

Ayrıca menünün yeniden adlandırılması ve menüye CSS sınıfının eklenmesi gerekecektir. Neyse ki, tüm bu ayarlamaları yapmak kolaydır. Talimatlar belgelerdedir. Bu inceleme sırasında belgelere ihtiyaç duyduğum tek zaman buydu.

Sonuç, solda yerleştirilmiş ana üç menü öğesi, sağda yerleştirilmiş menünün geri kalanı, arama alanı içinde bir simge bulunan bir arama kutusu ve büyük bir CTA düğmesi için bölme çizgileri olan zarif bir menüdür. İşte açık renkli arka planla nasıl göründüğü. Bir gölge, üstbilgiyi sayfadan ayırır.

İşte karanlık arka plan. Renk değiştirdiğini göstermek için CTA'nın üzerine geliyorum.

Kaydırdıkça başlığın yüksekliği azalır. Öğeler aynı boyutta kalır.

İşte tablet görünümü. Menü öğeleri, açılır menüye yerleştirilir. CSS sınıfına sahip üç öğe, onları diğerlerinden ayıran stil içerir.

Telefon görünümü, CTA'yı logonun altında toplar ve ayrıca CSS sınıfına sahip öğelerin stilini korur.

Başlık 2 Düzeni

Başlık 2, CSS ve JS, tanıtım yazısı, resim, metin, sosyal medya, menü ve düğme modülleri içeren bir kod modülü kullanır.

Bu Başlık 2A. İşte karanlık bir sayfada nasıl göründüğü. Başlık, sitenin tüm genişliğini kaplamıyor. Üst menü şeffaftır ve sosyal düğmeler içerir. Altta CTA ve iletişim bilgileri bulunur. Telefon numarası tıklanabilir.

İşte hafif bir sayfadaki tasarım. Bu CTA'nın öne çıkmasını seviyorum.

Kaydırdıktan sonra, üst menü sayfayla birlikte kayar ve alt menü üste yapışır.

İşte tablet görünümü. Alt menü yapışırken üst menü sayfa ile birlikte kayar.

İşte telefon görünümü. CTA, menünün altında yığılmıştır. Başlık sayfayla birlikte kayar.

Başlık 3 Düzeni

Başlık 3 modülleri, kod, sosyal medya takibi, menü ve bir düğme içerir.

İşte hafif bir arka plana sahip Başlık 3B. Üst kısım sosyal düğmeleri ve aramayı içerirken, alt kısım CTA'yı ekler.

İşte karanlık bir arka plana karşı nasıl göründüğü.

Alt menü ekranın üst kısmına yapışırken, üst menü sayfayla birlikte kayar.

İşte tablet görünümü.

Telefon görünümünün öğeleri nasıl istiflediği aşağıda açıklanmıştır.

Başlık 4 Düzeni

Başlık 3, kod, birkaç tanıtım yazısı, bir düğme, menü ve sosyal medya takip modüllerini içerir.

İşte hafif bir arka plana karşı Başlık 3C. Üst kısım iletişim bilgilerini ve CTA'yı içerirken, alt kısım sosyal düğmeleri gösterir.

İşte karanlık bir arka planla nasıl göründüğü. Orijinal renkler bu arka planla harika görünüyor. Bu örnekte CTA'nın üzerine geliyorum.

Kaydırdıktan sonra bunun nasıl göründüğü aşağıda açıklanmıştır. Üst kısım site ile birlikte kayar ve alt kısım yapışır.

Bu tablet görünümüdür.

Telefon görünümü öğeleri yığınlar.

Başlık 5 Düzeni

Başlık 5, bir kod modülü, birkaç tanıtım yazısı, sosyal medya takibi ve menü modülleri içerir.

İşte karanlık bir arka plana karşı Başlık 5C. En üstte tıklanabilir bir telefon numarası, sosyal düğmeler ve iletişim formuna bir bağlantı bulunur. Kırmızı ve koyu gri güzel bir şekilde öne çıkıyor.

Ayrıca açık arka planda güzel görünüyor. Kutu gölgesi daha belirgindir.

Menünün üst yarısı, alt yarısı ekranın üstüne yapışırken kaydırmaya devam eder.

İşte tablet görünümü.

Bu telefon görünümü. Üst bölümün içeriğinin yığılma şeklini seviyorum.

Başlık 6 Düzeni

Başlık 6, bir kod modülü, 4 tanıtım yazısı, bir sosyal medya takip modülü ve bir menü modülü içerir.

Bu, karanlık bir arka plana karşı Başlık 6B. Bunun üç bölümü vardır: üst kısım sosyal düğmeleri içerir, orta kısım iletişim bilgilerini içerir ve alt kısım menü bağlantılarını içerir.

İşte hafif bir arka plana karşı başlık.

Başlığın üst 2 bölümü kaydırılır ve alt bölüm yapışkan olur. Ekranın üst kısmına yapıştığında alt menüye bir kutu gölgesi ekler.

İşte tablet görünümü. Telefon numarasını en üste taşır.

İşte telefon görünümündeki tasarım.

Satın almak

Header Layout Pack, Divi Life'tan 49$'a (yılın geri kalanında 5$'a satışta) edinilebilir. Siz ve müşterileriniz için sınırsız sitelerde kullanım içindir ve gelecekteki tüm güncellemelere erişimi içerir. Ayrıca destek ve belgeler içerir.

Biten Düşünceler

Divi Tema Oluşturucu için Başlık Düzeni Paketi, ilginç bir düzen kümesidir. CSS ve JavaScript, normalde bir başlıkta bulunmayan stil ekler. Bu, başlığın standart başlıklardan çok daha farklı bir görünüme sahip olmasına yardımcı olur. Her tasarımın önceden tasarlanmış birden fazla seçeneği olduğundan, çok fazla değişiklik yapmak zorunda kalmadan web sitenize uyacak bir şey bulmak kolaydır. Stil, ET'nin ücretsiz Divi düzenlerine zaten uyuyor.

Başlıklar profesyonelce tasarlanmış görünüyor ve kullanımı kolay buldum. Ben sadece birkaçına baktım. Başlık 1 ile çalışmak, karmaşık adımlar gerektiren tek düzendir. Talimatları okursanız o kadar da zor değil (tahmin edin nasıl bildiğimi). Sadece diğerlerinden daha fazla adım gerektirdiğini unutmayın.

Divi Theme Builder için profesyonel olarak tasarlanmış başlıklarla ilgileniyorsanız, Divi Life'ın Header Layout Pack'i bir göz atmaya değer.

Senden duymak istiyoruz. Divi Life'ın Header Layout Pack'i denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

PureSolution / Shutterstock.com aracılığıyla Öne Çıkan Görsel