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
- restoran kullanımı Divi tema için 5 siteleri
- Bir WooCommerce ürün Divi metni nasıl eklenir
- Divi sayfaları arasındaki menü rengini değiştirme
- Divi hakkında bilmediğiniz özellikler
- Divi'de kaydırıcı nasıl oluşturulur
- Divi'de bir kullanıcı rolü nasıl düzenlenir
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:
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
Özel CSS altında, CSS Kimliği metin kutusuna "ızgara kartı" girin. Sadece bu blog modülünü kişiselleştirmemizin bir yolu olacak.
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:
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:
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:
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ç:
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.
Ö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.
Ö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:
Ö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:
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
- restoran kullanımı Divi tema için 5 siteleri
- Bir Divi WooCommerce ürününe metin ekleme
- Divi sayfaları arasındaki menü rengini değiştirme
- Bir blog'un ızgaralarını Divi ile kişiselleştirme
- Nasıl WordPress üzerinde rol Divi editörü kullanımı
- Tam ekran Divi sürgüsü nasıl oluşturulur
- Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
- Divi hakkında muhtemelen bilmediğiniz özellikler
- WordPress üzerinde Divi Builder nasıl kullanılır
- Divi video kaydırma modülü nasıl kullanılır
- Divi Builder Flip modülü nasıl kullanılır
- Divi Builder'da referans modülü nasıl eklenir?
- Divi metin modülü nasıl kullanılır?
- Divi'de kaydırıcı nasıl oluşturulur
- Divi kullanıcı rolü nasıl düzenlenir
- Divi Sosyal Medya modülü nasıl kullanılır?
- WordPress Divi konulu mağaza modülü nasıl kullanılır?
- Divi kenar çubuğu modülü nasıl kullanılır
- Divi Fiyat Tablosu Modülünün Kullanımı
- Divi yayınlarının başlık modülünü nasıl kullanırım
- Divi video modülü nasıl eklenir
- Makale navigasyon modülü nasıl kullanılır
- Divi arama modülü nasıl kullanılır?
- Divi cüzdan modülü nasıl kullanılır?
- Divi Builder'da kişi modülünün kullanımı
- Divi filtreli cüzdan modülü nasıl kullanılır
- Tam genişlikte sürgü modülü nasıl kullanılır
- Divi Builder Görüntü Modülü nasıl kullanılır?
- Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
- Resim galerisi modülü nasıl kullanılır?
- Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
- Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
- Divi tam genişlikli başlık modülü nasıl kullanılır?
- Divi Sayaç Modülünün Kullanımı
- Divi Builder'daki makaleler sürgüsünü kullanma
- Divi Email Optin modülü nasıl kullanılır?
Günaydın ! Bu Blog nesnesinin sütun sayısını değiştirmenin mümkün olup olmadığını biliyor musunuz?
Her kartın tam genişlikte görüntülenmesini istiyorum. TEŞEKKÜRLER !
Bonjour
Blog gönderilerini "grid" kimlikli "gridcard" ile görüntülemeye çalıştım ama çalışmıyor. Bana yardım eder misiniz ?
İyi akşamlar,
geç cevap için özür dilerim.
Lütfen talebinizi yeniden ifade edebilir misiniz?
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 🙂
Sana yalvarıyorum. Bizi okuduğunuz için teşekkür ederim.
İ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
Bonjour
Evet, bu öğeyi Divi ile değiştirmek mümkündür.
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
Bonjour
Evet mümkün.
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ı?
Bonjour
Ne yazık ki değil.
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
Merhaba 🙂 “Daha fazla oku” butonunun metnini değiştirmek için Blog Ayarları > Stil > Daha Fazla Metin Oku bölümünden yapılır. Tipografiyi ve "daha fazlasını oku" metnini değiştirebilirsiniz. Ancak, nasıl bir düğme yapacağımı bilmiyorum. İyi kurulum!
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
İ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.
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:
Merhaba,
70 diğer diller.
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
İyi akşamlar,
Maalesef, divi desteğimiz öğreticileriyle sınırlıdır. Lütfen Eleganthemes SVP ile iletişime geçin.
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
Julian Merhaba
DIVI ekibiyle iletişime geçmenizi tavsiye ederim. Bu durumda daha uygundur.
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