DIVI Blog sayfanızı çok sütunlu bir ızgara olarak görüntülemek ister misiniz?
Divi'nin Blog modülü, blog gönderilerini tam genişlikte veya ızgara düzeninde görüntüleyebilir. Izgara düzenini seçerseniz, sahip olabileceğiniz maksimum sütun sayısı üçtür.
Bu eğitimde yalnızca birkaç CSS parçacığıyla, blogunuzun güzel bir çok sütunlu ızgara düzenine dönüşecek. Ayrıca, sütunlar tüm tarayıcı boyutlarında düzgün ve duyarlı olacağından, medya sorgularını veya duyarlı ayarları güncelleme konusunda endişelenmenize gerek kalmaz.
Ayrıca bilmek için makalemize başvurabilirsiniz. DIVI Blog modülü ile bir blog sayfası nasıl oluşturulur.
anket
Bu eğitime geçmeden önce, elde etmek istediğimiz sonuca bir göz atalım.
DIVI'yı şimdi indirin!!!
Tam ekran düzenine sahip bir Blog modülünü yapılandırma
DIVI'nın Blog modülü, web sitenizin herhangi bir yerine bir blog eklemek için kullanılabilir. Site Web. Divi'de bir blog sayfası oluşturmayı gerçekten kolaylaştırıyor. Tek yapmanız gereken Divi Builder'ı kullanarak sayfaya bir Blog modülü eklemek.
Bu eğitim için, birinden önceden hazırlanmış bir blog düzeni kullanacağız. ücretsiz düzen paketleri Zaten temel bir stile sahip bir Blog modülü içeren DIVI.
Önceden hazırlanmış blog düzenini yüklemek için:
- WordPress kontrol panelinden yeni bir sayfa oluşturun
- İlgili bir ad verin ve 'Divi Builder'ı Kullan'ı tıklayın
- "Düzen seç" e tıklayın
- Arama çubuğuna 'Moda Tasarımcısı' yazın ve 'Moda Tasarımcısı Blog Sayfası' düzenini seçin
- Blog Düzeni'ni seçtiğinizden emin olun ve ardından “Düzen Seç”e tıklayın.
Düzen yüklendikten sonra, blog gönderilerini görüntülemek için kullanılan Blog modülünü bulun ve ayarları açın.
Gönderi sayısını ayarla
Blog ayarlarında güncelleyin içindekiler gönderi sayısını 10 ile sınırlamak. (Bu esas olarak estetik nedenlerden dolayıdır, çünkü ızgaramız eninde sonunda beş blog gönderisinden oluşan iki satırı içerecektir.)
- Görev sayısı: 10
Tam ekran düzenini seçin
Blogumuzu CSS Grid kullanarak sütunlar halinde yerleştireceğimiz için Blog modülünün düzeninin ' olduğundan emin olmamız gerekiyor.Tam ekran' ('Izgara' değil). Bu, blog gönderilerinin normal sayfa sırasına göre dikey olarak istiflenmesini sağlayacaktır.
Blog modülünün düzenini değiştirmek için modül ayarlarını açın ve Stil sekmesi altında açılır menüyü açın Şablon ve Tam Ekran'ı seçin .
Artık her blog gönderisi, sütunun (veya ana kapsayıcının) tam genişliğini kapsayacaktır.
Blog yazılarına kenarlık ekleyelim. Kenarlık seçeneklerini aşağıdaki gibi güncelleyin:
- Kenar genişliği: 1 piksel
- Kenarlık rengi: rgba (150,104,70,0.35)
Blog modülüne özel bir CSS sınıfı ekleme
CSS ile bu belirli Blog modülünü (başka bir modül değil) etkili bir şekilde hedeflemek için modülümüze özel bir CSS sınıfı vermemiz gerekiyor. Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: et-blog-css-grid
CSS Grid ile çok sütunlu düzen oluşturma
Artık Blog modülümüz tam ekran düzeniyle ayarlandığına göre, özel CSS'mizi eklemeye hazırız.
Sayfaya CSS eklemek için Blog modülünün altına bir Kod modülü ekleyeceğiz.
Kod giriş kutusuna, bir sayfaya eklenen herhangi bir CSS kodunu sarmak için gerekli stil etiketlerini ekleyin.
Stil etiketlerinin içine aşağıdaki CSS kod parçacığını yapıştırın:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
CSS'nin ilk satırı şunları sunar: içindekiler (veya modüller) ızgara biçiminde.
display: grid;CSS'nin ikinci satırı, ızgara sütun modelini tanımlar.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Üçüncü satır, ızgara öğeleri arasındaki boşluğu belirler.
gap : 20px ;Bu noktada, beş sütunlu duyarlı ızgara kullanıma hazırdır. Aslında, blog yazılarınız için sayfalandırma veya kenarlık kullanmak istemiyorsanız, burada durabilirsiniz.
İşte şimdiye kadarki sonuç.
Izgara öğelerini özelleştir
Ardından, ızgara öğelerini her satırın üst kısmına hizalanacak ve biraz dolguya sahip olacak şekilde hedefleyen birkaç CSS satırı ekleyebiliriz.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Kaldırılan ızgara sayfalandırması
Şu anda, blog modülünde sayfalandırma etkinse, CSS kılavuzundaki son ızgara öğesi olarak kabul edilecektir. Sayfalandırmayı ızgaradan tamamen kaldırmak için ona mutlak bir konum verebilir ve onu doğrudan blog modülünün altına yerleştirebiliriz. Bunu yapmak için aşağıdaki CSS'yi ekleyin:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Şimdiye kadarki sonucu görelim!
İpucu: Öne çıkan tüm resimlerin (veya küçük resimlerin) boyutunu ayarlayın
Bu noktada, her blog gönderisinde yer alan resimlerin yüksekliğindeki tutarsızlığı fark edebilirsiniz. Hepsinin aynı yükseklikte olmasını istiyorsanız, bunu yapmak için ek CSS de kullanabilirsiniz.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
%56,25'lik bir üst iç kenar boşluğuyla, tüm resimlerimiz için 16:9 en boy oranı elde etmeliyiz.
Görüntünüz için istediğiniz en boy oranını elde etmek için görüntü kapsayıcısındaki dolguyu ayarlamaktan çekinmeyin.
Nihai sonuç
Ve işte yeni sütunlarımız ve ızgaramızla Blog modülümüzün son bir önizlemesi. Ve gördüğümüz gibi, şebeke tamamen duyarlı.
DIVI'yı şimdi indirin!!!
Sonuç
Tamamdır ! Bu eğitimde size blog yazılarınızı sütunlar halinde nasıl düzenleyeceğinizi gösterdik.
Tüm Divi Blog modülünü akıcı beş sütunlu bir düzende yeniden yapılandırabildik. Umarım bu size zaman kazandırır ve size güzel blog sayfaları oluşturmak için daha fazla seçenek sunar. Ayrıca danışabilirsiniz Divi'nin Blog modülü ile bir Blog sayfası nasıl oluşturulur
Ayrıca bakınız kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
