Divi'de Benzersiz Sütun Düzenleri Oluşturmak için Modülleri Genişletme

Divi Builder ile tasarladığınız her yeni sayfa, bir dizi farklı sütun düzeni kullanılarak yapılandırılmıştır. Divi, bir sütundan altı sütuna kadar her satır için yerleşik sütun düzenleri içerir. Ancak bazen, daha da benzersiz düzenler için bu sütunları ayarlama ihtiyacı hissedebilirsiniz. Bugün size tam da bunu yapmanın yaratıcı bir yolunu göstereceğim.

Bu eğitimde, size modülleri birden fazla sütunu işgal edecek şekilde negatif kenar boşlukları kullanarak genişletmenize izin veren basit bir tasarım tekniği göstereceğim. Bu teknik, mümkün olmadığını düşündüğünüz bazı benzersiz özel düzenler tasarlamanıza izin verecektir.

Başlayalım.

Gizlice Bakış

Ne inşa edeceğimizi daha iyi anlamak için, bu tekniği kullanan tasarımın öncesi ve sonrası versiyonu burada.

Önce

Bu, modülleri diğer sütunlara genişletmek için özel kenar boşlukları kullanmadan yerleşim tasarımıdır.

Sonrasında

Bu, iki görüntü modülünü ve "01", "03" ve "05" sayılarıyla etiketlenmiş üç metin modülünü genişlettikten sonraki düzendir.

Değişiklik incedir, ancak modüllerin bitişik sütunu işgal etmek için genişlediğini görebilmeniz gerekir. Ve bunu başarmak için gereken tek şey, -%100'lük basit bir marj ayarıdır.

Ve tablet üzerindeki sonuç daha da heyecan verici.

Kavramı Anlamak

Varsayılan olarak, her Divi modülünün genişliği %100'dür; bu, bir sütuna yerleştirdiğiniz her modülün oturduğu sütunun tam genişliğini kaplayacağı anlamına gelir. Oluk genişliği, Divi'nin her sütun arasındaki boşluk miktarını belirlemek için kullandığı şeydir. Bu eğitimde, o alandan kurtulmak için Oluk genişliğinizi 1 olarak ayarlamanız önemlidir.

Aşağıda, her bir modülün, bir oluk genişliği 1 olarak ayarlanmış bir satırdaki bir sütunun tam genişliğini nasıl kapladığını gösteren bir örnek verilmiştir.

Şimdi, bir modüle negatif bir kenar boşluğu (sol veya sağ) eklerseniz, o modülü birden fazla sütun kaplayacak şekilde kolayca genişletebilirsiniz. Bu, sayfanız için dikkate almamış olabileceğiniz özel sütun düzenleri oluşturmanıza olanak tanır.

Bu çizimde, 5. sütundaki modüle -%100 sol kenar boşluğu ekleyerek modülü sola doğru genişleterek hem sütun 5'i hem de sütun 4'ü işgal ettiğini görebilirsiniz.

Altı sütun düzenini kullanmanın avantajlarından biri de tasarımın tablette güzel bir şekilde korunmasıdır.

Ayrıca, sütunların soldan sağa sıralanma şekli nedeniyle, içeriğin sütunun arkasına gizlenmemesi için modüller genellikle sola doğru genişletilmelidir. Bu, özellikle bir arka plan rengi kümeniz varsa geçerlidir. Bu nedenle, bir sütunun arkasına gizlenmiş modül içeriği sorunuyla karşılaşırsanız, muhtemelen modülü yanlış yönde genişletiyorsunuzdur.

Neden Altı Sütun Düzeni Kullanmalı?

Bu tasarım tekniği için altı sütun düzeni kullanmanın üç ana nedeni vardır. İlk sebep, size çalışmak için daha fazla sütun vermesidir. İkinci neden, tablette altı sütun düzeninin üç sütun düzenine dönüşmesidir, bu da tasarım öğelerini gerçekten iyi koruyacaktır. Üçüncü neden, sütunların sırasını mobil cihazlarda tutacağı için sütun arka plan renklerinin aynı kalmasıdır. Bu, ızgara düzenleri için yararlıdır.

Bu tasarım aynı zamanda 1/2 1/6 1/6 1/6 sütun düzeni ve 1/6 1/6 1/6 1/2 sütun düzeniyle de çalışır, çünkü ikisi de tabletteki üç sütunu da koruyacaktır.

Tasarımın Uygulanması

Bu tasarım tekniğinin nasıl çalıştığını göstermek için, ürünleri öne çıkarmak için basit bir ızgara düzeni oluşturma sürecinde size yol göstereceğim. Ardından, özel bir yerleşim tasarımı oluşturmak için modülleri diğer sütunlara nasıl genişleteceğinizi göstereceğim.

Bölümünüzü ve Satırlarınızı Ayarlama

Başlamak için yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından “Sıfırdan Oluştur” seçeneğini seçin. Ardından devam edin ve ilk bölümünüze 1/2 1/6 1/6 1/6 sütun düzeni ekleyin.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #222831
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET
Özel Kenar Boşluğu: 0px Üst, 0px Alt
Özel Dolgu: 0px Üst, 0px Alt

Ayarları kaydet.

Bu tasarım için üç satırın tümü bu satır ayarlarını paylaşacağından. Devam edin, ikinci bir satır oluşturmak için satırı çoğaltın. Ardından ikinci satırı altı sütunlu bir düzene sahip olacak şekilde değiştirin.

Üçüncü satırı oluşturmak için ikinci satırı kopyalamanız yeterlidir.

1. Satıra Modül Ekleme

En üstteki ilk satırın ilk Sütununa, aşağıdaki ayarlarla bir metin modülü ekleyin:

Metin Rengi: Açık
Metin Metin Boyutu: 16px
Özel Dolgu: 2vw Üst, 2vw Alt, 2vw Sol, 2vw Sağ

İlk satırın ikinci sütununa aşağıdaki ayarlarla bir tanıtım yazısı modülü ekleyin:

Başlık: [başlığı girin]
İçerik: [sil]
Simge: [simge seçin]
Simge Rengi: #eeeeee
Simge Yazı Tipi Boyutu: 50px
Metin Rengi: Açık
Metin Yönü: Merkez
Özel Dolgu: 3vw Üst, 2vw Alt

Ayarları kaydet

Üçüncü sütuna bir resim ekleyin.

Son sütunda, görüntü modülünü o sütunu dolduracak şekilde genişletebilmemiz için onu boş bırakmak istiyoruz. Ancak, mobilde istiflenirken sütunun aktif olması için tamamen boş bırakmak istemiyoruz. Bu yüzden yapılacak en basit şey, bir bölücü modül eklemek ve bölücüyü göstermemeyi seçmektir. Sonra akıllı telefon için ayırıcıyı gizleyebiliriz.

Ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

Bölücüyü Göster: HAYIR
Devre dışı bırak: Telefon

2. ve 3. Satırlara Modül Ekleme

Şimdi 2. Satıra geçelim. İlk sütunda oluşturduğunuz tanıtım modülünü kopyalayıp ilk satırın ikinci sütununa yapıştırın. Ardından simgeyi ve başlık metnini siyah renge değiştirin.

Ardından, aşağıdakileri içeren ikinci sütuna bir Metin Modülü ekleyin:

İçerik:

<h2>Product</h2>
01

Metin Metin Rengi: #ffffff
Metin Metin Boyutu: 50px
Metin Satır Yüksekliği: 1em
Metin Yönü: Sağ
Başlık 2 Metin Hizalama: Sol
Başlık 2 Metin Rengi: #ffffff
Başlık 2 Çizgi Yüksekliği: 3em
Özel Dolgu: 2vw Üst, 2vw Alt, 2vw Sol, 2vw Sağ

Sonraki Oluşturduğunuz Modül metnini kopyalayın ve 4. ve 6. sütunlara yapıştırın.

Aynı metin modülünü Satır 3'ün 3. sütunu, 5. sütunu ve 6. sütununa da yapıştırabilirsiniz. Bundan sonra, bu modüllerin nasıl yığıldığını görebilmek için metin modüllerinin her birinin numaralarını değiştirmek için satır içi düzenleyiciyi kullanabilirsiniz. mobil daha sonra.

3. Satırın 2. sütununa başka bir resim ekleyin.

Bundan sonra, 1. satırda oluşturduğunuz bölücüyü kopyalayıp yapıştırarak bölümünüzdeki tüm boş sütunları bir bölücü ile doldurun.

Bu noktada düzeniniz şöyle görünmelidir (boş kareler bir bölücü modülü temsil eder):

Modülleri Diğer Sütunlara Uzatmak için Negatif Marj Ekleme

Bu noktada modüllerimizi negatif marj kullanarak genişletmeye başlayabiliriz. Bu işlemin yapılması son derece basittir.

İlk satırdaki görüntü için görüntü modülü ayarlarını açın. Resmi sağa genişletmek istediğimiz için -%100 sağ kenar boşluğu ekleyeceğiz.

Ardından, 2. Satırın 3. sütunundaki Metin Modülüne -%100 Sol Kenar Boşluğu ekleyin.

Şimdi modül stillerini kopyalayın ve bunları Satır 2, sütun 6'daki metin modüllerine ve ayrıca Satır 3, sütun 5'teki metin modülüne yapıştırın.

Geriye kalan tek şey 3. satır, 2. sütundaki görüntüyü genişletmek. Görüntü modülünü -%100 Sol özel kenar boşluğuyla güncelleyin.

Sütunlarınıza arka plan Renkleri ekleme

Tasarımın son aşaması, sütunlarınıza arka plan renkleri eklemektir. İlk (üst) satır için aşağıdakileri ekleyin:

Sütun 1 Arka Plan Rengi: #393e46

İkinci satır için aşağıdakileri ekleyin:

Sütun 1 Arka Plan Rengi: #eeeeee
Sütun 4 Arka Plan Rengi: #7971ea
Sütun 5 Arka Plan Rengi: #393e46
Sütun 6 Arka Plan Rengi: #393e46

Ve son satır için aşağıdakileri ekleyin:

Sütun 3 Arka Plan Rengi: #7971ea
Sütun 6 Arka Plan Rengi: #7971ea

Masaüstü tasarımı için bu kadar. Şimdi mobil cihazlarda her şeyin iyi göründüğünden emin olalım.

Akıllı Telefon Ekranı için Düzeni Ayarlama

Şu anda mevcut düzen masaüstünde ve tablette harika görünecek, ancak eklediğimiz bu negatif marjların akıllı telefonda ayarlanması gerekecek.

Normalde, akıllı telefondaki negatif marjı düzeltmek isteseydim, akıllı telefon cihazları için modül ayarlarında sol marjı %0 olarak ayarlardım. Bununla birlikte, 479px ile 767px genişliğindeki ekran boyutları için yine de bir ayarlama yapılması gerekecektir. Bu nedenle, akıllı telefondaki negatif marjı düzeltmenin en iyi yolu, bunu bir özel CSS pasajı ile yapmaktır.

Sayfa ayarlarına gidin ve Gelişmiş Sekmesi altına aşağıdaki Özel CSS'yi ekleyin:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Bu CSS parçacığının yaptığı, ekran boyutu 479 piksele eşit veya daha az olduğunda tüm modüllerin sağ ve sol kenar boşluklarını %0'a ayarlamaktır. Bu sorunu güzel bir şekilde düzeltir!

Şimdi son tasarımı kontrol edelim.

Son düşünceler

Modülleri genişletmek için negatif kenar boşluğu kullanmak, Divi'nin varsayılan sütun düzenlerini değiştirmek için bir sürü CSS'ye başvurmak zorunda kalmadan masaüstü ve tablette benzersiz düzen tasarımları elde etmenin uygun bir yolu olabilir. Ve bu tasarım tekniğiyle ilgili en sevdiğim şeylerden biri, yerleşimin tablette ne kadar güzel göründüğü. Umarım, bir sonraki projeniz için kullanışlı olacaktır. Bir şey varsa, Divi'yi daha derinden anlamak her zaman yardımcı olur.

Yorumlarda sizden haber bekliyorum.

Şerefe!