Divi Blog modülü, blog gönderileriniz için kullanışlı bir ızgara biçiminde bir yerleşim seçeneğine sahiptir. Izgara şablonu, blog gönderilerinizi, standart görünüme kıyasla bir ekrandaki öğelerin görünürlüğünü kolaylaştıran kutular veya haritalar halinde düzenler.

Blog modülü ayarları, ağınızın genel tasarımını özelleştirmenize olanak tanır. Tüm kartlarınızın aynı arka plan rengine, yazı tipine, kenar boşluklarına vb. Sahip olmasını kolayca sağlayabilirsiniz. Bununla birlikte, stil seçenekleri bir bütün olarak ızgaranın tasarımıyla sınırlıdır, bu da işi zorlaştırır. ızgara içindeki haritalara birden çok veya farklı tasarım uygulama.

Bugün size ızgarayı oluşturan kartlara birden fazla stili nasıl hedefleyeceğinizi ve uygulayacağınızı göstereceğim. blogunuzun özel CSS kullanarak. Dama tahtası efekti oluşturmak için birbirlerine kartlara farklı bir stilin nasıl uygulanacağını göstereceğim. Ayrıca size her bir kartı satır başına farklı şekilde nasıl şekillendireceğinizi ve herhangi bir kartı nasıl hedefleyeceğinizi göstereceğim.

Bunlar nasıl özelleştirileceğine dair 4 örnek blogunuzunkullanabileceğiniz bazı fareyle üzerine gelme efektleri de dahil. Bu eğitimin sonunda harika tasarımlar yaratabileceksiniz. blogunuzun.

Divi konulu diğer dersler

Başlayalım.

Blogunuz için Yapılandırma Düzeni Izgara

Blog modülü kartlarının tasarımına başlamadan önce, kutuda daha önce bir görselle oluşturulmuş en az 12 makaleniz olduğundan emin olun.

Mesajlarınız oluşturulduktan sonra yeni bir sayfa oluşturun. Yeni sayfanızda, blog modülünü standart bölümdeki tam genişlikte bir sütuna yerleştirin:

Bir divi blogunun düzenini yapılandırma

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

  • Düzen Izgara (Kılavuz)
  • Makale sayısı: 12
  • Öne çıkan resmi göster: EVET
  • Düğme Devamı: AÇIK

Divi ızgara yapılandırması

Özel CSS altında, CSS Kimliği metin kutusuna "ızgara kartı" girin. Sadece bu blog modülünü kişiselleştirmemizin bir yolu olacak.

Kılavuz kartı css divi

Yaptığınız değişiklikleri kaydedin

Blog için "Izgara" düzeni nasıl anlaşılır?

Şimdi yerinde blogunuza ızgara olması, özelleştirmek istediğiniz blog modülünün haritalar bulabilmesi için ızgara düzeni yapısını anlamak önemlidir.

Blog ızgarası üç sütunlu bir düzende yapılandırılmıştır. Aşağıdakiler, üç sütuna bölünmüş 12 blog makaleleriyle blog ızgarasının bir gösterimidir:

Izgara divi düzeninin sunumu

Blog bilet kartları, sütunların her birinde yukarıdan aşağıya doğru sıralanır. Bu nedenle, onlara bir numara vermek istiyorsanız, yukarıdan aşağıya doğru her uzunlukta 1 - 4 saymanız gerekir:

Divi makalelerini say

Her sütunun altındaki her blog 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:

Çift ve tek sayı divi

Tasarımlar kapı Örnek

Örnek n ° 1: "Damalı" ızgara tasarımı

Bu ilk örnek için, ilk sütundaki blog modülündeki (kartlar 1 ve 3) tüm tek kartları hedefleyeceğim ve onlara koyu gri bir arka plan rengi vereceğim. Bunu yapmak için "Divi → Tema seçenekleri" ne gidin ve aşağıdaki CSS'yi özel CSS metin kutusuna ekleyin:

#gridcard .column: birinci alt madde: n-inci-çocuk (tek) {arka planı: #333; }

İşte bu kod ne yaptığının bir arıza:

#gridcard = tüm blog modülünün kimliği

.column: first-child = blog modülündeki ilk sütunu seçin

post: nth-child (odd) = sütundaki tüm tuhaf öğeleri (veya kartları) seçer

Hepsini bir araya getirirsek, bu blog modülünün ilk sütunundaki "gridcard" ID'sine sahip tek numaralı kartları seçer.

Daha sonra aşağıdaki CSS ekleyerek koyu arka plan üzerinde gidecek beyaz metin ekleyin:

#gridcard .column: birinci alt madde: n-inci-çocuk (tek) .entry-başlığı, #gridcard .column: birinci alt madde: n-inci-çocuk (tek) .post-meta, #gridcard .column: birinci çocuk Madde: n'inci-çocuk (tek) .post meta-a, #gridcard .column: birinci alt madde: n-inci-çocuk (tek) .post-içeriği, p {renk: #ffffff; }

Bu kod, blog modülü kartlarındaki tüm metin öğelerini hedefler (başlık, yazı metaları, yazı meta bağlantıları ve içindekiler makalenin) ve onlara beyaz rengini verir.

İşte sonuç:

Garip divi ızgarasının özelleştirilmesi

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

#gridcard .column: son alt makale: nth-çocuk (tek) {arka plan: # 333; } #gridcard .column: son-alt makale: nth-child (tek) .entry-title, #gridcard .column: last-child makale: nth-child (tek) .post-meta, #gridcard .column: son- alt makale: nth-child (tek) .post-meta a, #gridcard .column: last-child makale: nth-child (tek) .post-içerik p {renk: #ffffff; }

Bu kod, "son" sütunu (Bu durumda, üçüncü sütun son sütundur.) takma ad öğesi "last-child" ile.

İkinci sütun için (veya orta), dama tahtası efektini tamamlamak için çift kartları hedefleyin. Bunu yapmak için aşağıdaki CSS'yi eklememiz gerekir:

#gridcard .column: nth-child (2) makale: nth-child (çift) {arka plan: # 333; } #gridcard .column: nth-child (2) makale: nth-child (çift) .entry-title, #gridcard .column: nth-child (2) makale: nth-child (çift) .post-meta, # gridcard .column: nth-child (2) makale: nth-child (çift) .post-meta a, #gridcard .column: nth-child (2) makale: nth-child (çift) .post-içerik p {renk : #fff; }

Şimdi blog modülü kartlarının dama tahtası düzenini görmek için blog sayfasını kontrol edin.

Dama tahtası ızgara divi düzeni

Örnek 2: Damalı Düzen ile Üzerine Gelme Efektleri Ekleme

Blog modülü kartlarını nasıl hedefleyeceğinizi öğrendikten sonra, kartın içindeki herhangi bir öğeyi yaratıcı bir şekilde değiştirebilirsiniz.

Bu örnek için, dama tahtası düzenini kullanacağım ve bu sefer haritanın üzerinde gezinirken öne çıkan görüntüleri koyu gri haritalardan siyah ve beyaza değiştireceğim. Ve beyaz kartların ön sayfa görüntülerini kartın üzerine getirdiğinizde daha parlak yapacağım. Bunu yapmak için, aşağıdaki CSS'yi Özel CSS alanına ekleyin (diğer kodu yenisiyle uyumsuz olmaması için devre dışı bıraktığınızdan veya kestiğinizden emin olun):

#gridcard .column: birinci alt makale: nth-child (tek), #gridcard .column: son-çocuk makale: nth-child (tek), #gridcard .column: nth-child (2) makale: nth-child (çift) {arka plan: # 333; } #gridcard .column: birinci alt makale: nth-child (tek) .entry-title, #gridcard .column: first-child makale: nth-child (tek) .post-meta, #gridcard .column: ilk- alt makale: nth-child (tek) .post-meta a, #gridcard .column: first-child makale: nth-child (tek) .post-content p, #gridcard .column: last-child makale: nth-child (tek) .entry-title, #gridcard .column: last-child makale: nth-child (tek) .post-meta, #gridcard .column: last-child makale: nth-child (tek) .post-meta a , #gridcard .column: son alt makale: nth-child (tek) .post-içerik p, #gridcard .column: nth-child (2) makale: nth-child (çift) .entry-title, #gridcard. sütun: nth-child (2) makale: nth-child (çift) .post-meta, #gridcard .column: nth-child (2) makale: nth-child (çift) .post-meta a, #gridcard .column : nth-child (2) makale: nth-çocuk (çift) .post-içerik p {renk: #fff; } #gridcard .column: nth-child (2) makale: nth-child (çift): hover img, #gridcard .column: first-child makale: nth-child (tek): hover img, #gridcard .column: last -çocuk makalesi: nth-çocuk (tek): hover img {-webkit-filter: gri tonlama (1); filtre: gri tonlamalı (1); } #gridcard .column: nth-child (2) makale: nth-child (tek): hover img, #gridcard .column: first-child makale: nth-child (çift): hover img, #gridcard .column: last -çocuk makalesi: nth-çocuk (çift): img üzerine gelme {-webkit-filtre: parlaklık (1.5); filtre: parlaklık (1.5); }

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

Aşağıdaki CSS ve yukarıda daha CSS ekleyin:

#gridcard .column makalesi, #gridcard .column makalesi img {-webkit-geçişi: tümü 0.8s; -moz geçişi: tümü 0.8s; geçiş: tümü 0.8 sn; } #gridcard .column: birinci alt makale: nth-child (tek): fareyle üzerine gelme, #gridcard .column: son alt makale: nth-child (tek): fareyle üzerine gelme, #gridcard .column: nth-child (2) makale: nth-çocuk (çift): {arka plan: #fff; } #gridcard .column: birinci-alt makale: nth-çocuk (tek): fareyle üzerine gelin. giriş-başlığı, #gridcard .column: birinci alt makale: nth-child (tek): fareyle üzerine gelme .post-meta, #gridcard. sütun: birinci-alt makale: nth-çocuk (tek): vurgulu .post-meta a, #gridcard .column: birinci-alt makale: nth-child (tek): fareyle üzerine gelme .post-içerik p, #gridcard .column: last-child makale: nth-child (tek): hover .entry-title, #gridcard .column: last-child makale: nth-child (tek): fareyle üzerine gelme .post-meta, #gridcard .column: son alt makale : nth-child (tek): hover .post-meta a, #gridcard .column: last-child makale: nth-child (tek): hover .post-content p, #gridcard .column: nth-child (2) makale: nth-child (çift): hover .entry-title, #gridcard .column: nth-child (2) makale: nth-child (çift): hover .post-meta, #gridcard .column: nth-child ( 2) makale: nth-child (çift): hover .post-meta a, #gridcard .column: nth-child (2) makale: nth-child (çift): hover .post-content p {renk: # 333; } #gridcard .column: birinci alt makale: nth-child (çift): fareyle üzerine gelme, #gridcard .column: son alt makale: nth-child (çift): fareyle üzerine gelme, #gridcard .column: nth-child (2) makale: n'inci çocuk (tek): {arka plan: # 333; } #gridcard .column: first-child makale: nth-child (çift): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. sütun: birinci alt makale: nth-çocuk (çift): fareyle üzerine gelin .post-meta a, #gridcard .column: birinci-alt makale: nth-child (çift): fareyle üzerine gelme .post-content p, #gridcard .column: son-alt makale: nth-child (çift): fareyle üzerine gelin. giriş-başlığı, #gridcard .column: son-alt makale: nth-child (çift): fareyle üzerine gelme .post-meta, #gridcard .column: son alt makale : nth-child (çift): hover .post-meta a, #gridcard .column: last-child makale: nth-child (çift): hover .post-content p, #gridcard .column: nth-child (2) makale: nth-child (tek): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (single): hover .post-meta, #gridcard .column: nth-child ( 2) makale: nth-child (tek): hover .post-meta a, #gridcard .column: nth-child (2) makale: nth-child (tek): vurgulu .post-içerik p {renk: #fff; }

Şimdi gidip blogunuzdaki etkiyi görün.

Divi'nin üzerine gelindiğinde ızgaraları özelleştirme

Örnek # 3: çizgilerle haritalar özelleştirme

Üçüncü örnek için, aynı koyu arka planı ve beyaz metni her iki satırdaki (sütuna değil) kartlara uygulayacağım. Bunu yapmak için, her bir sütundaki tüm çift kartları hedeflemeniz gerekir. Temanın "Divi → Seçenekler" bölümüne gidin ve bu eğitimin başlangıcından bu yana eklediğiniz önceki CSS kodunu devre dışı bıraktığınızdan veya kaldırdığınızdan emin olun. Ardından aşağıdaki CSS'yi ekleyin:

#gridcard makalesi: nth-child (çift) {background-color: # 333; } #gridcard makalesi: nth-child (çift) .entry-title, #gridcard makalesi: nth-child (çift) .post-meta, #gridcard makalesi: nth-child (çift) .post-meta a, #gridcard makalesi : nth-child (çift) .post-içerik p {renk: #fff; }

İşte sonuç ne:

Divi satırına göre yapılandırma sonucu

Örnek # 4: Belirli bir ızgara haritası tasarlama

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

Blog modülünüzü görüntüleyen sayfaya gidin ve kartlarınızdan birine sağ tıklayın. Görünen seçenekler kutusunda, "İncele" yi seçin (bazı tarayıcılarda "İnceleme öğesi" veya benzer bir şey olabilir. Bu, sizin için hem html hem de css'yi görüntüleyen geliştirici araçları penceresini dağıtacaktır. Web sayfası. Makalenizi saran makale etiketini bulun ve ona atanan makale kimliğini yazın. Bu, bireysel kartınızı hedeflemek için kullanmanız gereken seçicidir. sağ tıklandı ve tıklandı "post-3466" kimliğini bulmak için incelendi.

Aşağıdaki gibi:

Tek bir makalenin değiştirilmesi

Ona beyaz yazı ile gri bir arka plan oluşturmak üzere bu CSS kartını hedeflemek için, aşağıdaki CSS kullanmalısınız:

# 3466 sonrası {arka plan: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Artık harita kendisine uygulanan belirli bir tarza sahip.

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ı stilin sadece birkaç örneğidir. Artık her kart için aynı stili korumanıza gerek yok. Onları istediğiniz gibi tasarlayabilirsiniz.

Eğer varsa herhangi bir soru veya önerileriniz onları bana teklif çekinmeyin.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Diğer Divi öğreticiler