Divi Blog Modülündeki Sütun Sayısı Nasıl Değiştirilir

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, istediğiniz sayıda sütun oluşturmak için CSS Izgarasının gücünü Divi Blog modülüyle birleştirmeyi keşfedeceğiz. Yalnızca birkaç CSS parçacığıyla blogunuz çok sütunlu güzel bir ızgara düzenine dönüşecektir. Ayrıca, sütunlar tüm tarayıcı boyutlarıyla akıcı bir şekilde yanıt verecek, bu nedenle bu medya sorgularını veya duyarlı ayarları güncelleme konusunda endişelenmenize gerek yok. CSS Izgara büyüsünden sonra, blogu daha fazla özel CSS olmadan görsel olarak tasarlamak için yerleşik blog modülü ayarlarına sahip olacaksınız. Bu nedenle, Divi blogunuz için daha fazla sütun arıyorsanız, bu hile ve daha fazlasını yapacaktır.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Ve işte blog modülüne ekleyeceğimiz CSS Izgara Düzenini gösteren bir kod kalemi.

Düzeni ÜCRETSİZ İndirin

Bu öğreticiden blog modülü tasarımına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndir

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, aşağıdaki e-posta adresinizi yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

CSS Grid Kullanarak Divi Blog Modülündeki Sütun Sayısı Nasıl Değiştirilir

Neden CSS Izgarası?

CSS kullanarak blog modülü için sütun düzenleri oluşturmanın birçok yolu vardır. Ancak bu örnek için CSS Grid kullanmak en mantıklısı. CSS Grid özelliği, yalnızca birkaç CSS satırı içeren içerik için öngörülebilir ve duyarlı ızgara düzenleri oluşturmanın popüler bir yoludur. Bununla, tüm blog modülü kartlarını tamamen duyarlı bir ızgarada düzenleyebiliriz. Kısacası, Divi blogunuz için istediğiniz herhangi bir sütun düzenini eklemek için basit ve eksiksiz bir çözüm sunar. Aslında, onu Divi modülleri için bir ızgara düzeni oluşturmak için de kullandık.

Şimdi dikkatimizi blog modülüne çevirelim.

Tam Genişlik Düzeni ile Blog Modülü Kurma

Divi Blog Modülü, web sitenizin herhangi bir yerine bir blog eklemek için kullanılabilir. Bu, Divi'de bir blog sayfası oluşturmayı gerçekten kolaylaştırır. Tek yapmanız gereken Divi Builder'ı kullanarak sayfaya bir blog modülü eklemek.

Bu eğitim için, bazı temel stiller içeren bir blog modülüne sahip olan ücretsiz düzen paketlerimizden birinden önceden hazırlanmış bir blog sayfası şablonu kullanacağız. Hazır blog sayfası düzenini sayfanıza yüklemek için alttaki ayarlar menüsünü açın ve Kitaplıktan Ekle açılır penceresini açın. Oradan, Moda Tasarımı Blog Sayfası düzenini arayın ve bulun ve sayfaya yükleyin.

Düzen yüklendikten sonra, blog gönderilerini görüntülemek için kullanılan blog modülünü bulun ve blog modülü ayarlarını açın.

Gönderi Sayısını Ayarla

Blog ayarlarında, gönderi sayısını 10 ile sınırlamak için içeriği güncelleyin. (Bu, esas olarak estetik nedenlerledir, çünkü ızgaramız sonunda masaüstünde iki satır beş blog gönderisi içerecektir.)

• Mesaj Sayısı: 10

Tam Genişlik Düzenini Seçin

Blogumuz için sütun düzenini CSS Grid kullanarak oluşturacağımızdan, blog modülü düzeninin tam genişlikte (grid değil) olduğundan emin olmamız gerekiyor. Bu, blog gönderilerinin normal belge/sayfa sırasına göre dikey olarak istiflenmesini sağlayacaktır.

Blog modülünün düzenini değiştirmek için blog modülü ayarlarını açın ve tasarım sekmesi altında Düzen açılır menüsünü açın ve Tam Genişlik öğesini seçin.

Artık her blog gönderisi, sütunun (veya ana kapsayıcının) tam genişliğini kapsamalıdır.

Sadece küçük bir başlangıç ​​olsun diye, CSS'imizi eklediğimizde ızgara düzenimizin nasıl görüneceğine dair daha iyi bir fikir edinebilmemiz için blog gönderilerine bir kenarlık ekleyelim. Kenarlık seçeneklerini aşağıdaki gibi güncelleyin:

• Kenar Genişliği: 1px
• Kenar Rengi: rgba(150,104,70,0.35)

Blog Modülüne Özel CSS Sınıfı Ekleme

CSS'imizle bu belirli blog modülünü (başkası olmayan) verimli 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 Izgarası ile Çok Sütunlu Düzen Oluşturma

Artık blog modülümüz tam genişlikte bir düzen ile kurulduğuna göre, özel CSS'mizi eklemeye hazırız. Şimdilik, CSS'yi sayfaya eklemek için bir kod modülü kullanacağız. Ancak işimiz bittiğinde, CSS'yi her zaman tercih ettiğiniz konuma taşıyabilirsiniz (Tema Seçeneklerindeki Özel CSS veya alt temanızın style.css gibi).

Blog modülünün altına yeni bir kod modülü ekleyin.

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 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ı, içeriği (veya modülleri) CSS ızgara modülüne göre düzenler.

ekran: ızgara;

CSS'nin ikinci satırı, ızgaranın sütun şablonunu tanımlar.

grid-template-columns: tekrarla(otomatik doldurma, minmax(200px, 1fr));

Üçüncü satır, ızgara öğeleri arasındaki boşluk aralığını belirler (oluk genişliği gibi).

boşluk: 20 piksel;

CSS Izgara Sütunları Nasıl Çalışır?

Bu durumda ızgara, ızgara kabının kalan alanını doldurmak için gerektiğinde sütunları art arda ekleyecektir. Her sütunun minimum genişliği 200 piksel ve maksimum genişliği 1fr olacaktır (bu, otomatik ile tamamen aynıdır). Bu, ana kapsayıcının (Bölme Satırı/Sütun) maksimum 1080 piksel genişliğinde olduğunda, ızgaranın 5 sütuna sahip olacağı anlamına gelir. Her sütun, 1000 piksele eşit olan 200 piksel (minimum genişlik) genişliğe sahip olacaktır. 20 piksellik 4 ızgara aralığını ekleyin ve toplam 1080 piksel elde edin. Görüntü alanı ızgarayı 1080 pikselin altına sıkıştırdığında, CSS Izgarasının büyüsü devralır ve mevcut her alanı 200 piksel genişliğe ulaşana kadar blog gönderileriyle doldurur. Varsayılan olarak ihtiyaç duyulduklarında yeni satırlar otomatik olarak oluşturulacaktır.

Daha fazla sütun elde etmek için minimum 200 piksel değerini daha küçük bir değerle değiştirebilir veya Divi satırının maksimum genişliğini 1080 pikselden daha büyük bir değere yükseltebilirsiniz.

Buraya eklediğimiz CSS Izgara Düzeni işlevselliğini gösteren bir kod kalemi.

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 kullanmayı düşünmüyorsunuz, tam burada durabilirsiniz.

İşte şimdiye kadarki sonuç.

Blog Posta Kartını (veya Izgara Öğesini) Stillendirin

Ardından, ızgara öğelerini (veya blog posta kartlarını) hedefleyen birkaç satır CSS ekleyebiliriz, böylece her satırın üst kısmına hizalanır ve biraz dolgulu olur.

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

Izgaradan Sayfalandırmayı Kaldırma

Şu anda, blog modülünde sayfalandırma etkinse, CSS kılavuzundaki son ızgara öğesi olarak kabul edilecektir. Sayfalandırmayı ızgaradan tamamen çıkarmak 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%);
}

Artık sayfalandırma bağlantıları, farklı görüntü alanı genişliklerinde hareket etmemesi için güvenli bir şekilde kılavuzun dışındadır.

Şimdiye kadarki sonucu kontrol edelim!

Bonus İpucu: Tüm Öne Çıkan Görsellerin (veya Küçük Resimlerin) Boyutunu Ayarlayın

Bu noktada, her bir blog posta kartındaki öne çıkan görsellerin yükseklik tutarsızlığını fark edebilirsiniz. Hepsini aynı yükseklikte yapmak istiyorsanız, bunu yapmak için ek CSS 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;
}

İlk snippet, öne çıkan resim kapsayıcısını hedefler ve temel olarak resim kabının yüksekliğini ayarlayan bir dolgu yüzdesi ekler. Ancak ilk snippet, öne çıkan resmi, resim kapsayıcı içinde tam olarak ortalanacak şekilde konumlandırana kadar çalışmaz. Bunu yapmak için görüntüye mutlak bir konum veririz ve görüntünün kabın tüm genişliğine ve yüksekliğine yayılmasını sağlamak için "nesne-uyum:kapak" kullanırız.

%56,25 üst dolgu ile tüm resimlerimiz için 16:9 en boy oranı elde etmeliyiz.

Resminiz için istediğiniz en boy oranını elde etmek için resim kapsayıcısındaki dolguyu ayarlamaktan çekinmeyin.

Son sonuç

İşte kod modülüne eklediğimiz tüm CSS'ye bazı yorumlarla birlikte bir başka bakış.

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.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;
}

Ve işte yeni sütunlarımız ve ızgara düzenimizle blog modülümüze son bir bakış.

Son düşünceler

CSS Grid kullanarak sadece birkaç satır CSS ile neler yapılabileceği beni her zaman şaşırtıyor. Bu durumda, Divi blog modülünün tamamını akıcı beş sütunlu bir düzende yeniden yapılandırabildik. En iyi yanı, medya sorgularını kullanma konusunda endişelenmenize gerek olmamasıdır! Umarım bu size zaman kazandırır ve güzel blog sayfaları oluşturmak için size daha fazla seçenek sunar.

Yorumlarda sizden haber bekliyorum.

Şerefe!