Divi Kenar Çubuğunuzu Güzelleştirmenin 5 Kolay Yolu

Divi 100 Maratonumuzun 69. Gününe hoş geldiniz. Serinin son gününde muhteşem Divi 3.0 sürümüne geri sayarken, 100 gün boyunca muhteşem Divi kaynaklarını izlemeye devam edin!

---

Bir web sitesi tasarlarken kenar çubuğu bazen biraz ihmal edilebilir. Öne çıkan bir blog açılış sayfasını bir araya getirmek ve standart widget'ları kaldırmayı ve sitenizin geri kalanına uyacak şekilde biçimlendirmeyi unutmak çok kolay. Tam genişlikte bir gönderi görünümünü tercih etseniz bile, standart kenar çubuğunun arşiv sayfalarında görünmeye devam edeceğini unutmayın.

Kenar çubuğunuz, kullanıcılarınızın blog alanınızda gezinmesine yardımcı olmanın harika bir yoludur. Kendilerine en çok hitap edecek gönderileri bulmalarına yardımcı olmak için widget'ları kullanabilir ve ayrıca bunları harici reklamcılık veya bülten kayıtları gibi dahili pazarlama için kullanabilirsiniz.

Divi kenar çubuğu modülü, düzen sayfalarınıza sınırsız miktarda özel kenar çubuğu yerleştirmenize de olanak tanır. Özellikle blog açılış alanının bir parçası olarak özel kenar çubukları kullanmayı seviyorum. İşte harika bir örnek.

Bu yazıda, kenar çubuğunuzu renklendirmek için en sevdiğim beş yolu paylaşacağım. Başlamadan önce, WordPress Yönetici menüsündeki Görünüm > Widget'lar aracılığıyla tüm widget alanları gibi düzenleyebileceğiniz standart kenar çubuğuna odaklanacağım.

1. Elegant Themes Reklam Widget'ını kullanın

Divi bir resim yükleyici widget'ı ile birlikte gelmese de, konu kenar çubuğunuza resim eklemek olduğunda ET Reklam Widget'ı gizli silahınızdır. Elbette standart WordPress metin widget'ını kullanarak ve bir resim bağlantısı oluşturmak için HTML'yi yazarak resim ekleyebilirsiniz, ancak bu ET widget'ı sizin için kolaylaştırır. Yine de eklemek istediğiniz resmi önceden yüklemeniz ve url'yi medya kitaplığından kopyalamanız gerekiyor, ancak HTML kodunu nasıl yazacağınızı bilmenize gerek yok. Tek bir başlık altında istediğiniz kadar resim ekleyebilirsiniz (aşağıya bakın). Ayrıca ek başlıklar ve alt etiketler de ekleyebilirsiniz.

2. Widget Başlıklarını Stillendirin

Standart kenar çubuğundaki pencere öğesi başlıkları, H4 etiketlerinizin stilini devralacaktır, ancak bunları daha fazla özelleştirmek istiyorsanız, .widgettitle sınıfını kullanarak bunları hedefleyebilirsiniz . Divi Tema Seçenekleri kutusundaki bu sınıfı kullanarak yazı tipini, boyutunu, rengi, hizalamayı ve dolguyu değiştirebilirsiniz.

Özel CSS kutusunu Divi Tema Seçenekleri > Genel sekmesinin alt kısmında bulabilirsiniz.

Örneğin:

.widgettitle {
text-align:center;
font-size:18px;
padding-bottom: 20px;
}

En sevdiğim stil hilelerinden biri, border-bottom özelliğini kullanarak widget başlığına bir alt kenarlık eklemektir. Güzel bir editoryal hissi olan bu örneğe bir göz atın.

Aşağıdaki kod parçasını .widgettitle sınıfınıza ekleyerek bu efekti elde edebilirsiniz.

.widgettitle {
    border-bottom: solid 2px #000000;
    margin-bottom: 25px;
}

3. Widget'lar Arasındaki Marjı Ayarlayın

Widget'larınız arasındaki boşluğu azaltmak veya alternatif olarak onlara biraz nefes alma alanı vermek istiyorsanız, alt kenar yüzdesini ayarlayabilirsiniz. Kodu inceleyerek bulmak oldukça zor, işte kullanışlı bir kısayol.

.et_pb_sidebar .et_pb_widget {
margin-bottom: 14% !important;
}

4. Kategorileri Görüntülemek için Özel Menü Kullanın

Standart WordPress kategoriler widget'ı, kategorileri kenar çubuğunuzda görüntülemek istediğinizde işi halleder, ancak stil vermek zor. Kategorileri istediğiniz sırayla görüntülemenize veya hangilerinin görüneceğini seçip seçmenize izin vermez. Bu, bir gönderiyi yanlışlıkla kategorize edilmemiş olarak bıraktığınızda can sıkıcıdır.

Bunun yerine, kategorileri görüntülemek için Özel Menü Widget'ını kullanmayı seviyorum ve stil vermek çok daha kolay.

İlk olarak Görünüm > Menüler alanında yeni bir özel menü oluşturun. Ardından seçtiğiniz kategorileri ekleyin ve menüyü kaydedin. Bir alana atamaya gerek yoktur.

Ardından, Özel Menü widget'ını kullanarak o menüyü (Görünüm > Widget'lar) seçebilirsiniz.

Özel menünüze gerçekten biraz stil vermek istiyorsanız, aşağıda yaptığım gibi bir arka plan rengi ve dolgu ekleyebilir ve yazı tipi özelliklerini şekillendirebilirsiniz.

Yukarıdaki örnekte, aşağıdaki kodu kullanarak özel menü bağlantılarını hedefledim:

.et_pb_widget ul li {
background-color: #f9f9f9;
padding: 10px;
}

5. Dinamik Sosyal Medya İçeriği Eklemek için Widget Oluşturucu Kullanın

Birçok blogcu, kenar çubuklarına Instagram beslemesi eklemeyi sever. Kenar çubuğunuzun yeni görünmesini sağlamanın ve ziyaretçileri sosyal medyada sizi takip etmeye teşvik etmenin harika bir yolu. Instagram kodunu metin widget'ına manuel olarak gömebilir (ET blogunda bununla ilgili bu harika gönderiye bakın) veya Instagram için Alpine Photo Tile gibi ücretsiz bir eklenti ekleyebilirsiniz. Ancak, gerekmediğinde eklenti eklemeyi sevmiyorum ve gömülü kod beslemelerini biçimlendirmek daha zor.

Bunun yerine, duyarlı kod oluşturmanıza ve metin widget'ınıza (veya bir oluşturucu düzenine eklemek istiyorsanız kod modülüne) eklemeden önce kolayca stil oluşturmanıza olanak tanıyan yeni bir tür widget oluşturucu vardır.

Benim favorim Lightwidget.

Bunu kullanmak için, widget oluşturucunun hesabınıza erişmesine izin verebilmek için kaydolmanız ve ardından çevrimiçi olarak Instagram'da oturum açmanız gerekir. Ardından tercih ettiğiniz sütun ve satır sayısını seçin, widget'ınızı önizleyin ve kodu alın.

Not: Widget'ı SSL sertifikasına sahip bir sitede kullanmak isterseniz (ör. url önekinde https: bulunan), pro sürüme yükseltmeniz gerekir.

Toplama

Umarım Divi kenar çubuğunuzu renklendirmekten zevk alırsınız. Yukarıdaki ipuçları, büyük bir etki yaratan küçük iyileştirmeler sağlar. Şeytan Ayrıntıda!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Martina Vaculikova / Shutterstock.com aracılığıyla öne çıkan görsel arka plan görseli