Divi'deki Tam Ekran Menü modülüyle genel bir başlık oluşturmak ister misiniz?
Başlık, herhangi bir şeyin en önemli unsurlarından biridir. Site Web ve kalbinde kullanıcı deneyimi. Gezinme menüsü, kullanıcılarınıza sitenizde ne bulmayı bekleyebilecekleri hakkında bir fikir verir. Site Web ve ihtiyaç duydukları bilgileri bulmalarına yardımcı olur.
Ek olarak, ikincil bir menü çubuğu, bir harekete geçirici mesajı vurgulamak veya desteklemek bir teklif. Başlığın, belgenizin en önemli kısımlarından biri olduğundan bahsetmiyorum bile. Site Web, çünkü genellikle her sayfada görünür. Bu, markanızı sergilemek ve web sitenizin geri kalanının tasarımıyla tutarlı bir başlık oluşturmak için harika bir fırsattır.
Divi'nin Tema Oluşturucu seçenekleri, özel bir genel başlık oluşturmanıza ve web sitenizin tamamında başlık ve menü modüllerinizin görünümünü özelleştirmenize olanak tanır.
Bu eğitimde, Divi'nin tam ekran menü modülünü kullanarak nasıl global bir başlık oluşturacağınızı göstereceğiz.
Başlayalım!
anket
İşte tasarlayacağımız genel başlığın bir önizlemesi.
Tema oluşturucuyu açın
Bu örnekte global bir başlık oluşturduğumuz için, WordPress Divi menüsünde bulabileceğiniz "Tema Oluşturucu"ya gidelim. Global Başlık Ekle'yi ve ardından Global Başlık Oluştur'u seçin.
İkincil menü çubuğunu oluşturun
Genel başlık düzenini ilk açtığınızda, normal bir bölümle önceden yüklenmiş olarak gelir. Bunu, tam genişlikteki menümüzün üzerinde yer alacak ve harekete geçirici mesaj metni ve bir düğme içeren ikincil menü çubuğumuz olacak şekilde değiştireceğiz.
Öncelikle bölüm ayarlarını açın ve arka plan rengini ekleyin.
- Arka plan: #92A8A1
Ardından, bölüm marjı.
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
Şimdi bir satır ekleyin. Bu örnek için, aşağıda gösterilen düzeni kullanacağız.
Satır ayarlarında, Stil sekmesinin Boyutlandırma altında sütun yüksekliklerini uyumlu hale getirin.
- Sütun yüksekliklerini uyumlu hale getirin: EVET
Ardından, Üst ve Alt kenar boşluklarını aşağıdaki gibi ayarlayın:
- Üst İç Kenar Boşluğu: 5px
- Alt İç Kenar Boşluğu: 5px
İkincil başlık öğelerimizin dikey olarak hizalanmasını istediğimizden, ana satır öğesine bazı özel CSS ekleyeceğiz.
1.
align-items:center;
Artık hattımız yapılandırıldığına göre modüllerimizi ekleyebiliriz. içindekiler. İlk önce sol tarafa bir metin modülü ekleyin.
Değiştirmek içindekiler metin. Burası bir Harekete Geçirici Mesaj eklemek veya desteklemek bir teklif.
- Metin: "Siparişinizde %10 indirim almak için posta listemize katılın!" »
Metin modülünün Stil sekmesine erişin ve parametreleri aşağıdaki gibi değiştirin:
- "Metin" yazı tipi: Poppins
- “Metin” Loş Işık: Orta
- "Metin" metin rengi: #FFFFFF
Ardından, sağdaki Düğme modülünü ekleyin.
Düğme metni ekleyin.
- Metin: "Ücretsiz fiyat teklifi alın"
Stil sekmesinde düğmeyi ortaya hizalayın.
- Düğme Hizalama: Merkez
Şimdi butonun görünümünü özelleştirelim.
- "Düğme" için özel stiller kullanın: Evet
- Düğme Metin Boyutu: 14px
- Düğme metin rengi: #FFFFFF
- Arka plan düğmesi: #2F5349
- Düğme Kenar genişliği: 0px
- Sınır Yarıçapı Düğmesi: 50px
- Düğme Harf Aralığı: 1px
- Düğme Yazı Tipi: Poppins
Tam Ekran Menü modülünü ekleyin
Artık ikincil menü tasarlandığına göre ana menüye geçebiliriz. Tam Ekran Menü modülünü kullanarak menüyü oluşturacağız. Genel başlığa yeni bir Tam Ekran bölümü ekleyin.
Tam Ekran Menü modülünü seçin ve yerleştirin
Ardından, Tam Ekran Menüsü ayarlarını özelleştireceğiz.
- Aktif Bağlantı Rengi: #2F5349
- Yazı Tipi Menüsü: Poppins
- Loş Işık Menüsü: Yarı Kalın
- Kopyalama Stili Menüsü: TT
- Menü metin rengi: #000000
- Fareyle üzerine gelin Menü metin rengi: #2F5349
- Menü Metin Boyutu: 15px
- Menü harf aralığı: 2px
Hamburger menü simgesi rengini siyah olarak değiştirin.
- Hamburger Menü Simgesi Rengi: #000000
Logoyu menümüze eklemeden önce boyutlandırma seçeneklerini değiştirelim. PC ve mobil cihazlar için farklı bir maksimum yükseklik ayarlamak için Divi'nin yerleşik yanıt verme seçeneklerini kullanacağız.
- PC'de maksimum logo yüksekliği: 3vw
- Mobil cihazlarda maksimum logo yüksekliği: 6vw
Şimdi logonuzu Tam Ekran Menüsüne ekleyin.
Son olarak, kullanıcı web sitesinde gezinirken ana menünün ekranın üst kısmında kalmasını istiyoruz, bu nedenle bunun için Divi'nin yerleşik yapışkan yapışkan ayarlarını kullanacağız.
- Yapışkan Konum: Üstte kal
Bununla, küresel başlık tasarımımız tamamlandı.
Önceden tanımlanmış bir düzen ile yeni bir sayfa oluşturun
Tam genişlikteki başlığı ve menüyü çalışırken görmek için Divi kitaplığından önceden tanımlanmış bir düzen ile yeni bir sayfa oluşturalım. Bu örnek için paketteki Döşeme Ana Sayfasını kullanacağız. kat düzeni.
Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından Divi Builder'ı Kullan seçeneğini seçin.
Bu örnek için Divi Kitaplığından önceden hazırlanmış bir düzen kullanıyoruz, bu nedenle Düzen Seç'i seçin.
“Döşeme Ana Sayfası” düzenini bulun ve seçin.
Düzeni sayfanıza eklemek için "Düzen seç"i seçin.
Şimdi tasarım tamamlandı!
Nihai sonuç
Sonuç
Yukarıda söylediğimiz gibi, başlık ve gezinme menüsü, web sitenizin kullanıcı deneyiminin merkezinde yer alır. Divi'nin "Tam Ekran Menüsü" modülü ile çarpıcı bir genel başlık tasarlamanın ne kadar kolay olduğunu gördünüz.
Neyse ki Divi'nin tema oluşturucusu, web sitenizin menüsünün ve başlığının her yönünün kontrolünü size verir ve sadece birkaç tıklamayla tamamen özel ve benzersiz tasarımlar oluşturabilirsiniz.
Başlık ve gezinme menünüzü özelleştirmek için Divi'nin genel başlık seçeneklerini kullandınız mı? Yorumlarda bize ne düşündüğünüzü söyleyin!
