Fareyle üzerine gelindiğinde makale snippet'lerinin nasıl görüntüleneceğini bilmek ister misiniz? Divi ?
Vurgulu olarak blog yazısı snippet'lerini önizlemek, bu snippet'leri tamamen terk etmeden blog yayınlarınız için kompakt bir ızgara düzeni tutmanın etkili bir yolu olabilir.
Bu nedenle, fikir, başlangıçta parçacıkları gizlemek ve ardından ızgaradaki bir gönderinin üzerine geldiğinizde bunları göstermektir. Bu nedenle, okuyucuların daha fazla gönderiyi görmelerini sağlarken, aynı zamanda ilgilerini çeken gönderilerin parçalarını görmelerine olanak tanır.
Bu eğitimde, bu blog yazısı snippet'lerinin fareyle üzerine gelindiğinde geçiş efektini nasıl oluşturacağınızı göstereceğiz. Divi.
Başlayalım!
anket
İlk olarak, bu eğitimde oluşturacağımız şeye genel bir bakış.
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 eğitim için, bir sütuna bir satır ekleyeceğiz ve ona bir Blog modülü ekleyeceğiz.
Bir çizgi oluştur
Başlamak için bölüme bir sütundan oluşan bir satır ekleyin
hat genişliği
Ardından hat ayarlarına gidin. ardından, Stil sekmesinde, Boyutlandırma altında genişlikleri aşağıdaki gibi değiştirin:
- Maksimum genişlik: %90
- Maksimum genişlik: 1200 piksel
Blog modülü ekleyin
Ardından, önceden oluşturulan satırın sütununa bir Blog modülü ekleyin.
Blog Modülü Ayarları
Ardından sekmesinde Blog modülü ayarlarına gidin içindekiler, Öğeler altında "Daha Fazlasını Oku düğmesini göster" seçeneğini "Evet" olarak ayarlayın
Şimdi Stil sekmesine gidin, Şablon altında, blog düzeni olarak “Izgara” şablonunu seçin.
Son olarak, Gelişmiş sekmesine gidin ve aşağıdaki CSS sınıfını ekleyin:
CSS Sınıfı: geçiş-blog-alıntı
Daha sonra, bir sonraki adımda özel CSS kodumuz için bu sınıfı seçici olarak kullanacağız.
Kod modülüyle özel CSS ekleyin.
Bu noktada blog yazılarımız bir grid içinde düzenlenir ve Blog menüsüne özel bir CSS sınıfı eklenir. Bu nedenle, bu Blog modülünü özel olarak hedeflemek ve bir makalenin üzerine geldiğinizde bir geçiş efekti eklemek için bu CSS sınıf seçicisini kullanacağız.
CSS eklemek için Kod modülünü kullanacağız. Bunu yapmak için Blog modülünün altına bir Kod modülü ekleyin.
Ardından, fareyle üzerine gelindiğinde makale parçacığı geçiş efekti oluşturmak için gereken aşağıdaki özel CSS'yi yapıştırın. Her şeyden önce, CSS kodunu gerekli stil etiketleri arasına yapıştırdığınızdan emin olun.
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!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;}}
Şimdiye kadar elde edilen sonucu görelim.
Sonuç
Divi oluşturucu ile Blog modülüne biraz ekstra stil ekleyelim
Artık CSS bize blog yazısı parçacıklarımız için geçiş efekti verecek şekilde hazır olduğuna göre, yapıcıyı kullanarak blog modülüne herhangi bir ek stil ekleyebiliriz. Divi.
Bu örnek için, stilde minimal ayarlamalar yapacağız, ancak kendi stilinizi de keşfetmekten çekinmeyin.
Makale başlığı stili
- Loş ışık başlığı: Kalın metin
- Başlık metni rengi: #6D6A7E
- Başlık Metin Boyutu: 20px
- Başlık satırı yüksekliği: 1.3em
Metin stili "Daha fazlasını okuyun"
- Daha fazla oku Loş Işık: Kalın Metin
- Devamını Oku Kopya Stili: TT
- Metin rengi Devamını okuyun: #6D6A7E
- Harf aralığı Devamını oku: 1px
- Satır yüksekliği Devamını oku: 3.5em
Metin sayfalama görüntüsünü değiştirme
- Sayfalandırmayı göster Loş ışık: Kalın metin
- Metin rengi Sayfalandırmayı göster: #6D6A7E
- Harf Aralığı Gösteri Sayfalandırması: 1px
- Sayfalandırmayı göster Kopyalama stili: TT
Kenarlığı kaldır
- Izgara Düzeni Kenarlık Genişliği: 0px
Vurgulu Gölge Kutusu Stili
- Gölge kutusu: Ekran görüntüsüne bakın
- Başlangıç Konumu: 0px
- Kutu Gölge Bulanıklığı Gücü: 38px
- Altyazı yazı tipi rengi: rgba (109,106,126,0.25)
Nihai sonuç
Sonuç
Sonuç olarak, bu öğreticide gösterildiği gibi, bazı CSS parçacıkları eklemek, güzel bir vurgulu efektle blog yazısı parçacıklarını sallamak için ihtiyacınız olan işlevselliği sağlayabilir.
Bu yöntemle ilgili en önemli şey, Divi'nin entegre seçeneklerini kullanarak blog modülüne istediğimiz gibi ek stiller ekleyebilmemizdir. Ayrıca, daha fazla vurgulu efekt eklemek de dahil olmak üzere gönderi öğelerini özelleştirmenize olanak tanır.
Umarım bu, bloga Site Web Divi, tasarım ve işlevsellik açısından ekstra bir destek. Yorumlarda deneyimlerinizi bize anlatın.
