Divi’de benzersiz bir düzen oluşturmak için modüller ve satırlar nasıl çakışır
Üst üste binmek, genellikle benzersiz web tasarımları ve düzenler yapmak için kullanılan yararlı bir tekniktir. Ve Divi ile içeriği örtbas etmek kolay. Temel konsept, modüllerinize, satırlarınıza ve parçalarınıza marjların ve özel alanların eklenmesini içerir, böylece örtüşmek için konumlandırırlar. Bazı Divi düzenimizde bu örtüşen tekniğe dikkat etmiş olabilirsiniz. Bu öğreticide, modülleri, satırları olan modülleri ve satırlara sahip üst üste binen modüller için özel marjlar ve boşluklar kullanmanın temellerini göstereceğim. Bundan sonra, iki satır üst üste binen benzersiz bir örtüşen iletişim formu nasıl yapacağınızı göstereceğim.
Başlayalım. Aşağıdaki gizlice göz atma, örtüşen teknikleri kullanarak birlikte yapacağımız benzersiz temas formunun düzenidir.
Yöntem 1: Diğer modüllerle örtüşen modül modülleriyle örtüşen modülün yapılması çok kolaydır. İşte nasıl kurulacağına bir örnek. Bir yarı yarıya 2 sütunla düzenli bir parça oluşturun. Ve sonra modülü her sütuna ekleyin. Sol sütundaki modüller için aşağıdakileri güncelleyin: Özel kenar boşluğu (masaüstü): -20 sağ,% 20 sol özel kenar boşluğu (tablet): 0px sağ, 0 piksel sol (tablet kenar boşluğunu ayarlayın) için her şeyi temizleyecektir) Modül Sağ sütundaki modül aşağıdakileri güncelleyin: Özel marj (masaüstü):% 20 üst,% 20 sağ,% -20 sol özel kenar boşluğu (tablet): 0px yukarı, 0px sağ, 0px sol İşte burada. Kullandığınız modüle bağlı olarak, bazı özel arka plan renkleri, rulmanlar, kutu yarıçapı vb. Eklemeniz gerekebilir. Doğru görünmesini sağlamak için. Modül örtüştüğünde derinliği kazanmak için kutunun gölgesini de ekleyebilirsiniz. Yöntem 2: Hattınızla örtüşen modül, modülle satırları neden örtüşmeniz gerektiğini sorabilir. Bunun nedeni, bir grup modülü içeriğin bir parçası olarak taşımak isteyebilirsiniz. Bu, Divi ile bir site oluştururken yaygın bir olaydır. Örneğin, aşağıdaki ekran görüntülerindeki iletişim bilgileri metin modülü, açıklamanın 3 modülü ve modüller, bir içerik bloğu oluşturmak için birbirleriyle istiflenmiş sosyal medyayı takip eder. Her modülün başka bir modülle örtüşmesi için özel bir marj ve alan oluşturabilirsiniz, ancak sınırlarınız olacaktır. Modül grubunuza bir sınır yarıçapı eklemek daha zor olacaktır. Bir bütün olarak modül grubuna bir kutunun gölgesi eklemek imkansızdır, çünkü her modül için kutunun gölgesini ayarlamak zorunda kalacaksınız. Bu nedenle, bir grup modülü taşımanın en kolay yolu onu bir satırda saklamak ve çizgiyi hareket ettirmektir. Bu şekilde kutunun sınır stilini ve gölgesini sıraya kolayca ekleyebilir ve satırınızda istediğiniz kadar modül ekleyebilirsiniz. Özel parçalar bunun için mükemmel bir şekilde hazırlanmıştır, çünkü özel parçaların tüm düzenleri bir tarafta belirtilen kenar çubuğu alanı/sütuna (modüller için) ve satırlar için diğer tarafta belirtilen alan/sütuna sahiptir. Modülünüz yan tarafa ve satır içeriğiniz yerine eklendikten sonra, satır veya modülü çakışmaya kaydırmak için özel bir marj ve boşluk kullanabilirsiniz. İşte nasıl kurulacağına bir örnek. Yarım kilolu sütun yapısı ve sağ tarafta bir satır ile özel bir parça oluşturun. Ardından sağ sütuna bir satır sütun yerleştirin.
Modülü (veya modülü) satıra ekleyin. Ardından modülü uzmanlığınızın sol sütununa ekleyin. Sol sütundaki modül ayarlarını şu şekilde güncelleyin: Özel kenar boşluğu (masaüstü): -20 sağ,% 20 sol özel kenar boşluğu (tablet): 0px sağ, 0px sol Sağ sütundaki satır ayarlarını şu şekilde güncelleyin: Özel kenar boşluğu (masaüstü):% 20 üst,% 20 sağ,% -20 sol özel kenar boşluğu (tablet): 0px üst, 0px sağ, 0px sol ve o. Şimdi tek yapmanız gereken, arka plan renkleri, sınır yarıçapı, dolgu, gölge kutuları vb. Eklemek için satır ayarlarını ayarlamaktır. Ve özel hattınıza birden fazla modül ekleyebilirsiniz. Yöntem 3: Çizgi, üst üste binen çizgiler için satırlarla örtüşür, diğer satırlar biraz daha dahil olur. İki çizgiyi yan yana almanın yollarını bulmalıyız. Bunu Divi’de yapmanın birkaç yolunu denedim ve bunu yapmanın en iyi yolu iki özel parça yapmak. Her özel bölümde satır için belirlenmiş bir sütun bulunduğundan, sol sütunda bir satır ve daha sonra aşağıdaki diğer parçaları sağ sütundaki satırla yapabilirsiniz. Bundan sonra, tek yapmanız gereken sırayı üstteki satırla çakışacak şekilde hareket ettirmektir. Teknik olarak bunu iki normal parça ile de yapabilirsiniz, ancak hatların yerleştirilmesinin farklı tarayıcı boyutlarında doğru bir şekilde oluşturulmasını sağlamak daha zordur (en azından deneyimlerime göre). Özel bölümdeki iki sütun, özel CSS ile uğraşmak zorunda kalmadan bunu yapmaya yardımcı olur. İşte nasıl yapılacağı. Yarım kilolu sütun yapısı ve sol tarafta bir satır ile özel bir parça oluşturun: Ardından sol sütundaki bir sütunun satırını girin.
Modülü (veya modülü) satıra ekleyin.
Ardından, şu anda olan diğer uzmanlık bölümünü yapın ve yarım kilo sütun yapısı ve sağ tarafta satırlar verin.Bir sütunun satırını sağ sütuna ekleyin. Ardından modülü (veya modül) satıra ekleyin. Daha sonra, üst üste binmek için her satırımıza özel bir marj eklememiz gerekir.İlk olarak, ilk sol sütundaki satıra aşağıdaki özel kenar boşluklarını ekleyin: Özel kenar boşluğu (masaüstü):% 15 özel kenar boşluğu (tablet): 0px sol kaydet ayarları ve ikinci sağ sütunda sağ satıra aşağıdaki özel kenar boşluklarını ekleyin: Özel Marj (masaüstü): -300px üst,% -15 kaldı (satırınızın/modülünüzün boyutuna bağlı olarak bu değeri ayarlamanız gerekebilir. Çok fazla ekstra alan ise alt kenar boşluğuna negatif bir değer eklemeniz gerekebilir Sıra altında) Özel Marj (Tablet): 0px üst, 0px aşağıda, 0px Sol Çakışan gücü anladıktan sonra örtüşen satırlarla benzersiz bir divi kişi düzeni yapın, bu tekniği benzersiz bir iletişim formu düzeni oluşturarak kullanalım. Bu düzen için iki özel parça kullanarak iki satırın üstesinden geleceğim. Bu şekilde bu düzene kolayca ek modüller ekleyebilirsiniz. Zaman için, “hatlarla örtüşme” altında yaptığımız düzeni kullanacağım. Düzeniniz hazır olduktan sonra, bölüm ayarlarınızı en iyi özel olarak açın ve aşağıdakileri güncelleyin: sekmenin altında: #fd7978 Özel genişlik sekmesini kullanın: evet özel genişlik: 1350px Özel Talang genişliği kullanın: evet talang genişliği: 1 Bu. İçeriğimiz ve çizgimiz için bize biraz nefes verecek. Şimdi üst kuvveti kopyalayın ve tabana da yapıştırın. Sol üst sütundaki satır için satır ayarlarını aşağıdaki gibi güncelleyin: sekme altında Renk İçeriği Arka Plan: #fffff Özel Marj Tasarım sekmesinin altındaki (masaüstü):% 20 Sol Sol Marj Özel (Tablet): 0px Sol dolgu özelliği (masaüstü):% 10 üst,% 20 sağ,% 10 üst,% 10 sol dolgu özelliği (tablet):% 10 üst,% 10 sağ,% 10 üst,% 10 sol açı yuvarlak sınır: 10 piksel Ardından, Kişilik Formunu satıra ekleyin ve aşağıdaki ayarları güncelleyin: Önce formunuza aşağıdakilerle yeni bir alan ekleyin: Alan Kimliği: Hizmet Başlığı: Tür: Radyo Seçenek 1: Seçenek Tasarım 2: Seçenek 3’ün Geliştirilmesi : Özelleştirme Yeni Alan Tasarım sekmeniz altında … Tam Genişlik Yapın: Alan seçeneğini kaydetmeyin ve aşağıdaki kişiden içerik sekmesine dönmeyin ve form ayarları: İçerik sekmesinin altında … Başlık: Mesajı bize gönderin captcha: Tasarım sekmesi altında değil … Başlık Başlık Seviyesi H2 Yazı Tipi Başlık: Karla Heavy Yazı Tipi Başlık: Kalın Yazı Tipi Başlık Tarzı: Kapitalizasyon (TT) Renk Arka Plan Alan Formu: #FFFFF Yazı Tipi Alan Formu: Karla Metin Boyutu Alan Formu: 16px Özel Stil Kullanın Düğme için: Evet Metin Renk Düğmesi: #FFFFFF Arka Plan Renk Düğmesi: #FF7875 RENK Düğmesi Sınır: #FF7875 Sınır Sınır Yarıçapı: 5px Yazı Türü Anahtar Düğmesi: Karla Ağırlık Yazı Tipi: TT Kuvvet Kalınlığı: TT Giriş Yuvarlak Açısı: 5px Genişlik Sınır Girdi Sınırı: #CCCCCCDI Aşağıdaki Gelişmiş sekmesi … İletişim düğmesine aşağıdaki özel CSS ekleyin: Marj-Top:% 45 Bu, düğmeyi hafifçe düşürerek formunuzu ayarlar. Ayarları Kaydet Şimdi Modülü eklemeye ve ikinci sağ sütundaki satırları düzenlemeye hazırsınız. İlk olarak, satır ayarlarını aşağıdaki gibi güncelleyelim: arka plan rengi: #444444 Tasarım sekmesinin altında … genişlik (masaüstü):% 70 genişlik (tablet):% 100 özel kenar boşluğu (masaüstü): -620px yukarı, -620px aşağı, -620px aşağı, % 10 sol özel kenar boşluğu (tablet): 0px üst, 0px alt, 0px sol dolgu özel:% 15 üst,% 10 sağ,% 15 alt,% 10 sol açı yuvarlak: 10px gölge kutusu: [ilk seçenekler] Satır ayarlarını kaydedin, ardından metin modülünü satıra ekleyin ve aşağıdakileri güncelleyin: İçindekiler:
Bana iletişime geçin
Lorem iPsum Dolor oturma amet, seçkin adipiscing kavramı. Nunc Ex Sem, Facilisis Sed Viverra NEC, SAGITTIS QUAM NULLA NISI MI Scelererisque Quis. Metin Rengi: Parlak Yazı Tipi Metin: Karla Metin Boyutu: 16px Hat Metin Yüksekliği: 1.5EM Metin Başlığı Sekmesi H2 Başlık 2 Yazı Tipi: Karla Başlık 2 Yazı Tipi Ağırlık: Kalın Başlık 2 Metin Boyutu: 32px Aralık Başlık 2 harf: 3px POS 2 Yükseklik Yükseklik : 1.1EM Özel Kenar: 20 PX AŞAĞIDAKİ KABLOLARINIZI görüntülemek için Blurb Modül ekleyin Metin modülünün altındaki açıklama modülünü ekleyin. Açıklama ayarlarını “Adres” başlıkını vererek güncelleyin ve ardından Adresi İçerik Kutusuna ekleyin. Ardından navigasyon simgesini kullanmayı seçin. Tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #ff7875 Görüntünün/simgenin yerleşimi: sol metin rengi: Yazı tipi boyutu boyutu simgesi: evet yazı tipi boyutu simgesi: 20px başlık başlık seviyesi: h $ başlık yazı tipi: karla heavy yazı tipi başlık: metin metin Boyut Kalınlığı Başlık: 20px Vücut Yazı Tipi: Karla Vücut Metin Boyutu: 16px Vücut Yüksekliği: 1.5EM Özel Marj: 20 PX AŞAĞIDAKİ Bu modülü iki kez çoğaltın ve her modülün içeriğini (başlık, içerik ve simge) bir tane olarak günceller. Açıklama ve e -posta adresi başka bir açıklamada. Ardından, satırdaki son açıklama altında sosyal medyayı takip etmek için modülü ekleyin. İstediğiniz kadar çok sosyal ağ ekleyin, yalnızca beyaz simgelerin görüntülenmesi için her bir sosyal ağ için arka plan rengini sildiğinizden emin olun. İşte burada. Sonuçlara bakalım.Daha fazla yap! Az önce yaptığımız düzen, istediğiniz içerik için kullanılabilir. Bu örtüşen bir çizgi olduğundan, her satıra herhangi bir modül eklemek ve her modül için ayarları güncellemek için Divi Builder’ı kullanabilirsiniz. Biraz mesafeyi değiştirmeniz gerekebilir, ancak çok zor olmamalıdır. Yeterince güçlü şeyler. Örtüşen sipariş nasıl değiştirilir Varsayılan olarak, sayfadaki ilk öğe her zaman ikisi çakışırsa onu takip eden öğelerin arkasında olacaktır. Bu nedenle sağdaki içerik her zaman soldaki içerikle örtüşecektir. Özel bir CSS hattı ile kolayca değiştirebilirsiniz. İlk sütununuzu (solda) tutan (veya satır) bölümüne gidin ve devam eden sekmenin altında, aşağıdaki CSS’yi “Sütun 1 Ana öğe” etiketli bir kutuya girin: Z-endeks: 10 Bu sebep işlev görür çünkü tüm Sütunlarda z-endeksi vardır: 9 varsayılan olarak. Sayı 10’a çıkarmak, diğerlerinin üzerindeki unsurları biriktirir. Bu yalnızca sütun düzeyinde çalışır. İki modülü iki sıradaki sütun halinde örtüşüyorsanız, bu özel CSS’yi satır ayarlarındaki Gelişmiş sekmesinin altındaki ana öğelerin 1 sütununa eklemeniz gerekir. Üst üste binen modüller ve satırlar için özel bir bölüm kullanıyorsanız, bu özel CSS’yi bölümün ayarlarındaki Gelişmiş sekmesinin altındaki ana öğelerin sütun 1’e eklemeniz gerekir. İki satırı üst üste binmek için iki özel parça kullanırsanız, yalnızca üste eklersiniz. Oluşturduğumuz kişi formu örneği için, Sütun 1 altındaki devam eden sekme ayarlarına “Z-Index: 10” eklediğimde, iletişim formlarının doğru satırla nasıl örtüştüğünü unutmayın: İhtiyacınız olan yanıt verebilirliğin üst üste geldiği bir düzen yapın. Tüm cihazlarda ve tarayıcı boyutlarında iyi görüntülenen üst üste binen yöntemi kullanmanızı sağlamak için gerekli olmak için. Bunu yapmak için, özel marjınızı ayarlarken yüzde değerleri ve piksel değerlerinin bir kombinasyonunu kullanın. Genel olarak, sol ve sağ kenar boşlukları için yüzde değerini kullanacağım (böylece tarayıcının genişliğine iyi ayarlanırlar) ve üst ve alt kenar boşlukları için bazı piksel değerleri. Ayrıca, marjın tabletlerde ve akıllı telefonlarda iyi görüntülenmesi için her bir cihaz için belirli kenar boşluklarını ayarladığınızdan emin olmalısınız. İyi bir pratik kural, masaüstü için ayarladığınız özel marjı tabletler için 0px olarak değiştirmektir (akıllı telefon cihazları tabletler için ayarları otomatik olarak devralacaktır).
Bu örtüşen örneği indirin, gelecekte tasarımı başlatmaya yardımcı olmak için bu örtüşen örneği indirmek istiyorsanız, aşağıdaki düğmeyi tıklayın. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız. İndirme dosyasına “Üst üstesinden gelen-content-examples.zip” denir. Dosyaları indirip çıkardıktan sonra iki JSON dosyanız olacaktır. Birincisi, bu yazıdan üç örtüşen şablon içerir. İkincisi, bu yazıdaki örtüşen temas formunun düzenini içerir.
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. Takip et 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. Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
