Divi ile zarif temaların ana menüsünü nasıl çoğaltabilirim
Yeni zarif tema menüsü, geliştiricilerin kendi sitelerinde çoğaltmaları için popüler bir talep haline geldi. Ana menü özelliği, sayfayı aşağı kaydırırken renk ve animasyonu değiştirerek ziyaretçilerin dikkatini çeken (CTA) harekete geçirilecek davet düğmesidir. Sitenizde bu tür CTA düğmesine sahip olması, tıklama ve dönüşüm oranını artıracaktır. Bugün size Divi kullanarak zarif temaların ana menüsünü nasıl çoğaltacağınızı göstereceğim. Düğmenin özel stilini ve işlevselliğini uygulamak için CSS ve JQuery kombinasyonunu kullanacağım. Başlayalım!
Tasarım uygulamakYouTube kanalına abone Olduk WordPress Gösterge Tablosu’ndan bir menü yaptık, görünüm → menüler. Menü sayfasının üst kısmında ekran seçeneğini tıklayın ve CSS sınıfını kontrol edin. Bu, menü öğenize özel bir CSS sınıfı eklemenizi sağlar. Şimdi “Yeni Bir Menü Oluştur” u tıklayın ve menünüzü adlandırın. “Menü Oluştur” düğmesini tıklayın. Ardından, yeni menünüze menü bağlantısını ekleyin. Zarif tema menüsünü çoğalttığımız için, aşağıdaki özel bağlantıları ekledim: Blog eklentisi teması İLETİŞİM İLETİŞİMİ İNDİRİN MENUZUNA BİR BAĞLANTI ETMEDİĞİMİ BAŞKA DÜŞÜNDÜĞÜNÜZ, Siteniz için Ana Menü olarak yeni bir menü seçin. CTA düğmesine “İndirmek için birleştir” menü bağlantısını değiştirmek için, daha sonra CSS kullanarak düzenleyebilmeniz için özel bir CSS sınıfı eklemeniz gerekir. Sınıf eklemek için, yapılandırma seçeneğini açmak için indirmek için birleştirme menüsü öğesinin sağındaki okları tıklayın. CSS sınıfı metin kutusuna “COURTODAY_BUTTON” adlı bir sınıf ekleyin. Ana menü olarak oluşturulan ve belirlenen bir menüyü kaydedin, gezinme menüsüne ve CTA düğmesine stil ekleme zamanı. İlk gezinme menüsünü düzenleyerek, ana menü bıçak metninizin boyutunu değiştirmemiz gerekir. Ayarlama Teması → Başlık ve Gezinme → Ana Menü Çubuğu. Tüm varsayılan ayarları kaydedin ve metnin boyutunu 15 olarak değiştirin. Diğer gezinme menüsü özel bir CSS kullanılarak düzenlenecektir. Temanın ayarlanması altında, ek CSS’yi açın ve aşağıdaki özel CSS’yi ekleyin (bunu Style.css çocuğunuzun temasına da ekleyebilirsiniz): /*** Ana başlıktaki gölgeyi kaldır *** / #oyun başlığı {
Box-Shadow: Yok;
}
/*** Sabit başlığa gölge ekleyin ***/
@Media (min-width: 981px) {
#Play-Header.et-Fixed-Header {
Box-Shadow: 0 0 30px RGBA (7, 51, 84, 0.17)! Önemli;
-Webkit-Box-Shadow: 0 0 30px RGBA (7, 51, 84, 0.17)! Önemli;
-Moz-Box-Shadow: 0 0 30px RGBA (7, 51, 84, 0.17)! Önemli;
}
}
/*** Menüde dolguyu ayarlayın ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav> ul> Li> a {
Dolgu Alt: 23px;
}
#Top-Menu Li {
Dolgu: 0 10px! Önemli;
}
.et_header_style_left #ET-TOP-Navigation {
Dolgu Top: 20px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
Dolgu Top: 10 piksel;
}
/*** Düğme menüsünü stilde ***/
.Jointoday_button a {
Renk: #F92C8B! Önemli;
Hat yüksekliği: 9px;
yazı tipi-ağırlık: 600;
Dolgu: 13px 16px! Önemli;
Metin-Transform: büyük harf;
Yazı tipi boyutu: 12 piksel! Önemli;
Border-Radius: 50px;
-Webkit-Sınırlı-Radius: 50px;
-Moz-Sınırlı-Radius: 50px;
Ekran bloğu;
Geçiş: Tüm .5s kolaylığı;
-Webkit-Transition: Tüm .5s kolaylığı;
-Moz-Transition: Tüm .5s kolaylığı;
Sınır: 2px katı #f92c8b;
}
.Jointoday_button A: Hover {
Opaklık: 1! Önemli;
Renk: #fff! Önemli; arka plan rengi: #f92c8b;
}
.et-Fixed-Header #Top-Menu. Ortakoday_button A: Hover {
Arka plan-rengi: #DE20B3;
Sınır: 2px katı #de20b3;
Box-Shadow: 0px 5px 20px #AAB9C3;
-Moz-box-shadow: 0px 5px 20px #AAB9C3;
-Webkit-Box-Shadow: 0px 5px 20px #AAB9C3;
}
.et-Fixed-Header #Top-Menu .Jointoday_button A {
Renk: #fff! Önemli;
Arka Plan rengi: #F92C8B;
Box-Shadow: 0px 5px 20px #d6dee4;
-Moz-box-shadow: 0px 5px 20px #d6dee4;
-Webkit-Box-Shadow: 0px 5px 20px #d6dee4;
Sınır: 2px katı #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .Jointoday_button a {
Arka Plan rengi: #2cc2e6;
Sınır: 2px katı #2cc2e6;
Animasyon: Vurgu-Nav. 8s kolaylığı;
-Webkit-Animation: Vurgu-NAV .8S kolaylığı;
}
#play-header.et-fixed
Arka Plan rengi: #F92C8B;
Sınır: 2px katı #f92c8b;
Box-Shadow: 0px 5px 20px #AAB9C3;
-Moz-box-shadow: 0px 5px 20px #AAB9C3;
-Webkit-Box-Shadow: 0px 5px 20px #AAB9C3;
}
@-Webkit-Keyframes vurgulama nav {
% 0 {
-Webkit-Transform: Ölçek (1);
Dönüşüm: Ölçek (1)
}
% 50 {
-Webkit-Transform: Ölçek (1.2);
Dönüşüm: Ölçek (1.2)
}
100% {
-Webkit-Transform: Ölçek (1);
Dönüşüm: Ölçek (1)
}
}
@Keyframes vurgulamak {
% 0 {
-Webkit-Transform: Ölçek (1);
Dönüşüm: Ölçek (1)
}
% 50 {
-Webkit-Transform: Ölçek (1.2);
Dönüşüm: Ölçek (1.2)
}
100% {
-Webkit-Transform: Ölçek (1);
Dönüşüm: Ölçek (1)
}
}
/*** Mobil menü bağlantılarını ve düğmeyi stille ***/
@Media (Max-Width: 980px) {
.et_mobile_menu li {
Metin-align: merkez;
}
.et_mobile_menu li a {
Sınır alt kısımları: yok;
}
.et_mobile_menu li A: Hover {
Arka plan rengi: şeffaf;}
.Jointoday_button a {
Sınır dip: 2px katı #f92c8b! Önemli;}
}
Neredeyse bitmişsin. Bakalım menünün neye benzediğini görelim.
Menünün altındaki gölgeye dikkat edin, silindi ve yalnızca sayfayı aşağı kaydırırken gezinme etkin kaldığında görünür. Ayrıca, CTA düğmesi sabit bir navigasyondaki rengi değiştirmek için düzenlenmiştir. Geri kalan jQuery’nin eklenmesi, sayfadaki belirli bir noktaya yuvarlanırken düğmeye ek renk değişiklikleri ve nabız animasyonu eklemektir. Bu ek işlevsellik, kullanıcı içerikle ilgili olduğunda CTA düğmesine daha fazla dikkat çeker. Bu efekti eklemek için, düğmeye yalnızca kullanıcı sayfadaki belirli bir noktaya eğitildiğinde ek bir CSS sınıfı eklememiz gerekir. Bu durumda, kullanıcı sayfa içeriğinin yüzde 50’sinden daha fazla bir noktaya geldiğinde menüye “ET_HIGHLIGHT_NAV” sınıfını ekleyeceğiz. Bu sınıf, kullanıcı sayfanın üstüne geri döndükten sonra silinir.
Bunu birkaç jQuery ekleyerek yapabilirsiniz. Divi’yi aç → Tema seçeneği ve Entegrasyon sekmesinin altında, “Kodu blogunuzun başına ekleyin” metin alanına aşağıdaki jQuery’yi ekleyin:
JQuery (belge) .Ready (işlev ($) {
jQuery (pencere) .scroll (function () {var $ main_header = jQuery (‘#play-header’),
$ body = jQuery (‘gövde’),
ScrollPentage = 100 * (jQuery (this) .scrolltop () / $ body.height ()),
Scroll = $ (pencere) .scrolltop (),,
ObjectPosition = $ body.offset ().
if (kaydırma = 50) {
$ main_header.addclass (“et_highlight_nav”);
}
});
});
“ET_HIGHLIGHT_NAV” sınıfı artık CTA düğmesini darbe animasyonu ve mavi ile düzenlemek için kullanılabilir. Bu önceki etki için özel bir CSS eklediğiniz için hazırsınız. Şimdi menüye bakın.
CTA düğmesi, sayfayı daha da aşağı kaydırdığınızda ve sayfanın üstüne döndüğünüzde sıfırladığınızda mavi ve zonklamaya dönecektir. CTA düğmizin rengini değiştirin CTA düğmesi özel bir CSS sınıfı kullandığından, daha önce eklediğiniz CSS’yi ayarlayarak Sitenize uyacak şekilde düğme stilini değiştirebilirsiniz. Renk kodunu kendi kodunuzla değiştirin. İşte farklı bir düğme stilini hedefleyen CSS bölümü:
Düğme renginizi değiştirirseniz, CSS’yi değiştirerek telefondaki düğmenizin alt sınırını değiştirdiğinizden emin olun:
Cep telefonuna nasıl görünüyor? Daha önce eklenen özel CSS, menü öğenize odaklanacak ve CTA düğmenizi zarif tema mobil menüsünde olduğu gibi cep telefonuna doğru bir şekilde yerleştirecektir.
Yazı Tipi Menüsü Bu öğretici için, varsayılan aç SANS yazı tipini yazı tipi menüsü olarak kullanıyorum. Zarif tema siteleri için varsayılan yazı tipleri (menü metni dahil) Poppins adı verilen yazı tipleridir. Bu yazı tipini Google yazı tipini kullanarak bu önceki yazıdaki talimatları izleyerek içe aktarabilirsiniz. Son akıl o! Zarif temanın ana menüsünü başarıyla iki katına çıkardınız. Ve CTA düğme stilini, özel CSS’yi ayarlayarak sitenizin tasarımına uyacak şekilde ayarlayabilirsiniz. Düğme rengi sabit navigasyonda değiştiğinden ve sayfayı aşağı kaydırırken cansız olduğundan, kullanıcıların dönüşümünüze yardımcı olacak CTA’ya dikkat etme olasılığı daha yüksektir.
