Divi'de İçeriğinizi Çerçevelemek için Soyut Çizgiler Nasıl Tasarlanır?

Divi, Visual Builder'ı kullanarak birçok farklı şekilde soyut satırlar oluşturmanıza olanak tanır. Bölücüler, Kenarlıklar, Arka Plan Gradyanları ve Kutu Gölgeleri, ihtiyacınız olan seçeneklere sahiptir. Boşluk konusunda biraz yaratıcı olursanız, içeriğinizi yaratıcı şekillerde çerçevelemek için tüm bu öğelerin bir kombinasyonunu kullanabilirsiniz.

Bu derste size, mizanpajınızın bir bölümünü çizgiler kullanarak nasıl kolayca benzersiz bir tasarıma dönüştürebileceğinizi göstereceğim.

gizli zirve

İşte inşa edeceğimiz tasarımın bir ön gösterimi.

Tasarım İlhamı

Bu tasarımın arkasındaki ilham, Divi'nin Cryptocurrency Layout Pack'inden geldi. Hakkında sayfa düzeni, iki sütunlu ızgara düzenini tam ortadan bölmek için sayfada devam eden bağlantı çizgilerinin başlık arka plan görüntüsüne sahip benzersiz bir tasarıma sahiptir. Bu yüzden, içeriği biraz daha çerçeveleyen çizgiler eklemek ve genel tasarıma biraz parıltı eklemek için Divi kullanma konseptini keşfetmeye karar verdim.

Bu tasarımın ana özelliği, Bölücü Modülün kullanılmasıdır. Bölücü modülünün tek bir renkle yatay çizgiler oluşturmakla sınırlı olmadığını keşfettim. Aslında, birkaç ince ayar ile arka plan degradeleri ile dikey çizgiler de oluşturabilirsiniz!

Tek ihtiyacınız olan Divi

Bu eğitim için ihtiyacınız olan tek şey Divi. Tasarımımızın temelini sağlamak için Sayfa Düzeni Hakkında Cryptocurrency kullanacağım. Ardından tasarımı tamamlamak için bölümlerin, sıraların ve modüllerin ayarlarını özelleştireceğim.

Bölüm Kenarlıklarınızla Çizgiler Ekleyin

Her şey sırayla. Devam edin ve yeni bir sayfa oluşturun ve Visual Builder'ı kullanarak Cryptocurrency About Page Layout'u içe aktarın.

Bu öğreticinin odak noktası ikinci saniye olacaktır (tam genişlikli başlığın hemen altındaki).

Bölüm Kenarlıkları Ekle

Bildiğiniz gibi, bölümler varsayılan olarak sayfanızın tüm genişliğini kapsar. Bu nedenle, bir bölümün solunda ve sağında 2 piksellik bir kenarlık pek fark edilmeyecektir. Ancak size özel bir genişlik verirseniz, bu kenarlıklar görüntülenecektir.

Bölüm ayarlarına gidin ve bölüm bölüm ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: %90
Bölüm Hizalama: Merkez
Sağ Kenar Genişliği: 4px
Sağ Kenar Rengi: #332faf
Sol Kenar Genişliği: 4px
Sol Kenar Rengi: rgba(237,240,0,0.51)

Merak etmeyin, bölümün özel genişliği mobil cihazlarda %100'e geri dönecek.

İçerik Alanı Arka Plan Rengi Ekle

Şu anda içerik alanı arka plan rengi beyazdır, böylece onu bölümünüzün her iki tarafında açıkta görebilirsiniz. Bu, sayfa ayarlarınıza giderek ve İçerik Alanı arka planına bölüm arka planıyla eşleşmesi için aynı koyu rengi atayarak değiştirilebilir.

İçerik Alanı Arka Plan Rengi: #101535

Satırınıza Çizgiler Ekleyin

Şimdi bazı ek çizgi tasarımları oluşturmak için Satır ayarlarını güncelleyelim.

Sütun Arka Plan Gradyanlarını Kullanarak Çizgi Ekleme

Sütunlarımıza bir çizgi eklemek için, sütunlarımızın her birinin yanına ince bir gradyan bölümü eklemek için gradyan arka planımızla küçük bir numara kullanabiliriz. Bu güncellemeyi yapmak için aşağıdakileri yapın:

Sütun 1 Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Sütun 1 Arka Plan Gradyanı Sağ Renk: rgba(237,240,0,0.34)
Sütun 1 Gradyan Yönü: 90deg
Sütun 1 Başlangıç ​​Konumu: %99,5
Sütun 1 Bitiş Konumu: %0

Sütun 2 Arka Plan Gradyanı Sol Renk: rgba(51,47,175,0.51)
Sütun 2 Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Sütun 2 Gradyan Yönü: 90deg
2. Sütun Başlangıç ​​Konumu: %99,5
Sütun 2 Bitiş Konumu: %0

Satıra Özel Genişlik Ver

Bölümümüze özel bir genişlik verdiğimiz için, tasarım öğelerimize daha fazla yer açmak için sıramıza özel bir genişlik vermemiz gerekiyor. Satır genişliğini %90 olarak ayarlayın.

Satırınıza Kenarlıklar Ekleyin

Satırınıza kenarlıklar eklemek için aşağıdakileri güncelleyin:

Sol Kenar Genişliği: 2px
Sol Kenar Rengi: rgba(237,240,0,0.56)
Sağ Kenar Genişliği: 2px
Sağ Kenar Rengi: #332faf

aralık

Modüllerimizle ekleyeceğimiz satırların hizasını kırmaya yardımcı olması için satır aralığımızı da ayarlamamız gerekiyor. Bunu yapmak için aşağıdakileri güncelleyin:

Özel Dolgu: %10 Üst
Sütun 1 Özel Dolgu: %5 Alt, %3 Sol, %3 Sağ
Sütun 2 Özel Dolgu: %3 Sağ, %3 Sol

Metin Modüllerine Kenarlıklar Ekleyin

Ardından, ek hat tasarımları için modüllerimize bazı kenarlıklar ekleyeceğiz.

Sol sütundaki görüntü modülü için aşağıdaki ayarları güncelleyin:

Genişlik: %62 (bu bize daha fazla boşluk bırakacak ve hat hizalamamızı bozmaya yardımcı olacaktır)

Sol Kenar Genişliği: 4px
Sol Kenar Rengi: rgba(67,40,183,0.53)

Sağ sütunda, üst metin modülünü başlıkla biraz boşluk ve sol kenarlık ile güncelleyin.

Ardından, sağ sütundaki ikinci metin modülüne (sahte metin içeren) biraz boşluk ve sağ kenarlık ekleyin:

Özel Marj: %5 Üst, %5 Sağ
Özel Dolgu: %5 (üst, alt, sol, sağ)

Sağ Kenar Genişliği: 2px
Sağ Kenar Rengi: #332faf

Düğmeye Kenarlıklar, Arka Plan Gradyanı ve Kutu Gölgesi Ekleme

Bu tasarım öğesi belki de hepsinden favorim. Kenarlıklar, bir arka plan gradyanı ve bir kutu gölgesi kullanarak düğmeyi biçimlendirmek ve çerçevelemek için çizgi öğeleri ekleyeceğiz.

İlk önce, aşağıdaki arka plan gradyanını kullanarak düğmeye bir sol kenarlık ekleyelim:

Düğme Arka Plan Gradyanı Sol Renk: #edf000
Düğme Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %1
Bitiş Konumu: %0

Şimdi kenarlık boyutunu büyütüyoruz ve rengi, kutu gölgemiz için biraz boşluk yaratacak şekilde bölüm arka planına uyacak şekilde değiştiriyoruz:

Düğme Kenar Genişliği: 24px
Düğme Kenar Rengi: #101535

Düğme metnine biraz nefes alma odası vermek için biraz boşluk ekleyin:

Özel Dolgu: 1em Üst, 1em Alt

Şimdi kutu gölgemizin düğmenin sağ alt köşesini çerçevelemesi için:

Kutu Gölgesi Yatay Konum: 2px
Kutu Gölge Dikey Konumu: 2px
Gölge Rengi: #332faf
Kutu Gölge Konumu: Dış Gölge

Özel Bölücülerle Satır Ekleme

Burası işlerin biraz ilginçleştiği yer. Sayfamıza istediğimiz yere bölücüler ekleyebiliriz. İşin püf noktası, benzersiz bir tasarım oluşturmak için ayırıcı arka plan gradyanlarını kullanmaktır.

Öncelikle satırımızın sol sütunundaki image modülünün hemen üstüne bir bölücü ekleyelim. Ardından aşağıdaki ayarları güncelleyin:

Düğme Arka Plan Gradyanı Sol Renk: #edf000
Düğme Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %1
Bitiş Konumu: %0

Renk: #edf000
Bölücü Ağırlığı: 2px
Yükseklik: 2 piksel
Özel Dolgu: %80 Sol

Özel Dolgu, kenarlık rengini sağa iter ve benzersiz bir efekt oluşturmak için arka plan gradyanını ortaya çıkarır.

Şimdi Modülü kopyalayın ve sağ sütunun üstüne ve ayrıca doğrudan başlıklı metin modülünün altına yapıştırın (şu anda orada olanın yerine).

İşte şimdiye kadar nasıl göründüğü.

Dikey Bölücü Çizgiler Ekle

Bu son aşama, bölüme sızan bazı ekstra dikey çizgiler ekleyerek tasarıma son rötuşları ekleyecektir.

Bunu yapmak için dört sütunlu yeni bir satır oluşturmamız ve satır ayarlarını aşağıdaki gibi güncellememiz gerekiyor:

Özel Genişlik: %95
Özel Dolgu: 0px Üst, 0px Alt

Ardından, tüm tablet ekranları için Özel Dolguyu güncelleyin…

Sütun 1 Dolgusu (tablet): %20 Sağ
Sütun 2 Dolgusu (tablet): %15 Sağ
Sütun 1 Dolgusu (tablet): %30 Sağ
Sütun 1 Dolgusu (tablet): %20 Sol

Bu, sütunlar mobil ekranlarda yığıldığında dikey bölücüleri (henüz eklenmemiş) dengeleyecektir.

Artık bölücü modüllerimizi eklemeye hazırız.

İlk sütuna bir ayırıcı modül ekleyin ve aşağıdaki ayarları güncelleyin:

Bölücüyü Göster: HAYIR
Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Arka Plan Gradyanı Sağ Renk: #edf000
Yükseklik: 100 piksel
Genişlik: 2 piksel
Modül Hizalaması: Sağ
Özel Kenar Boşluğu (masaüstü): -300 piksel Üst, 300 piksel Alt
Özel Kenar Boşluğu (tablet): 0px Üst, 0px Alt

Şimdi az önce oluşturduğunuz modülü kopyalayın ve ikinci sütuna ekleyin. Ardından aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #edf000
Arka Plan Gradyanı Sağ Renk: #332faf
Bitiş Konumu: %40
Yükseklik: 300 piksel
Modül Hizalaması: orta

Ardından, ilk sütundaki bölücüyü kopyalayıp üçüncü sütuna yapıştırın ve aşağıdakileri güncelleyin:

Modül Hizalaması: orta
Özel Kenar Boşluğu (masaüstü): 0px
Özel Kenar Boşluğu (tablet): -200 piksel Üst

Şimdi bu modülü ikinci sütuna kopyalayın ve dördüncü sütuna yapıştırın ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #332faf
Arka Plan Gradyanı Sağ Renk: #edf000
Bitiş Konumu: %100
Yükseklik: 200 piksel
Özel Kenar Boşluğu (tablet): -200 piksel Üst

Bu kadar. Nihai sonucu kontrol edin.

Ve işte tablet ve akıllı telefonda nasıl göründüğü…

Yeterli Hat Yok mu?

Ayırıcı modüllerinizin her birine kutu gölgeleri ekleyerek sayfanıza her zaman kolayca daha fazla satır ekleyebilirsiniz. Bu, çizgileri temelde istediğiniz herhangi bir yere yerleştirmenize izin verecektir. İşin püf noktası, kutu gölgenizin konumunu dış gölgeye ayarlamak, istediğiniz rengi seçmek ve ardından sayfanın herhangi bir yerine yerleştirmektir.

Sağ sütundaki üst ayırıcı modüle bir kutu gölgesi eklemenin nasıl görüneceğine bakın…

Son düşünceler

Tasarımı oluştururken ilk hedefim, Divi'nin önceden hazırlanmış düzenlerinden birinde bir bölüme çizgi eklemenin tüm olası yollarını keşfetmekti. Birkaç tane olduğunu öğrendim!

Ayırıcı modülde sunulan esnek tasarım seçenekleriyle, olasılıklar görünüşte sonsuz hale geliyor.

Umarım bu gönderi, tasarım araç kutunuzda Divi'yi şaşırtıcı yeni yollarla en üst düzeye çıkarmanıza yardımcı olacak birkaç araç daha sağlamıştır.

Yorumlarda sizden haber bekliyorum.