Divi'de Hover'da Blog Gönderisi Alıntıları Nasıl Değiştirilir

Fareyle üzerine gelindiğinde blog gönderisi alıntılarını değiştirmek, bu alıntıları tamamen terk etmeden blog gönderileriniz için kompakt bir ızgara düzeni tutmanın etkili bir yolu olabilir. Buradaki fikir, alıntıları başlangıçta gizlemek ve ardından ızgara içindeki bir gönderi öğesinin üzerine geldiğinizde görünürlüklerini değiştirmek. Bu, kullanıcıların tarayıcı görünüm alanında daha fazla gönderi görmelerini sağlarken, kullanıcıya ilgilendikleri gönderilerin alıntılarını gönderinin üzerine getirerek görme seçeneği sunar.

Bu eğitimde, size Divi'de fareyle üzerine gelindiğinde blog yazısı alıntılarının nasıl değiştirileceğini göstereceğiz. Bunu yapmak için, üzerine gelindiğinde bir blog modülünün gönderi öğesinin alıntılarını değiştirecek birkaç özel CSS parçacığı ekleyeceğiz (JQuery'ye gerek yok). Kod yerleştirildikten sonra, Divi'nin yerleşik ayarlarını kullanarak blog modülünü istediğiniz gibi şekillendirebilirsiniz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Hover'da Blog Gönderisi Alıntıları Nasıl Değiştirilir

Blog Modül Düzenini Oluşturma

İlk olarak, blog yazılarımız için temel bir düzen oluşturmamız gerekiyor. Bu örnek için, içinde bir blog modülü bulunan tek sütunlu bir satır ekleyeceğiz.

Satır Oluştur

Bölüme tek sütunlu bir satır ekleyin.

Satır Genişliği

Satır ayarları modunda, genişliği ayarlamak için aşağıdaki tasarım ayarlarını güncelleyin.

• Genişlik: %95
• Maksimum Genişlik: 1200 piksel

Blog Modülü Ekle

Satırın sütununun içine yeni bir blog modülü ekleyin.

Blog Modülü Ayarları

Ardından, daha fazla oku düğmesini göstermeyi seçerek blog modülü içerik ayarlarını güncelleyin.

Tasarım sekmesi altında, blog için Izgara düzenini seçin.

Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: geçiş-blog-alıntı

Bu sınıfı bir sonraki adımda özel CSS kodumuz için seçici olarak kullanacağız.

Kod Modülü ile Özel CSS Ekleme

Bu noktada, blog modülüne eklenen özel bir CSS sınıfı ile blog yazılarımız için temel bir ızgara düzenine sahibiz. Bu özel blog modülünü hedeflemek için bu CSS Sınıfı seçicisini kullanacağız ve gönderi öğesinin alıntı sonrası bölümüne fareyle üzerine gelindiğinde bir geçiş efekti ekleyeceğiz.

CSS'yi eklemek için bir kod modülü kullanacağız. Blog modülünün altına yeni bir kod modülü ekleyin.

Alıntı sonrası geçiş efekti için gereken aşağıdaki özel CSS'yi yapıştırın. CSS'yi gerekli stil etiketlerine sardığınızdan emin olun.

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Şu ana kadarki sonucu canlı sayfada kontrol edelim.

Sonuç

Makalenin sonunda kodu biraz daha ayrıntılı olarak inceleyeceğiz. Ama şimdilik, şu ana kadarki sonucu kontrol edelim.

Divi Builder ile Blog Modülüne Ek Stil Ekleyin

Artık CSS, blog gönderisi alıntılarımız için geçiş efekti vermek üzere yerinde olduğuna göre, Divi Builder'ı kullanarak blog modülüne herhangi bir ek stil ekleyebiliriz.

Bu örnek için, stilde minimum ayarlamalar yapacağız, ancak kendi stilinizi de keşfetmekten çekinmeyin.

Stil Yazı Başlığı

• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #6d6a7e
• Başlık Metin Boyutu: 20px
• Başlık Satırı Yüksekliği: 1.3em

Stil Devamını Oku Metin

• Yazı Tipi Ağırlığı: Kalın
• Yazı Tipi Stili: TT
• Devamını Oku Metin Rengi: #6d6a7e
• Devamını Oku Harf Aralığı: 1px
• Satır Yüksekliği: 3.5em

Stil Sayfalandırma

• Sayfalandırma Yazı Tipi Ağırlığı: Kalın
• Sayfalandırma Yazı Tipi Stili: TT
• Sayfalandırma Metin Rengi: #6d6a7e
• Sayfalandırma Harf Aralığı: 1px

Kenarlığı Kaldır

• Izgara Düzeni Kenarlık Genişliği: 0px

Hover'da Stil Kutusu Gölgesi

• Kutu Gölgesi: Ekran Görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 38px
• Gölge Rengi (masaüstü): şeffaf
• Gölge Rengi (vurgulu): rgba(109,106,126,0.25)

Son sonuç

CSS Kodu Hakkında

Daha önce kod modülüne eklenen özel CSS'nin dökümüyle ilgileniyorsanız, işte burada.

İlk olarak, CSS'nin tamamını, yalnızca CSS'yi masaüstü tarayıcılara uygulayacak bir medya sorgusuna sarmamız gerekiyor.

@media all and (min-width: 981px) {

}

İkinci olarak, post öğesinin üzerine gelindiğinde oluşacak stil değişikliklerine yazı içeriğine/alıntıya 500ms süreli bir geçiş eklememiz gerekiyor.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

Üçüncüsü, düzenleme yapabilmemiz için görsel oluşturucuyu kullanırken gönderi içeriğinin/alıntının görünür kaldığından emin olmamız gerekir.

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

Dördüncüsü, sayfa yüklendiğinde gönderi içeriğini/alıntıyı varsayılan olarak gizlememiz gerekiyor. Bunu yapmak için içeriği gizlemek için görünürlük:gizli kullanıyoruz. Ardından, vurgulu durumuna opacity:1 eklediğimizde bir solma ve solma geçiş efekti elde edebilmemiz için opacity:0 ekleriz. Ayrıca, fareyle üzerine gelme durumuna max-height:500px eklediğimizde kayan geçiş efektini elde etmek için max-height:0px kullanırız.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

Beşinci olarak, gönderi öğesi (.et_pb_post) üzerine gelindiğinde gönderi içeriğini/alıntısını gösteririz. Bunu yapmak için görünürlüğü görünür, opaklığı 1 ve maksimum yüksekliği 500 piksel olarak değiştiriyoruz.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Son snippet için, dikey olarak hizalanmış daha temiz bir ızgara düzeni için tüm gönderi öğelerine aynı minimum yüksekliği verebiliriz.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

İşte son koda bir bakış daha.

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Son düşünceler

Bu öğreticide gösterildiği gibi, birkaç CSS parçacığı eklemek, güzel bir vurgulu efektle blog gönderisi alıntılarını değiştirmek için gereken işlevselliği sağlayabilir. Bu yöntemin en iyi yanı, Divi'nin yerleşik seçeneklerini kullanarak blog modülüne istediğimiz herhangi bir ek stili ekleyerek bu işlevselliği geliştirebilmemizdir. Bu, daha fazla vurgulu efekt dahil olmak üzere gönderi öğelerine daha gelişmiş stil eklemenize olanak tanır. Umarım bu, Divi web sitenizin bloguna tasarım ve işlevsellik açısından ek bir destek sağlamaya yardımcı olur.

Yorumlarda sizden haber bekliyorum.

Şerefe!