Divi Ürün Öne Çıkanlar: Başlık Düzeni Paketi

Başlık, oluşturduğunuz herhangi bir Divi web sitesi için yüklenecek ilk öğelerden biridir. Bu, başlığın genellikle herkesin bir web sitesi için gördüğü ilk izlenimi oluşturduğu ve başlık tasarımını her web sitesinin çok önemli bir parçası yaptığı anlamına gelir. Neyse ki, başlığınızı sıfırdan oluşturmak zorunda değilsiniz. Divi Marketplace'te size avantaj sağlayacak birçok başlık düzeni vardır. Başlık Düzeni Paketi bir örnektir. Bu, hemen hemen her tür web sitesi için çalışan 80'den fazla özel başlık kümesidir. Bu yazıda, ihtiyaçlarınız için doğru ürün olup olmadığına karar vermenize yardımcı olması için Başlık Düzeni Paketine bakacağız.

Başlık Düzeni Paketini Yükle

Header Layout Pack, sıkıştırılmış iki dosya içerir. İlki, 81 mizanpajın tümünü içeren tek bir dosyadır. Bu düzenler birlikte yüklenir. İkincisi ek bir dosyadır ve altı dosya içerir. Bunlar başlık düzenlerinin kategorileridir. Bu, yalnızca WooCommerce gibi belirli bir kategorideki düzenleri yüklemenize olanak tanır. Bu, dosya boyutu yükleme sınırınız varsa ve tüm dosyaları aynı anda yükleyemiyorsanız da yararlıdır.

Düzenleri karşıya yükleme işlemi tüm dosyalar için aynıdır:

1. Divi'ye git
2. Divi Kitaplığı'nı seçin
3. İçe ve Dışa Aktar'a tıklayın
4. İçe Aktar sekmesini seçin
5. Dosya Seç'e tıklayın ve bilgisayarınızdaki sıkıştırılmamış JSON dosyalarına gidin
6. Divi Builder Düzenlerini İçe Aktar'a tıklayın

İçe aktarma tamamlandığında, Divi Kitaplığınızda (ana JSON dosyasını seçtiyseniz) 81 yeni öğeniz olur. Kategorilere göre etiketlenir ve adlandırılırlar, bu nedenle kolayca tanımlanabilirler. Bu düzenler standart Divi Kitaplığı düzenleridir, dolayısıyla bir sayfa, gönderi veya Divi Theme Builder'daki herhangi bir düzen için herhangi bir Divi düzeniyle birlikte kullanılabilirler ve herhangi bir Divi web sitesinde kullanılmak üzere Divi Cloud'da saklanabilirler. Bunları Divi Theme Builder'da kullanmanızı ve genel veya bireysel kategorilere atamanızı öneririz.

Başlık Düzeni Paketi Örnekleri

Altı kategorinin her birinden birkaç başlık düzenine bakalım. Örneklerimde, her düzeni Divi Theme Builder'a yükleyeceğim. Başlık Düzeni Paketine genellikle yeni düzenler eklenir. Bunları rastgele seçiyorum, ancak daha eski ve daha yeni düzenlerin bir karışımına odaklanacağım. Bunları Kayıtlı Düzenleriniz sekmesinde görüntülerken, kategorileri seçebilir veya tüm düzenleri görüntüleyebilirsiniz.

Ekran görüntülerim için Divi'de bulunan ücretsiz Home Remodeling Layout Pack'in ana sayfasını kullanıyorum. Başlıkların tel kafes, masaüstü ve telefon sürümlerine bakacağız.

Gelişmiş Başlıklar

İlk olarak, 30 düzen içeren Gelişmiş Başlıklara bir göz atalım.

Gelişmiş Başlık V1

İlk Gelişmiş Başlık bir Menü Modülü, Düğme Modülü ve iki Metin Modülü içerir. Ayrıca CSS'li bir Kod Modülü içerir.

Başlık, stil verilmiş açılır alt menüler içerir. Fareyle üzerine gelindiğinde bir alıntı CTA düğmesi uzar.

Masaüstü sürümündeki menüler fareyle üzerine gelindiğinde açılırken, CSS, menünün açılıp açılamayacağını veya daraltılabileceğini gösteren oklar içeren düğmelerle özel bir mobil menü geçişi oluşturur.

Gelişmiş Başlık V20

Advanced Header sürüm 20, dört Görüntü Modülü, üç Blurb Modülü, bir Menü Modülü ve bir Kod Modülü içerir.

Görüntü Modülleri logolar için kullanılabilir. Tüm Blurb Modülleri, iletişim bilgileri, hizmetler ve fiyat teklifi almak için bir CTA için tıklanabilir düğmelerdir.

Mobil menü geçişleri, CSS ile telefon sürümüne eklenir.

Gelişmiş Başlık V30

Advanced Header V30, üç Metin Modülü, Menü Modülü ve bir Kod Modülü içerir.

Masaüstü sürümü, kısa bir mesaj ve büyük metinde bir telefon numarası içeren kırmızı bir üst menü çubuğu görüntüler. Bunun altına bir logo ve menü yerleştirilir ve üst menü çubuğuna uyacak şekilde stilize edilmiş bir açılır alt menü içerir.

Masaüstü sürümü kırmızı vurgular içerirken, Telefon Sürümü alt menülerin kırmızı arka planını kaldırır ve CSS geçişlerini içerir.

Tam Ekran Bindirme Başlıkları

İkinci olarak, Header Layout Pack'in 3 layout içeren Fullscreen Overlay Headers'ını göreceğiz.

Tam Ekran Bindirme Başlığı V2

Tam Ekran Yerleşimi V2, metin, resimler, düğmeler, tanıtıcı yazılar, kod, sosyal medya, bir menü vb. dahil birçok öğeyle birlikte gelir.

Vurgulu animasyonlu bir hamburger menü simgesi içerir. CTA düğmesi fareyle üzerine gelindiğinde genişler.

Menü tıklandığında tam ekran açılır ve tıklanabilir alt menüler içerir.

İşte aynı tasarımı takip eden telefon versiyonu.

Tam Ekran Bindirme Başlığı V3

Tam Ekran Yer Paylaşımı Başlığı V3, önceki düzen ile benzer modüller kullanır ancak tam ekran yer paylaşımı için farklı bir tasarım oluşturur.

Masaüstü başlığı, fareyle üzerine gelme animasyonlu CTA ve hamburger simgesini içerir.

Menü ekranın yarısını kaplarken, ekranın diğer yarısını bir görüntü kaplar.

Telefon sürümü, menü için aynı tasarımı izler, ancak resmi içermez.

Kaydırmalı Başlık

Üçüncü olarak, Header Layout Pack'in üç layout içeren Slide-ins'li Header'ına bakacağız.

Sürgülü V2'li Başlık

Versiyon 2, bir Blurb Modülü, birkaç Metin Modülü, bir Menü Modülü, bir Düğme Modülü ve kod içeren kayar parçayı oluşturur.

Kaydırmalı menü, bir mesajın altındaki alt menüleri görüntüler. Menünün alt kısmında bir CTA ve bir resim bulabilirsiniz.

Telefon sürümü, menü tasarımını korurken görüntüyü kaldırır.

Kaydırmalı Başlık V3

Sürüm 3, slaytları oluşturmak için Tanıtım Modülleri içerir.

Masaüstü kaydırıcısı, fareyle üzerine gelme animasyonunu içerir ve metin ile simgeleri görüntüler. Öğelerin her biri tıklanabilir.

Telefonun içeri kayan menüsü için tıklanabilir öğeler, masaüstü sürümünden çok daha büyüktür ve bu, mobil cihazlarda kullanımlarını kolaylaştırır.

Basit Başlıklar

Dördüncüsü, Basit Başlıklar 30 düzen içerir.

Basit Başlıklar V15

Simple Headers sürüm 15'in iki Satırı vardır ve bir Sosyal Medya Modülü ile birkaç Blurb Modülü içerir.

Masaüstü sürümü, iletişim bilgilerini içeren bir üst çubuk içerir. Bir logo ortalanır ve menü alt menüler içerir.

Telefon sürümü, alt menüler için geçiş düğmeleri ekler.

Basit Başlıklar V22

Bu, başlığı oluşturmak için iki Satır içerir.

Üstteki çubuk, fareyle üzerine gelme animasyonlu bir CTA'yı, ortada logoyu ve bir telefon numarasını görüntüler. Menüsü, stilize edilmiş alt menüler içerir.

Telefon sürümü, Kod Modülünde oluşturulan açma/kapatma düğmeleriyle alt menüleri görüntüler.

Kare Logo Başlıkları

Beşinci olarak, Kare Logo Başlıkları beş düzen içerir. Çoğu logodan daha uzun bir logonuz varsa bunlar idealdir.

Kare Logo Başlıkları V3

Bu, çok sütunlu bir düzen eklemek için bir Özel Bölüm ile oluşturulmuştur. Kare logo, kendi sütununda bir Görüntü Modülü ile oluşturulur.

Masaüstü sürümü, bir arama kutusu ve iletişim bilgileri içeren bir üst çubuk içerir. Tüm menüler, üst çubuğun arka planına uyacak şekilde tasarlanmıştır.

Telefon sürümü, CSS ile oluşturulan alt menü geçişlerini içerir.

Kare Logo Başlıkları V4

Sürüm 4, logo, menü ve CTA'ları oluşturmak için üç sütun içerir.

Masaüstü sürümü, logoyu ve telefon numarasını iki dış sütunda görüntüler. Bir orta sütun iki Satır içerir. Üstteki Satır, iletişim bilgilerini ve bir CTA'yı gösterirken, alttaki Satır, üst Satırın simgeleri ve düğmesiyle eşleşecek şekilde stilize edilmiş bir arka plana sahip menüyü görüntüler.

Telefon versiyonu geniş bir logo alanı içerir. Alt menüler, CSS ile oluşturulan geçişleri içerir.

Woo Başlıkları

Son olarak, 10 WooCommerce başlığı içeren Header Layout Pack'e bakacağız.

Woo Başlıkları V3

İlk Woo Başlığımız iki Satır içerir. Üst Satır bir Metin Modülü içerirken, ikinci Satır bir Menü Modülü ve birkaç Simge Modülü görüntüler.

Üst Satır için Metin Modülü bir satış afişi oluşturur. Grafikler, kişinin hesap oturum açma bilgilerine, favori listesine ve alışveriş sepetine bağlanabilen Kişi, Kalp ve Sepet simgelerini içerir.

Telefon sürümü, simgeleri hamburger menüsünün üzerine taşır. Gördüğümüz diğerleri gibi, bu alt menü de CSS ile oluşturulan geçişleri içerir.

Woo Başlıkları V7

Woo başlık sürümü 7, ilginç WooCommerce bağlantıları oluşturmak için Blurb Modüllerini içeren üç Satır ile oluşturulmuştur.

Masaüstü sürümü, üst çubukta bir mesaj ve Woo bağlantıları gösterir. Orta çubukta bir logo ve bir WooCommerce ürün araması görüntülenir. Menü çubuğunda sosyal medya düğmeleri bulunur.

Bu, sosyal medya simgelerini hamburger menü simgesinin altına yerleştiren telefon versiyonudur. Telefon ekranında her şey iyi yerleştirilmiş ve hatta WooCommerce bağlantılarını ve ürün arama kutusunu da içeriyor.

Woo Başlıkları V10

Woo Header sürüm 10 ayrıca üç Satır içerir. Bir ürün araması içerir ve bir banner oluşturmak için bir Metin Modülü kullanır.

Masaüstü sürümü, üstte yeşil bir satış başlığı görüntüler. Simgeler, düğme ve vurgular yeşil çubukla eşleşir. Ortadaki çubuk, WooCommerce simgelerini içerirken, menü ve arama alt kısımda bulunur.

İşte arama kutusunu hamburger menüsünün altına yerleştiren telefon versiyonu. Bu, CSS ile oluşturulan alt menü geçişlerini de içerir.

Başlık Düzeni Paketini Satın Alın

Header Layout Pack, Divi Marketplace'te 15$'a satılmaktadır. Ömür boyu güncellemeler, sınırsız web sitesi kullanımı ve 30 günlük para iade garantisi içerir.

Biten Düşünceler

Header Layout Pack'e bakışımız bu. Bu başlık paketinde birçok düzen var. Zarif görünüyorlar, birçok tasarım seçeneğine sahipler ve kullanımları kolay. Düzenler aynı kişi tarafından oluşturulduğundan, kullanımlarını kolaylaştırdığını düşündüğüm bir ortak noktayı paylaşıyorlar. Yöntemler standartlaştırılmıştır, bu nedenle düzenlerden birini nasıl özelleştireceğinizi biliyorsanız geri kalanını da özelleştirebilirsiniz. Kapsamlı bir başlık seti ile ilgileniyorsanız, Başlık Düzeni Paketi üzerinde düşünülmesi gereken bir iştir.

Senden duymak istiyoruz. Divi web siteniz için Header Layout Pack'i denediniz mi? Yorumlardaki deneyiminizi bize bildirin.