Divi’nin ikincil menü çubuğunu harekete geçirme davetine ayarlayın
Sitenizdeki en önemli bilgiler en iyi Paro’da olmalıdır (ekranınızın yaklaşık 600 en iyi 600 piksel). Divi bu konsepti ikincil menü çubuklarıyla kullanır. Paylaş düğmesi, ikincil menü, telefon numarası ve e -posta adresi gibi önemli öğeleri görüntülemek için menü çubuğu sitenizin en üstünde yer alır. Kullanıcılar, hangi sayfaları açarlarsa gelsin ve onu bulmak için kaydırmak zorunda kalmadan her zaman bu önemli bilgileri bulabilmelidir. Sitenizi daha fazla kayıt üretmek, indirim teklif etmek veya doğrudan trafiği yönlendirmek için aradığınız sayfayı arıyorsanız, bu yazı sizin için uygundur. Divi ikincil menü çubuğuna gömülü (CTA) harekete geçirmeye çalışacağız. HelloBar ve Sumome’s Smart Bar gibi potansiyel müşterileri yakalamaya adanmış birkaç popüler eklenti var. Liderlerin neslini bir sonraki seviyeye getirmek istiyorsanız, böyle güçlü bir eklenti bulmanızı öneririm. Ama bugün için basitleştirdim.
Bir eklenti kullanmadan Div’teki div’e nasıl basit bir CTA ekleyeceğinizi göstereceğim. Divi’nin üst eleman çubuğunun konumunu nasıl değiştireceğinizi bile göstereceğim. Kim bilir? Bu alanı gerçekten benzersiz bir şey için kullanmaya bile karar verebilirsiniz. Başlayalım. Divi İkincil Menü çubuğunu, YouTube kanalına abone olma davetiyle ayarlama Divi ile tasarımı, WordPress yöneticisinde başlık öğeleri olan ikincil bir menü çubuğu ekleyerek uyguluyoruz, divi → tema özelleştiricisi. Başlıklar ve Gezinme → Başlık Elemanları Başlık öğesinin altındaki başlık öğeleri seçin, sosyal simgeleri görüntüleme seçeneğinin kontrol edilmediğinden ve iki metin kutusuna telefon numarasını ve e -posta adresini girdiğinden emin olun. İkincil menü satırı şimdi başlık ve navigasyona geri döndü ve seçin İkincil menü çubuğunu ayarlamak için. Aşağıdaki ayarlarda değişiklik yapın: Tam Genişlik Yapın: Evet Metin Boyutu: 14px Yazı Tipi Korumu: TT (Büyük Kesin) Arka Plan Rengi: #EB593C Renk açılır menüsü: #EB593C
Daha fazla bilgi edinmek istiyorum … Div’e bağlı. CTA’yı daha sonra organize etmek için kullanacağımız şey budur.
HREF özniteliğindeki hashtag’i (#), CTA bağlantısını tıklarken kullanıcının ziyaret etmesini istediğiniz sayfanın URL’si ile değiştirmeniz gerekir. Örneğin, daha fazla kullanıcıyı iletişim sayfanıza yönlendirmek istiyorsanız, URL’yi bu sayfaya gireceksiniz. Ayrıca, CTA’nızın daha sonra ne olduğunu öğrendikten sonra, “Daha fazla bilgi edinmek istiyorum …” ve “Buraya Tıklayın” metnini istediğiniz her şeye değiştirebilirsiniz. Kısaca yapmayı unutmayın çünkü yapacak çok yer yok.
Şimdi şu ana kadar üst bıçakların ne olduğunu görmek için sitenize bakalım. Şu anda üst bıçaklarınız yerinde değil ve düzenlenmesi gerekiyor. Düzeltmek için bazı özel CSS ekleyebilirsiniz. WordPress Yöneticisi’ndeki son dokunuş, Divi → Tema seçeneği. Özel CSS kutusuna gidin ve aşağıdaki CSS’yi girin: #Top-Header. Konteyner {Pilding-Top: 1.3EM;
yazı tipi-ağırlık: 600; Pilding Alt: 0.75EM;
}
#Et-info {
Genişlik:%33.3;
Sağa çık;
Metin-align: doğru;
}
.CTA {
Genişlik:%33.3;
Metin-align: merkez;
Sağa çık;
Marj -TOP: -3px;
}
.CTA A {
Arka plan: #fff;
Renk: #EB593C! Önemli;
Dolgu: 5px 10px;
Ekran: satır içi blok;
-Webkit-Sınırlı-Radius: 3px;
-Moz-Sınırlı-Radius: 3px;
Border-Radius: 3px;
Yazı tipi-ağırlık: 700! Önemli;
Geçiş: tüm 0.5s;
}
.CTA A: Hover {
Arka plan: #555;
Renk: #fff! Önemli;
}
#Et-ocontary-menu {
Genişlik:%33.3;
Şamandıra: sol;
Metin-align: sol;
}
@Media (Max-Width: 980px) {
#Et-info {
Genişlik:%50;
Sağa çık;
Metin-align: doğru;
}
.CTA {
Genişlik:%50;
Metin-align: merkez;
Şamandıra: sol;
Marj -TOP: -3px;
}
#Et-info {
Dolgu Top: 0px;
Pilding Alt: 0.75EM;
}
}
@Media (Max-Width: 740px) {
.CTA {ekran: yok;}
#et-info {genişlik:%100;}
}
Bu CSS kodu, üst bıçaklarınızda dört ana şey yapar. 1) Bu, başlığınız, CTA ve ikincil menü bilgilerinizi sütun düzeninin üçte birine ayırır (her biri%33.3 genişliğe sahip). 2) Bu, gölgelik bilgilerini üst çubuğun sağ sütununa, ortaya CTA’ya ve soldaki ikincil menüye konumlandırır (bu menü şu anda aktif değildir, ancak kullanmaya karar verirseniz). 3) Bu sizin CTA tarzınız. 4) Bu, mobil cihazlar için üst bıçakları optimize eder. İşte burada! Şimdi en iyi çubuğunuz zarif bir oyunculuk davetiyle tamamlandı.
Kapanış Zihni Yukarıdaki bıçakların yapısına karar verirken, bence, kullanıcının içeriği doğal olarak soldan sağa okurken gördüğü ilk şey olarak öne çıkacak şekilde ortada CTA’nın ortada olması uygun olduğunu düşünüyorum. Ayrıca, ek olarak, CTA’nız için daha fazla alan sağlamak için özel CSS’nizdeki üst çubuğun her parçasını genişletmeniz gerekebilir.Başlığın ve ikincil menü bilgilerinin tam işlevselliğini korumak istiyorsanız, bu örnek için küçük kalmaya çalışıyorum.Tabii ki, CTA’ya ek olarak bu alanı kullanmanın çeşitli yolları vardır.Bunu sloganları, logoları/grafikleri veya kısa tanıklıkları görüntülemek için kullanabilirsiniz.Umarım bu özellikten hoşlanırsınız.Yorumlarda herhangi bir girdi göndermekten çekinmeyin.
