Divi Blog Modülü Izgara Kart Stili Nasıl Yapılır (4 Örnek ile)
Divi Blog Modülü, blogunuzu göndermek için yararlı olan bir kutu düzeni seçeneğine sahiptir. Kafes şablonu, blog yayınınızı ekranınızda tam standart geniş bir blog düzeninden daha fazla yayın görmeyi kolaylaştıran bir kutu veya karta ayarlar. Blog modülü ayarları, tüm ızgara tasarımını ayarlamanıza olanak tanır. Tüm kartlarınızı arka plan renkleri, yazı tipleri, kenar boşlukları vb. İle kolayca yapabilirsiniz. Aynı … Ancak, düzenleme seçeneği genel kafes tasarımıyla sınırlıdır, bu da ızgaradaki kartlara birkaç veya farklı tasarım uygulamayı zorlaştırır. .
Bugün size özel bir CSS kullanarak blog ızgaranızı oluşturan karta birden fazla stili nasıl hedefleyeceğinizi ve uygulayacağınızı göstereceğim. Size bir kutu kutu oluşturarak, birbirlerinin kart için nasıl farklı bir stil uygulayacağınızı göstereceğim. Ayrıca, kartlarınızı hatlara göre nasıl farklı şekilde organize edeceğinizi ve tek tek kartları kendi başına nasıl hedefleyeceğinizi ve düzenleyeceğinizi göstereceğim. Kullanabileceğiniz bazı yüzer efektler de dahil olmak üzere kafes kartınızı nasıl düzenleyeceğinize dair 4 örnek ekledim. Bu öğreticinin sonunda, bir sonraki projeniz için olağanüstü bir blog ızgarası tasarımı oluşturmanız için düzenleneceksiniz.
Başlayalım. DIVI Blog Modülü Izgara Kartı Stili Nasıl Yapılır (4 Örnek ile) YouTube kanalımıza abone olun Bir blog modülü kartı tasarlamaya başlamadan önce ızgara modülü modülü düzenini hazırlayın, üstün resimlerle yapılmış en az 12 gönderiye sahip olduğunuzdan emin olun. Üstün resmim için Unssplash.com’dan içerik ve taklit görüntülerim için “Lorem Ipsum” metnini kullanıyorum. Gönderiniz oluşturulduktan sonra yeni bir sayfa oluşturun. Yeni sayfanızda, standart bölümdeki tam geniş bir sütuna bir blog modülü uygulayın: Blog modülü ayarlarını düzenlemek için tıklayın. Genel ayarlar altında, aşağıdaki ayarları değiştirin:
Özel CSS altında, CSS ID metin kutusuna “Gridcard” girin. Bu, yalnızca bu blog modülünü ayarlamamızın bir yolu olacaktır. Blog Modülü Izgarasının Düzenini Anlayarak Kaydet ve Out Out Bir blog ızgaranız olduğunda, düzenlemek istediğiniz bir blog modülü kartı bulabilmeniz için kafes düzeni yapısını anlamak önemlidir. Blog ızgarası üç sütun düzeni ile düzenlenmiştir. Aşağıda, üç sütuna bölünmüş 12 blog yazısı olan bir blog ızgarası çizimi: Blog kartpostalları her sütunda yukarıdan aşağıya sıralanır. Yani, onlara her numarayı verirseniz, onlara her sütunda yukarıdan aşağıya 1 ila 4 sayılar verirsiniz: Her bir sütunun altındaki her blog kartpostalının sayısal sırasını bildiğiniz için, her bir kartı aşağıdaki gibi garip veya eşit bir sayı olarak da tanımlayabilirsiniz: Örnek Izgara Tasarımı Örnek #1: Bir Kutu Kutusu Tasarlama Bu ilk örnek için, tüm blog modül kartlarını ilk sütun altında tek numaralı (kart 1 ve 3) ile koyu gri arka planın rengini vererek hedefleyeceğim. Bunu yapmak için Divi → Tema seçeneğini açın ve CSS Kustom metin kutusuna aşağıdaki CSS’yi ekleyin: #Gridcard. Sütun: İlk çocuk sanat: nth-child (tek) { Arka plan: #333;
}
Bu kodun ne yapıldığının ayrıntıları şunlardır: #GridCard = Tüm blog modülleri için id. Sütun: ilk çocuk = Blog modülündeki ilk sütunu seçme makalesi: nth-child (tek) = tüm makaleleri (veya kartları seçme ) sütunda numaralandırılan her şeyi birleştiren bu, blog modülünün ilk sütunundaki tek sayı kartı “Gridcard” kimliğiyle seçer. Ardından, aşağıdaki CSS’yi ekleyerek karanlık arka planı geçmek için beyaz metninizi ekleyin: #gridcard. Sütun: İlk çocuk makalesi: nth-child (tek). Giriş başlığı,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek). Meta sonrası,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek). Meta sonrası A,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek).
Renk: #ffffff;
}
Bu kod, blog modülü kartındaki tüm metin öğelerini hedefliyor (başlıklar, meta yayınlama, meta bağlantıları yayınlama ve içerik yayınlama) ve onlara beyaz veriyor.
Sonuç bu:
Kutularımızın düzenini yapmanın bir sonraki adımı, üçüncü sütundaki tek sayı kartlarını hedeflemek ve ilk sütunda yaptığınız gibi koyu gri ve beyaz metnin arka planını uygulamaktır. CSS özel metin kutusuna aşağıdaki CSS’yi ekleyin: #gridcard. Sütun: Son çocuk makalesi: nth-child (tek) {
Arka plan: #333; }
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (ODD). Entry-the,#Gridcard. Sütun: Son Çocuk Makalesi: Nth-Child (Odd) .post-Meta,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (tek). Meta sonrası A,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (tek). Konsantrasyon sonrası P {
Renk: #ffffff;
}
Bu kod, “Son Çocuk” nun sahte bir öğesi ile “son” sütunu (bu durumda üçüncü sütun son sütundur) hedefler.
İkinci (veya orta) sütunu için, kutu efekti tamamlamak için çift sayı kartı hedefleyin. Bunu yapmak için aşağıdaki CSS’yi eklememiz gerekir: #gridcard. Sütun: n-child (2) Makale: nth-child (eşit) {
Arka plan: #333;
}
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit). Giriş başlığı,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit). Meta sonrası,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit). Meta sonrası A,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit).
Renk: #fff;
}
Şimdi blog modülü kartının kutularının düzenini görmek için blog sayfasını açın ve kontrol edin.
Örnek #2: Blog modülü kartını nasıl hedefleyeceğinizi bildikten sonra kutuların düzenini göstermek için efekt ekleyin, karttaki tüm öğeleri yaratıcı bir şekilde düzenleyebilirsiniz. Bu örnek için, kutuların düzenini kullanıyorum ve bu sefer imlecleri karta işaretlerken koyu gri kartın üstün görüntüsünü siyah beyaz olarak değiştireceğim. Ve imleci karta yönlendirirken üstün bir beyaz kart görüntüsünü daha parlak hale getireceğim. Bunu yapmak için, özel CSS kutusuna aşağıdaki CSS ekleyin (yenisiyle çelişmeyecek şekilde diğer kodları devre dışı bıraktığınızdan veya kestiğinizden emin olun):
#Gridcard. Sütun: İlk Çocuk Makalesi: N-Child (Odd),#Gridcard. Sütun: Son Çocuk Makalesi: Nth-Child (ODD),
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit) { Arka plan: #333;
}
#Gridcard. Sütun: İlk Çocuk Makalesi: nth-child (tek). Giriş başlığı,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek). Meta sonrası,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek). Meta sonrası A,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek). Post-concent p,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (tek). Entry-title,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (tek). Meta sonrası,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (tek). Meta sonrası A,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (tek). Post-Concent P,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit). Giriş başlığı,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit). Meta sonrası,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit). Meta sonrası A,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit).
Renk: #fff;
}
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit): Hover IMG,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek): Hover IMG,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (ODD): Hover IMG {
-Webkit-Filter: Grayscale (1);
Filtre: gri tonlama (1);
}
#Gridcard. Sütun: nth-child (2) Makale: nth-child (tek): Hover IMG,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (eşit): Hover IMG,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (eşit): Hover IMG {
-Webkit-Filter: Parlaklık (1.5);
Filtre: Parlaklık (1.5);
}
Ayrıca, imleci beyaz karta yönlendirdiğinizde, kart koyu gri döner ve imleci koyu gri karta yönlendirdiğinizde kart beyaz olur. Yukarıdaki CSS: #Gridcard. Sütun Makalesi, #Gridcard. Sütun Makalesi IMG {
-Webkit-Transition: Tüm 0.8s;
-Moz-Transition: Tüm 0.8s;
Geçiş: 0.8s;
}
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek): Hover,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (ODD): HOVER,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit): Hover {
Arka plan: #fff;
}
#Gridcard. Sütun: İlk Çocuk Makalesi: nth-child (tek): Hover. Entry-title,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek): Hover .post-Meta,
#Gridcard. Sütun: İlk çocuk sanat: nth-child (tek): Hover .post-Meta A,
#Gridcard. Sütun: İlk Çocuk Makalesi: N-Child (ODD): HOVER .Post-Concent P,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (ODD): HOVER. ENTRY-TITLE,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (Odd): Hover .post-Meta,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (ODD): HOVER .Post-Meta A,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (ODD): HOVER .Post-Concent P,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit): Hover. Entry-title,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit): Hover .post-Meta,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit): Hover .post-Meta A,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (eşit): Hover .post-concent yazı p {
Renk: #333;
}
#Gridcard. Sütun: İlk çocuk sanat: nth-child (eşit): Hover,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (eşit): Hover,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (tek): Hover {
Arka plan: #333;
}
#Gridcard. Sütun: İlk çocuk makalesi: nth-child (eşit): Hover. ENTRY-TITLE,
#Gridcard. Sütun: İlk çocuk makalesi: nth-child (eşit): Hover .post-Meta,
#Gridcard. Sütun: İlk Çocuk Makalesi: N-Child (eşit): Hover .post-Meta A,
#Gridcard. Sütun: İlk çocuk makalesi: n-child (eşit): Hover .post-concent p,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-Child (eşit): Hover. Entry-title,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (eşit): Hover .post-Meta,
#Gridcard. Sütun: Son Çocuk Makalesi: N-Child (eşit): Hover .post-Meta A,
#Gridcard. Sütun: Son Çocuk Makalesi: nth-child (eşit): Hover .post-concent p,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (tek): Hover. Entry-title,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (tek): Hover .post-Meta,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (tek): Hover .post-Meta A,
#Gridcard. Sütun: nth-child (2) Makale: nth-child (tek): Hatır.
Renk: #fff;
}
Şimdi blogunuzdaki etkiyi kontrol edin.
Örnek #3: Blog Modülü kartını sıraya göre ayarlayın İkinci örnek için satıra göre, Kartlar için Kartlar için Koyu Arka Plan ve Aynı Beyaz Metin (sütunlar değil) uygulayacağım. Bunu yapmak için, her sütundaki tüm çift sayı kartlarını hedeflemeniz gerekir. Divi → Tema seçeneğini açın ve bu öğreticiden özel CSS kutusunda sahip olabileceğiniz önceki CSS’yi devre dışı bıraktığınızdan veya kestiğinizden emin olun. Ardından aşağıdaki CSS’yi ekleyin: #GridCard Makalesi: N-Child (eşit) {
Arka Plan rengi: #333;
}
#Gridcard Makale: Nth-Child (eşit). Entry-title,
#Gridcard Makale: Nth-Child (eşit) .Post-Meta,
#Gridcard Makale: Nth-Child (eşit). Post-Concent P
Renk: #fff;
}
Sonuç gibi görünüyor: Örnek #4: Belirli bir blog modülü kartı tasarlama Bazılarınız belirli bir modül kartı seçmek isteyebilirsiniz. Bunu yapmak için, kartlarınızın her birine otomatik olarak ayarlanmış benzersiz bir posta kimliği bulmalısınız. Bu örnek için Chrome tarayıcısını kullanıyorum. Blog modülünüzü görüntüleyen bir sayfayı açın ve kartlarınızdan birine sağ tıklayın. Görünen seçenek kutusunda “Kontrol Et” i seçin (bazı tarayıcıların “muayene öğeleri” veya benzeri olabilir. Bu, web sayfanızı HTML ve CSS görüntüleyen bir geliştirici penceresi uygulayacaktır. Modülünüzü/posta kartınızı ve posta kartınızı saran makale etiketlerini bulun Dikkat ID POST’u ona ayarlayın. Bu, bireysel kartlarınızı hedeflemek için kullanmak istediğiniz seçmen. Örneğin, imleci yönlendiriyorum, sağ tıklıyorum ve kartı “3466 sonrası” kimliğiyle kontrol ediyorum. Buraya bakın:
Bu kartı CSS’de hedeflemek ve sadece bu kartta koyu gri arka planının üzerindeki beyaz yazı tipleri sağlamak için aşağıdaki CSS’yi kullanacaksınız: #Post-3466 {
Arka plan: #333333;
}
#3466 sonrası. Entry-title,
#3466 sonrası .post-Meta, #3466 sonrası .post-Meta A, #3466 sonrası .post-content p {
Renk: #fff;
}
Şimdi kartın kendisine uygulanan özel bir tarzı var.
İşte burada! Bu son zihin, bir blog modülü kartından bu tür CSS hedefini kullanarak elde edebileceğiniz birçok farklı stilin sadece birkaç örneğidir. Artık her kart için aynı stili korumak zorunda değilsiniz. İstediğiniz gibi tasarlayabilirsiniz. Zevk almak! Yorumlarda sizden bazı iyi öneriler ve fikirler duymayı umuyorum.
