Divi blog modülündeki sütun sayısı nasıl değiştirilir
Divi Blog Modülü blog yayınlarını hem Fullwidth hem de Izgara Düzenlerinde görüntüleyebilir. Kafes düzenini seçerseniz, sahip olabileceğiniz maksimum sütun sayısı üçtür. Bu öğreticide, istediğiniz bir dizi sütun oluşturmak için DIVI blog modülü ile CSS ızgarasının gücünü keşfedeceğiz. Yalnızca birkaç CSS görüntüsü ile blogunuz güzel bir çok sütunlu kafes düzenine dönüşecektir. Buna ek olarak, sütun tüm tarayıcı boyutlarına çok duyarlı olacaktır, bu nedenle medya sorgularını veya duyarlı ayarları güncelleme konusunda endişelenmenize gerek yoktur. Grid CSS mucizesinden sonra, artık özel CSS olmadan blogları görsel olarak tasarlamak için varsayılan bir blog modülü ayarlarınız var. Yani, Divi blogunuz için daha fazla sütun arıyorsanız, bu işe yarayacak ve daha fazlası olacaktır.
Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? CSS Grid kullanarak Divi Blog Modülündeki sütun sayısı nasıl değiştirilir CSS Box Neden? CSS kullanan bir blog modülü için bir sütun düzeni oluşturmanın birçok yolu vardır. Ancak bu örnek için, CSS ızgarasını kullanmak için en makul. CSS Grid özelliği, yalnızca birkaç CSS satırına sahip içerik için öngörülen ve duyarlı ızgara düzeni oluşturmanın popüler bir yoludur. Bununla birlikte, tüm blog modülü kartlarını tamamen duyarlı bir kutuya ayarlayabiliriz. Kısacası, Divi blogunuza istediğiniz herhangi bir sütun düzenini eklemek için basit ve eksiksiz bir çözüm sunar. Aslında, Divi modülü için bir kutu düzeni oluşturmak için de kullanıyoruz. Şimdi dikkatimizi blog modülüne yönlendirelim. Web sitenizde herhangi bir yere blog eklemek için geniş bir Divi blog modülüne sahip bir blog modülü hazırlamak kullanılabilir. Divi’de bir blog sayfası oluşturmayı çok kolaylaştırır. Tek yapmanız gereken Divi Builder kullanarak sayfaya bir blog modülü eklemektir. Bu eğitim için, zaten birkaç temel stiline sahip bir blog modülüne sahip ücretsiz düzen paketlerimizden birinden önceden yapılmış bir blog sayfası şablonu kullanacağız. Önceden yapılan blog sayfasının düzenini sayfanıza yüklemek için, Ayarlar menüsünü alttan açın ve kütüphaneden açılır ekle’yi açın. Oradan, moda tasarımı blog sayfasının düzenini arayın ve bulun ve sayfaya yükleyin.
Düzen yüklendikten sonra, blog yayınlarını görüntülemek ve blog modülü ayarlarını açmak için kullanılan blog modülünü bulun. Blog ayarlarındaki yayın sayısını ayarlayın, yazıların sayısını 10 ile sınırlamak için içeriği güncelleyin. Gönderi sayısı: 10 Tam geniş bir düzen seçin çünkü CSS Grid kullanarak blogumuz için bir sütun düzeni oluşturacağımız için, FullWidth Blog Modül Düzenini (ızgara değil) emin olmalıyız. Bu, blog yayınının normal belgeler/sayfalar 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 sekmesinin altında gerilme menüsünü açın ve tam genişliği seçin. Şimdi her blog yazısı sütunun (veya üst kabın) tam genişliğini kapsar. Yeni başlayanlar için, CSS’imizi eklediğimizde ızgara düzenimizin nasıl olduğu hakkında daha iyi bir fikir edebilmemiz için blog yayınına sınırı ekleyelim. Sınır seçeneğini aşağıdaki gibi güncelleyin: Sınır Genişliği: 1px
Sınır rengi: RGBA (150,104,70.0.35) Bu özel blog modülünü etkin bir şekilde hedeflemek için CSS özel sınıfı bir blog modülüne ekleyin (başka bir şey yok) CSS’imizle, modülümüze özel CSS sınıfımızı vermemiz gerekir. 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 bir düzen oluşturma şimdi blog modülümüz tam geniş düzen ile düzenlendi, özel CSS’imizi eklemeye hazırız. Şimdilik, sayfaya CSS eklemek için kod modülünü kullanacağız. Ancak, tamamlandıktan sonra, CSS’yi her zaman seçtiğiniz yere taşıyabilirsiniz (tema seçeneğinde CSS özelliği veya çocuğunuzun style.css teması gibi). Blog modülünün altına yeni bir kod modülü ekleyin.
Kod giriş kutusuna, sayfaya eklenen CSS kodunu sarmak için gereken stil etiketini ekleyin. Stil etiketinde, aşağıdaki CSS görüntülerini yapıştırın:
Boşluk: 20px;
}
CSS’nin ilk satırı, içeriği (veya modülü) CSS ızgara modülüne göre tanımlar. Ekran: ızgara; CSS’nin ikinci satırı, ızgaradan sütun şablonlarını tanımlar. Izgara-TEMPLATE-sütunlar: Tekrar (Otomatik Doldurma, Minmax (200px, 1FR)); Üçüncü sıra, ızgara öğesi (oluk genişliği gibi) arasındaki boşluk mesafesini belirler. Boşluklar: 20 piksel; Izgara CSS sütunu nasıl çalışabilir Bu konuda ızgara, kalan ızgara kabı boşluğunu doldurmak için gerektiği gibi tekrarlanan sütunlar ekleyecektir. Her sütunun minimum genişliği 200 piksel ve maksimum 1FR genişliği (otomatik olarak tam olarak aynıdır) olacaktır. Bu, ana kabın (divi satır/sütun) maksimum 1080px genişliğinde olduğunda, ızgarada 5 sütuna sahip olacağı anlamına gelir. Her sütun, 1000 piksel ile aynı genişliğe (minimum genişlik) sahip olacaktır. 4 20px ızgara boşluğu ekleyin ve toplam 1080px alırsınız. ViewPort ızgaraya 1080px’in altına bastıktan sonra, ızgara CSS mucizesi devraldı ve mevcut her alanı 200px genişliğe kadar bir blog gönderisiyle doldurdu. Yeni satırlar varsayılan olarak gerektiğinde otomatik olarak yapılacaktır. Daha fazla sütun almak için 200px MinMax değerini daha küçük bir şeye değiştirebilir veya divi hattının maksimum genişliğini 1080px’den büyük bir şeye artırabilirsiniz. Aşağıda, buraya eklediğimiz CSS ızgara düzeni işlevini gösteren bir kodendir. Bu noktada, beş sütun kullanıma duyarlıdır. Aslında, blogunuzu yayınlamak için sayfalandırma veya sınır kullanmayı planlamıyorsunuz, burada durabilirsiniz. Şimdiye kadar sonuç bu.
Bir sonraki blog gönderme kartı stili (veya kutu öğesi), ızgara öğesini (veya blog kartpostalını) hedefleyen birkaç CSS satırı ekleyebiliriz, böylece her satırın üstüne paralel olacak ve biraz yatağına sahip …T-Blog -css-grid .et_pb_post {
Hizalama-Benlik: Başlat; Dolgu: 15px;
} Blog modülünde aktif bir sayfalandırmanız varsa, mevcut ızgaradan sayfalandırmayı kaldırma, Grid CSS’deki son ızgara öğesi olarak ele alınacaktır. Grid’den toplama tamamen silmek için mutlak bir pozisyon verebilir ve 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 {
Genişlik:%100;
Pozisyon: Mutlak;
Alt: 0;
Dönüşüm: Çeviri (%0,%150); }
Şimdi sayfalandırma bağlantısı, farklı bir görünüm portu genişliğinde hareket etmemesi için ızgaranın dışında güvenlidir.
Şimdiye kadar sonuçlara bakalım!
Bonus İpuçları: Tüm üstün resimlerin (veya küçük resimlerin) boyutunu ayarlayın Bu noktada, her blog kartpostalında görüntülenen yüksek görüntünün tutarsızlığını görebilirsiniz. Her şeyi aynı yükseklikte yapmak istiyorsanız, bunu yapmak için ek CSS kullanabilirsiniz. .et-blog-css-grid.
Dolgu Top:%56.25;
} .et-blog-css-grid. Pozisyon: Mutlak; Yükseklik:%100;
Genişlik:%100;
Üst: 0;
Nesne-Fit: kapak;
}
İlk görüntüler üstün bir görüntü kabını hedeflemektir ve temel olarak görüntü kabının yüksekliğini ayarlayan bir dolgu yüzdesi ekler. Ancak ilk snippet, üstün görüntüyü görüntü kabına ortaya sığacak şekilde konumlandırana kadar çalışmaz. Bunu yapmak için mutlak bir konum görüntüsü veriyoruz ve görüntülerin kapsayıcının tam ve yüksekliğine ulaşmasını sağlamak için “Nesne-Fit: Cover” kullanıyoruz. %56,25’in üzerinde bir dolgu ile, tüm görüntülerimiz için 16: 9 en boy oranı almalıyız. Görüntünüz için istediğiniz en boy oranını elde etmek için görüntü kapındaki dolguyu ayarlamaktan çekinmeyin. Buradaki nihai sonuç, birkaç yorumla kod modülüne eklediğimiz tüm CSS’nin başka bir görüntüsü. /* CSS Izgara Sütun Şablonları Oluştur */
.et-blog-css-grid> div {
Ekran: ızgara;
Izgara-TEMPLATE-sütunlar: Tekrar (Otomatik Doldurma, Minmax (200px, 1FR));
Boşluk: 20px; } / * Stil CSS Grid öğesi veya blog yazısı */
.et-blog-css-grid .et_pb_post {
Hizalama-Benlik: Başlat;
Dolgu: 15px;
}
/ * Mutlak konumla blog modülü ızgarasından sayfalandırmayı kaldır */
.et-blog-css-grid> div> div {
Genişlik:%100;
Pozisyon: Mutlak;
Alt: 0;
Dönüşüm: Çeviri (%0,%150);
}
/ * Yeniden boyutlandırılmış resim küçük resimler */
.et-blog-css-grid.
Dolgu Top:%56.25;
}
.et-blog-css-grid.
Pozisyon: Mutlak;
Yükseklik:%100;
Genişlik:%100;
Üst: 0;
Nesne-Fit: kapak;
}
Ve bu, yeni kutu sütunlarımız ve düzenimizle blog modülümüzdeki son ekran.
YouTube kanalımıza abone olun
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? CSS Grid kullanarak Divi Blog Modülündeki sütun sayısı nasıl değiştirilir CSS Box Neden? CSS kullanan bir blog modülü için bir sütun düzeni oluşturmanın birçok yolu vardır. Ancak bu örnek için, CSS ızgarasını kullanmak için en makul. CSS Grid özelliği, yalnızca birkaç CSS satırına sahip içerik için öngörülen ve duyarlı ızgara düzeni oluşturmanın popüler bir yoludur. Bununla birlikte, tüm blog modülü kartlarını tamamen duyarlı bir kutuya ayarlayabiliriz. Kısacası, Divi blogunuza istediğiniz herhangi bir sütun düzenini eklemek için basit ve eksiksiz bir çözüm sunar. Aslında, Divi modülü için bir kutu düzeni oluşturmak için de kullanıyoruz. Şimdi dikkatimizi blog modülüne yönlendirelim. Web sitenizde herhangi bir yere blog eklemek için geniş bir Divi blog modülüne sahip bir blog modülü hazırlamak kullanılabilir. Divi’de bir blog sayfası oluşturmayı çok kolaylaştırır. Tek yapmanız gereken Divi Builder kullanarak sayfaya bir blog modülü eklemektir. Bu eğitim için, zaten birkaç temel stiline sahip bir blog modülüne sahip ücretsiz düzen paketlerimizden birinden önceden yapılmış bir blog sayfası şablonu kullanacağız. Önceden yapılan blog sayfasının düzenini sayfanıza yüklemek için, Ayarlar menüsünü alttan açın ve kütüphaneden açılır ekle’yi açın. Oradan, moda tasarımı blog sayfasının düzenini arayın ve bulun ve sayfaya yükleyin.
Düzen yüklendikten sonra, blog yayınlarını görüntülemek ve blog modülü ayarlarını açmak için kullanılan blog modülünü bulun. Blog ayarlarındaki yayın sayısını ayarlayın, yazıların sayısını 10 ile sınırlamak için içeriği güncelleyin. Gönderi sayısı: 10 Tam geniş bir düzen seçin çünkü CSS Grid kullanarak blogumuz için bir sütun düzeni oluşturacağımız için, FullWidth Blog Modül Düzenini (ızgara değil) emin olmalıyız. Bu, blog yayınının normal belgeler/sayfalar 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 sekmesinin altında gerilme menüsünü açın ve tam genişliği seçin. Şimdi her blog yazısı sütunun (veya üst kabın) tam genişliğini kapsar. Yeni başlayanlar için, CSS’imizi eklediğimizde ızgara düzenimizin nasıl olduğu hakkında daha iyi bir fikir edebilmemiz için blog yayınına sınırı ekleyelim. Sınır seçeneğini aşağıdaki gibi güncelleyin: Sınır Genişliği: 1px
Sınır rengi: RGBA (150,104,70.0.35) Bu özel blog modülünü etkin bir şekilde hedeflemek için CSS özel sınıfı bir blog modülüne ekleyin (başka bir şey yok) CSS’imizle, modülümüze özel CSS sınıfımızı vermemiz gerekir. 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 bir düzen oluşturma şimdi blog modülümüz tam geniş düzen ile düzenlendi, özel CSS’imizi eklemeye hazırız. Şimdilik, sayfaya CSS eklemek için kod modülünü kullanacağız. Ancak, tamamlandıktan sonra, CSS’yi her zaman seçtiğiniz yere taşıyabilirsiniz (tema seçeneğinde CSS özelliği veya çocuğunuzun style.css teması gibi). Blog modülünün altına yeni bir kod modülü ekleyin.
Kod giriş kutusuna, sayfaya eklenen CSS kodunu sarmak için gereken stil etiketini ekleyin. Stil etiketinde, aşağıdaki CSS görüntülerini yapıştırın:
.et-blog-css-grid> div {
Ekran: ızgara; Izgara-TEMPLATE-sütunlar: Tekrar (Otomatik Doldurma, Minmax (200px, 1FR));Boşluk: 20px;
}
CSS’nin ilk satırı, içeriği (veya modülü) CSS ızgara modülüne göre tanımlar. Ekran: ızgara; CSS’nin ikinci satırı, ızgaradan sütun şablonlarını tanımlar. Izgara-TEMPLATE-sütunlar: Tekrar (Otomatik Doldurma, Minmax (200px, 1FR)); Üçüncü sıra, ızgara öğesi (oluk genişliği gibi) arasındaki boşluk mesafesini belirler. Boşluklar: 20 piksel; Izgara CSS sütunu nasıl çalışabilir Bu konuda ızgara, kalan ızgara kabı boşluğunu doldurmak için gerektiği gibi tekrarlanan sütunlar ekleyecektir. Her sütunun minimum genişliği 200 piksel ve maksimum 1FR genişliği (otomatik olarak tam olarak aynıdır) olacaktır. Bu, ana kabın (divi satır/sütun) maksimum 1080px genişliğinde olduğunda, ızgarada 5 sütuna sahip olacağı anlamına gelir. Her sütun, 1000 piksel ile aynı genişliğe (minimum genişlik) sahip olacaktır. 4 20px ızgara boşluğu ekleyin ve toplam 1080px alırsınız. ViewPort ızgaraya 1080px’in altına bastıktan sonra, ızgara CSS mucizesi devraldı ve mevcut her alanı 200px genişliğe kadar bir blog gönderisiyle doldurdu. Yeni satırlar varsayılan olarak gerektiğinde otomatik olarak yapılacaktır. Daha fazla sütun almak için 200px MinMax değerini daha küçük bir şeye değiştirebilir veya divi hattının maksimum genişliğini 1080px’den büyük bir şeye artırabilirsiniz. Aşağıda, buraya eklediğimiz CSS ızgara düzeni işlevini gösteren bir kodendir. Bu noktada, beş sütun kullanıma duyarlıdır. Aslında, blogunuzu yayınlamak için sayfalandırma veya sınır kullanmayı planlamıyorsunuz, burada durabilirsiniz. Şimdiye kadar sonuç bu.
Bir sonraki blog gönderme kartı stili (veya kutu öğesi), ızgara öğesini (veya blog kartpostalını) hedefleyen birkaç CSS satırı ekleyebiliriz, böylece her satırın üstüne paralel olacak ve biraz yatağına sahip …T-Blog -css-grid .et_pb_post {
Hizalama-Benlik: Başlat; Dolgu: 15px;
} Blog modülünde aktif bir sayfalandırmanız varsa, mevcut ızgaradan sayfalandırmayı kaldırma, Grid CSS’deki son ızgara öğesi olarak ele alınacaktır. Grid’den toplama tamamen silmek için mutlak bir pozisyon verebilir ve 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 {
Genişlik:%100;
Pozisyon: Mutlak;
Alt: 0;
Dönüşüm: Çeviri (%0,%150); }
Şimdi sayfalandırma bağlantısı, farklı bir görünüm portu genişliğinde hareket etmemesi için ızgaranın dışında güvenlidir.
Şimdiye kadar sonuçlara bakalım!
Bonus İpuçları: Tüm üstün resimlerin (veya küçük resimlerin) boyutunu ayarlayın Bu noktada, her blog kartpostalında görüntülenen yüksek görüntünün tutarsızlığını görebilirsiniz. Her şeyi aynı yükseklikte yapmak istiyorsanız, bunu yapmak için ek CSS kullanabilirsiniz. .et-blog-css-grid.
Dolgu Top:%56.25;
} .et-blog-css-grid. Pozisyon: Mutlak; Yükseklik:%100;
Genişlik:%100;
Üst: 0;
Nesne-Fit: kapak;
}
İlk görüntüler üstün bir görüntü kabını hedeflemektir ve temel olarak görüntü kabının yüksekliğini ayarlayan bir dolgu yüzdesi ekler. Ancak ilk snippet, üstün görüntüyü görüntü kabına ortaya sığacak şekilde konumlandırana kadar çalışmaz. Bunu yapmak için mutlak bir konum görüntüsü veriyoruz ve görüntülerin kapsayıcının tam ve yüksekliğine ulaşmasını sağlamak için “Nesne-Fit: Cover” kullanıyoruz. %56,25’in üzerinde bir dolgu ile, tüm görüntülerimiz için 16: 9 en boy oranı almalıyız. Görüntünüz için istediğiniz en boy oranını elde etmek için görüntü kapındaki dolguyu ayarlamaktan çekinmeyin. Buradaki nihai sonuç, birkaç yorumla kod modülüne eklediğimiz tüm CSS’nin başka bir görüntüsü. /* CSS Izgara Sütun Şablonları Oluştur */
.et-blog-css-grid> div {
Ekran: ızgara;
Izgara-TEMPLATE-sütunlar: Tekrar (Otomatik Doldurma, Minmax (200px, 1FR));
Boşluk: 20px; } / * Stil CSS Grid öğesi veya blog yazısı */
.et-blog-css-grid .et_pb_post {
Hizalama-Benlik: Başlat;
Dolgu: 15px;
}
/ * Mutlak konumla blog modülü ızgarasından sayfalandırmayı kaldır */
.et-blog-css-grid> div> div {
Genişlik:%100;
Pozisyon: Mutlak;
Alt: 0;
Dönüşüm: Çeviri (%0,%150);
}
/ * Yeniden boyutlandırılmış resim küçük resimler */
.et-blog-css-grid.
Dolgu Top:%56.25;
}
.et-blog-css-grid.
Pozisyon: Mutlak;
Yükseklik:%100;
Genişlik:%100;
Üst: 0;
Nesne-Fit: kapak;
}
Ve bu, yeni kutu sütunlarımız ve düzenimizle blog modülümüzdeki son ekran.
