Divi'de Kaydırılabilir Son Gönderiler Widget Alanı Nasıl Tasarlanır

Divi'nin kenar çubuğu modülü, özel widget alanlarını tasarımınıza entegre etmek için son derece kullanışlı bir araçtır. Bu, herhangi bir WordPress widget'ını bir Divi düzeni içinde görüntülemenize olanak tanır. Bu eğitimde, size Divi'de kaydırılabilir bir son gönderiler pencere öğesi alanını nasıl oluşturacağınızı göstereceğim. Bir blog modülünün sağ tarafında son gönderiler widget alanıyla birlikte bir “Blogumuzdan” bölümü tasarlayacağım. Bu, en son blog gönderilerinizden birkaçını bir ana sayfada veya açılış sayfasında sergilemek için mükemmel olacaktır.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz tasarıma küçük bir bakış.

Kaydırılabilir Son Gönderiler Düzenini ÜCRETSİZ olarak indirin

Ellerinizi bu eğitimdeki kaydırılabilir son gönderiler düzeni tasarımına koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Youtube Kanalımıza Abone Olun

Son Gönderiler Widget Alanının Oluşturulması

Divi düzenimize yeni bir gönderiler widget'ı ekleyeceğimiz için, yapmamız gereken ilk şey Divi'nin Kenar Çubuğu modülüyle kullanmak için yeni bir widget alanı (son gönderiler widget'ı ile) oluşturmak.

Son gönderiler pencere öğesi alanını oluşturmak için Görünüm > Pencere Öğeleri'ne gidin. Ardından, widget alanına bir ad vererek (isterseniz “son gönderiler” olarak adlandırın) ve Oluştur düğmesini tıklayarak yeni bir widget alanı oluşturun. Kullanılabilir yeni widget alanını görmek için sayfayı yenileyin.

Sayfanın solunda, WordPress ile birlikte gelen Son Gönderiler Widget'ının geçişini açın. Ardından listeden "son gönderiler" widget alanını seçin ve widget'ı widget alanına eklemek için Widget Ekle'yi tıklayın.

Ardından, son gönderiler pencere aracı alanını açın ve Son Gönderiler pencere öğesini bir Başlık ile güncelleyin. Tasarımımız tamamlandığında kaydırmak için yeterli gönderiye sahip olmamız için, gösterilecek gönderi sayısını büyük bir sayıya ayarlayın.

Widget alanımız hazır olduğuna göre artık Divi tasarımımıza başlayabiliriz.

Kaydırılabilir Son Gönderiler Widget Alanı ile “Blogumuzdan” Bölümünü Oluşturma

Başlık Bölümünün Tasarlanması

Bir sütun satırıyla yeni bir normal bölüm oluşturun.

Modül eklemeden önce bölümü aşağıdakilerle güncelleyin:

Arka Plan Rengi: #333333
Özel Dolgu: 0px alt

Ardından, satır ayarlarını güncelleyerek satırın alt dolgusunu da çıkarın:

Özel Dolgu: 0px alt

Ardından satıra bir metin modülü ekleyin.

Ardından aşağıdaki Metin ayarlarını güncelleyin:

İçerik için aşağıdaki h2 başlığını html ekleyin:

<h2>From our Blog</h2>

Ardından aşağıdaki metin ayarlarını güncelleyin:

Başlık 2 Yazı Tipi: Roboto
Başlık 2 Yazı Tipi Stili: TT
Başlık 2 Metin Rengi: #ffffff
Başlık 2 Metin Boyutu: 40px
Başlık 2 Harf Aralığı: 2px

Bu, düzenimizin başlığıyla ilgilenir. Şimdi özel bir bölüm kullanarak düzenin geri kalanını oluşturma zamanı.

Uzmanlık Bölümü Oluşturma

Düzenin geri kalanı için ayrı bir özel bölüm kullanmak, kaydırılabilir widget alanımız için sağda özel bir kenar çubuğuna sahip olmamızı sağlayacaktır. Ayrıca, bölümün sol tarafındaki satırlarımızı kenar çubuğu alanından ayrı olarak boyutlandırmamıza ve stillendirmemize izin verecektir.

Devam edin ve aşağıdaki gibi sağ kenar çubuğu sütun düzenine sahip bir özel bölüm ekleyin:

Ardından bölüme bir sütun satırı ekleyin.

Modül eklemeden önce bölüm ve satır ayarlarımızı güncelleyelim.

Bölüm ayarlarını özelleştirme

Uzmanlık bölümü için ayarları açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #333333
Oluk Genişliği: 2
Özel Dolgu: 0px üst
Sütun 2 Özel Dolgu: 0 piksel üst, 0 piksel alt

Satır Ayarlarını Özelleştirin

Ardından satır ayarlarını açın ve aşağıdakileri güncelleyin:

Yükseklik: 640 piksel
Üst Kenar Genişliği: 8px
Üst Kenar Rengi: #444444
Alt Kenar Genişliği: 8px
Alt Kenarlık Rengi: #444444

Özel 640 piksel yükseklik, uzmanlık bölümümüzün kenar çubuğuna ekleyeceğimiz kaydırılabilir son gönderiler widget alanının yüksekliğiyle eşleşmesi için verilmiştir. bu, estetik açıdan daha hoş bir tasarım için ikisinin aynı yüksekliğe sahip olmasını sağlayacaktır.

Blog Modülünü Ekleme

Soldaki tek sütunlu satıra bir blog modülü ekleyin.

Ardından blog modülü ayarlarını aşağıdaki gibi güncelleyin:

Mesaj Sayısı: 2

Düzen: Izgara
Başlık Yazı Tipi: Roboto
Meta Yazı Tipi: Roboto
Meta Yazı Tipi Ağırlığı: Hafif
Meta Yazı Tipi Stili: TT
Sayfalandırma Yazı Tipi: Roboto
Sayfalandırma Yazı Tipi Stili: TT
Sayfalandırma Metin Rengi: #ffffff
Sayfalandırma Metin Boyutu: 18px
Sayfalandırma Harf Aralığı: 2px

Kaydırılabilir Son Gönderiler Widget Alanının Eklenmesi

Son olarak, kaydırılabilir son gönderileri mizanpajımıza eklemenin zamanı geldi. Bunu yapmak için, sağdaki uzmanlık bölümünün kenar çubuğu alanına bir kenar çubuğu modülü ekleyin.

Ardından, içerik sekmesinin altındaki Widget Alanı açılır menüsünden seçerek daha önce oluşturduğunuz “son gönderiler” widget alanını seçin.

Ardından Başlık ve Gövde metni tasarımını aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi: Roboto
Başlık Yazı Tipi Stili: TT
Başlık Metin Rengi: #ffffff
Başlık Harf Aralığı: 2px
Gövde Yazı Tipi: Roboto
Gövde Yazı Tipi Stili: Altı Çizili

Ardından, kenarlık ayırıcıyı aşağıdaki gibi gizleyin:

Kenarlık Ayırıcıyı Göster: HAYIR

Ardından, kenar çubuğu modülüne aşağıdaki gibi maksimum bir yükseklik ve özel dolgu verin:

Maksimum Yükseklik: 640 piksel
Özel Dolgu: 30 piksel üst, 30 piksel alt, %5 sağ

640 piksel maksimum yükseklik, bitişik satıra verilen 640 piksel özel yükseklikle eşleşir.

Kenar çubuğu modülüne maksimum 640 piksel yükseklik verdiğimize göre, kaydırılabilir işlevimizi elde etmek için dikey taşmayı kaydırmaya ayarlamamız gerekiyor. Bunu yapmak için Gelişmiş sekmesine gidin ve aşağıdakileri güncelleyin:

Dikey Taşma: Kaydır

Son sonuç

Bu kadar! Şimdi nihai sonucu kontrol edelim.

Bonus Seçenek: Tasarım Kaydırma Çubuğuna Özel CSS Ekleme (tüm tarayıcılar tarafından desteklenmez)

Çapraz tarayıcı desteği istiyorsanız, WordPress'te bir kaydırma çubuğu tasarlamak biraz acı vericidir. Bu yüzden çoğu durumda, onu tarayıcının varsayılan stillerine bırakmak ve bir gün olarak adlandırmak isteyeceksiniz. Ancak kaydırma çubuğunu sayfanızın tasarımına uyacak şekilde özelleştirmek istiyorsanız, bazı özel CSS ekleyebilirsiniz. Ne yazık ki, tarayıcı desteği ::webkit ön ekli CSS özelliklerini (temelde yalnızca Safari ve Chrome) destekleyen tarayıcılarla sınırlıdır. İşte nasıl yapılacağı.

Uzmanlık bölümünün ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

CSS Sınıfı: özel kaydırma

Ardından sayfa ayarları modunu açın ve aşağıdaki özel CSS'yi sayfaya ekleyin.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Bu, kaydırma çubuğunun genişliğini 8 piksele değiştirir ve parça ve tutamaç için renkleri ayarlar. Kendi başınıza daha fazla tasarım ve renk denemekten çekinmeyin.

Merak ediyorsanız, diğer tarayıcıların geri dönüşü, tarayıcıların kaydırma çubukları için varsayılan stili olacaktır.

Son düşünceler

İçeriğe dikey kaydırma eklemek, kullanıcılara sınırlı bir alanda daha fazla içerik görüntüleme seçeneği vermek istediğinizde kullanışlı olur. Kaydırılabilir bir son gönderiler pencere öğesi alanı, dikey kaydırmanın nasıl gerçekten iyi çalışabileceğinin harika bir örneğidir. Elbette bu eğitimde kullanılan kenar çubuğu modülünü bir metin modülü ile değiştirebilir ve istediğiniz içeriğe dikey kaydırma ekleyebilirsiniz. Aynı özelleştirme herhangi bir modül için geçerli olacaktır.

Kaydırma çubuğunun stiliyle ilgili olarak, daha çapraz tarayıcı çözümü sağlayacak başka eklentiler veya Javascript çözümleri olduğundan eminim. İyi olanları biliyorsanız, lütfen bizimle paylaşmaktan çekinmeyin.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!