Divi'de Benzersiz Düzenler Oluşturmak için Modülleri ve Satırları Örtüşme

Örtüşme, benzersiz web tasarımları ve düzenleri oluşturmak için sıklıkla kullanılan kullanışlı bir tekniktir. Ve Divi ile içeriği örtüşmek kolaydır. Temel konsept, modüllerinize, satırlarınıza ve bölümlerinize, birbirleriyle örtüşecek şekilde konumlandıracak şekilde özel kenar boşlukları ve boşluklar eklemeyi içerir. Bu örtüşen tekniği bazı Divi Düzenlerimizde zaten fark etmiş olabilirsiniz.

Bu öğreticide, modülleri modüllerle, modülleri satırlarla ve satırları satırlarla çakıştırmak için özel kenar boşlukları ve boşluk kullanmanın temellerini göstereceğim. Bundan sonra, size iki satırı örtüştürerek benzersiz bir örtüşen iletişim formu düzenini nasıl oluşturacağınızı göstereceğim.

Başlayalım.

Gizlice Bakış

İşte örtüşen teknikleri kullanarak birlikte oluşturacağımız benzersiz bir iletişim formu düzeni.

Divi'nin iletişim formu, Divi Builder kullanılarak birçok yaratıcı şekilde şekillendirilebilir. İletişim formunuzu öne çıkarmanın benzersiz bir yolu, onu diğer içeriklerle örtüştürmektir. İçeriği Divi ile kolayca üst üste getirebilirsiniz. Ama bugün size Divi'de daha önce hiç görmemiş olabileceğiniz bir şey göstereceğim.

Bu Eğitimde size bu örtüşen yöntemleri kullanarak benzersiz bir iletişim formu düzenini nasıl oluşturacağınızı göstereceğim.

Yöntem 1: Modülleri Modüllerle Örtüşen Modüller

Bir modülü başka bir modülle örtüştürmek son derece basittir. İşte bunun nasıl kurulacağına dair bir örnek.

Yarı yarıya 2 sütun yapısına sahip normal bir bölüm oluşturun. Ardından her sütuna bir modül ekleyin.

Sol sütundaki modül 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ğ, 0px Sol (tablet kenar boşluklarını ayarlamak, mobil cihazlarda işleri temizleyecektir)

Sağ sütundaki modül için aşağıdakileri 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

Bu kadar.

Kullandığınız modüle bağlı olarak, doğru görünmesini sağlamak için bazı özel arka plan renkleri, dolgu, kutu yarıçapı vb. eklemeniz gerekebilir. Modüller örtüşürken derinlik oluşturmak için bir kutu gölgesi de ekleyebilirsiniz.

Yöntem 2: Satırlarla Örtüşen Modüller

Neden bir modül ile bir satırı üst üste bindirmeniz gerektiğini soruyor olabilirsiniz. Bunun nedeni, bir grup modülü tek bir içerik parçası olarak taşımak isteyebilirsiniz. Divi ile siteler oluştururken bu yaygın bir durumdur. Örneğin, aşağıdaki ekran görüntüsündeki iletişim bilgileri, tek bir içerik bloğu oluşturmak için üst üste yığılmış bir metin modülü, 3 tanıtıcı modül ve bir sosyal medya takip modülünden oluşur.

Modüllerin her biri için başka bir modülle çakışacak şekilde özel kenar boşlukları ve boşluklar oluşturabilirsiniz, ancak sınırlamalarınız olacaktır. Modül grubunuza bir sınır yarıçapı eklemek daha zor olurdu. Her modül için bir kutu gölgesi ayarlamanız gerekeceğinden, bir bütün olarak modül grubuna kutu gölgesi eklemek mümkün olmazdı. Bu nedenle, bir grup modülü taşımanın en kolay yolu, onları bir sırada tutmak ve satırı taşımaktır. Bu şekilde, kenarlık stillerinizi ve kutu gölgelerinizi satıra kolayca ekleyebilir ve satırınıza istediğiniz kadar modül ekleyebilirsiniz.

Bir modülü bir satırla örtüştürmek için bulduğum en iyi şey, bir özel bölüm kullanmaktır. Tüm özel bölüm düzenlerinin bir tarafında belirlenmiş bir kenar çubuğu alanı/sütunu (modüller için) ve diğer tarafında sıralar için belirlenmiş bir alanı/sütun olduğundan, bunun için bir özel bölüm mükemmel bir şekilde kurulmuştur. Modülünüzü kenar çubuğuna ekledikten ve satır içeriğinizi yerleştirdikten sonra, satırı veya modülü diğeriyle çakışacak şekilde kaydırmak için özel kenar boşlukları ve boşluk kullanabilirsiniz.

İşte bunun nasıl kurulacağına dair bir örnek.

Bir buçuk sütun yapısı ve sağ taraftaki satırlarla bir özel bölüm oluşturun.

Ardından, sağ sütuna bir sütun satırı ekleyin.

Satıra bir modül (veya modüller) ekleyin.

Ardından uzmanlık bölümünüzün sol sütununa bir modül ekleyin.

Sol sütundaki modülün ayarlarını aşağıdaki gibi 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ın ayarlarını aşağıdaki gibi 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

Bu kadar.

Şimdi tek yapmanız gereken, arka plan rengi, kenarlık yarıçapı, dolgu, kutu gölgesi vb. eklemek için satır ayarlarını özelleştirmek. Ve özelleştirilmiş satırınıza birden fazla modül ekleyebilirsiniz.

Yöntem 3: Satırları Satırlarla Örtüşme

Bir satırı başka bir satırla çakıştırmak biraz daha karmaşıktır. İki sırayı yan yana almanın bir yolunu bulmalıyız. Bunu Divi'de yapmanın birkaç yolunu denedim ve bunu yapmanın en iyi yolu iki özel bölüm oluşturmak. Her uzmanlık bölümünün satırlara ayrılmış bir sütunu olduğundan, sol sütunda bir satır olan bir bölüm ve ardından sağ sütunda bir satır ile aşağıda başka bir bölüm oluşturabilirsiniz. Bundan sonra yapmanız gereken tek şey, alt kısımdaki sırayı üst kısımdaki sıranın üzerine gelecek şekilde hareket ettirmektir.

Teknik olarak bunu iki normal bölümle de yapabilirsiniz, ancak farklı tarayıcı boyutlarında (en azından benim deneyimlerime göre) satırların yerleşimini doğru şekilde oluşturmak daha zordur. Uzmanlık bölümünün iki sütunlu kurulumu, Özel CSS ile uğraşmadan bunu yapmanıza yardımcı olur.

İşte nasıl yapılacağı.

Bir buçuk sütun yapısı ve sol taraftaki satırlarla bir özel bölüm oluşturun:

Ardından, sol sütuna bir sütun satırı ekleyin.

Satıra bir modül (veya modüller) ekleyin.

Ardından, mevcut olanın altında başka bir Özel bölüm oluşturun ve ona bir buçuk sütun yapısı ve sağ taraftaki satırlarla verin. Sağ sütuna tek sütunlu bir satır ekleyin.

Ardından satıra bir modül (veya modüller) ekleyin.

Ardından, üst üste gelmelerini sağlamak için satırlarımızın her birine özel kenar boşlukları eklememiz gerekiyor. İlk olarak, ilk bölümün sol sütunundaki satıra aşağıdaki özel kenar boşluklarını ekleyin:

Özel Kenar Boşluğu (Masaüstü): %15 kaldı
Özel Kenar Boşluğu (Tablet): 0 piksel kaldı

Ayarları kaydedin ve ikinci bölümün sağ sütunundaki satıra aşağıdaki özel kenar boşluklarını ekleyin:

Özel Kenar Boşluğu (Masaüstü): -300px Üst, -%15 Sol (satırlarınızın/modüllerinizin boyutuna bağlı olarak bu değerleri ayarlamanız gerekebilir. Çok fazla boşluk varsa alt kenar boşluğunuza negatif bir değer de eklemeniz gerekebilir) satırın altında)
Özel Kenar Boşluğu (Tablet): 0 piksel Üst, 0 piksel Alt, 0 piksel sol

Örtüşen Satırlarla Benzersiz Bir Divi İletişim Formu Düzeni Oluşturma

Artık örtüşmenin gücünü anladığınıza göre, benzersiz bir iletişim formu düzeni oluşturarak bu teknikleri kullanmaya başlayalım. Bu düzen için iki özel bölüm kullanarak iki satırı üst üste getireceğim. Bu şekilde, bu düzene kolaylıkla ek modüller ekleyebilirsiniz.

Vakit geçirmek adına “Overlapping Rows with Rows” altında oluşturduğumuz layoutu kullanacağım.

Düzeniniz hazır olduğunda, en iyi uzmanlık bölümündeki bölüm ayarlarınıza gidin ve aşağıdakileri güncelleyin:

İçerik sekmesi altında
Arka Plan Rengi: #fd7978

Tasarım sekmesi altında
Özel Genişlik Kullan: EVET
Özel Genişlik: 1350 piksel
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1

Bu, içeriğimiz ve satırlarımız için bize biraz nefes verecektir.

Şimdi üst bölümün stilini kopyalayın ve aşağıdaki bölüme de yapıştırın.

Üst bölümün sol sütunundaki satır için satır ayarlarını aşağıdaki gibi güncelleyin:

İçerik Sekmesi altında

Arka Plan Rengi: #ffffff
Tasarım sekmesi altında

Özel Kenar Boşluğu (Masaüstü): %20 kaldı
Özel Kenar Boşluğu (Tablet): 0 piksel kaldı
Özel Dolgu (Masaüstü): %10 Üst, %20 Sağ, %10 Üst, %10 sol
Özel Dolgu (Tablet): %10 Üst, %10 Sağ, %10 Üst, %10 sol

Kenar Yuvarlatılmış Köşeler: 10px

Ardından, satıra bir iletişim formu ekleyin ve aşağıdaki ayarları güncelleyin:

İlk önce aşağıdakilerle formunuza yeni bir alan ekleyin:
Alan kimliği: hizmet
Başlık: İlgilendiğiniz Hizmet
Tür: Radyo Düğmeleri
Seçenek 1: Tasarım
Seçenek 2: Geliştirme
Seçenek 3: özelleştirme

Yeni alanınızın tasarım sekmesi altında…
Tam Genişlik Yap: HAYIR

Alan seçeneklerini kaydedin ve iletişim formu ayarlarının içerik sekmesine geri dönün ve aşağıdakileri güncelleyin:

İçerik sekmesi altında…

Başlık: Bize Mesaj Gönderin
Captcha'yı Görüntüle: HAYIR

Tasarım sekmesi altında…

Başlık Başlık Düzey h2
Başlık Yazı Tipi: Karla
Başlık Yazı Tipi Ağırlığı: kalın
Başlık Yazı Tipi Stili: Büyük Harf Yap (TT)
Form Alanı Arka Plan Rengi: #ffffff
Form Alanı Yazı Tipi: Karla
Form Alanı Metin Boyutu: 16px

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #ff7875
Düğme Kenar Rengi: #ff7875
Düğme Sınır Yarıçapı: 5px
Düğme Yazı Tipi: Karla
Yazı Tipi Ağırlığı: kalın
Yazı Tipi Stili: TT

Girdiler Yuvarlatılmış Köşeler: 5px
Girişler Kenarlık Genişliği: 1px
Girdiler Kenarlık Rengi: #cccccc

Gelişmiş Sekmesi altında…

Kişi Düğmesi Kutusuna aşağıdaki Özel CSS'yi ekleyin:

margin-top: 45%

Bu, düğmeyi biraz aşağı bırakarak formunuzu kare haline getirecektir.

Ayarları kaydet

Artık ikinci bölümün sağ sütunundaki satırı düzenlemek ve Modüller eklemek için hazırsınız. Öncelikle satır ayarlarını aşağıdaki gibi güncelleyelim:

Arka Plan Rengi: #444444

Tasarım sekmesi altında…
Genişlik (masaüstü): %70
Genişlik (tablet): %100
Özel Kenar Boşluğu (masaüstü): -620 piksel Üst, -620 piksel Alt, %10 sol
Özel Kenar Boşluğu (tablet): 0 piksel Üst, 0 piksel Alt, 0 piksel sol
Özel Dolgu: %15 Üst, %10 Sağ, %15 Alt, %10 sol
Yuvarlatılmış Köşeler: 10px
Kutu Gölgesi: [ilk seçim]

Satır Ayarlarını Kaydet

Ardından satıra bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik:

<h2>Contact Me</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex sem, facilisis sed viverra nec, sagittis vel quam nulla nisi mi scelerisque quis.

Metin Rengi: açık
Metin Yazı Tipi: Karla
Metin Metin Boyutu: 16px
Metin Satırı Yüksekliği: 1.5em

Başlık Metni H2 sekmesi
Başlık 2 Yazı Tipi: Karla
Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Metin Boyutu: 32px
Başlık 2 Harf Aralığı: 3px
Başlık 2 Çizgi Yüksekliği: 1.1em
Özel Kenar Boşluğu: 20 piksel alt

İletişim Bilgilerinizi görüntülemek için Blurb Modülleri ekleyin

Metin modülünün altına bir tanıtıcı modül ekleyin. "Adres" Başlığı vererek tanıtım yazısı ayarlarını güncelleyin ve ardından adresi içerik kutusuna ekleyin. Ardından gezinme simgesini kullanmayı seçin.

Tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin:

Simge Rengi: #ff7875
Resim/Simge Yerleşimi: Sol

Metin Rengi: Açık
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 20px
Başlık Başlık Seviyesi: H$
Başlık Yazı Tipi: Karla
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Metin Boyutu: 20px
Gövde Yazı Tipi: Karla
Gövde Metin Boyutu: 16px
Gövde Çizgisi Yüksekliği: 1.5em
Özel Kenar Boşluğu: 20 piksel Alt

Şimdi bu tanıtım modülünü iki kez çoğaltın ve her modülün içeriğini (başlık, içerik ve simge) bir tanıtım yazısına bir Telefon numarası ve diğerinde bir e-posta adresi içerecek şekilde güncelleyin.

Ardından, satırdaki son tanıtım yazısının altına bir Sosyal Medya Takip modülü ekleyin. Yalnızca beyaz simgenin görünmesi için her birinin arka plan rengini sildiğinizden emin olarak istediğiniz kadar sosyal ağ ekleyin.

Bu kadar. Sonucu kontrol edelim.

Daha fazla yap!

Az önce oluşturduğumuz düzen, istediğiniz herhangi bir içerik için kullanılabilir. Bunlar çakışan satırlar olduğundan, her satıra herhangi bir modül eklemek ve her modülün ayarlarını güncellemek için Divi Builder'ı kullanabilirsiniz. Aralığı biraz değiştirmeniz gerekebilir, ancak bu çok zor olmamalıdır. Oldukça güçlü şeyler.

Örtüşen Sıra Nasıl Değiştirilir

Varsayılan olarak, sayfadaki ilk öğe, ikisi çakışırsa her zaman onu takip eden öğenin arkasına oturur. Bu nedenle sağdaki içerik her zaman soldaki içerikle örtüşecektir.

Bunu bir satır özel CSS ile kolayca değiştirebilirsiniz. İlk sütununuzu (soldaki) tutan bölüme (veya satıra) gidin ve gelişmiş sekmenin altında "Sütun 1 Ana Öğe" etiketli kutuya aşağıdaki CSS'yi girin:

z-index: 10

Bunun çalışmasının nedeni, tüm sütunların varsayılan olarak z-index: 9'a sahip olmasıdır. Sayıyı 10'a çıkarmak, öğeyi diğerinin üzerine yığacaktır. Bu yalnızca sütun düzeyinde çalışacaktır.

İki sütunlu bir satırda iki modülü çakıştırıyorsanız, bu özel CSS'yi Satır ayarlarındaki Gelişmiş sekmesi altındaki sütun 1 Ana Öğeye eklemeniz gerekir.

Bir modül ve bir satırı çakıştırmak için özel bir bölüm kullanıyorsanız, bu özel CSS'yi bölüm ayarlarında Gelişmiş sekmesi altındaki sütun 1 Ana Öğe'ye eklemeniz gerekir.

İki satırı üst üste bindirmek için iki özel bölüm kullanıyorsanız, onu yalnızca üst bölüme ekleyeceksiniz.
Oluşturduğumuz iletişim formu örneği için, 1. sütunun altındaki üst bölüm ayarları gelişmiş sekmesine “z-index: 10” eklediğimde iletişim formu satırının sağ satırla nasıl örtüştüğüne dikkat edin Ana Öğe:

Örtüşen Düzenleri Duyarlı Yapma

Tüm cihazlarda ve tarayıcı boyutlarında iyi görüntülenen örtüşen yöntemler kullandığınızdan emin olmanız gerekir. Bunu yapmak için özel kenar boşluklarınızı ayarlarken yüzde değerleri ve piksel değerlerinin bir kombinasyonunu kullanın. Genelde, sol ve sağ kenar boşlukları için yüzde değerleri (tarayıcının genişliğine iyi uyum sağlamaları için) ve üst ve alt kenar boşlukları için belirli bir piksel değeri kullanırdım.

Ayrıca, kenar boşluklarının tablet ve akıllı telefonlarda güzel bir şekilde oluşturulabilmesi için her belirli cihaz için özel kenar boşlukları ayarladığınızdan emin olmalısınız. Masaüstü için ayarladığınız özel kenar boşluklarını Tablet için 0px olarak değiştirmek iyi bir temel kuraldır (Akıllı telefon cihazları, Tablet ayarlarını otomatik olarak devralır).

Bu Örtüşen Örnekleri İndirin

Gelecekteki tasarımları başlatmanıza yardımcı olması için bu örtüşen örnekleri indirmek isterseniz, aşağıdaki düğmeyi tıklayın. İ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 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.

İndirilen dosyanın adı “Overlapping-Content-Examples.zip”. Dosyayı indirip açtığınızda, iki json dosyanız olacak. İlki, bu gönderideki örtüşen üç şablonu içerir. İkincisi, bu gönderideki Çakışan İletişim Formu düzenini içerir.

Son düşünceler

Divi Builder ile bu örtüşen yöntemleri kullanarak yaratıcı ve benzersiz düzenler oluşturabilirsiniz. Divi ile yeni başlıyorsanız, bu boşluk kombinasyonları gerçek bir göz açıcı olabilir. Ve elbette, “örtüşen” ile sınırlı değilsiniz. Öğeleri bir web sayfasına istediğiniz şekilde yerleştirmek için bu teknikleri kullanabilirsiniz.

Öyleyse git!

Yorumlarda sizden haber bekliyorum.