Divi Blog Modülü Izgara Kartlarınızı Nasıl Stillendirirsiniz (4 Örnekli)

Divi'nin Blog Modülü, blog gönderileriniz için kullanışlı bir ızgara düzeni seçeneğine sahiptir. Izgara şablonu, blog gönderilerinizi kutular veya kartlar halinde düzenler, bu da ekranınızda standart bir tam genişlikte blog düzeninden daha fazla gönderiyi görüntülemeyi kolaylaştırır.

Blog Modülü Ayarları, ızgaranızın genel tasarımını özelleştirmenize olanak tanır. Tüm kartlarınızı kolaylıkla aynı arka plan renginde, yazı tipinde, kenar boşluklarında vb. yapabilirsiniz… Ancak, stil seçenekleri bir bütün olarak ızgara tasarımıyla sınırlıdır, bu da kartlara birden fazla veya farklı tasarımlar uygulanmasını zorlaştırır. Kafes.

Bugün size özel CSS kullanarak blog ızgaranızı oluşturan kartlara birden fazla stili nasıl hedefleyeceğinizi ve uygulayacağınızı göstereceğim. Damalı bir efekt yaratarak diğer her karta nasıl farklı bir stil uygulayacağınızı göstereceğim. Ayrıca, kartlarınızı sıraya göre nasıl farklı şekilde şekillendireceğinizi ve herhangi bir kartı tek başına nasıl hedefleyip stillendireceğinizi de göstereceğim.

Kullanabileceğiniz birkaç vurgulu efekt de dahil olmak üzere ızgara kartlarınızı nasıl şekillendireceğinize dair 4 örnek ekliyorum. Bu öğreticinin sonunda, bir sonraki projeniz için harika blog ızgara tasarımları oluşturmaya hazır olacaksınız.

Başlayalım.

Divi Blog Modülü Izgara Kartlarınızı Nasıl Stillendirirsiniz (4 Örnekli)

Youtube Kanalımıza Abone Olun

Blog Modülü Izgara Düzenini Ayarlama

Blog Modülü kartlarını tasarlamaya başlamadan önce, öne çıkan bir görselle oluşturulmuş en az 12 gönderiye sahip olduğunuzdan emin olun. Gönderi içeriğim için “lorem ipsum” metnini ve öne çıkan görsellerim için unsplash.com'dan sahte görseller kullanıyorum.

Gönderileriniz oluşturulduktan sonra yeni bir sayfa oluşturun. Yeni sayfanızda, Blog Modülünü standart bir bölüm içinde tam genişlikte bir sütuna dağıtın:

Blog Modülü Ayarlarını düzenlemek için tıklayın. Genel Ayarlar altında aşağıdaki ayarları değiştirin:

Düzen: Izgara
Posta Numarası: 12
Öne Çıkan Resmi Göster: EVET
Devamını Oku Düğmesi: AÇIK

Özel CSS altında, CSS Kimliği metin kutusuna "gridcard" yazın. Bu, yalnızca bu blog modülünü özelleştirmemizin bir yolu olacak.

Kaydet çık

Blog Modülü Izgara Düzenini Anlama

Artık blog ızgaranız hazır olduğuna göre, düzenlemek istediğiniz blog modülü kartlarını bulabilmeniz için ızgara düzeninin yapısını anlamanız önemlidir.

Blog ızgarası, üç sütunlu bir düzen ile kurulur. Aşağıdaki, üç sütuna bölünmüş 12 blog gönderisi içeren blog ızgarasının bir örneğidir:

Blog posta kartları, sütunların her birinde yukarıdan aşağıya doğru sıralanmıştır. Yani, her birine bir sayı verecek olsaydınız, her sütunda yukarıdan aşağıya 1'den 4'e kadar numaralardınız:

Her sütunun altındaki her blog posta kartının sayısal sırasını bildiğiniz için, her kartı aşağıdaki gibi tek veya çift sayı olarak da tanımlayabilirsiniz:

Örnek Izgara Tasarımları

Örnek 1: Damalı Blog Izgarası Tasarlama

Bu ilk örnek için, ilk sütunun altındaki tüm tek numaralı blog modülü kartlarını (1 ve 3. kartlar) koyu gri bir arka plan rengi vererek hedefleyeceğim. Bunu yapmak için Divi → Tema Seçenekleri'ne gidin ve Özel CSS metin kutusuna aşağıdaki CSS'yi ekleyin:

#gridcard .column:first-child article:nth-child(odd){
background: #333;
}

İşte bu kodun ne yaptığının bir dökümü:

#gridcard = tüm blog modülünün kimliği
.column:first-child = blog modülündeki ilk sütunu seçer
makale:nth-child(odd) = sütundaki tüm tek numaralı makaleleri (veya kartları) seçer

Hepsini bir araya getirerek, blog modülünün ilk sütununda “gridcard” kimliğine sahip tek numaralı kartları seçer.

Ardından, aşağıdaki CSS'yi ekleyerek koyu arka planın üzerinden geçmek için beyaz metninizi ekleyin:

#gridcard .column:first-child article:nth-child(odd) .entry-title, 
#gridcard .column:first-child article:nth-child(odd) .post-meta, 
#gridcard .column:first-child article:nth-child(odd) .post-meta a, 
#gridcard .column:first-child article:nth-child(odd) .post-content p {
color: #ffffff;
}

Bu kod, blog modülü kartlarındaki tüm metin öğelerini (başlık, yazı metası, yazı meta bağlantıları ve yazı içeriği dahil) hedefler ve onlara beyaz rengi atar.

İşte sonuç:

Damalı düzenimizi oluşturmanın bir sonraki adımı, üçüncü sütundaki tek numaralı kartları hedefleyip, ilk sütunda yaptığınız gibi koyu gri arka plan ve beyaz metni uygulamaktır. Özel CSS metin kutusuna aşağıdaki CSS'yi ekleyin:

#gridcard .column:last-child article:nth-child(odd){
background: #333;
}

#gridcard .column:last-child article:nth-child(odd) .entry-title, 
#gridcard .column:last-child article:nth-child(odd) .post-meta, 
#gridcard .column:last-child article:nth-child(odd) .post-meta a, 
#gridcard .column:last-child article:nth-child(odd) .post-content p {
color: #ffffff;
}

Bu kod, sözde "last-child" öğesiyle "son" sütunu (bu durumda üçüncü sütun son sütundur) hedefler.

İkinci (veya orta) sütun için, damalı efekti tamamlamak için çift numaralı kartları hedefleyin. Bunu yapmak için aşağıdaki CSS'yi eklememiz gerekiyor:

#gridcard .column:nth-child(2) article:nth-child(even) {
background: #333;
}

#gridcard .column:nth-child(2) article:nth-child(even) .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-content p  {
color: #fff;
}

Şimdi gidin ve Blog Modülü kartlarının kareli düzenini görmek için blog sayfasına bakın.

Örnek 2: Damalı Düzen ile Vurgulu Efektler Ekleme

Blog modülü kartlarınızı nasıl hedefleyeceğinizi öğrendikten sonra, kartın içindeki herhangi bir öğeyi yaratıcı yollarla düzenleyebilirsiniz.

Bu örnek için damalı düzeni kullanıyorum ve bu sefer kartın üzerine gelindiğinde koyu gri kart özellikli görüntüleri siyah beyaz olarak değiştireceğim. Ve kartın üzerine gelindiğinde beyaz kart özellikli görüntüleri daha parlak hale getireceğim. Bunu yapmak için, Özel CSS kutusuna aşağıdaki CSS'yi ekleyin (yeni kodla çakışmaması için diğer kodu devre dışı bıraktığınızdan veya kestiğinizden emin olun):

#gridcard .column:first-child article:nth-child(odd), 
#gridcard .column:last-child article:nth-child(odd),
#gridcard .column:nth-child(2) article:nth-child(even)  {
background: #333;
}

#gridcard .column:first-child article:nth-child(odd) .entry-title, 
#gridcard .column:first-child article:nth-child(odd) .post-meta, 
#gridcard .column:first-child article:nth-child(odd) .post-meta a, 
#gridcard .column:first-child article:nth-child(odd) .post-content p, 
#gridcard .column:last-child article:nth-child(odd) .entry-title, 
#gridcard .column:last-child article:nth-child(odd) .post-meta, 
#gridcard .column:last-child article:nth-child(odd) .post-meta a, 
#gridcard .column:last-child article:nth-child(odd) .post-content p,
#gridcard .column:nth-child(2) article:nth-child(even) .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-content p  {
color: #fff;
}

#gridcard .column:nth-child(2) article:nth-child(even):hover img, 
#gridcard .column:first-child article:nth-child(odd):hover img, 
#gridcard .column:last-child article:nth-child(odd):hover img { 
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

#gridcard .column:nth-child(2) article:nth-child(odd):hover img, 
#gridcard .column:first-child article:nth-child(even):hover img, 
#gridcard .column:last-child article:nth-child(even):hover img { 
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
}

Ayrıca kartlara ters çevirme efekti ekleyebilirsiniz, böylece beyaz kartların üzerine geldiğinizde koyu griye dönerler ve koyu gri kartların üzerine geldiğinizde beyaza dönerler.

Yukarıdaki CSS'ye ek olarak aşağıdaki CSS'yi ekleyin:

#gridcard .column article, #gridcard .column article img {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
}

#gridcard .column:first-child article:nth-child(odd):hover, 
#gridcard .column:last-child article:nth-child(odd):hover,
#gridcard .column:nth-child(2) article:nth-child(even):hover {
background: #fff;
}

#gridcard .column:first-child article:nth-child(odd):hover .entry-title, 
#gridcard .column:first-child article:nth-child(odd):hover .post-meta, 
#gridcard .column:first-child article:nth-child(odd):hover .post-meta a, 
#gridcard .column:first-child article:nth-child(odd):hover .post-content p, 
#gridcard .column:last-child article:nth-child(odd):hover .entry-title, 
#gridcard .column:last-child article:nth-child(odd):hover .post-meta, 
#gridcard .column:last-child article:nth-child(odd):hover .post-meta a, 
#gridcard .column:last-child article:nth-child(odd):hover .post-content p,
#gridcard .column:nth-child(2) article:nth-child(even):hover .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-content p  {
color: #333;
}

#gridcard .column:first-child article:nth-child(even):hover, 
#gridcard .column:last-child article:nth-child(even):hover,
#gridcard .column:nth-child(2) article:nth-child(odd):hover {
background: #333;
}

#gridcard .column:first-child article:nth-child(even):hover .entry-title, 
#gridcard .column:first-child article:nth-child(even):hover .post-meta, 
#gridcard .column:first-child article:nth-child(even):hover .post-meta a, 
#gridcard .column:first-child article:nth-child(even):hover .post-content p, 
#gridcard .column:last-child article:nth-child(even):hover .entry-title, 
#gridcard .column:last-child article:nth-child(even):hover .post-meta, 
#gridcard .column:last-child article:nth-child(even):hover .post-meta a, 
#gridcard .column:last-child article:nth-child(even):hover .post-content p,
#gridcard .column:nth-child(2) article:nth-child(odd):hover .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-content p  {
color: #fff;
}

Şimdi git ve blogundaki etkisini kontrol et.

Örnek #3: Blog Modülü Kartlarını Satıra Göre Özelleştirme

İkinci örnek için, her iki satırdaki (sütun değil) kartlar için aynı koyu arka planı ve beyaz metni uygulayacağım. Bunu yapmak için, sütunların her birinde çift numaralı kartların tümünü hedeflemeniz gerekir. Divi → Tema Seçenekleri'ne gidin ve bu öğreticiden Özel CSS kutusunda sahip olabileceğiniz önceki CSS'leri devre dışı bıraktığınızdan veya kestiğinizden emin olun. Ardından aşağıdaki CSS'yi ekleyin:

#gridcard article:nth-child(even) {
    background-color: #333;
}

#gridcard article:nth-child(even) .entry-title, 
#gridcard article:nth-child(even) .post-meta, 
#gridcard article:nth-child(even) .post-meta a, 
#gridcard article:nth-child(even) .post-content p  {
color: #fff;
}

İşte sonucun nasıl göründüğü:

Örnek 4: Belirli Bir Blog Modülü Kartı Tasarlama

Bazılarınız belirli bir modül kartı seçmek isteyebilir. Bunu yapmak için, kartlarınızın her birine otomatik olarak atanan benzersiz posta kimliğini bulmalısınız. Bu örnek için Chrome tarayıcısını kullanıyorum.

Blog modülünüzü gösteren sayfaya gidin ve kartlarınızdan birine sağ tıklayın. Açılan seçenekler kutusunda "İncele"yi seçin (bazı tarayıcılarda "İnceleme Öğesi" veya benzeri bir şey olabilir. Bu, web sayfanızın hem html hem de css'sini görüntüleyen geliştirici araçları penceresini açacaktır. Saran makale etiketini bulun modül kartınıza/postanıza ve kendisine atanan posta kimliğine dikkat edin.Bu, bireysel kartınızı hedeflemek için kullanmak istediğiniz seçicidir.Örneğin, üzerine geldim, sağ tıkladım ve "post-" kimliğine sahip kartı inceledim. 3466”.

Buraya bakın:

Bu kartı CSS'de hedeflemek ve koyu gri bir arka plan üzerinde yalnızca bu karta beyaz yazı tipi vermek için aşağıdaki CSS'yi kullanırsınız:

#post-3466 {
background: #333333;
}
#post-3466 .entry-title, 
#post-3466 .post-meta, 
#post-3466 .post-meta a, 
#post-3466 .post-content p  {
color: #fff;
}

Artık karta uygulanan belirli bir stil var.

Bu kadar!

Son düşünceler

Bunlar, Blog Modülü kartlarının bu tür CSS hedeflemesini kullanarak gerçekleştirebileceğiniz birçok farklı stile sadece birkaç örnektir. Artık her kart için aynı stili korumak zorunda değilsiniz. Onları istediğiniz gibi tasarlayabilirsiniz.

Eğlence! Yorumlarda sizden harika öneriler ve fikirler duymayı dört gözle bekliyorum.