Divi Tam Genişlik Menü modülünün sepetini ve arama simgelerini nasıl özelleştireceğinizi bilmek ister misiniz?

senin menü Site Web en önemli parçalarından biridir Site Web kullanıcıların sitenizde gezinme şekli üzerindeki doğrudan etkisi nedeniyle içindekiler

İyi tasarlanmış bir menü çubuğu, gezinmeyi basitleştirerek, önemli sayfaları vurgulayarak ve genel kullanıcı deneyimini geliştirerek büyük bir fark yaratabilir. 

Divi'nin "Tam Genişlik Menüsü" modülü, alışveriş sepetini özelleştirmenize ve simgeleri istediğiniz gibi aramanıza izin vererek büyük esneklik sunar. 

Bu eğitimde, alışveriş sepeti ve arama simgeleri için farklı stillere sahip “Tam Genişlikli Menü” modülü için size üç farklı tasarım göstereceğiz.

Başlayalım!

anket

İşte tasarlayacağımız şeyin bir önizlemesi.

İlk tasarım

İlk tasarım için ortalanmış bir menü yapısı seçerek simgelerden birini sola, diğerini sağa yerleştiriyoruz. Ayrıca vurgulu rengi de değiştireceğiz.

İkinci tasarım

İkinci tasarım için iki ikonu sağ tarafa yerleştiriyoruz ve üzerine gelindiğinde rengi değiştiriyoruz.

Üçüncü tasarım

Üçüncü tasarım için simgeleri özelleştirmek için ek CSS kullanıyoruz.

Ayrıca Oku: Divi: Bir GIF ile "Geri Sayım Sayacı" modülü nasıl özelleştirilir

Divi'nin "Tam Genişlik Menüsü" modülünün alışveriş sepeti ve arama simgelerinin özelleştirilmesi

Genel başlığı oluşturun

Üç menü tasarımının her biri için, oluşturucuyu açarak başlayacağız. temalar Divi'nin.

Bunu yapmak için, WordPress kontrol panelinden şu adrese gidin: Divi > Tema Oluşturucu

Ardından Genel Başlık Ekle

sonra seç Genel Başlık Oluştur

Yeni bir tam genişlikte bölüm ekleyin.

Ardından önceki bölümü silin.

Modülü yerleştirin Tam Genişlik Menüsü.

Menüden logonuzu yükleyin.

Artık devam etmeye hazırız.

İlk tasarım

İlk tasarımımız, üzerine gelindiğinde metin ve simgelerin rengini değiştirmek için Divi'nin yerleşik vurgulu efektlerini içerecektir. Hadi başlayalım.

Ayrıca bakınız: Divi: Menü modülüne hamburger simgesi nasıl eklenir

Modül ayarlarını açarak ve bir arka plan ekleyerek başlayın.

  • Arkaplan: #fbf9f4

Sekmeye git Dizayn ve logo düzenini seçin.

  • Stil: Satır İçi Ortalanmış Logo
Divi Tarzı Alışveriş Sepeti Arama Simgeleri Tam Genişlik Menü Düzeni 1 Düzen Stili

Şimdi menü metin ayarlarından bazılarını değiştirelim.

  • Aktif Bağlantı Rengi: #09148c
  • Menü Yazı Tipi: Yakut
  • Menü Yazı Tipi Ağırlığı: Kalın
  • Yazı Tipi Stili: TT ve U (Büyük harf ve altı çizili)

Ardından, menü metin rengini, metin boyutunu ve harf aralığını ayarlayın.

  • Menü Metin Rengi: #000000
  • Menü Metin Boyutu: 21px
  • Harf Aralığı: 1px

Bu menüye fareyle üzerine gelme efektleri eklemek istiyoruz, bu nedenle fareyle üzerine gelindiğinde menü metninin rengini değiştirin. Fareyle üzerine gelindiğinde farklı bir menü metin rengi ayarlayın.

  • Menü Metin Rengi (Vurgulu): #b70018

Ardından ayarlara gidin Aşağıya doğru açılan menü sekmenin altında Dizayn.

  • Açılır Menü Arka Plan Rengi: #fbf9f4
  • Açılır Menü Satır Rengi: #b70018
  • Menü Metin Rengi: #000000

Fareyle üzerine gelindiğinde açılır menünün metin renginin de değişmesini istiyoruz, bu nedenle bu ayar için fareyle üzerine gelme seçeneklerini seçin ve farklı bir metin rengi ayarlayın.

  • Açılır Menü Metin Rengi (Vurgulu): #b70018
  • Açılır Menü Etkin Bağlantı Rengi: #b70018
  • Mobil Menü Arka Plan Rengi: #fbf9f4
  • Mobil Menü Metin Rengi: #000000

Yine, fareyle üzerine gelindiğinde mobil menünün metin renginin değişmesini istiyoruz. Bu ayar için üzerine gelme seçeneklerini seçin, ardından üzerine gelindiğinde farklı bir metin rengi ayarlayın.

  • Mobil Menü Metin Rengi (Vurgulu): #b70018

Alışveriş sepeti ve arama simgesi özelleştirme

Şimdi alışveriş sepetini ve arama simgelerini ekleyip özelleştirelim. sekmenin altında içerik, git Elements ve alışveriş sepeti simgesini ve arama simgesini etkinleştirin.

  • Alışveriş Sepeti Simgesini Göster: EVET
  • Arama Simgesini Göster: EVET

sekmeye geri dön Dizayn ve simge ayarlarını açın. Simgelerimizin her biri, üzerine gelindiğinde siyah ve kırmızı olacaktır. İlk önce, rengi siyah olarak ayarlayın.

  • Alışveriş Sepeti Simge Rengi: #000000
  • Arama Simgesi Rengi: #000000
  • Hamburger Menü Simgesi Rengi: #000000

Ardından, vurgulu simgesini seçin ve vurgulu üzerine rengi ekleyin.

  • Alışveriş Sepeti Simge Rengi (Vurgulu): #b70018
  • Arama Simgesi Rengi (Vurgulu): #b70018
  • Hamburger Menü Simgesi Rengi (Vurgulu): #b70018

Simge boyutunu ayarlayın.

  • Alışveriş Sepeti Simgesi Yazı Boyutu: 25 piksel
  • Arama Simgesi Yazı Boyutu: 25 piksel

bölüme git aralık, ardından üst ve alt dolguyu ayarlayın.

  • Dolgu (Üst ve Alt): 5 piksel

Son olarak Menu modülünün üstüne ve altına bir kenarlık ekleyeceğiz. Kenarlık ayarlarını açın.

  • Üst Kenar Genişliği: 3px
  • Alt Kenar Genişliği: 3px

Son tasarım

Ve işte son tasarımımız.

İkinci tasarım

İkinci tasarımımız, menü simgelerinin ve üzerine gelindiğinde metnin boyutunu değiştirmek için Divi'nin yerleşik vurgulu efektlerini kullanacak. Hadi başlayalım.

İlk olarak, Menü modülüne bir arka plan gradyanı ekleyeceğiz. Gradyanın üç durağı vardır, ayarlar aşağıdaki gibidir:

  • Gradyan Durakları:
    • %0: rgba(255,255,255,0)
    • %23: rgba(252,199,76,0.65)
    • %82: rgba(232,119,255,0.32)

Degrade türünü ve degrade konumunu ayarlayın.

  • Gradyan Türü: Konik
  • Gradyan Konumu: Alt

Ardından sekmeye gidin Dizayn ve düzeni ayarlayın (Düzen).

  • Stil: Merkezli

bölüme git Menü Metni menü metin tasarımını özelleştirmek için.

  • Aktif Bağlantı Rengi: #FFFFFF
  • Yazı Tipi Menüsü: Syne
  • Yazı Ağırlığı: Kalın
  • Menü Yazı Tipi Stili: TT (Büyük Harf)
  • Metin Rengi Menüsü: #FFFFFF

Şimdi menü metin boyutunu ve harf aralığını ayarlayın.

  • Menü Metin Boyutu: 20px
  • Menü Harf Aralığı: 2px

Fareyle üzerine gelindiğinde menü metin boyutumuzun artmasını istediğimizden, fareyle üzerine gelme seçeneğini seçin.

  • Menü Metin Boyutu: 22px

Ardından, açılır menüden tasarım ayarlarını değiştirin.

  • Açılır Menü Arka Plan Rengi: #fcda90
  • Açılır Menü Satır Rengi: #FFFFFF
  • Metin Rengi Menüsü: #FFFFFF
  • Açılır Menü Etkin Bağlantı Rengi: #FFFFFF

Mobil menü arka planını ve metin rengini ayarlayın.

  • Mobil Menü Arka Plan Rengi: #fcda90
  • Mobil Menü Metin Rengi: #FFFFFF

Alışveriş sepeti ve arama simgesi özelleştirme

Şimdi menü simgelerimizi özelleştirmeye başlayalım. git Elements sekmenin altında içerik ve alışveriş sepeti simgesini ve arama simgesini etkinleştirin.

  • Sow Alışveriş Sepeti Simgesi: EVET
  • Arama Simgesini Göster: EVET

sekmeye geri dön Dizayn ve simge ayarlarını açın.

  • Alışveriş Sepeti Simge Rengi: #ffffff
  • Arama Simgesi Rengi: #ffffff
  • Hamburger Menü Simge Rengi: #ffffff

Simgeler, üzerine gelindiğinde koyu turuncu bir renge sahip olacaktır. Kapak seçeneğini seçin ve rengi ayarlayın.

  • Alışveriş Sepeti Simge Rengi (Vurgulu): #fcac00
  • Arama Simgesi Rengi (Vurgulu): #fcac00
  • Hamburger Menü Simge Rengi (Vurgulu): #fcac00

Ardından, alışveriş sepeti ve arama simgeleri için yazı tipi boyutunu ayarlayın.

  • Alışveriş Sepeti Simgesi Yazı Tipi Boyutu: 25 piksel
  • Arama Simgesi Yazı Boyutu: 25 piksel

Fareyle üzerine gelindiğinde simge boyutunu büyütmek için fareyle üzerine gelme seçeneğini belirleyin.

  • Alışveriş Sepeti Simgesi Yazı Tipi Boyutu (Vurgulu): 30 piksel
  • Arama Simgesi Yazı Tipi Boyutu (Vurgulu): 30 piksel

Son olarak, bölüme gidin aralık ve üst ve alt dolguyu ayarlayın.

  • Dolgu (Üst ve Alt): 5 piksel

Son tasarım

İşte ikinci menü düzenimizin son tasarımı.

Üçüncü tasarım

Son tasarımımız için, özel CSS kullanarak sepet simgelerinin arkasına bir arka plan dairesi ekleyeceğiz. 

Ayrıca okuyun: Divi: Yapışkan ve genişletilebilir bir vurgulu menü nasıl oluşturulur

Başlayalım.

İlk olarak, modüle bir arka plan rengi ekleyin.

  • Arka plan: #efb6ac

Ardından sekmeye gidin Dizayn ve seçeneği açın Menü Metni.

  • Aktif Bağlantı Rengi: #e84322
  • Menü Yazı Tipi: Cinzel
  • Yazı Tipi Ağırlığı Menüsü: Ultra Kalın

Fareyle üzerine gelindiğinde menü metin renginin değişmesini istiyoruz. İlk olarak, menü metin rengini ayarlayın.

  • Metin Rengi Menüsü (Masaüstü): #e7644a

Vurgulu simgesini tıklayın ve vurgulu metin rengini ayarlayın.

  • Menü Metin Rengi (Vurgulu): #e84322

Ardından, menü metin boyutunu ve harf aralığını ayarlayın.

  • Menü Metin Boyutu: 21px
  • Menü Harf Aralığı: 1px

Ayrıca, fareyle üzerine gelindiğinde harf aralığının genişletilmesini istiyoruz, bu nedenle ayarlar için fareyle üzerine gelme seçeneğini seçin.

  • Menü Harf Aralığı: 2px

Metin hizalamasını sola ayarlayın.

  • Metin Hizalama: sol

Ardından, açılır menüden aşağıdaki ayarları değiştirin.

  • Açılır Menü Arka Plan Rengi: #efb6ac
  • Açılır Menü Satır Rengi: #e7644a

Ayrıca Oku: Divi: Kılavuz şeklinde bir Görüşler bölümü nasıl oluşturulur?

  • Açılır Menü Metin Rengi
    • Masaüstü: #e7644a
    • Fareyle üzerine gelin: #e84322
  • Açılır Menü Etkin Bağlantı Rengi: #e84322

Mobil menü arka planını ve metin rengini ayarlayın.

  • Mobil Menü Arka Plan Rengi: #efb6ac
  • Mobil Menü Metin Rengi:
    • Masaüstü: #e7644a
    • Fareyle üzerine gelin: #e84322

Alışveriş sepeti ve arama simgesi özelleştirme

İlk olarak, git Elements sekmenin altında içerik ve alışveriş sepeti simgesini ve arama simgesini etkinleştirin.

  • Alışveriş Sepeti Simgesini Göster: EVET
  • Alışveriş Simgesini Göster: EVET

Ardından sekmeye geri dönün Dizayn ve simge ayarlarını açın. Simge rengini ayarlayın.

  • Alışveriş Sepeti Simge Rengi: #e7644a
  • Arama Simgesi Rengi: #e7644a
  • Hamburger Menü Simgesi Rengi: #e7644a

Fareyle üzerine gelindiğinde bu simgelerin rengi değişecektir. Fareyle üzerine gelme seçeneklerini etkinleştirin ve rengi ayarlayın.

  • Alışveriş Sepeti Simge Rengi (Vurgulu): #e84322
  • Arama Simgesi Rengi (Vurgulu): #e84322
  • Hamburger Menü Simge Rengi (Vurgulu): #e84322

Ayrıca, fareyle üzerine gelindiğinde simge boyutunun artmasını istiyoruz. İlk olarak, simge yazı tipi boyutunu ayarlayın.

  • Alışveriş Sepeti Simgesi Yazı Boyutu: 22 piksel
  • Arama Simgesi Yazı Boyutu: 22 piksel

Ardından, üzerine gelindiğinde simgenin yazı tipi boyutunu ayarlayın.

  • Alışveriş Sepeti Simgesi Yazı Tipi Boyutu (Vurgulu): 26 piksel
  • Arama Simgesi Yazı Tipi Boyutu (Vurgulu): 26 piksel

O zaman bölüme git aralık ve üst ve alt dolgu ekleyin.

  • Dolgu (Üst ve Alt): 5 piksel

Son olarak, alışveriş sepetinin ve arama simgesinin arkasındaki daireleri eklemek için genel başlığa özel CSS ekleyebiliriz. 

Bu CSS'yi Menü modülü tasarımınıza uyacak şekilde özelleştirebilirsiniz.

Başlık şablonu ayarlarını açın, ardından sekmeye gidin gelişmiş ve aşağıdaki özel CSS'yi ekleyin.

.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}

Son tasarım

Bu, üçüncü ve son menü düzenimizin tasarımını tamamlar.

Nihai sonuç

Şimdi üç farklı menünün son tasarımına bir göz atalım.

İlk tasarım

Divi Fullwidth Menu modülünün sepetini ve arama simgelerini özelleştirin
Divi Fullwidth Menu modülünün sepetini ve arama simgelerini özelleştirin

DIVI'yı Şimdi İndirin !!!

İkinci tasarım

Divi Fullwidth Menu modülünün sepetini ve arama simgelerini özelleştirin
Divi Fullwidth Menu modülünün sepetini ve arama simgelerini özelleştirin

Üçüncü tasarım

Divi Fullwidth Menu modülünün sepetini ve arama simgelerini özelleştirin
Divi Fullwidth Menu modülünün sepetini ve arama simgelerini özelleştirin

DIVI'yı Şimdi İndirin !!!

Sonuç

Divi'nin Menü modülünü, sepet ve arama simgelerini özelleştirerek benzersiz düzenler ve tasarımlar oluşturabilirsiniz. Site Web

Fareyle üzerine gelme efektleri ve özel CSS gibi yerleşik Divi ayarlarını kullanarak Menü modüllerinizin görünümünü kolayca geliştirebilirsiniz. 

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. 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ş.

...