Sitenizi kalabalığın arasından öne çıkarmak bazen söylenenden daha kolaydır. Neyse ki, yaratıcı kişiselleştirme dokunuşları ekleyerek Kendin Yap çalışmalarına dahil olabilirsiniz. blogunuzun diğerlerinden sıyrılıyor.

Bu eğitimde size Divi oluşturucuyu özelleştirmek için nasıl kullanacağınızı göstereceğim. blogunuzunve özellikle CSS alanı.

Bahsettiğim bölge bu:

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.

Ö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.

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.

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.

Ş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:

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

Ş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.

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.

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

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:

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

Genel CSS

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

.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.

Bu eğitim için hepsi bu kadar, umarım cihazınızdaki menüleri kişiselleştirmenize izin verir. WordPress blog.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Diğer Divi öğreticiler

• restoran kullanımı Divi tema için 5 siteleri
• Bir Divi WooCommerce ürününe metin ekleme
• Divi sayfaları arasındaki menü rengini değiştirme
• Bir blog'un ızgaralarını Divi ile kişiselleştirme
• Nasıl WordPress üzerinde rol Divi editörü kullanımı
• Tam ekran Divi sürgüsü nasıl oluşturulur
• Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
• Divi hakkında muhtemelen bilmediğiniz özellikler
• WordPress üzerinde Divi Builder nasıl kullanılır
• Divi video kaydırma modülü nasıl kullanılır
• Divi Builder Flip modülü nasıl kullanılır
• Divi Builder'da referans modülü nasıl eklenir?
• Divi metin modülü nasıl kullanılır?
• Divi'de kaydırıcı nasıl oluşturulur
• Divi kullanıcı rolü nasıl düzenlenir
• Divi Sosyal Medya modülü nasıl kullanılır?
• WordPress Divi konulu mağaza modülü nasıl kullanılır?
• Divi kenar çubuğu modülü nasıl kullanılır
• Divi Fiyat Tablosu Modülünün Kullanımı
• Divi yayınlarının başlık modülünü nasıl kullanırım
• Divi video modülü nasıl eklenir
• Makale navigasyon modülü nasıl kullanılır
• Divi arama modülü nasıl kullanılır?
• Divi cüzdan modülü nasıl kullanılır?
• Divi Builder'da kişi modülünün kullanımı
• Divi filtreli cüzdan modülü nasıl kullanılır
• Tam genişlikte sürgü modülü nasıl kullanılır
• Divi Builder Görüntü Modülü nasıl kullanılır?
• Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
• Resim galerisi modülü nasıl kullanılır?
• Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
• Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
• Divi tam genişlikli başlık modülü nasıl kullanılır?
• Divi Sayaç Modülünün Kullanımı
• Divi Builder'daki makaleler sürgüsünü kullanma
• Divi Email Optin modülü nasıl kullanılır?