Divi'nin İkincil Menü Çubuğunu Harekete Geçirici Mesajla Özelleştirme

Sitenizdeki en önemli bilgiler ekranın üst kısmında yer almalıdır (kabaca ekranınızın en üstteki 600 pikseli). Divi, ikincil menü çubuğuyla bu konseptten yararlanır. Menü çubuğu, paylaşım düğmeleri, ikincil menü, telefon numarası ve e-posta adresi gibi önemli öğeleri göstermek için sitenizin en üstünde yer alır. Kullanıcılar, hangi sayfaya gelirlerse gelsinler ve bulmak için kaydırma yapmak zorunda kalmadan bu önemli bilgileri her zaman bulabilmelidir.

Sitenizi daha fazla kayıt oluşturmak, indirim sunmak veya trafiği yönlendirmek istediğiniz bir sayfanız varsa, bu gönderi tam size göre. Divi'nin ikincil menü çubuğuna yerleştirilmiş bir harekete geçirici mesaj (CTA) oluşturmaya çalışacağız. Hellobar ve Sumome's Smart Bar gibi potansiyel müşterileri yakalamaya adanmış birkaç popüler eklenti var. Potansiyel müşteri yaratmayı bir sonraki seviyeye taşıma konusunda ciddiyseniz, bunun gibi güçlü bir eklentiye bakmanızı tavsiye ederim. Ama bugün için basit tutuyorum.

Bir eklenti kullanmadan Div'in üst çubuğuna nasıl basit bir CTA ekleyeceğinizi göstereceğim. Hatta size Divi'nin üst çubuk elemanlarının konumunu nasıl değiştireceğinizi göstereceğim. Kim bilir? Bu alanı tamamen benzersiz bir şey için kullanmaya bile karar verebilirsiniz.

Başlayalım.

Divi'nin İkincil Menü Çubuğunu Harekete Geçirici Mesajla Özelleştirme

Youtube Kanalımıza Abone Olun

Tasarımı Divi ile Uygulamak

Başlık Öğeleriyle İkincil Menü Çubuğu Ekleme

WordPress Admin'de Divi → Theme Customizer'a gidin . Başlık ve Gezinme → Başlık Öğeleri'ni seçin

Başlık Öğeleri altında, sosyal simgeleri gösterme seçeneğinin işaretli olmadığından emin olun ve iki metin kutusuna bir telefon numarası ve bir e-posta adresi girin.

İkincil Menü Çubuğunu Şekillendirme

Şimdi Başlık ve Gezinme'ye geri dönün ve İkincil Menü Çubuğunu özelleştirmeyi seçin. Aşağıdaki ayarlarda değişiklik yapın:

Tam Genişlik Yap: evet
Metin Boyutu: 14px
Yazı tipi stili: TT (büyük harf)
Arka Plan Rengi: #eb593c
Açılır Menü Arka Plan Rengi: #eb593c

Alt temanızdaki header.php dosyasına CTA ekleme

CTA bölümünü üst çubuğa eklemek için Divi tema klasöründeki header.php dosyasına bir satır html kodu eklemeniz gerekecektir.

Henüz bir alt tema oluşturmadıysanız, tema şablonu dosyalarında değişiklik yapmaya başlamadan önce bunu yapmak iyi bir fikirdir. Alt tema eklemeyi öğrenmek için buraya tıklayın.

Sitenizde bir alt tema oluşturup etkinleştirdikten sonra, FileZilla gibi bir FTP istemcisi kullanarak alt tema dosyalarınıza erişin. Header.php dosyasını Divi tema klasörünüzden kopyalayın ve alt tema klasörünüze yapıştırın. Dosya adını tamamen aynı tuttuğunuzdan (header.php) ve orijinal dosyadaki tüm kodu kopyaladığınızdan emin olun.

Header.php dosyası alt tema klasörünüze yerleştirildiğinde, dosyayı açmak/düzenlemek için bir metin düzenleyici kullanın (alt tema sürümünü düzenlediğinizden emin olun).

“et-sekonder-menü” kimliğine sahip div'i bulun. Bu, ikincil menü öğelerini içeren div'dir.

İkincil menü div'inin hemen üstüne aşağıdaki kodu ekleyin:

<div class="cta"> Want to Learn More ... <a href="#">Click Here</a></div> 

Div'e eklenen "cta" sınıfına dikkat edin. Bu, daha sonra CTA'yı biçimlendirmek için kullanacağımız şeydir.

Kullanıcının CTA bağlantısını tıkladığında ziyaret etmesini istediğiniz sayfanın url'si ile href özelliğindeki hashtag'i (#) değiştirmeniz gerekecektir. Örneğin, iletişim sayfanıza daha fazla kullanıcı çekmek istiyorsanız, url'yi o sayfaya koyarsınız.

Ayrıca, CTA'nızın ne olacağını öğrendikten sonra, “Daha Fazla Bilgi Edinmek İstiyorum…” metnini ve “Buraya Tıklayın” bağlantı metnini istediğiniz gibi değiştirebilirsiniz. Çalışmak için çok fazla alan olmadığından kısa tutmayı unutmayın.

Şimdi en üstteki çubuğun şu ana kadar nasıl göründüğünü görmek için sitenize bakalım.

Şu anda üst çubuk içeriğiniz yerinde değil ve stil gerektiriyor. Bunu düzeltmek için bazı özel CSS ekleyebilirsiniz.

Son dokunuşlar

WordPress Admin'de Divi → Tema Seçenekleri'ne gidin . Özel CSS kutusuna ilerleyin ve aşağıdaki css'i girin:

#top-header .container {
    padding-top: 1.3em;
    font-weight: 600;
    padding-bottom: 0.75em;
}

#et-info {
    width: 33.3%;
    float: right;
    text-align: right;
}

.cta {
width: 33.3%; 
text-align:center;
float: right;
margin-top: -3px;
}

.cta a {
background: #fff;
    color: #eb593c !important;
    padding: 5px 10px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 700 !important;
    transition: all 0.5s;
}

.cta a:hover {
background: #555;
color: #fff !important;
}

#et-secondary-menu {
width: 33.3%;
float: left; 
text-align: left;
}

@media (max-width: 980px){
#et-info {
    width: 50%;
    float: right;
    text-align: right;
}

.cta {
width: 50%; 
text-align:center;
float: left;
margin-top: -3px;
}

#et-info {
padding-top:0px;
padding-bottom: 0.75em;
}
}

@media (max-width: 740px){
.cta {display:none;}
#et-info {width: 100%;}
}

Bu CSS kodu, üst çubuğunuz için dört önemli şey yapar. 1) Başlık bilgilerinizi, CTA'nızı ve ikincil menünüzü üçte bir sütun düzenine böler (her biri %33,3 genişliğe sahiptir). 2) Başlık bilgisini üst çubuğun sağ sütununa, CTA'yı ortaya ve ikincil menüyü sola konumlandırır (bu menü şu anda etkin değildir, ancak kullanmaya karar verirseniz oradadır). 3) CTA'nızı şekillendirir. 4) Mobil cihazlar için üst çubuğu optimize eder.

Bu kadar!

Artık üst çubuğunuz zarif bir harekete geçirici mesajla tamamlandı.

Kapanış Düşünceleri

Bu üst çubuğun yapısına karar verirken, kullanıcının içeriği doğal olarak soldan sağa okuduğunda gördüğü ilk şey olarak öne çıkması için CTA'nın ortada ve solunda hiçbir şey olmadan kalmasının uygun olduğunu düşündüm.

Ayrıca, CTA'nıza daha fazla yer açmak için özel CSS'nizdeki üst çubuk bölümlerinin her birinin genişliğini ayarlamanız gerekebilir. Başlık bilgisinin ve ikincil menünün tam işlevselliğini korumak istemeniz durumunda, bu örnek için küçük tutmaya çalıştım.

Elbette, bu alanı bir CTA dışında kullanmanın farklı yolları vardır. Bir slogan, logo/grafik veya kısa bir referans göstermek için kullanabilirsiniz.

Umarım bu özelliği beğenirsiniz. Yorumlarda herhangi bir girdi göndermekten çekinmeyin.