Divi: Fullwidth Header modülünün birincil ve ikincil düğmeleri nasıl dengelenir

Birincil ve ikincil düğmeleri dengeleyerek Divi'nin Tam Genişlik Başlık modülünü özelleştirmek ister misiniz?

Modül Divi Fullwidth Header, cihazınıza güzel Kahraman bölümleri eklemeyi kolaylaştırır. Site Web. Modül, başlık metni, alt yazı metni, gövde metni, logo ve resim olmak üzere iki düğmeyle birlikte gelir ve bu da kişiselleştirme seçeneklerini sınırsız hale getirir.

Bugünün makalesinde, size Kahraman Bölümlerini nasıl yeniden oluşturacağınızı göstereceğiz. Divi Tam Genişlik Başlığı. Tasarımımıza önceden hazırlanmış 3 düzen paketi kullanarak başlayacağız ve bölümlerimizi birincil ve ikincil düğme dengesine odaklanarak tasarlayacağız. 

Birincil düğmenin öne çıkmasını istiyoruz çünkü bu, birincil düğmeyi geçmeden ikincil düğmeyi görünür ve erişilebilir tutarken birincil harekete geçirici mesajımızdır.

Birincil ve ikincil düğme tasarım ilkeleri

Birincil düğmeler ve ikincil düğmeler yardım kılavuzu ziyaretçi senin Site Web belirli hisse senetlerine. Birincil düğmeler genellikle en yaygın veya istenen işlemdir ve ikincil düğmeler daha az yaygın olan eylemdir. Bu, yönlendirmeye yardımcı olur ziyaretçi gitmek istedikleri yere.

Bunu yapmak için birincil düğmeler görsel olarak öne çıkmalı ve ikincil düğmeler çok fazla öne çıkmamalıdır. Bu, daha fazla dikkat çekmek için ana düğmelerin daha belirgin olması ve daha fazla görsel ağırlığa sahip olması gerektiği anlamına gelir.

Artık birincil ve ikincil düğmelerin nasıl çalıştığını anladığımıza göre, öğreticiye geçelim!

anket

Bugün tasarlayacağımız üç tam genişlikte başlığa bir göz atın.

Divi Builder ile yeni bir sayfa oluşturarak başlayalım

WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.

Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın

Ardından İnşaata Başla (Sıfırdan Oluşturun)

Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Ayrıca okuyun: Divi: Bir Kahraman Bölümü için Maskeler ve Arka Plan Desenleri Nasıl Kullanılır

İlk örneğin tasarımı

Artık sayfamız kurulduğuna göre, bir UX açılış sayfasının tam genişlikli başlığıyla başlayalım.

Sayfamızı yapılandırma

Özelleştirmeye başlamadan önce, önceden tanımlanmış düzen paketini yüklememiz gerekecek. UX Divi kütüphanesinden. Visual Builder'ı etkinleştirdiğinizde, açılır üç seçenek göreceksiniz, Düzenlere Göz Atın.

Yükleme Düzeni Paketi

UX düzen paketini sayfanıza yüklemek için:

1. Sekmede “Önceden Hazırlanmış Düzenler”UX düzen paketini bulmak için arama işlevini kullanın.
2. Bulduktan sonra üzerine tıklayın. Bu, düzen ayrıntılarını ve mevcut sayfaları getirecektir.
3. Tıkla İnişve tıklayın "Bu Düzeni Kullan".

Düzenin üst bölümünü modül olarak yeniden oluşturacağız Tam Genişlik Üstbilgisi.

İlk bölümü sil

Bunun yerine Fullwidth Header modülünü kullanarak ilk bölümü yeniden oluşturacağımız için bu bölümü silmemiz gerekecek. Fareyle bölümün üzerine gelin ve çöp kutusu simgesine tıklayın.

Tam genişlik bölümü ekle

Fullwidth başlığını ekleyebilmemiz için önce fullwidth bölümünü eklememiz gerekiyor.

oku tıklayın "+" Divi bölümlerini görüntülemek için üzerine tıklayın. "Tam genişlik". Bu, Divi Tam Genişlik Modülü kitaplığını otomatik olarak getirecektir.

Tam genişlikte bir başlık ekleyin

Divi Fullwidth modül kitaplığında " Tam Genişlik Üstbilgisi".

İçerik ekle

Modülü özelleştirmeye başlamadan önce ekleyelim içindekiler Bu modül için gereklidir.

Metin içeriği ekle

Metin sekmesinin altına şunu ekleyin: içindekiler sonraki :

1. Başlık: UX Tasarım Bilginizi Geliştirin
2. Altyazı: UX Tasarım Kursu
3. Düğme #1: Kursa Genel Bakış
4. 2. Düğme: Daha Fazla Bilgi Edinin
5. Gövde: varsayılan

Resim ekle

Artık elimizde olduğuna göre içindekiler Metin yerinde, tasarımımıza iki resim eklememiz gerekiyor.

1. Sekmede Fotoğraflar, logo resmini (yıldızlar) ve başlık resmini (telefon tutan kişinin fotoğrafı) ekleyin.

Arka plan rengini değiştir

Sekmede Olayın Arka Planı, bu parametreyi yapılandırın:

1. Arka Plan Rengi: #131517

Tam Genişlik Başlığını Özelleştir

Artık içeriğimiz ayarlandığına göre, ona şu şekilde bir stil ekleyelim: Dizayn.

Aşağı kaydır simgesi

Aşağı kaydırma ikonunu, aşağı oku ekleyelim.

1. Aşağı Kaydır Düğmesini Göster: EVET.
2. Aşağı ok simgesini seçin.
3. Aşağı Kaydır Simge Rengi: #000

Resim

Köşeleri yuvarlayarak görsellerimize eğriler ekleyelim.

Sekmede Resim, aşağıdaki ayarları yapılandırın:

1. Görüntü Yuvarlatılmış Köşeler : Köşelerin bağlantısını kaldırmak için zincir bağlantı düğmesini tıklayın, ardından sol alt ve sağ alt giriş kutularına 1000px yazın. Bu, resimlerimizin sol alt ve sağ alt köşelerini yuvarlayacaktır.

Başlık metni

Burada, bu modülün başlık metnini özelleştirelim. sekmesinde Başlık Metni, şu ayarları yapılandırın:

• Başlık:
  • Yazı Tipi: PT Sans
  • Yazı Ağırlığı: Kalın
  • Metin Boyutu: 5 ay
  • Satır Yüksekliği: 1,2 em

Gövde metni

Bu modül için gövde metnini burada özelleştiriyoruz. sekmesinde Gövde metni, şu ayarları yapılandırın:

1. Gövde Yazı Tipi: Mukta
2. Gövde Metin Boyutu: 18px

altyazı metni

Bu modül için başlık metnini burada özelleştiriyoruz. sekmesinde Altyazı Metni, şu ayarları yapılandırın:

• Alt yazı :
  • Yazı Tipi: Mukta
  • Yazı Ağırlığı: Kalın
  • Stil: büyük harf
  • Metin Rengi: #13d678
  • Harf Aralığı: 3px

düğme bir

Birinci düğme için özel stiller tanımlayabileceğimiz yer burası: ana düğme. sekmesinde DüğmeBir, şu ayarları yapılandırın:

• Düğme Bir İçin Özel Stil Kullan: EVET
• Düğme Bir:
  • Metin Rengi: #ffffff
  • Arka Plan Rengi: #13d678
  • Kenarlık Genişliği: 0 piksel
  • Sınır Yarıçapı: 100 piksel
  • Yazı Tipi: Mukta
  • Yazı Ağırlığı: Kalın
• Düğme Bir Simgeyi Göster: EVET
• Simge: Sağ ok
• Yalnızca Birinci Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

Düğme İki

Şimdi ikincisini özelleştirelim: ikincil düğme. sekmesinde Düğme İki, şu ayarları yapılandırın:

• Düğme İçin Özel Stil Kullan: EVET
  • Düğme İki
  • Metin Rengi: #ffffff
  • Arka Plan Rengi: #303030
  • Kenarlık Genişliği: 0 piksel
  • Sınır yarıçapı: 100 piksel
  • Yazı Tipi: Mukta
  • Yazı Ağırlığı: Kalın
• Düğme İki Simgesini Göster: Evet
• Düğme İki Simgesi: Sağ Ok
• Yalnızca Vurgulu Düğme İki Üzerindeki Simgeyi Göster: EVET

Düğme bağlantıları ekle

Butonlarınıza link eklemeyi unutmayın! sekmesinde Link, aşağıdaki ayarları yapılandırın:

1. Düğme 1 Bağlantı URL'si: Düğme 1'in URL'sini buraya yapıştırın.
2. Düğme 1 Bağlantı URL'si: Düğme 2'in URL'sini buraya yapıştırın.

Çalışmanı kaydet

Artık tamamen tasarlanmış tam genişlikli başlığımız olduğuna göre, tasarımınızı kaydettiğinizden emin olun!

• Modül penceresinin sağ alt kısmındaki yeşil oka tıklayın.
• İndirim
• VisualBuilder'dan çıkın.

Ayrıca Oku: Divi: Bir Akışkan Kahraman bölümü nasıl oluşturulur

Deneyerek eğlenin

Divi Tam Genişlik Başlık modülünü özelleştirmenin yolları sonsuzdur. Birincil düğmenin ve ikincil düğmenin avantajlarından faydalanmak, hedeflerinizi yönlendirmenize yardımcı olabilir. ziyaretçi görüntülemelerini istediğiniz sayfaya gitmelerini veya yapmasını istediğiniz işlemi (bir istek göndermek gibi) yapmalarını sağlar.

Öne çıkan bir birincil düğmeye sahip iki tam genişlikte üstbilgi örneğine daha bakalım.

"Emeklilik Merkezi" paketinden tam genişlikte başlık

Düğme Stilleri

Eşsiz birincil ve ikincil düğme stillerine bir göz atalım.

düğme bir

Düğme Bir sekmesinde aşağıdaki ayarları yapılandırın:

• Düğme Bir İçin Özel Stilleri Kullan: EVET
• Düğme Bir:
  • Metin Boyutu: 14px
  • Metin Rengi: #ffffff
  • Arka Plan Rengi: #0a0a0a
  • Kenarlık Genişliği: 0 piksel
  • Sınır Yarıçapı: 10 piksel
  • Harf Aralığı: 3px
  • Yazı Ağırlığı: Kalın
  • Yazı Tipi Stili: TT
• Yalnızca Buttpn One için Fareyle Üzerine Geldiğinde Simgeyi Göster: EVET
• Bir Düğme Dolgusu: 15px (Üst ve Alt), 25px (Sol ve Sağ)

Düğme İki

Sekmede Düğme İki, aşağıdaki ayarları yapılandırın:

• Düğme İçin Özel Stil Kullan: EVET
  • Düğme İki:
  • Metin Boyutu: 14px
  • Metin Rengi: #ffffff
  • Arka Plan Rengi: #0a0a0a
  • Kenarlık Genişliği: 0 piksel
  • Sınır Yarıçapı: 10 piksel
  • Yazı Ağırlığı: Kalın
  • Yazı Tipi Stili: TT
• Düğme İki Dolgusu: 10px(Alt), 10px(Sol ve Sağ)

Ve işte gidiyorsun! Biri öne çıkan ve diğeri ikinci koltuğu alan iki benzersiz düğme.

"Finansal Planlama" paketinin tam genişlikli başlığı

Düğme Stilleri

Eşsiz birincil ve ikincil düğme stillerine bir göz atalım.

düğme bir

Sekmede Düğme Bir, aşağıdaki ayarları yapılandırın:

• Düğme Bir İçin Özel Stil Kullan: EVET
• Düğme Bir:
  • Metin Boyutu: 18px
  • Metin Rengi: #ffffff
  • Arka Plan Rengi: #1b4ffe
  • Dolgu: 15px()Üst ve Alt); 25px (Sol ve Sağ)

Düğme İki

Sekmede Düğme İki, aşağıdaki ayarları yapılandırın:

• İkinci Düğme İçin Özel Stil Kullan: EVET
• Düğme İki:
  • Metin Rengi: #1b4ffe
  • Arka Plan Rengi: Açık
  • Simge Rengi: #1b4ffe

DIVI'yı şimdi indirin!!!

Sonuç

Divi'nin Tam Genişlik Başlık modülü, cihazınızda çarpıcı Hero bölümleri oluşturmayı kolaylaştırır. Site Web. 

Birincil ve ikincil düğmelerin stratejik kullanımı, kullanıcı deneyiminizi iyileştirecek ve web sitesi ziyaretçilerinin yapmak istedikleri işlemleri yapmalarına yardımcı olacaktır. 

Özelleştirme seçenekleri tam genişlikte başlıkla sınırsızdır, bu yüzden iyi denemeler yapın!

Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...