Ana İçeriğe Geç

Bir blog'un ızgaralarını Divi ile kişiselleştirme

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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 özel CSS kullanarak blogunuzun ızgarasını oluşturan kartlara birden fazla stili nasıl hedefleyeceğinizi ve uygulayacağınızı göstereceğim. Bir dama tahtası efekti oluşturmak için kartlara farklı bir stili nasıl uygulayacağınızı göstereceğim. Ayrıca, her bir kartın her satıra göre nasıl farklı bir şekilde biçimlendirileceğini ve herhangi bir kartı nasıl hedefleyeceğinizi göstereceğim.

Bu, kullanabileceğiniz bazı vurgulu efektler de dahil olmak üzere blogunuzu nasıl özelleştireceğinize dair 4 örnekleridir. Bu eğitimin sonunda, blogunuz için harika tasarımlar yaratabileceksiniz.

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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'un modül kartlarındaki tüm metin öğelerini hedefler (başlık, makale metaları, makale meta bağlantıları ve makale içeriği dahil) ve onlara beyaz renk atar.

İşte sonuç:

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

Diğer Divi öğreticiler

Bu makale yorumları 20 içeriyor

  1. Bonjour
    Blog gönderilerini "grid" kimlikli "gridcard" ile görüntülemeye çalıştım ama çalışmıyor. Bana yardım eder misiniz ?

  2. Bonjour
    Gerçekten yeni başlayan biriyim ama çevrimiçi eğitimler sayesinde güzel bir blog oluşturmayı başardım.
    Gerçekten, bunun için teşekkürler çünkü sadece kodları kopyalamak zorunda kaldım ve her şey kusursuz gitti, sonuçtan memnunum.
    Tekrar teşekkürler, iyi günler 🙂

  3. İyi akşamlar,
    DIVI blogu yazarın adının yanına “from” edatını yerleştirir (örneğin Stefano'dan). Bunu "de" olarak değiştirmenin mümkün olup olmadığını bilmek istiyorum

  4. Merhaba Thierry
    Süper öğretici
    Öne çıkan görüntünün boyutunu büyütmenin mümkün olup olmadığını bilmek istiyorum
    Bu tarzı bloguma uygulamak istiyorum
    sağol

  5. Bonjour
    Bu düzeni mobil (tablet) için nasıl optimize edebilirim? Bir Schabrettmuster'ım yok ama her blog yazısı için belirli bir sırayla farklı renkler var. Tabii ki, mobile geçtiğinizde bu değişir ve renkler artık doğru gönderilerle ilişkilendirilmez ...
    Burada bir fikri olan var mı?

  6. Bonjour

    Bu yazı için teşekkürler! Ayrıca makalelerin altındaki "daha fazla oku" bölümünü değiştirmek istiyorum.
    Metni değiştirmek ve örneğin güzel ortalanmış bir düğmeye koymak için bize CSS kodundan örnekler verebilir misiniz?

    En vous remerciant.
    sophie

  7. CSS personalizado'daki Cuándo lo pones, por ejemplo:
    # gridcard .Column: ilk çocuk sanatı: nth-child (impar) {background: #333; }

    da error como el seigue: 1, 18 satırında kolondan sonra bir FUNCTION veya IDENT bekleniyor

    selamlar

    1. İyi akşamlar,

      Blogumuz otomatik olarak Fransızcadan çevrilmiştir. Bu nedenle sizi blogumuzun üst çubuğunda bulunan dil parçacığında Fransızca dilini seçmeye davet ediyorum ve doğru CSS kodu görüntülenecektir.

    2. usted escribió bir sanat escrito, anlamı ser: artículo del primer hijo: hayır arte del primer hijo:

      Makaleyi yanlış yazdınız, şöyle olmalıdır: ilk çocuk makalesi: ilk çocuk sanatı değil:

  8. Merhaba
    Yazı için teşekkürler. Bir ızgara sunumum var (Divi Teması) Makalelerin sunumu için küçük resimlerim var (fotoğraflar), diğer yandan makaleye erişmek için tıkladığımda, resim büyük olarak yazının başında görüntüleniyor. 'makale. Küçük resimle aynı boyuta getirmenin veya gönderi görünümünden silmenin bir yolu var mı?
    sağol
    Patrick

    1. İyi akşamlar,

      Maalesef, divi desteğimiz öğreticileriyle sınırlıdır. Lütfen Eleganthemes SVP ile iletişime geçin.

  9. Bonjourn, süper makale
    Burada şansımı deniyorum, bazen aynı konu başkalarına mantıklı geldiğinde cevabını bulamadan haftalarca bir konuyu dolaştık.

    Bu nedenle, sadece görsellerden oluşan ancak farklı yüksekliklerden oluşan, daha açık olmak gerekirse, her iki görselden birinin yanındaki görselin iki katı yüksekliğe sahip olduğu bir posta ızgarası oluşturmak için bir çözüm arıyorum.

    Bir fikir mi?

    Julian

  10. Büyük öğretici! Sitem için ca bu hafta sonu test edecek.
    Eğer ızgaraları özler kaldırmak için bir çözüm var mı?
    Merci à vous
    Sofhy

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
20 hisseleri
hisse7
cıvıltı2
Enregistrer11