Divi’de benzersiz bir sütun düzeni oluşturmak için modülü nasıl genişletilir
Divi Builder ile tasarladığınız her yeni sayfa, bir dizi farklı sütun düzeni kullanılarak düzenlenmiştir. Divi, bir sütundan altı sütuna her satır için varsayılan sütun düzenini içerir. Ancak, bazen, bu sütunu daha benzersiz bir düzen için ayarlama ihtiyacını hissedebilirsiniz. Bugün, bunu yapmanın yaratıcı bir yolunu göstereceğim. Bu öğreticide, birden fazla sütunu işgal etmek için negatif marjlar kullanarak modülleri genişletmenizi sağlayan basit bir tasarım tekniği göstereceğim. Bu teknik, mümkün olmayabileceğiniz bazı benzersiz özel düzenler tasarlamanıza olanak tanır.
Başlayalım. Sneak Peek Ne inşa edeceğimizi daha iyi anlamak için, bu tekniği kullanmadan önce ve sonra tasarım sürümü. Bu, modülleri başka bir sütuna genişletmek için özel bir marj kullanmadan bir düzen tasarımıdır.
Ve tabletteki sonuçlar daha da heyecan verici. Kavramı Anlama Varsayılan olarak, her divi modülünün% 100 genişliğine sahiptir, yani sütuna yerleştirdiğiniz her modülün modülün bulunduğu sütunun tam genişliğini kapsayacağı anlamına gelir. Her sütun arasındaki boşluk miktarını belirlemek için divi tarafından kullanılan bu olukların genişliği. Bu nedenle, bu öğretici için, alanı ortadan kaldırmak için oluğunuzun genişliğini 1 olarak ayarlamak önemlidir. Aşağıda, her modülün bir sırada sütunun tam genişliğini 1 olarak ayarlanmış bir oluk genişliği ile nasıl uzattığının bir örneğidir. Şimdi, modüle negatif bir marj (sol veya sağ) eklerseniz, kolayca genişleyebilirsiniz. Birden fazla sütunu kaplayacak modül. Bu, sayfanız için dikkate alamayacağınız özel bir sütun düzeni oluşturmanıza olanak tanır. Bu örnekte, Sütun 5’teki modüle sol% 100 marj ekleyerek modülün Solum 5 ve Sütun 4’ü işgal etmek için sola genişletileceğini görebilirsiniz.
Altı sütun düzeni kullanan bonuslardan biri, tasarımın tablet kuyusunda tutulmasıdır. Ayrıca, sütun soldan sağa sıralandığından, içeriğin sütunun arkasına gizlenmemesi için genel modül sola uzatılmalıdır. Bu, özellikle bir arka plan renk setiniz varsa doğrudur. Dolayısıyla, sütunun arkasına gizlenmiş modül içerik sorunları yaşıyorsanız, modülü yanlış yönde genişletebilirsiniz. Neden altı sütun düzeni kullanıyor? Bu tasarım tekniği için altı sütun düzenini kullanmanın üç ana nedeni vardır. İlk neden size daha fazla sütun vermektir. İkinci neden, altı sütun düzeninin tabletteki üç sütuna dönüştürülmesi ve tasarım öğelerini çok iyi koruyacak olmasıdır. Üçüncü neden, sütunun siparişlerini cep telefonunda saklamasıdır, böylece sütun arka plan rengi aynı kalır. Bu, kafes düzeni için kullanışlıdır. Bu tasarım ayrıca 1/2 1/6 1/6 1/6 sütunu ve 1/6 1/6 1/6 1/2 sütunu düzeni ile de işlev görür, çünkü her ikisi de tablette üç sütun tutacaktır. Bu tasarım tekniğinin nasıl çalıştığını göstermek için tasarımı uygulayın, ürünü görüntülemek için basit bir kutu düzeni oluşturma sürecinde size rehberlik edeceğim. Ardından, özel bir düzen tasarımı oluşturmak için modülü başka bir sütuna nasıl genişleteceğinizi göstereceğim. Başlangıç için bölümünüzü ve satırınızı hazırlayın, yeni bir sayfa oluşturun ve görsel bir yapımcı uygulayın. Ardından “Başından Uyan” ı seçin. Ardından, ilk bölümünüze 1/2 1/6 1/6 1/6 sütununun düzenini ekleyin.
Ardından satır ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Rengi: #222831 Talang Genişliği: 1 Eşit Sütun Yüksekliği: Evet Özel Kenar: 0px Top, 0px Alt Özel Dolgu: 0px Up, 0px Alt 0px
Ayarları kaydedin. Çünkü bu tasarım için üç satır bu çizgi ayarını paylaşacaktır. İkinci bir satır oluşturmak için lütfen satırı çoğaltın. Ardından, altı sütun düzeni olacak ikinci satırı değiştirin. Üçüncü sırayı yapmak için ikinci sırayı çoğaltın. İlk satırdan ilk sütunda satır 1’e modüller ekleyin, metin modülünü aşağıdaki ayarlarla ekleyin: Metin Renk: Işık Metin Boyutu Metin: 16px Dolgu Özel: Top 2VW, Alt 2VW, Sol 2VW, Sağ 2VWDI İkinci Sütun Önce , modülü ekleyin, modül açıklamasını aşağıdaki ayarlarla ekleyin: Başlık: [Başlık Enter] İçerik: [Sil] Icon: [SELETE] Renk simgesi: #eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee edilmiş “orta özel Dolgu: Top 3VW, Alt 2VW Ayarları üçüncü sütunda kaydedin, görüntüyü ekleyin. Son sütunda, görüntü modülünü sütunu dolduracak şekilde genişletebilmemiz için boşaltmasına izin vermek istiyoruz. Ancak, bir cep telefonuna birikirken sütun aktif olacak şekilde boş bırakmak istemiyoruz. Yani, yapılacak en basit şey bir bölücü modülü eklemek ve bölücüyü göstermemeyi seçmektir. Sonra akıllı telefonlar için böcekleri gizleyebiliriz. Bölücü ayarlarını aşağıdaki gibi güncelleyin: Divisor’u gösterin: DEĞİŞTİRİLMİŞTİR: Telefon Modülleri Satır 2 ve 3’e ekleyin Şimdi satır 2’ye geçelim. İlk sütun kopyalayıp ilk satırdan ikinci sütunda oluşturduğunuz açıklama modülünü yapıştırın. Ardından başlığın simgesini ve metnini siyah olarak değiştirin.
Ardından metin modülünü aşağıdakilerle ikinci sütuna ekleyin: içerik: & h2 & gt; ürün & lt;/h2 & gt;
01
Metin Renkli Metin: #FFFFFFF Metin Boyutu: 50px Hat Metin Yüksekliği: 1EM Metin Oryantasyonu: Sağ Başlık Metin Seviyesi: Sol Başlık 2 Renk Metin: #fffff POS 2 Hat Yüksekliği: 3EM Palgating Özel: Top 2VW, Alt 2VW, Sol 2VW , Doğru 2vw Ardından, yeni oluşturduğunuz metin modülünü kopyalayın ve sütun 4 ve sütun 6’ya koyun. Aynı metin modülünü ayrıca satırdan sütun 3, sütun 5 ve sütun 6’ya ekleyebilirsiniz. Bundan sonra satır içi düzenleyiciyi kullanabilirsiniz. Bu modüllerin daha sonra hücresel nasıl biriktiğini görebilmeniz için her bir metin modülünü numarayı değiştirin. Sütun 2 satır 3’te başka bir resim ekleyin. Bundan sonra, satır 1’de yaptığınız bölücüyü kopyalayıp ekleyerek bölücünüzün tüm bölümlerindeki tüm boş sütunları doldurarak doldurun. Geçerli düzen ekranı (Bölücü modülünü temsil eden boş kutu):Bu noktada modülleri diğer sütunlara genişletmek için negatif kenar boşlukları eklemek, negatif kenar boşluklarını kullanarak modüllerimizi genişletmeye başlayabiliriz. Bu işlemi yapmak çok basit. İlk satırdaki görüntüler için görüntü modülü ayarlarını açın. Görüntüleri sağa genişletmek istediğimiz için%-100 doğru bir marj ekleyeceğiz.
Ardından,% -100 sol marj ekleyin Metin modülüne, Sütun 3’teki metin modülüne. Şimdi modül kuvvetini kopyalayın ve satır 2, sütun 6’daki metin modülüne ve ayrıca satır 3, sütun 5’deki metin modülüne yapıştırın.
Geriye kalan tek şey görüntüleri satır 3, sütun 2’de genişletmektir. Görüntü modülünü% -100 kalmış özel bir marjla güncelleyin. Sütununuza arka plan rengi ekleyin Tasarımın son aşaması sütununuza arka plan rengi ekliyor. İlk satır (üst) için aşağıdakileri ekleyin: Renk Renk Sütunu 1: #393E46 İkinci satır için aşağıdakileri ekleyin: Sütun 1 Arka Plan Rengi: #Eeeeeee Renk Arka Plan Sütun 4: #7971EA Sütun 5 Renk Arka Plan: #393E46 Sütun 6 Renk Arka Plan: #393E46 ve son satır için aşağıdakileri ekleyin: Renk Sütun Arka Planı için 3: #7971EA Sütun 6 Renk Arka Plan: #7971EA Yalnızca masaüstü tasarımları için. Şimdi bir cep telefonunda her şeyin iyi göründüğünden emin olalım. Mevcut akıllı telefon ekranı için düzeni ayarlayarak, geçerli düzen masaüstü ve tablette iyi görünecektir, ancak eklediğimiz negatif kenar boşluklarının akıllı telefona ayarlanması gerekir. Genellikle, bir akıllı telefonda negatif bir marjı düzeltmek istersem, akıllı telefon cihazları için modüller ayarında sadece sol kenar boşluğunu% 0 olarak ayarlayacağım. Bununla birlikte, ekran boyutu için 479px ve 767px genişlik arasında hala ayarlamalar yapılacaktır. Bu nedenle, akıllı telefonlarda negatif marjları düzeltmenin en iyi yolu bunu özel CSS parçalarıyla yapmaktır. Sayfa ayarlarını açın ve gelişmiş sekmenin altındaki aşağıdaki özel CSS’yi ekleyin: /** Akıllı telefonda negatif kenar boşlukları ** /@Medya ekranı ve (maksimum genişlik: 479px) { .et_pb_module { Marj-sol:%0! Önemli; Marj-Sağ:%0! Önemli; }
}
CSS görüntülerinin yaptığı şey, ekran boyutu her zaman 479px’e eşit veya daha az olduğunda tüm modüllerin sağ ve sol kenar boşluklarını% 0 olarak ayarlamaktır. Bu sorunu iyi giderir! Şimdi son tasarımı kontrol edelim.
