Divi'nin Bölüm Bölücüleriyle Arka Plan Dokuları Nasıl Oluşturulur

Bölüm bölücüler, web sitesi tasarımınızı bir sonraki seviyeye taşıyabilir. Ek olarak, Divi'nin yerleşik tasarım seçeneklerinden yararlanmak, sayfalarınıza benzersiz tasarım öğeleri eklemek için görüntü düzenleme yazılımına gerek duymadan size çok zaman kazandırabilir.

Bu yaratıcı yaklaşımlardan biri, web siteniz için arka plan dokuları oluşturmak için bölüm bölücüler kullanmaktır. Bunu nasıl yapacağınızı öğrenmenin en iyi yolu pratik yapmaktır. Bu nedenle, bu gönderide aşağıda görebileceğiniz çarpıcı bir örneği yeniden oluşturacağız, ancak bu kavramın çalışması için çok önemli olan bazı unsurları paylaşarak başlayalım.

Hadi hadi bakalım!

Sonuç

Öğreticiye dalmadan önce, farklı ekran boyutlarında neyi yeniden oluşturacağımıza hızlıca bir göz atalım.

Masaüstünde

Tablette

Mobilde

Alternatif Bölücü Stil #1

Bu örnek için çeşitli bölüm ayırıcılar kullanabilirsiniz. Size aynı tasarımda harika görünen iki tane daha göstereceğiz. Bu ilk:

Alternatif Bölücü Stili #2

Ve bu ikinci alternatif:

Divi ile Arka Plan Dokuları Oluşturmak için Bölüm Bölücüleri Yaratıcı Bir Şekilde Kullanma

Youtube Kanalımıza Abone Olun

Ne bilmek istiyorsun

• Bunu yapmak için aklınızda bulundurmanız gereken ilk şey, ilk bölüm için sıfır alt dolguya ve ikinci kısım için sıfır üst dolguya sahip olmaktır.
• Satırlar da sıfır üst ve alt dolguya ihtiyaç duyar
• Bu, bölümler ve satırlar arasındaki tüm boşluğu kaldıracak ve bölüm bölücülerin çarpışmasına izin verecektir.
• Bölüm bölücüler ayrıca bölücü yüksekliği ve yatay tekrar için daha yüksek bir değere ihtiyaç duyacaktır.
• Bu, tasarım tercihlerinize ve bölüm ayırıcıların ne kadar geçmesini istediğinize bağlıdır.
• Modülleriniz için kullandığınız renkleri aşmadıklarından emin olmak için bölüm ayırıcılar için yarı şeffaf renkler kullanıyoruz.
• Bölüm bölücülerin geçmesine izin vermek için sütun arka plan renklerinizin veya gradyan arka planlarınızın da belirli bir şeffaflığa ihtiyacı olacaktır.

1. Bölüm Oluştur

Bölüm Ayarları

Arka plan rengi

İlk standart bölümle başlayalım. Bu bölümü ekledikten sonra yapmanız gereken ilk şey, arka plan rengi olarak '#2f2542' vermektir.

Degrade Arka Plan

Arka plan renginin yanı sıra degrade bir arka plan kullanacağız. Degrade arka plan için kullandığımız ilk yarı saydam renk nedeniyle bir arka plan rengini ve bir degrade arka planını birleştiriyoruz. Her iki rengin birleştirilmesine izin verecektir. Aşağıdaki ayarları kullanın:

• İlk Renk: rgba(96,165,165,0.55)
• İkinci Renk: #2f2542
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 150deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %37

Alt Bölücü

Bu bölümün Tasarım sekmesine geçin ve hemen bir bölüm ayırıcı uygulayın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(109,52,93,0.35)
• Bölücü Yüksekliği: 300px
• Bölücü Yatay Tekrar: 5px (Masaüstü), 2px (Tablet ve Telefon)

aralık

Bu bölümün aralığını değiştirerek devam edeceğiz. Daha önce de belirtildiği gibi, bu bölüm ile sonraki adımlarda ekleyeceğimiz satır arasındaki mesafeyi kaldırmaya yardımcı olması için bu bölümün alt kısmında kesinlikle sıfır dolguya ihtiyacımız olacak. Bunlar, kullandığımız dolgu değerleridir:

• Üst: 65 piksel (bölümün üst kısmı ile sonraki adımlarda ekleyeceğimiz satır arasında boşluk oluşturun)
• Sağ: 0 piksel
• Alt 0 piksel (bölümün altındaki satır ve bölüm arasındaki boşluğu kaldırır)
• Sol: 0 piksel

Yeni Satır Ekle

Sütun Yapısı

Artık bölüm ayarlarıyla işimiz bittiğinde, ona bir satır ekleyeceğiz. Kullandığımız sütun yapısı aşağıdaki gibidir:

Degrade Arka Plan

Bu satır için saydam renklere sahip degrade bir arka plan kullanıyoruz. Bu, bölüm bölücülerin geçmesini sağlar:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: rgba(109,52,93,0.56)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 40deg
• Başlangıç ​​Konumu: %62
• Bitiş Konumu: %91

Sütun 1 Gradyan Arka Planı

Satır ayarlarınızı aşağı kaydırın ve ilk sütununuza da bir degrade arka planı ekleyin. Bir sonraki adımda, bu degrade arka planı bir sütun arka plan görüntüsüyle birleştireceğiz:

• İlk Renk: #60a5a5
• İkinci Renk: #44335d
• Sütun 1 Gradyan Türü: Doğrusal
• Sütun 1 Gradyan Yönü: 141deg
• Sütun 1 Başlangıç ​​Konumu: %0
• Sütun 1 Bitiş Konumu: %78

Sütun 1 Arka Plan Resmi

Şimdi ilk sütununuza tercih ettiğiniz bir arka plan resmi ekleyin ve Sütun 1 Arka Plan Görüntüsü Karışımının 'Çarpma' olarak ayarlandığından emin olun. Bu, önceki adımda seçtiğimiz arka plan görüntüsünü ve degrade arka planını birleştirecektir. Arka plan resmi yalnızca masaüstünde görünecek, bu yazının devamında tablet ve telefonda görünmesi için aynı resme sahip bir Resim Modülü ekleyeceğiz.

boyutlandırma

Ardından Tasarım sekmesine gidin, Boyutlandırma alt kategorisini açın ve ona aşağıdaki ayarları uygulayın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: 1700 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1 (sütunlar arasındaki boşluğu kaldırır)
• Sütun Yüksekliklerini Eşitle: Evet (sütunların eşit yükseklikte olduğundan emin olur)

aralık

Aralık alt kategorisini açarak ve tüm dolgu seçeneklerine '0px' ekleyerek devam edin. Bu, bölüm için sıfır alt dolgu ile birlikte, bölümün sırası ile altı arasında hiç mesafe kalmamasını sağlayacaktır.

Yuvarlatılmış köşeler

Ayrıca sol üst ve sağ üst köşelere bazı yuvarlak '50 piksel' köşeler ekleyeceğiz.

Kutu Gölge

Son olarak, Kutu Gölge alt kategorisindeki ilk seçeneği, hiçbir şeyi değiştirmeden seçeceğiz.

İkinci Sütuna Görüntü Modülü Ekle

Fotoğraf yükleniyor

Artık satır ayarlarımız yapıldığına göre modül eklemeye ve değiştirmeye başlayabiliriz. İkinci sütuna ekleyeceğimiz ilk modül bir Görüntü Modülüdür. Bu Görüntü modülünün yalnızca tablet ve telefonda görünmesi amaçlanmıştır. Masaüstü için, önceki adımlarda eklediğimiz sütun arka planına sahibiz.

opaklık

Bölüm bölücünün görüntüyle birleştiğinden emin olmak için bu Görüntü Modülünün opaklığını '%40' olarak değiştireceğiz.

görünürlük

Son olarak, bu Görüntü Modülünü masaüstünde devre dışı bırakacağız.

Metin Modülü #1'i İkinci Sütuna Yükle

Metin Ayarları

Oluşturduğunuz Görüntü Modülünün hemen altına bir Metin Modülü ekleyin ve Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harfler
• Metin Boyutu: 40px (Masaüstü ve Tablet), 30px (Telefon)
• Metin Rengi: #85e2db
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Görüntü Modülü ile bu Metin Modülü arasında biraz boşluk yaratmak için, bu Metin Modülünün üst kenarına da '100px' ekleyeceğiz.

Metin Modülü #2'yi İkinci Sütuna Yükle

Metin Ayarları

Önceki Metin Modülünün hemen altına, aşağıdaki metin ayarlarıyla başka bir Metin Modülü ekleyin:

• Metin Yazı Tipi Ağırlığı: Normal
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 30px
• Metin Rengi: #FFFFFF
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Daha sonra bu Metin Modülüne '20 piksel'lik bir üst kenar boşluğu ekleyeceğiz.

Metin Modülü #3'ü İkinci Sütuna Yükle

Metin Ayarları

Bu sütunun son Metin Modülü bir açıklama içerir ve aşağıdaki metin ayarlarını kullanır:

• Metin Rengi: #dddddd
• Metin Yönü: Sol veya Orta (tercihlerinize bağlı olarak)

boyutlandırma

Ardından, bu Metin Modülünün Boyutlandırma alt kategorisini açın ve aşağıdaki değişiklikleri yapın:

• Genişlik: %55
• Modül Hizalaması: Merkez

aralık

Aşağıdaki özel kenar boşluğunu uygulayarak bu Metin Modülü, önceki ve satırın altı arasında biraz mesafe oluşturacağız:

• Üst: 50 piksel
• Alt: 100 piksel

2. Bölüm Oluştur

Bölüm Ayarları

Degrade Arka Plan

Önceki bölümün hemen altına, aşağıdaki gradyan arka planına sahip başka bir standart bölüm ekleyeceğiz (bu durumda arka plan rengine gerek yok):

• İlk Renk: #2f2542
• İkinci Renk: #6d345d
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 166deg
• Başlangıç ​​Konumu: %38
• Bitiş Konumu: %100

Üst Bölücü

Bir sonraki adım, bir üst bölücü eklemektir. Önceki alt bölüm bölücü ile neredeyse aynı ayarları kullanacağız. Farklı olan tek şey renktir:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(96,165,165,0.18)
• Bölücü Yüksekliği: 300px
• Bölücü Yatay Tekrar: 5px (Masaüstü), 2px (Tablet ve Telefon)

aralık

Kesinlikle bu bölümün üst dolgusunu da çıkardığınızdan emin olun:

• Üst: 0 piksel
• Sağ: 0 piksel
• Alt: 68 piksel
• Sol: 0 piksel

Önceki Bölümün Satırını Klonla ve Yeni Bölümdeki Yeri

Bir önceki bölümde kullandığımız satırı klonlayıp bu yeni bölüme yerleştirerek biraz zaman kazanacağız.

Degrade Arka Planını Değiştir

Yine de bu satırda bazı değişikliklere ihtiyacımız olacak. Değiştirmemiz gereken şeylerden biri, satır gradyan arka planıdır:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: rgba(96,165,165,0.27)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 219deg
• Başlangıç ​​Konumu: %74
• Bitiş Konumu: %100

Sütun 1 Gradyan Arka Planı ve Arka Plan Resmini Kaldır

Örnek baskı ekranında da fark edebileceğiniz gibi ikinci sıradaki modüller karşı tarafta. Bu işi yapmak için yapmamız gereken ilk şey, ilk sütun gradyan arka planını ve arka plan resmini kaldırmaktır.

Sütun 2 Gradyan Arka Planı Ekle

Bunun yerine, ikinci sütuna degrade arka planı ve arka plan görüntüsünü ekleyeceğiz. Aşağıdaki degrade arka planını ekleyerek başlayın:

• İlk Renk: #44335d
• İkinci Renk: rgba(109,52,93,0.72)
• Sütun 2 Gradyan Türü: Doğrusal
• Sütun 2 Gradyan Yönü: 109deg
• Sütun 2 Başlangıç ​​Konumu: %0
• Sütun 2 Bitiş Konumu: %100

Sütun 2 Arka Plan Resmi Ekle

Arka Plan Resmi sekmesine gidin, arka plan resminizi yükleyin ve arka plan resmini degrade arka planla birleştirmek için resim karışımı olarak 'Çarp'ı kullandığınızdan emin olun.

Yuvarlatılmış Köşeleri Değiştir

Bu sıranın yuvarlatılmış köşeleri, sol üst ve sağ yerine sol altta ve sağda bulunur.

Mevcut Modülleri Sütun 1'e Yerleştirin

Ayrıca var olan tüm sütunları tek tek oraya sürükleyerek ikinci sütun yerine ilk sütuna yerleştirmemiz gerekecek.

Görüntü Modülü için Görüntüyü Değiştir

Son olarak, Görüntü Modülünüzdeki görüntüyü değiştirin ve işiniz bitti!

Alternatif Bölüm Bölücü #1

Bölüm #1'in Alt Bölüm Bölücüsünü Değiştir

İlk alternatif bölüm ayırıcıyı kullanmak için, Bölücü Stilini aşağıdakine (listede bulabileceğiniz) değiştirmeniz gerekir:

Bölüm #2'nin Üst Bölüm Bölücüsünü Değiştir

İkinci bölümün üst bölüm ayırıcısı için aynısını seçin.

Alternatif Bölüm Bölücü #2

Bölüm #1'in Alt Bölüm Bölücüsünü Değiştir

İkinci alternatif, aşağıdaki bölücü stilini kullanır:

Bölüm #2'nin Üst Bölüm Bölücüsünü Değiştir

Yine, bunu ikinci bölümün üst bölüm ayırıcısına da uygulayın:

Sonuç

Artık tüm adımların üzerinden geçtik ve sonuca farklı ekran boyutlarında son bir göz atalım.

Masaüstünde

Tablette

Mobilde

Alternatif Bölücü Stil #1

Alternatif Bölücü Stili #2

Son düşünceler

Bu öğreticide, bölümleriniz için arka plan dokuları oluşturmak üzere bölüm ayırıcıları kullanmanın yaratıcı bir yolunu gösterdik. Yukarıdaki çarpıcı örneği sıfırdan nasıl yeniden oluşturacağınızı göstermenin yanı sıra, bu yöntemin oluşturmak istediğiniz herhangi bir tasarım üzerinde çalışmasını sağlamak için bazı temel öğeler de sağladık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!