CSS ile Divi menüsü nasıl ayarlanır
Divi kullanıyor musunuz ve menünüzü en üst düzeye çıkarmak mı istiyorsunuz? Bu kılavuzda, rakiplerinizden öne çıkacak ve sitenizdeki müşteri deneyimini geliştirmek için CSS ile Divi menüsünü nasıl ayarlayacağınızı göstereceğiz. 3 milyondan fazla kullanıcıyla Divi, piyasadaki en popüler sayfa üreticilerinden biridir. Bunun bir nedeni, çok esnek olması ve acemi olsanız bile sitenize profesyonel bir görünüm vermenizi sağlayan birçok ayar seçeneği ile donatılmış olmasıdır. Ancak, web sitesi tasarımınızı bir sonraki seviyeye getirmek için tasarımı CSS komut dosyasıyla ayarlamanız gerekir. Düzenleyebileceğiniz birçok şey var ama en önemlilerinden biri gezinme menüsü.
Neden Divi Menüsünü Düzenle? NAVBAR menüsü, herhangi bir web sitesinin en önemli öğelerinden biridir. Sayfanın üstünde, bu yüzden kullanıcının sayfayı yüklediğinde gördüğü ilk öğedir. Genellikle, menü tüm site sayfalarında görünür ve bu da onu kullanıcılar tarafından en sık görülen öğeler haline getirir. Buna ek olarak, menünün ana işlevi, ziyaretçilerin kullanıcı deneyimini gezdirmeleri ve geliştirmeleri için kolay bir yol sağlamaktır. Bu nedenle düzenlenmiş ve iyi tasarlanmış gezinme menüsünün işletmeniz üzerinde büyük bir etkisi olabilir. Divi, menüleri düzenlemek için birçok araçla birlikte gelse de, özel bir kod eklemek en iyi yoldur. Ama nasıl kod yapacağınızı bilmiyorsanız endişelenmeyin. Bu öğreticide, CSS ile Divi menüsünü adım adım nasıl ayarlayacağınızı göstereceğiz.
CSS ile Divi Menüsü Nasıl Ayarlanır Bu bölümde, en üst düzeye çıkarmak için divi menüsünü CSS ile nasıl düzenleyeceğinizi göstereceğiz. Görünüm> Özelleştir> Ek CSS girerek CSS komut dosyasını WordPress Customer’a eklemeniz gerekir. Veya çocuğunuzun temasından style.css dosyasına koyabilirsiniz. Not: Başlamadan önce: Yedekleme: Sitenizi tam yedeklemeyi yapın
Çocuk Temalarını Kullanın: Bu kılavuzu takip ederek veya bu eklentilerden birini kullanarak yapabilirsiniz
Şimdi Divi menüsünü CSS komut dosyasıyla ayarlamak için farklı bir seçeneğe bakalım.
1) Navbar Divi’nin arka plan rengini değiştirin, menünün arka plan rengini düzenleme seçeneği sunar, ancak tüm başlığa uygulayın. Sadece navigasyon bıçağının rengini değiştirmek istiyorsanız, şu komut dosyasını kullanın: .et_menu_container {back-color: kırmızı;}
2) Yazı tipi menüsünü değiştirin Divi menüsünü ayarlamanın başka bir yolu, yazı tipi menüsünü değiştirmektir. Örneğin, bu CSS komut dosyası tüm menü öğelerinin yazı tiplerini Lucida konsoluna değiştirecektir. Bu, menü kapsayıcısında açılır ve diğer içerikleri içerir. .et_menu_container {font-family: lucida konsolu, kurye, monospace;} Not: Yazı tipi ailesi, yukarıdaki örnekte gösterildiği gibi bir yazı tipi koleksiyonudur. Ayrıca bir yazı tipi de seçebilirsiniz, ancak önce WordPress kurulumunuza yüklemeniz gerekir. Yazı tipleri hakkında daha fazla bilgi edinmek için aşağıdaki bağlantıyı görebilirsiniz:
WordPress’teki yazı tiplerini değiştir
Font ailesi
3) İmleçi bir öğeye yönlendirdiğinizde metnin rengini değiştirmek için gelişim öğesindeki metnin rengini değiştirin, şu kodu kullanın: #top-menu li A: Hover {color: mavi; } Bu, kullanıcı imleci üste yönlendirdiğinde NAVBAR bağlantısının rengini mavi olarak değiştirir, ancak kodu ayarlayabilir ve HEX kodunu veya RGBA formatını kullanarak istediğiniz renge değiştirebilirsiniz. 4) Her bir divi menü öğesinin iyi görünmesini sağlamak için gerilimin genişliğini değiştirin, açılır listenin genişliğini ayarlayabilirsiniz. Örneğin, 500 piksel genişlikli bir açılır menü vermek için bu CSS komut dosyasını kullanın:#top-menu> .sub-menu {genişlik: 500px; } 5) Navbar Divi menüsüne küçük ince ayarların yanı sıra bir arka plan görüntüsü ekleyin, daha radikal değişiklikler de yapabilirsiniz. Örneğin, görüntüleri navigasyon çubuğunda arka plan olarak görüntüleyerek Divi menüsünü CSS ile ayarlamak istersiniz. Bunu yapmak için bu kodu kopyalayıp yapıştırın: .et_menu_container {arka plan Arka plan boyutu: kapak; }
Daha önce yüklenen görüntüleri kullandığımızı unutmayın. Sadece kendi resminizi yükleyin ve görüntünün URL’sini kullanmak istediğiniz şeyle değiştirin.
Veya harici URL’lerden görüntüleri de kullanabilirsiniz, ancak web sitenize medya kitaplığına resim yüklemenizi şiddetle tavsiye ederiz. Bu şekilde, görüntü üzerinde tam kontrole sahip olduğunuzdan emin olursunuz ve görüntü sahibinin silmeye karar verirse kaybetme riski yoktur. Son olarak, görüntünün mevcut tüm alanı kapsayacak şekilde mülkü kullandığımızı unutmayın. Tekrarlama, otomatik, doldurulmuş vb. Görüntülerin sitenizde nasıl yazdırıldığı hakkında daha karmaşık seçenekler için bu siteye bakın. CSS, NAVBAR menüsündeki tüm öğeleri düzenlemenin üzerindeki bir örnek öğeye nasıl uygulanır, ancak CSS kodunu kullanarak Divi menüsünü ayarlamanın tek yolu bu değildir. Bir öğeye CSS komut dosyalarını da uygulayabilirsiniz. Ancak, girmeden önce, CSS’nin nasıl çalıştığını ve bir senaryo yapma şeklimizi daha iyi anlayalım. Bir satır CSS, seçmen, mülk ve değerden oluşan kurallar olarak adlandırılır.
Mülk ve değerin oldukça net bir adı olduğundan, seçmenlere odaklanacağız. Seçici, özellik ve değer tarafından değiştirilen öğeleri ifade eden bir koddur. Seçici birçok veya tek öğeye başvurabilir.
Bir öğeyi belirlemediğimizde, CSS kuralları içindeki “çocukların” tüm unsurlarına uygular. Bu, bu davranışı belirten CSS’nin kalıtım ilkesini takip eder. CSS’yi tek bir öğeye uygulayın, CSS’yi tek bir öğeye uygulamak için bir tarayıcı konsolu kullanmanız ve bu unsurlar için özel seçmenleri seçmeniz gerekir. Bunu yapmak için, düzenlemek istediğiniz sayfayı açın ve sağlayın veya bir tarayıcı konsolunu açmak için F12 tuşuna basın. Böyle bir şey göreceksiniz: Bu çok fazla kod! Endişelenmeyin, bu aşırı görünebilir, ancak alıştıktan sonra idare etmek yeterince kolaydır.
HTML Etiketi , , ,
ve fareyi yönlendirdiğinizde öğelerin web sayfanızda nasıl vurgulandığını göreceksiniz. Bu şekilde, hangi öğeleri gösterdiğinizi ve CSS kodunuzda kullanmanız gereken sınıfları veya HTML kimliklerini alacağınızı görebilirsiniz. Değiştirmek istediğiniz öğelere tıklayın ve CSS seçmenlerini göreceksiniz
Bu seçmen örnek web sitemizdeki “ev” bağlantısına dikkat çekti, bu yüzden şimdi CSS özelliklerinden birini kullanabilir ve yalnızca menümüzden “ev” bağlantısına uygulayabiliriz. Örneğin, arka plan rengini kırmızıya değiştirmek için şöyle bir şey kullanacaksınız: #top-menu> li: nth-child (1) {arka plan-color: kırmızı;} Psödo-class: 1-child (1 ) Bize bunun aynı hiyerarşi düzeyinde ilk (1) liste öğesi olduğunu söyleyin. Artık tarayıcı müfettişini kullanarak seçmenleri nasıl kopyalayacağınızı bildiğinize göre, CSS stilini web sitenizdeki tüm öğelere uygulayabilirsiniz. Divi menünüzü CSS ile ayarlamak için yapabileceğiniz CSS komut dosyalarına daha fazla örnek vardır. Birkaç örnek daha bakalım. Harika yazı tipi simgesini kullanmak için menü öğesine bir simge ekleyin, önce web sitenize yüklemeniz gerekir. Bundan sonra, menünün ilk öğesinin yanına simgeyi yazdırmak için aşağıdaki komut dosyasını koyabilirsiniz: #top-menu> li: nth-child (1) a :: Yazı tipi ailesi: “Font Awesome 5 Free”; yazı tipi-ağırlık: 900; İçerik: “015”; } Kırık bir yazı tipi görürseniz, bu harika yazı tipinin yüklenmediği anlamına gelir. Simge kümesini yüklemek için, bu satırı başlığa Divi> Devam seçeneğine koyun. > Doğru CSS seçmenlerine sahip olduktan sonra CSS kullanarak herhangi bir menü öğesini gizleyin, CSS özelliğini uygulayabilirsiniz. En yaygın ve kullanışlı olanlardan biri ekranlardır: Yok; bu da menüden herhangi bir öğeyi silmenizi sağlar. Örneğin, sepet öğesini NAVBAR menüsünden gizlemek için bu kodu yapıştırın: .et-card-info {ekran: none;} Genel sonuçlar, site menünüzü düzenlemek, sitenizi geliştirmenin ve kullanıcı deneyimini geliştirmenin en iyi yoludur. senin siten. Divi’nin bunun için birkaç seçeneği olmasına rağmen, en iyi yol Divi menüsünü CSS komut dosyasıyla ayarlamaktır. Bu öğreticide, kodlama becerileriniz olmasa bile sitenizi bir sonraki seviyeye getirmenize yardımcı olmak için adım adım menü düzenlemenin çeşitli yollarını gördük. Şimdi, nasıl olduğunu bilmelisiniz: menü arka plan rengini değiştirin
Yazı tipini değiştir Geri gelme öğesindeki metnin rengini değiştirin
Gerilme genişliğini değiştirin Menüye bir arka plan resmi ekleyin Ayrıca, CSS’nin tek bir öğeye nasıl uygulanacağını, menüye simgeler ekleyeceğimizi ve öğeleri gizleyeceğimizi gördük. Bu komut dosyasını bir temel olarak kullanmanızı, çalmanızı ve sitenize ayarlamak için ayarlamanızı öneririz. Divi’nin maksimum nasıl kullanılacağı hakkında daha fazla yönerge için aşağıdaki yönergelere bakın:
Divi’deki ürün sayfalarını ayarlayın
Divi Shop sayfasındaki sepete artı düğmesi nasıl eklenir
Divi’de altbilgi nasıl gizlenir/kaldırılır
Divi İletişim Formu Çalışmıyor – Nasıl Onarılır
Site menünüzü CSS ile düzenlemeye çalıştınız mı? Neyi değiştiriyorsun? Aşağıdaki yorum bölümünde bize bildirin!
