Divi menüsü CSS ile nasıl özelleştirilir

Divi kullanıyor ve menünüzden en iyi şekilde yararlanmak mı istiyorsunuz? Bu kılavuzda, Divi menüsünü CSS ile nasıl özelleştireceğinizi, rakiplerinizin arasından sıyrılmayı ve sitenizdeki müşteri deneyimini iyileştirmeyi göstereceğiz.

3 milyondan fazla kullanıcısı olan Divi, piyasadaki en popüler sayfa oluşturuculardan biridir. Bunun nedenlerinden biri, son derece esnek olması ve yeni başlamış olsanız bile sitenize profesyonel bir görünüm kazandırmanıza olanak tanıyan tonlarca özelleştirme seçeneğiyle gelmesidir. Ancak, web sitenizin tasarımını bir üst düzeye çıkarmak için tasarımı CSS komut dosyalarıyla özelleştirmeniz gerekir. Düzenleyebileceğiniz pek çok şey var ama en önemlilerinden biri navigasyon menüsü.

Divi menüsünü neden düzenlemelisiniz?

Menü gezinme çubuğu, herhangi bir web sitesinin en önemli unsurlarından biridir. Sayfanın en üstündedir, bu nedenle kullanıcıların bir sayfayı yüklediklerinde gördükleri ilk öğedir. Genellikle, bu menü bir sitenin tüm sayfalarında görünür ve onu kullanıcıların en çok gördüğü öğe yapar.

Bunun da ötesinde, bir menünün ana işlevi, ziyaretçilere gezinmek ve kullanıcı deneyimini geliştirmek için kolay bir yol sağlamaktır. Bu nedenle iyi organize edilmiş ve tasarlanmış bir gezinme menüsü işletmeniz üzerinde büyük bir etkiye sahip olabilir.

Divi, menüyü düzenlemek için birçok araçla birlikte gelse de, özel kod eklemek en iyi yoldur. Ancak kodlamayı bilmiyorsanız endişelenmeyin. Bu eğitimde size adım adım CSS ile Divi menüsünü nasıl özelleştireceğinizi göstereceğiz.

Divi menüsü CSS ile nasıl özelleştirilir

Bu bölümde, Divi menüsünü en iyi şekilde kullanmak için CSS ile nasıl düzenleyeceğinizi göstereceğiz. Görünüm > Özelleştir > Ek CSS'ye giderek CSS komut dosyalarını WordPress Özelleştirici'ye yapıştırmanız gerekir. Alternatif olarak, bunları alt temanızın style.css dosyasına yapıştırabilirsiniz.

NOT : Başlamadan önce:

• Yedekleme : Sitenizin tam bir yedeğini oluşturun
• Bir alt tema kullanın : Bu kılavuzu izleyerek veya bu eklentilerden herhangi birini kullanarak bir tema oluşturabilirsiniz.

Şimdi Divi menüsünü CSS komut dosyalarıyla özelleştirmek için farklı seçenekler görelim.

1) Gezinme çubuğunun arka plan rengini değiştirin

Divi size menünün arka plan rengini düzenleme seçeneği sunar, ancak bunu tüm başlığa uygular. Yalnızca gezinme çubuğunun rengini değiştirmek istiyorsanız, bu komut dosyasını kullanın:

.et_menu_container{background-color:red;}

2) Menü yazı tiplerini değiştirin

Divi menüsünü özelleştirmenin başka bir yolu da menü yazı tiplerini değiştirmektir. Örneğin, bu CSS betiği, menünün tüm öğelerinin yazı tipini Lucida Konsolu olarak değiştirecektir. Buna açılır menüler ve menü kapsayıcısında görüntülenen diğer içerikler dahildir.

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

Not : Yazı tipi ailesi, yukarıdaki örnekte gösterildiği gibi bir yazı tipi grubudur. Tek bir yazı tipi de seçebilirsiniz, ancak önce onu WordPress kurulumunuza yüklemeniz gerekir. Yazı tipleri hakkında daha fazla bilgi edinmek için aşağıdaki bağlantılara göz atabilirsiniz:

• WordPress'e Google Yazı Tipleri nasıl eklenir
• WordPress'te yazı tiplerini değiştirin
• Yazı Tipi Ailesi

3) Vurgulu öğelerdeki metin rengini değiştirin

Bir öğenin üzerine geldiğinizde metnin rengini değiştirmek için şu kodu kullanın:

#top-menu li a:hover{
color:blue;
}

Bu, kullanıcılar fareyle üzerlerine geldiğinde gezinme bağlantılarının rengini maviye çevirecektir, ancak kodu ayarlayabilir ve hex kodunu veya RGBA biçimini kullanarak istediğiniz herhangi bir renge değiştirebilirsiniz.

4) Açılır pencerelerin genişliğini değiştirin

Divi menüsünün her bir öğesinin iyi göründüğünden emin olmak için açılır menünün genişliğini ayarlayabilirsiniz. Örneğin, açılır listeye 500 piksel genişlik vermek için bu CSS komut dosyasını kullanın:

#top-menu > li > .sub-menu{
width:500px;
}

5) Divi menüsü gezinme çubuğuna bir arka plan resmi ekleyin

Küçük tweaks dışında, daha radikal değişiklikler de yapabilirsiniz. Örneğin, gezinme çubuğunun arka planı olarak bir görüntü görüntüleyerek Divi menüsünü CSS ile özelleştirmek istediğinizi varsayalım. Bunu yapmak için şu kodu kopyalayıp yapıştırmanız yeterlidir:

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover;
}

Daha önce yüklenmiş bir resim kullandığımızı unutmayın. Kendi resminizi yükleyin ve resim URL'sini kullanmak istediğinizle değiştirin.

Alternatif olarak, harici bir URL'den bir resim de kullanabilirsiniz, ancak web sitenizin medya kitaplığına bir resim yüklemenizi şiddetle tavsiye ederiz. Bu şekilde görsel üzerinde tam kontrole sahip olduğunuzdan emin olursunuz ve görsel sahibi görseli silmeye karar verirse görseli kaybetme riski yoktur.

Son olarak, özelliği, görüntünün tüm kullanılabilir alanı kaplayacak şekilde kullandığımızı unutmayın. Tekrarla, otomatik, içerme vb. gibi başka seçenekler de vardır, bu yüzden beğendiğinizi seçin. Resmin sitenizde nasıl yazdırılacağına ilişkin daha karmaşık seçenekler için bu siteye göz atın.

Tek bir öğeye CSS nasıl uygulanır

Yukarıdaki örnekler, menü gezinme çubuğundaki tüm öğeleri düzenler, ancak Divi menüsünü CSS kodunu kullanarak özelleştirmenin tek yolu bu değildir. CSS komut dosyalarını tek bir öğeye de uygulayabilirsiniz. Ancak buna geçmeden önce, CSS'nin nasıl çalıştığını ve komut dosyalarını nasıl oluşturduğumuzu daha iyi anlayalım.

Bir seçici, bir özellik ve bir değerden oluşan bir CSS tek satırına kural adı verilir.

Özellik ve değerin açıklayıcı adları olduğundan, seçiciye odaklanacağız.

Seçici , özellik ve değer tarafından değiştirilen öğeye işaret eden bir koddur. Seçiciler birçok veya tek öğeye başvurabilir.

Tek bir eleman belirtmediğimizde, CSS kuralı onun tüm "alt" elemanlarına uygular. Bu, bu davranışı belirten CSS'nin kalıtım ilkesini izler.

CSS'yi tek öğelere uygula

CSS'yi tekil öğelere uygulamak için tarayıcı konsolunu kullanmanız ve o öğeye özel seçiciyi seçmeniz gerekir. Bunu yapmak için, düzenlemek istediğiniz sayfaya gidin ve tarayıcı konsolunu açmak için sağ tıklayın veya F12 tuşuna basın.

Bunun gibi bir şey göreceksiniz:

Bu çok fazla kod! Endişelenme, bunaltıcı görünebilir, ancak alıştıktan sonra başa çıkması oldukça kolaydır.

<body> , <header> , <div> HTML etiketlerini açıp fareyi üzerlerine getirdiğinizde öğelerin web sayfanızda nasıl vurgulandığını göreceksiniz. Bu şekilde, hangi öğeye işaret ettiğinizi görebilir ve CSS kodunuzda kullanmanız gereken HTML sınıfını veya kimliğini alabilirsiniz.

Değiştirmek istediğiniz öğeye tıklayın ve CSS seçiciyi göreceksiniz.

Kopyalamak için üzerine sağ tıklayın ve kopyala > CSS seçiciyi seçin. Artık CSS seçiciyi kopyaladığınıza göre, WordPress panonuza gidin, Özelleştirici > Ek CSS'ye gidin ve yapıştırın:

#top-menu > li:nth-child(1)

Bu seçici, örnek web sitemizdeki "Ana Sayfa" bağlantısını işaret ediyor, bu nedenle artık herhangi bir CSS özelliğini kullanabilir ve bunu yalnızca menümüzün "Ana Sayfa" bağlantısına uygulayabiliriz. Örneğin, arka planın rengini kırmızı olarak değiştirmek için şunun gibi bir şey kullanacaksınız:

#top-menu > li:nth-child(1){background-color:red;}

:nth-child(1) sözde sınıfının bize bunun aynı hiyerarşi düzeyindeki ilk (1) liste öğesi olduğunu söylediğine dikkat edin.

Artık tarayıcı denetçisini kullanarak bir seçiciyi nasıl kopyalayacağınızı bildiğinize göre, CSS stilinizi web sitenizin herhangi bir öğesine uygulayabilirsiniz.

Daha fazla örnek CSS komut dosyası

Divi menünüzü CSS ile özelleştirmek için yapabileceğiniz daha pek çok şey var. Birkaç örneğe daha bakalım.

Menü öğesine bir simge ekleyin

Font Awesome simgelerini kullanmak için önce bunları web sitenize yüklemeniz gerekir. Bundan sonra, menünün ilk öğesinin yanına bir simge yazdırmak için aşağıdaki komut dosyasını yapıştırabilirsiniz:

#top-menu > li:nth-child(1) a::before{

padding-right: 10px;

font-family: "Font Awesome 5 Free";

font-weight: 900; content: "\f015";

}

Bozuk bir yazı tipi görürseniz, bu, Font Awesome'in yüklenmediği anlamına gelir.

Simge setlerini yüklemek için, Divi seçenekleri > Gelişmiş'e giden başlık bölümüne bu satırı ekleyin.

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

CSS kullanarak menünün herhangi bir öğesini gizleyin

Doğru CSS seçiciye sahip olduğunuzda, ona herhangi bir CSS özelliğini uygulayabilirsiniz. En yaygın ve kullanışlı olanlardan biri display:none ; bu, menüden herhangi bir öğeyi kaldırmanıza izin verir. Örneğin, menü gezinme çubuğundan sepet öğesini gizlemek için şu kodu yapıştırın:

.et-cart-info{display:none;}

Çözüm

Sonuç olarak, site menünüzü düzenlemek, site gezinmenizi iyileştirmenin ve sitenizdeki kullanıcı deneyimini iyileştirmenin mükemmel bir yoludur. Divi'nin bunun için birkaç seçeneği olsa da, en iyi yol Divi menüsünü CSS komut dosyalarıyla özelleştirmek.

Bu öğreticide, kodlama becerileriniz olmasa bile sitenizi bir sonraki düzeye taşımanıza yardımcı olmak için menüyü adım adım düzenlemenin birkaç yolunu gördük. Şimdiye kadar, şunları nasıl yapacağınızı bilmelisiniz:

• Menünün arka plan rengini değiştirin
• Yazı tiplerini değiştirin
• Vurgulu öğelerdeki metin rengini değiştirme
• Açılır listenin genişliğini değiştirin
• Menüye bir arka plan resmi ekleyin

Ek olarak, CSS'yi tek tek öğelere nasıl uygulayacağımızı, menüye simgeler nasıl ekleyeceğinizi ve herhangi bir öğeyi nasıl gizleyeceğinizi gördük. Bu komut dosyalarını temel almanızı, oynamanızı ve sitenize uyarlamak için özelleştirmenizi öneririz.

Divi'den en iyi şekilde nasıl yararlanılacağı hakkında daha fazla kılavuz için aşağıdaki kılavuzlara göz atın:

• Ürün Sayfasını Divi'de Özelleştirin
• Divi Mağaza Sayfalarında Sepete Ekle Düğmesi Nasıl Eklenir
• Divi'de alt bilgi nasıl gizlenir/kaldırılır
• Divi İletişim Formu Çalışmıyor – Nasıl Düzeltilir

Sitenizin menüsünü CSS ile düzenlemeyi denediniz mi? Neyi değiştirdin? Aşağıdaki yorumlar bölümünde bize bildirin!