Divi ile Elegant Temanın Birincil Menüsü Nasıl Çoğaltılır

Yeni Zarif Temalar menüsü, geliştiricilerin kendi sitelerinde çoğaltmaları için popüler bir istek oldu. Menünün ana özelliği, sayfayı aşağı kaydırırken renkleri değiştirerek ve canlandırarak ziyaretçilerin dikkatini çeken harekete geçirici mesaj (CTA) düğmesidir. Sitenizde bu tür bir CTA düğmesinin bulunması, tıklama oranını ve dönüşümleri büyük olasılıkla artıracaktır.

Bugün size Elegant Theme'in ana menüsünü Divi kullanarak nasıl çoğaltacağınızı göstereceğim. Düğmenin özel stilini ve işlevselliğini uygulamak için bir CSS ve jQuery kombinasyonu kullanacağım.

Başlayalım!

Tasarımın Uygulanması

Youtube Kanalımıza Abone Olun

Menü Oluşturma

WordPress Kontrol Panelinden Görünüm → Menüler seçeneğine gidin. Menüler sayfasının üst kısmında Ekran Seçenekleri'ne tıklayın ve CSS Sınıflarını kontrol edin. Bu, menü öğelerinize özel bir CSS sınıfı eklemenize olanak tanır.

Şimdi “yeni menü oluştur” a tıklayın ve menünüze bir isim verin.

“Menü Oluştur” düğmesine tıklayın.

Ardından, menü bağlantılarını yeni menünüze ekleyin. Elegant Temalar menüsünü çoğalttığımız için aşağıdaki özel bağlantıları ekliyorum:

Temalar
Eklentiler
Blog
Temas
Giriş yapmak
İndirmek İçin Katılın

Menünüze bağlantıları eklemeyi bitirdikten sonra, sitenizin ana menüsü olarak yeni menüyü seçin.

"İndirmeye Katıl" menü bağlantısını CTA düğmesiyle değiştirmek için, daha sonra CSS kullanarak stil oluşturabilmeniz için ona özel bir CSS sınıfı eklemeniz gerekir. Sınıfı eklemek için, yapılandırma seçeneklerini ortaya çıkarmak için İndirmeye Katıl menü öğesinin sağındaki oka tıklayın. CSS Sınıfları metin kutusuna "jointoday_button" adlı bir sınıf ekleyin.

Menüyü Kaydet

Oluşturulan ve birincil menü olarak ayarlanan menü ile, navigasyon menüsüne ve CTA düğmesine stil eklemenin zamanı geldi.

Gezinme Menüsünün Stilini Oluşturma

İlk önce birincil menü çubuğu metin boyutunuzu değiştirmemiz gerekiyor. Tema Özelleştirici → Başlık ve Gezinme → Birincil Menü Çubuğu seçeneğine gidin . Tüm varsayılan ayarları koruyun ve metin boyutunu 15 olarak değiştirin.

Gezinme menüsünün geri kalanı özel CSS kullanılarak şekillendirilecektir. Tema Özelleştirici altında, Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin (bunları alt temanızın style.css dosyasına da ekleyebilirsiniz):

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}

/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}

.et_header_style_left #et-top-navigation {
padding-top: 20px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}

/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}

.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}

.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #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 {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}

#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}

.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;} 

.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

Neredeyse tamamladınız. Menünün şu ana kadar nasıl göründüğüne bir göz atalım.

Menünün altındaki gölgenin kaldırıldığına ve yalnızca sayfa aşağı kaydırıldığında sabit gezinme etkinleştirildiğinde gösterildiğine dikkat edin. Ayrıca, CTA düğmesi, sabit gezinmede renkleri değiştirecek şekilde tasarlanmıştır.

jQuery'yi ekleme

Yapılması gereken tek şey, sayfada belirli bir noktaya aşağı kaydırırken düğmeye ek renk değişikliği ve darbe animasyonu eklemek. Bu ek işlevsellik, kullanıcı içerikle etkileşime girdikçe CTA düğmesine daha fazla dikkat çeker. Bu efekti eklemek için, sadece kullanıcı sayfada belirli bir noktaya kaydırdığında butona ek bir CSS sınıfı eklememiz gerekiyor. Bu durumda, kullanıcı sayfa gövdesinin yüzde 50'sinden daha büyük bir noktaya kaydırdığında menüye “et_highlight_nav” sınıfını ekleyeceğiz. Kullanıcı sayfanın en üstüne döndüğünde bu sınıf kaldırılacaktır.

Bunu biraz jQuery ekleyerek başarabilirsiniz. Divi → Tema Seçenekleri'ne gidin ve Entegrasyon sekmesi altında, "Blogunuzun başlığına kod ekleyin" metin alanına aşağıdaki jQuery'yi ekleyin:

<script>
jQuery(document).ready(function($){
	jQuery(window).scroll(function() {    
	var   $main_header = jQuery('#main-header'),
		$body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
	    	objectPosition = $body.offset().top;

	    if (scroll < objectPosition) {
	        $main_header.removeClass("et_highlight_nav");
	    }
	    if (scrollPercentage >= 50){
	        $main_header.addClass("et_highlight_nav");
	    }
	});
});
</script>

"et_highlight_nav" sınıfı artık bir darbe animasyonu ve mavi bir renkle CTA düğmesine stil vermek için kullanılabilir. Bu efekt için özel CSS'yi daha önce eklemiş olduğunuz için hazırsınız.

Şimdi menüye göz atın.

CTA düğmesi artık maviye dönecek ve siz sayfayı aşağı kaydırdıkça yanıp sönecek ve sayfanın başına döndüğünüzde sıfırlanacaktır.

CTA düğmenizin Rengini Değiştirme

CTA düğmesi özel bir CSS sınıfı kullandığından, daha önce eklediğiniz CSS'yi ayarlayarak düğmenin stilini sitenize uyacak şekilde değiştirebilirsiniz. Renk kodunu kendi kodunuzla değiştirmeniz yeterlidir. Farklı düğme stillerini hedefleyen CSS bölümleri şunlardır:

Düğmenizin rengini değiştirirseniz, CSS'yi buradan değiştirerek mobilde düğmenizin alt kenarlığını değiştirdiğinizden emin olun:

Mobilde Nasıl Görünüyor?

Daha önce eklenen özel CSS, menü öğelerinizi ortalayacak ve tıpkı zarif temalar mobil menüsünde olduğu gibi mobil cihazlarda CTA düğmenizi düzgün bir şekilde yerleştirecektir.

Menü Yazı Tipi

Bu eğitim için, menü yazı tipi olarak varsayılan Open Sans yazı tipini kullanıyorum. Elegant Themes sitesi için varsayılan yazı tipi (menü metni dahil), Poppins adlı bir yazı tipidir. Bu yazı tipini, bu önceki gönderideki talimatları izleyerek Google Yazı Tiplerini kullanarak içe aktarabilirsiniz.

Son düşünceler

Bu kadar! Zarif Temalar birincil menüsünü başarıyla çoğalttınız. Ayrıca, özel CSS'yi ayarlayarak CTA düğmenizin stilini sitenizin tasarımına uyacak şekilde ayarlayabilirsiniz. Sabit gezinmede düğme renkleri değiştiğinden ve sayfayı aşağı kaydırırken canlandığından, kullanıcıların dönüşümlerinize yardımcı olacak CTA'yı fark etmeleri daha olasıdır.

Umarım bu yeni menü gelecek projeler için faydalı bir özellik olur. Ve aşağıdaki yorumlarda sizden haber bekliyorum.

Eğlence!