Ana İçeriğe Geç

Nasıl sayfalar Divi arasındaki menülerin rengini değiştirmek için

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Bazen sitenizi diğerlerinden farklı kılmak, söylemek yapmaktan daha kolaydır. Neyse ki, blogunuzu diğerlerinden farklı kılacak yaratıcı kişiselleştirme dokunuşları ekleyerek küçük tamirciyi oynamaya kendinizi kaptırabilirsiniz.

Bu eğiticide, Divi oluşturucuyu blogunuzu, özellikle de CSS alanını özelleştirmek için nasıl kullanacağınızı göstereceğim.

Bahsettiğim bölge bu:

Özel wordpress css oluşturucu bölümü

Bunun anlamı, burada yaptığımız herhangi bir değişikliğin yalnızca düzenlediğimiz sayfada etkili olacağıdır. Bu inanılmaz derecede ilginç ve kullanışlı bir özellik!

İşte bu yazının sonunda elde edeceğimiz son sonuç. Gezinti menüsünün arka plan rengi, ziyaret ettiğiniz sayfaya bağlı olarak değişir. Ek bir seçenek olarak, simgelerin de renk değiştirdiğini fark edeceksiniz.

Renk divisini değiştiren simge

Önce menüde arka plan renginin nasıl uygulanacağını göstereceğim. Sonra ayrı ayrı sosyal simgelerin nasıl eşleşeceğini size göstereceğim.

Henüz öğreticimizi okumadıysanız WordPress Divi temasının tanıtımı, Seni yapmaya davet ediyorum.

Başlayalım!

menüleri Renkleri uygula

İlk olarak, varsayılan başlık biçimini kullanıyorum. Başka bir biçim kullanıyorsanız, bu öğretici yine de etkili olacaktır çünkü Divi'deki "div'lerin" genel kimliği, bildiğim kadarıyla tüm biçimler (# ana başlık) için aynıdır. Diğer formatlarla ilgili sorunlarınız varsa.

Divi başlık biçimi

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Bağlantıların altta göründüğünden emin olmamız gerekiyor. Coolors.co'da kullanmak isterseniz bulacağınız seçtiğim renkler daha koyu, bu yüzden metin bağlantısını açık renk yapmam gerekiyor. Beyaz rengi tercih ettim.

Divi menüsünün kişiselleştirilmesi

Aktif bağlantı rengi olarak bağlantı rengi ve koyu beyaz olacak rgba (255,255,255,0.6) kullanıyorum (istenen görsel efekt için)

Ardından, ilk değişikliği uygulamak istediğiniz sayfaya gidin (Eğer bir yerde menü bağlantıları görmelisiniz). "3 çizgi" simgesine tıklayın ve bir seçenekler kutusu görünecektir.

Wordpress divi oluşturucu

Şimdi bu kutuya aşağıdaki CSS'yi ekleyin:

# Elle başlık {background: #474f61; }

Buna benzer bir şeye sahip olmalısınız, hex kodunu istediğiniz renge değiştirmeyi unutmayın:

Renk özelleştirme divi ayarları

Tıklayın Kaydet ve güncelle Ve bu ana menüde, hepsi tek bir kod satırında geçerli olacaktır.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Şimdi aynı kodu tüm sayfalarınız için eklemeniz ve onaltılık kodu her seferinde değiştirmeniz yeterlidir.

Sosyal Ağ Simgeleri (İsteğe bağlı)

Bu kısım için, daha önce yaptığımız kodu değiştireceğiz, ardından sitenin CSS seviyesine bir kod ekleyeceğim ve bazı sayfalara neden bazı CSS'lerin eklenmesi gerektiğini ve neden bazılarının olmamasının gerektiğini açıklayacağım. olmak.

Bu yüzden önce sosyal bağlantılarınızı kurduğunuzdan emin olmalısınız. Git " Divi Seçenekleri> Genel tema Ve URL’lerinizi sosyal medya sayfalarınıza ekleyin.

Sosyal divi simgesi

Ardından ikincil menü çubuğundaki ayarlarınıza gidin ve arka plan ve metin renklerini ayarlayın. Metin rengi olarak 'beyaz'ı seçiyorum çünkü her sosyal simgeye yeni menü rengiyle eşleşecek yuvarlak renkli bir arka plan ekleyeceğim, böylece simge görünebilir.

İkincil menüyü özelleştirme

Git " Üstbilgi ve Gezinme> Üstbilgi Öğeleri Ve kutuyu işaretleyiniz " Sosyal simgeleri göster '.

Divi wordpress başlık öğesi

Her sayfaya CSS eklemek için neler yaptığımızı hatırlıyor musunuz? Geri dönüp daha önce yazdıklarımızı düzenleyeceğiz. Sahip olduklarınızı aşağıdaki CSS ile değiştirin veya neyin farklı olduğunu biliyorsanız, sadece ekstra kodu ekleyebilirsiniz.

# Elle başlığı # üst başlığını-sosyal-simgesini {background .ve: #474f61; }

Bu kod, sitemizin sadece bu sayfadaki menünün arka plan rengini değil, aynı zamanda sosyal simgelerimizin arka planını da değiştirmesine izin verecektir. Karışıma başka bir öğe ekledik. Aşağıdakine benzer bir şeye sahip olmalısınız:

Özel css kodu divi tema editörü

Her sayfada altıgen renklerin doğru olup olmadığını kontrol etmeniz gerekebilir.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Genel CSS

Aşağıdaki kod " Tema seçeneği> CSS kutusu Veya alt temanın stil dosyasında.

Özel bölüm divi css tema seçenekleri

.ve li {margin-left #-simgeler Üst header-sosyal: 5px; } # Üst başlığını-sosyal-simgesini {dolgu .ve: 4px; kenar dipli: 8px; en: 30px; Yükseklik: 30px; Çerçeve-yarıçapı: 50%; satır yüksekliği: 24px; }

Bunun neden sayfanın CSS kutusunda böyle olmadığını merak ediyor olabilirsiniz. Bunun nedeni, bu belirli kod parçasının hedeflenen tüm unsurları etkilemesidir, bu yüzden aynı kodu birden çok yere koymak yetersizdir. Sayfa başına yalnızca arka plan rengi değişir, ancak bu kod sayfa başına değişmez. Sitenize ağırlık eklemekten kaçınmak en iyi yöntemdir.

Hepsi bu ders için, umarım WordPress blogunuzdaki menüleri kişiselleştirmenize izin verir.

Diğer Divi öğreticiler

Bu makale yorumları 3 içeriyor

  1. Bonjour

    Tüm eğitimleriniz için teşekkür ederiz.
    Divi alt menüsünü (açılır menüden ikinci düzey) dolgu genişliğine koyabilir miyiz biliyor musunuz? Sayfanın tüm genişliğini kaplayan

  2. Bonjour

    Ana başlıktaki metnin rengini nasıl değiştirirsiniz? Saydam bir arka plana sahip olan (ana başlığımda), divi özelleştirme arayüzü aracılığıyla seçtiğim yazı tipi rengi (farklı bölümleri sunan ana başlığımda) siyah. Ancak, aşağıdaki fotoğraf çok koyu olduğu için BAZI SAYFALARDA beyaz olmasını isterim.

    faire Comment?

    Merci par avance,

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
22 hisseleri
hisse13
cıvıltı2
Enregistrer7