Özel Divi Başlığınızdaki Menü Öğesine “Yeni” veya “Öne Çıkan” Köşe Etiketi Nasıl Eklenir

Web sitenizin başlığını oluştururken, ziyaretçilerinizin davranışlarına özellikle dikkat etmek, tıklama oranlarını artırmaya yardımcı olabilir. Başlığınız yalnızca iyi görünmekle kalmaz, aynı zamanda ziyaretçileri web sitenizdeki en önemli sayfalara yönlendirmeye de yardımcı olmalıdır. Sık kullanılan bir teknik, genel başlığınızın içine bir harekete geçirici mesaj eklemektir, ancak buradaki tek seçenek bu değildir. Ayrıca, öne çıkarmak istediğiniz menü öğelerinde bir köşe etiketi seçebilirsiniz. Bu öğreticide, belirli menü öğelerine nasıl "özellikli" veya "yeni" etiket ekleyeceğinizi göstereceğiz. Bu köşe etiketleri, listedeki menü öğelerini vurgulamaya yardımcı olacak ve bu da ziyaretçilerinizin merak ve tıklamadaki değişimini artıracaktır. Global başlık şablonunu da indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki eğitim konseptine hızlıca bir göz atalım.

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. WordPress Menü Öğelerine Etiketler Ekleyin

Görünümdeki Menülere Git

Bu öğreticinin ilk bölümü, WordPress menünüzdeki etiketleri ayarlamaya ayrılmıştır. Bunu yapmak için WordPress panonuza gidin > Menüler > Kullanmakta olduğunuz birincil menüyü açın veya yeni bir tane oluşturun.

Öne Çıkan Menü Öğesine Etiket Ekle

Ardından, HTML etiketlerini menü öğesinin önüne yerleştirerek, seçtiğimiz bir menü öğesine özellikli bir etiket ekleyeceğiz.

• <label class="menu-label featured-label">Featured</label>

  Hizmetler

Yeni Menü Öğesine Etiket Ekle

Seçtiğimiz başka bir menü öğesi için de aynı şeyi yapacağız ve etiket kopyasıyla birlikte etiketlerin içindeki CSS sınıfını değiştireceğiz.

• <label class="menu-label new-label">New</label>

  Ücretsiz Kurslar

2. Divi Tema Oluşturucu'ya gidin

Divi Theme Builder'a gidin ve Global Başlık Ekle

Etiketler ayarlandığına göre artık Divi'ye geçme zamanı. Web sitenizin Divi Tema Oluşturucusuna gidin ve “Global Başlık Ekle”yi tıklayın.

Sıfırdan İnşa Etmeye Başlayın

Ardından, şablon düzenleyiciye yönlendirilmek için "Global Başlık Oluştur"u seçin.

3. Global Başlık Oluşturun

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve bir arka plan rengi ekleyin. Oluşturacağımız başlık tasarımı Tutor Layout Pack ile iyi gider, ancak Kod Modülünü (daha sonra) dahil ettiğiniz sürece istediğiniz herhangi bir başlık tasarımını oluşturmaktan çekinmeyin.

• Arka Plan Rengi: #2a3749

aralık

Bölümün tasarım sekmesine gidin ve boşluk ayarlarındaki tüm varsayılan üst ve alt dolguları kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

görünürlük

Satırımıza ekleyeceğimiz örtüşme nedeniyle (önizlemede fark edebileceğiniz gibi), bölümün taşmalarını görünür olarak ayarlamamız gerekecek.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve beyaz bir arka plan rengi uygulayın.

• Arka Plan Rengi: #FFFFFF

boyutlandırma

Tasarım sekmesine gidin ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Boşluk ayarlarına da bazı özel dolgu değerleri uygulayacağız.

• Üst Dolgu: 25px
• Alt Dolgu: 25px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Bazı yuvarlak köşelerle birlikte.

• Tüm Köşeler: 6px

Kutu Gölge

Ve ince bir kutu gölgesi.

• Kutu Gölge Dikey Konumu: 16px
• Gölge Rengi: rgba(0,0,0,0.07)

Dönüştür Çeviri

Ardından, tasarım sekmesindeki dönüştürme çevirme ayarlarını kullanarak satırı yeniden konumlandıracağız.

• Çevir Sağa Dönüştür: 50 piksel

taşmalar

Açılır listelerimizin daha küçük ekran boyutlarında görünmesini sağlamak için, taşmaları görünür olarak ayarlayarak satır ayarlarını tamamlayacağız.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütuna Menü Modülü Ekle

Seçim Menüsü

Menü Modülünü ekleme zamanı. Bu öğreticinin ilk bölümünde düzenlediğiniz menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Menü Metin Ayarları

Ardından tasarım sekmesine geçin ve menü metin ayarlarını aşağıdaki gibi değiştirin:

• Menü Yazı Tipi: PT Sans
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 16px
• Metin Hizalama: Sağ

Açılır Menü Ayarları

Açılır menü satırı rengini de değiştirin.

• Açılır Menü Satır Rengi: #007aff

Simgeler

Simge ayarlarında hamburger menü simgesi rengini değiştirerek devam edin.

• Hamburger Menü Simge Rengi: #007aff

boyutlandırma

Ve boyutlandırma ayarlarına maksimum logo genişliği atayarak modül ayarlarını tamamlayın.

• Logo Maksimum Genişliği: %40

Sütuna Kod Modülü Ekle

Menü Modülünüzün genel görünümünü ve hissini tamamladıktan sonra hemen altına bir Kod Modülü ekleyerek devam edin.

CSS Kodu Ekle

Aşağıdaki CSS kodu, menü etiketlerini ayrı ayrı biçimlendirmemize ve duyarlı bir tasarım oluşturmamıza yardımcı olacaktır:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Tüm Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Başlık tasarımını tamamladıktan sonra, sonucu web sitenizde görüntülemeden önce tüm Divi Theme Builder değişikliklerini kaydettiğinizden emin olun!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Son düşünceler

Bu gönderide, Divi tarafından oluşturulmuş global başlığınızdaki belirli menü öğelerini nasıl vurgulayacağınızı gösterdik. Daha spesifik olarak, bir Menü Modülü içinde görüntülenen WordPress menümüze köşe etiketleri ekledik. Bu, çok büyük bir gezinme yolculuğu yaratmadan menünüzdeki farklı menü öğelerini vurgulamanın harika bir yoludur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.