Divi'nin Yeni Tasarım Seçeneklerini Kullanarak Bölüm Bölümleri Nasıl Oluşturulur

Bugünün Divi eğitiminde, web siteniz için nasıl çarpıcı bölüm bölümleri oluşturabileceğinizi göstereceğiz. Bu bölümler ziyaretçileriniz için bir kılavuz görevi görür. Bir sayfanın başka bir bölümüne girerken onlara gösterecektir. Genellikle bölümler, tüm bölümler boyunca belirli bir arka plan rengiyle birlikte kullanılır.

Web sitenizde bölüm bölümlerini kullanmayı düşünüyorsanız, bu yazı biraz ilham almak için güzel bir yer olabilir. Bu gönderiyi takip ederek kolayca yeniden oluşturabileceğiniz 4 stil bölüm bölümü göstereceğiz.

Sonuç

Dört bölümlü bölüm stilinin pratik yönüne geçmeden önce, sonuçtan neler bekleyebileceğinize bir göz atalım.

Bölüm Bölüm Stili #1

Bölüm Bölüm Stili #2

Bölüm Bölüm Stili #3

Bölüm Bölüm Stili #4

Divi'nin Yeni Tasarım Seçeneklerini Kullanarak Bölüm Bölümleri Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Bölüm Bölüm Stili #1

Satır Seçenekleri

Üzerinde çalıştığınız sayfaya iki sütunlu bir satır ekleyerek ve Tasarım sekmesinde sol Satır Hizalamasını seçerek başlayın.

Aynı sekmeyi aşağı kaydırın ve üst, sağ, alt ve sol dolgu için '0px'i seçtiğinizden emin olun. Bunu yapmamızın nedeni, bölümde çok fazla yer kaplamaması için satırı mümkün olduğunca küçük yapmaktır.

Bölücü Modül

Tüm örneklerimizde, iki sütundan yalnızca birini kullanacağız (satır hizalamasına bağlı olarak). Bölümünüzü sayfanızın sol tarafına yerleştiriyorsanız, sol sütunu seçin. Ardından, bir Bölücü Modül ekleyin ve İçerik sekmesinde 'Bölücüyü Göster' seçeneğini etkinleştirin.

Tasarım sekmesine gidin ve ayırıcı renginiz olarak '#000000' kullanın.

Ardından, Stiller alt kategorisini açın ve Bölücü Stili olarak 'Noktalı'yı ve Bölücü Konumu olarak 'Üst'ü seçin.

Ardından, Boyutlandırma alt kategorisi için aşağıdaki ayarların geçerli olduğundan emin olun:

• Bölücü Ağırlığı: 3px
• Yükseklik: 23 piksel
• Genişlik: %62
• Modül Hizalama: Sol

İlk Metin Modülü

Bölücü Modülü ekledikten sonra, ilk Metin Modülünü hemen altına eklemenin zamanı geldi. Bölüm numarasını seçtikten sonra aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(96,150,193,0.16)
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %51
• Bitiş Konumu: %51

Ardından Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Yazı Tipi: Mutlu Maymun
• Metin Yazı Tipi Boyutu: 53 (Masaüstü ve Tablet), 25 (Telefon)
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Boyutlandırma alt kategorisini açın, '%40' genişliğini seçin ve orta Modül Hizalamasını seçin.

Bu Metin Modülünün ihtiyaç duyduğu son şey, aşağıdaki özel kenar boşluğu ve dolgudur:

• Üst Kenar Boşluğu: -40px
• Üst Dolgu: 40px
• Sağ Dolgu: 50px
• Alt Dolgu: 40px
• Sol Dolgu: 50px

İkinci Metin Modülü

Aşağıdaki Metin alt kategorisi ayarlarıyla başka bir Metin Modülü ekleyin:

• Metin Yazı Tipi: Arimo
• Metin Yazı Tipi Boyutu: 19px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Aynı sekmeyi aşağı kaydırın, '%97' genişlik kullanın ve orta Modül Hizalama seçeneğini etkinleştirin.

Son olarak, '-15px' üst kenar boşluğunu da ekleyin.

Üçüncü Metin Modülü

Bölüm bölümünün son Metin Modülü, aşağıdaki Metin alt kategorisi ayarlarına sahiptir:

• Metin Yazı Tipi: Arimo
• Metin Yazı Tipi Stili: Kalın
• Metin Yazı Tipi Boyutu: 19px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Boyutlandırma alt kategorisinde, '%99' genişlik kullanın ve orta Modül Hizalamasını seçin.

Bu bölüm için yapmanız gereken son şey, '-20px' üst kenar boşluğu eklemektir.

Bölüm Bölüm Stili #2

Satır Seçenekleri

İkinci örnek ekranın sağ tarafında yer almaktadır. Bir kez daha, iki sütunlu bir satır ekleyin, ancak bunun yerine doğru Satır Hizalamasını seçin.

Aralık alt kategorisini açın ve üst, sağ, alt ve sol dolguya '0px' atayın.

Bölücü Modül

Sağdaki sütuna bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğini etkinleştirin.

Ayırıcı için aşağıdaki gradyan arka planını kullanacağız:

• İlk Renk: rgba(132,132,132,0.61)
• İkinci Renk: rgba(224,43,32,0.86)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %43
• Bitiş Konumu: %100

Tasarım sekmesine gidin ve ayırıcı rengi olarak 'rgba(0,0,0,0.26)'yı seçin.

Ardından, Bölücü Stili olarak 'Katı' ve Bölücü Konumu olarak 'Üst'ü kullanın.

Ardından Boyutlandırma alt kategorisini açın ve aşağıdaki ayarların geçerli olmasını sağlayın:

• Bölücü Ağırlığı: 3px
• Yükseklik: 11 piksel
• Genişlik: %68
• Modül Hizalaması: Sağ

İlk Metin Modülü

İlk Metin Modülü aşağıdaki Metin alt kategorisi ayarlarına sahiptir:

• Metin Yazı Tipi: Kantat Bir
• Metin Yazı Tipi Boyutu: 100px
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Sağ

Aralık alt kategorisini açın ve aşağıdaki özel kenar boşluğunu ve dolguyu kullanın:

• Üst Kenar Boşluğu: -95px
• Üst Dolgu: 40px
• Sağ Dolgu: 50px
• Alt Dolgu: 40px
• Sol Dolgu: 50px

İkinci Metin Modülü

Başka bir Metin Modülü ekleyin ve bunun yerine aşağıdaki Metin alt kategorisi ayarlarını kullanın:

• Metin Yazı Tipi: Arimo
• Metin Yazı Tipi Boyutu: 20px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Ardından, '-50px' üst kenar boşluğu ekleyin.

Üçüncü Metin Modülü

Bu örneğin üçüncü ve son Metin Modülü, aşağıdaki Metin alt kategorisi ayarlarına sahiptir:

• Metin Yazı Tipi: Istakoz İki
• Metin Yazı Tipi Boyutu: 43px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Son olarak, '-30 piksel' bir üst kenar boşluğu ekleyin.

Bölüm Bölüm Stili #3

Satır Seçenekleri

Üçüncü örnek için, aşağıdaki Sütun 1 gradyan arka planına sahip iki sütunlu bir satır kullanacağız:

• İlk Renk: #edf000
• İkinci Renk: rgba(255,255,255,0)
• Sütun 1 Gradyan Türü: Doğrusal
• Sütun 1 Gradyan Yönü: 139deg
• Sütun 1 Başlangıç ​​Konumu: %11
• Sütun 1 Bitiş Konumu: %36

Tasarım sekmesine gidin ve sol Satır Hizalama'yı seçin.

Bir kez daha, üst, sağ, alt ve sol kenar boşluğu için '0px' kullanacağız.

Bölücü Modül

Şimdi, sol sütuna bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğini etkinleştirin.

Arka Plan alt kategorisini açın ve aşağıdaki gradyan arka planını kullanın:

• İlk Renk: #4b61af
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 161deg
• Başlangıç ​​Konumu: %18
• Bitiş Konumu: %38

Tasarım sekmesini açın ve ayırıcı rengi olarak '#000000'i seçin.

Stiller alt kategorisinde, Bölücü Stili olarak 'Katı' ve Bölücü Konumu olarak 'Üst'ü kullanın.

Ardından, Boyutlandırma alt kategorisi için aşağıdaki ayarların geçerli olduğundan emin olun:

• Bölücü Ağırlığı: 6px
• Yükseklik: 100 piksel
• Genişlik: %70
• Modül Hizalama: Sol

İlk Metin Modülü

Bölücü Modülün hemen altına ilk Metin Modülünü ekleyerek ve aşağıdaki gradyan arka planını seçerek devam edin:

• İlk Renk: rgba(131,0233,0.58)
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 151deg
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %40

Tasarım sekmesine gidin ve aşağıdaki Metin alt kategorisi ayarlarını kullanın:

• Metin Yazı Tipi: Poiret Bir
• Metin Yazı Tipi Stili: Kalın
• Metin Yazı Tipi Boyutu: 69px
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

Boyutlandırma alt kategorisini açın, '%70' genişlik kullanın ve sol Modül Hizalamasını seçin.

Son olarak, aşağıdaki özel kenar boşluğunu ve dolguyu kullanın:

• Üst Kenar Boşluğu: 124 piksel
• Üst Dolgu: 60px
• Alt Dolgu: 150 piksel
• Sol Dolgu: 50px

İkinci Metin Modülü

Devam edin ve aşağıdaki Metin alt kategorisi ayarlarıyla başka bir Metin Modülü ekleyin:

• Metin Yazı Tipi: Arimo
• Metin Yazı Tipi Boyutu: 20px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Boyutlandırma alt kategorisini açın, '%80' genişliğini seçin ve sol Modül Hizalamasını seçin.

Son olarak, '-150px' üst kenar boşluğu ekleyin.

Üçüncü Metin Modülü

Son Metin Modülünü ilk sütuna ekleyin ve aşağıdaki Metin alt kategorisi ayarlarının geçerli olduğundan emin olun:

• Metin Yazı Tipi: Arimo
• Metin Yazı Tipi Stili: Kalın
• Metin Yazı Tipi Boyutu: 20px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Boyutlandırma alt kategorisini açın, '%80' genişlik kullanın ve sol Modül Hizalamasını seçin.

Son olarak, '-20px' üst kenar boşluğunu ve '50px' alt dolgusunu seçin.

Bölüm Bölüm Stili #4

Satır Seçenekleri

Son örnek için tekrar doğru Satır Hizalamasını kullanacağız.

Ardından, Aralık alt kategorisini açın ve üst, sağ, alt ve sol dolguya '0px' atayın.

İlk Metin Modülü

Bu son örnek bir Bölücü Modül içermiyor, bu yüzden devam edin ve sol sütuna bir Metin Modülü ekleyin. Bunu yaptıktan sonra, aşağıdaki degrade arka planını seçin:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: #92d84b
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 55deg
• Başlangıç ​​Konumu: %25
• Bitiş Konumu: %100

Ardından Tasarım sekmesine gidin ve aşağıdaki Metin alt kategorisi ayarlarının geçerli olduğundan emin olun:

• Metin Yazı Tipi: Kantat Bir
• Metin Yazı Tipi Boyutu: 220 (Masaüstü ve Tablet), 100 piksel (Telefon)
• Metin Rengi: #f2f2f2 (Bölüm arka plan rengiyle eşleştirin)
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Sağ

Boyutlandırma alt kategorisini açın, '%82' genişlik kullanın ve doğru Modül Hizalamasını seçin.

Son olarak, aşağıdaki özel dolguyu kullanın:

• Üst: 60 piksel
• Sağ: 50 piksel
• Alt: 60 piksel
• Sol: 50 piksel

İkinci Metin Modülü

Başka bir Metin Modülü ekleyin ve Metin alt kategorisinde aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Arimo
• Metin Yazı Tipi Boyutu: 20px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sağ

Boyutlandırma alt kategorisini açın, '%39' genişliğini seçin ve orta Modül Hizalamasını seçin.

Son olarak, üst kenar boşluğuna '-130px' ekleyin.

Üçüncü Metin Modülü

Bu bölüm örneğinin son Metin Modülü aşağıdaki Metin alt kategorisi ayarlarına sahiptir:

• Metin Yazı Tipi: Dans Eden Senaryo
• Metin Yazı Tipi Boyutu: 45px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sağ

Boyutlandırma alt kategorisini açın, '%50' genişlik seçin ve orta Modül Hizalamasını seçin.

Son olarak, '-30 piksel'lik bir üst dolgu seçin ve işiniz bitti!

Son düşünceler

Bu gönderide, web sitenizde nasıl yaratıcı bir şekilde bölüm bölümleri oluşturabileceğinizi ve stil oluşturabileceğinizi gösterdik. Bu bölüm bölümleri, bölümlerin her biri için aynı arka plan rengini kullanırken bölümler arasında bir bölüm oluşturmanıza olanak tanır. Sorularınız veya önerileriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Kwok Design tarafından Öne Çıkan Görsel / Shutterstock.com