Divi ile Oluşturulan 5 Editoryal Stil Bölüm Düzeni Örneği

Yeni Divi seçenekleri tonlarca olasılık sunuyor. Modüller, satırlar ve sütunlar, çarpıcı ve kullanıcı dostu web tasarımına giden yolda birbirlerine her zamankinden daha fazla güç veriyor. Yapabileceği şeylerden biri, dikkat çekici editoryal stil bölümleri oluşturmaktır. İşte bu yazıda size tam olarak bunu göstereceğiz; Farklı web sitelerinde kullanabileceğiniz 5 farklı editoryal stil bölümü düzeni. En iyi kısım? Gönderi, yalnızca her modül, satır ve sütun için doğru ayarlar kullanılarak yapılır.

Şimdi size nasıl oluşturulacağını göstereceğimiz beş örneğe bir göz atalım.

İlk Örnek

masaüstü

Mobil

İkinci Örnek

masaüstü

Mobil

Üçüncü Örnek

masaüstü

Mobil

Dördüncü Örnek

masaüstü

Mobil

Beşinci Örnek

masaüstü

Mobil

Divi ile Oluşturulan 5 Editoryal Stil Bölüm Düzeni Örneği

Youtube Kanalımıza Abone Olun

İlk Örneği Oluşturmaya Başlayın

İlk editör stili düzenimizi oluşturarak başlayalım.

Yeni Bölüm Ekle

Yeni bir sayfa ekleyin, Divi Builder'ı etkinleştirin ve Visual Builder'a geçin. Visual Builder'a girdikten sonra standart bir bölüm ekleyin.

Üç Sütunlu Satır Ekle

Bu standart bölümde, üç sütunlu bir satıra ihtiyacımız olacak.

Degrade Arka Plan

Satır ayarlarını açın ve aşağıdaki degrade arka planını buna ekleyin:

• İlk Renk: #636363
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %47

Sütun 2 Arka Plan Rengi

Ayrıca Sütun 2 Arka Plan Rengi olarak '#d8d8d8'i ayarlamamız gerekecek.

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: %100
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Aralık alt kategorisini açın ve ikinci sütunun üst, sağ, alt ve sol dolgusuna '50px' ekleyin.

İlk Sütun Görüntü Modülü

Degrade Arka Plan

Satırın ilk sütununa bir resim ekleyin ve bunun için aşağıdaki gradyan arka planını kullanın:

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

hizalama

Tasarım sekmesine gidin, soldaki Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

aralık

Ardından, Aralık alt kategorisini açın ve aşağıdaki kenar boşluğu ve dolgu ayarlarını kullanın:

• Üst Kenar Boşluğu: 100px (Masaüstü), 0px (Tablet ve Telefon)
• Üst Dolgu: 20px
• Alt Dolgu: 20px

İkinci Sütun Metin Modülü

Metin Ayarları

Ardından, satırın ikinci sütununa bir Metin Modülü ekleyin. Tasarım sekmesine gidin ve Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi Boyutu: 12px
• Metin Rengi: #000000
• Metin Yönü: Merkez

boyutlandırma

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

aralık

Son olarak, üst ve alt kenar boşluğuna '50px' ekleyin.

Üçüncü Sütun Görüntü Modülü

Degrade Arka Plan

Üçüncü sütuna başka bir Görüntü Modülü ekleyin ve aşağıdaki gradyan arka planını kullanın:

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

hizalama

Tasarım sekmesine gidin, sol Görüntü Hizalama'yı seçin ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

aralık

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

• Üst Kenar Boşluğu: 300px (Masaüstü), 0px (Tablet ve Telefon)
• Üst Dolgu: 20px
• Alt Dolgu: 20px

Sonuç

Sonuca masaüstünde bir kez daha bakalım:

Ve mobilde:

İkinci Örnek Oluşturmaya Başlayın

İkinci örnek masaüstünde şöyle görünür:

Yeni Bölüm Ekle

İlk olarak, yeni bir standart bölüm ekleyin.

İki Sütunlu Satır Ekle

Ardından, ona iki sütunlu bir satır ekleyin.

Sütun 2 Arka Plan Rengi

Satır ayarlarını açın ve Sütun 2 Arka Plan Rengi olarak '#ededed' ekleyin.

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: %100
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

İlk Sütun Görüntü Modülü

hizalama

İlk sütuna bir Görüntü Modülü ekleyin, sol Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

aralık

Aralık alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Üst Kenar Boşluğu: 100px (Masaüstü), 0px (Tablet ve Telefon)
• Üst Dolgu: 0px
• Alt Dolgu: 0px

İkinci Sütun Metin Modülü

Metin Ayarları

Ardından, ikinci sütuna bir Metin Modülü ekleyin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 12px
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 2.2em
• Metin Yönü: Merkez

boyutlandırma

Boyutlandırma alt kategorisini açın ve '%75' Genişlik uygulayın.

aralık

Son olarak, Aralık alt kategorisi için aşağıdaki ayarların geçerli olduğundan emin olun:

• Üst Kenar Boşluğu: 120px (Masaüstü), -80 (Tablet ve Telefon)
• Sol Kenar Boşluğu: -240px (Masaüstü), 80 (Tablet), 45 (Telefon)
• Üst, Sağ, Alt ve Sol Dolgu: 50px (Masaüstü ve Tablet), 20px (Telefon)

Sonuç

Tamamlandığında, masaüstünde aşağıdaki tasarımı fark edeceksiniz:

Ve mobilde:

Üçüncü Örnek Oluşturmaya Başlayın

Sırada, şuna benzeyen aşağıdaki örneğimiz var:

Yeni Bölüm Ekle

Bir kez daha, yeni bir standart bölüm ekleyin.

İki Sütunlu Satır Ekle

Bu satır için ihtiyacımız olacak sütun yapısı şudur:

Sütun 1 Arka Plan Rengi

Satır ayarlarını açın ve Sütun 1 Arka Plan Rengi olarak '#e8e8e8' kullanın.

Sütun 2 Gradyan Arka Planı

İkinci sütun için gerekli Gradyan Arka Planı şudur:

• İlk Renk: #e8e8e8
• İkinci Renk: rgba(255,255,255,0)
• Sütun 2 Gradyan Türü: Doğrusal
• Sütun 2 Gradyan Yönü: 147deg
• 2. Sütun Başlangıç ​​Konumu: %25
• Sütun 2 Bitiş Konumu: %9

boyutlandırma

Boyutlandırma alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: %100
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Son olarak, ilk sütunun üst ve alt dolgusuna '70px' ekleyin.

İlk Sütun Görüntü Modülü

hizalama

İlk sütuna bir Görüntü Modülü ekleyin, sol Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

aralık

Aralık alt kategorisini açın ve sol kenar boşluğuna '-300px' ekleyin.

İkinci Sütun Metin Modülü

Arka plan rengi

İkinci sütuna bir Metin Modülü ekleyin ve arka plan rengi olarak '#3d3d3d' kullanın.

Metin Ayarları

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

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 12px
• Metin Rengi: #FFFFFF
• Metin Satırı Yüksekliği: 2.2em
• Metin Yönü: Merkez

boyutlandırma

Boyutlandırma alt kategorisini açın ve Genişlik için '%75'i kullanın.

aralık

Son olarak, Aralık alt kategorisi için aşağıdaki ayarları kullanın:

• Üst Kenar Boşluğu: 130px (Masaüstü), -200 (Tablet ve Telefon)
• Sol Kenar Boşluğu: -180px (Masaüstü), 80 (Tablet), 50 (Telefon)
• Üst, Sağ, Alt ve Sol Dolgu: 50px (Masaüstü ve Tablet), 20px (Telefon)

Sonuç

Bittiğinde, masaüstündeki sonuç şöyle görünecektir:

Ve mobilde şöyle:

Dördüncü Örnek Oluşturmaya Başlayın

Oluşturacağımız dördüncü örnek şuna benzer:

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya standart bir bölüm ekleyerek başlayın.

İki Sütunlu Satır Ekle

Ardından, ona iki sütunlu bir satır ekleyin.

boyutlandırma

Boyutlandırma alt kategorisini açın ve aşağıdaki değişiklikleri yapın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: %60
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

İlk Sütun İlk Görüntü Modülü

hizalama

İlk sütuna bir Görüntü Modülü ekleyin, doğru Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

boyutlandırma

Bu Görüntü Modülünün Boyutlandırma alt kategorisine gidin, '%89' Genişlik kullanın ve doğru Modül Hizalamasını seçin.

görünürlük

Gelişmiş sekmesine gidin ve telefon ve tablette Görüntü Modülünü devre dışı bırakın. Bunu, kullanılan 3 Görüntü Modülü için yapacağız. Hangisinin tablette ve telefonda görünmesini istediğinize kendiniz karar verebilirsiniz, bizim durumumuzda bu, sağ üst köşedeki resim olacaktır.

Birinci Sütun İkinci Görüntü Modülü

hizalama

Başka bir Görüntü Modülü ekleyin, doğru Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

Sınır

Aşağı kaydırın ve aşağıdaki kenarlığı kullanın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #FFFFFF
• Kenar Genişliği: 5px
• Kenar Stili: Katı

görünürlük

Son olarak, Gelişmiş sekmesine gidin ve telefon ve tablette Görüntü Modülünü devre dışı bırakın.

İkinci Sütun İlk Görüntü Modülü

hizalama

İkinci sütuna bir sonraki Görüntü Modülünü ekleyin, soldaki Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

Sınır

Aşağı kaydırın, Kenarlık alt kategorisini açın ve aşağıdaki ayarların uygulanmasını sağlayın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #FFFFFF
• Kenar Genişliği: 4px
• Kenar Stili: Katı

İkinci Sütun İkinci Görüntü Modülü

hizalama

Son Görüntü Modülünü ikinci sütuna ekleyin, sol Görüntü Hizalamasını kullanın ve 'Mobilde Her Zaman Görüntüyü Ortala' seçeneğini etkinleştirin.

boyutlandırma

Ardından, boyutlandırma alt kategorisini açın, '%89' Genişlik kullanın ve sol Modül Hizalamasını seçin.

görünürlük

Bu Görüntü Modülünü telefon ve tablette de devre dışı bırakın.

Tek Sütunlu Satır Ekle

Önceki satırı bitirdikten sonra devam edin ve bir tane daha ekleyin. Bu sefer, satırın yalnızca bir sütuna ihtiyacı olacak.

boyutlandırma

Satır ayarlarının Tasarım sekmesine gidin, 'Özel Genişliği Kullan' seçeneğini etkinleştirin ve Özel Genişlik olarak '581px'i kullanın.

Metin Modülü

Arka plan rengi

Bu yeni satıra bir Metin Modülü ekleyin ve arka plan rengi olarak 'rgba(255,255,255,0.92)' seçeneğini seçin.

Metin Ayarları

Tasarım sekmesine gidin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 12px
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 2.2em
• Metin Yönü: Merkez

boyutlandırma

Ardından Boyutlandırma alt kategorisini açın, Genişliğe '75%' ekleyin ve orta Modül Hizalamasını seçin.

aralık

Son olarak, aşağıdaki ayarları Aralık alt kategorisine uygulayın:

• Üst Kenar Boşluğu: -580px (Masaüstü), -200 (Tablet ve Telefon)
• Sol Kenar Boşluğu: – 180px (Masaüstü), 80 (Tablet), 50 (Telefon)
• Üst, Sağ, Alt ve Sol Dolgu: 50px

Sonuç

Bittiğinde, masaüstünde aşağıdaki sonuca şahit olabileceksiniz:

Ve mobilde aşağıdakiler:

Beşinci Örneği Oluşturmaya Başlayın

Size nasıl yeniden oluşturulacağını göstereceğimiz son örnek şudur:

Tam Genişlik Bölümü Ekle

Sayfanıza tam genişlikte bir bölüm ekleyerek başlayın.

Tam Genişlikli Görüntü Modülü

Bu Tam Genişlik bölümünde, bir Tam Genişlikli Görüntü Modülü ekleyin.

Yeni Bölüm Ekle

Önceki bölümün hemen altına başka bir bölüm ekleyin. Bu sefer, bölüm tam genişlik yerine standart olmalıdır.

Üç Sütun Satırı Ekle

Bu yeni standart bölüme üç sütunlu bir satır ekleyin.

Sütun 1, 2 ve 3 Arka Plan Rengi

Satır ayarlarını açın ve sütunlara aşağıdaki arka plan renklerini atayın:

• Sütun 1: #eaeaea
• Sütun 2: rgba(12,113,195,0.17)
• Sütun 3: rgba(131,0.233,0.09)

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisinde aşağıdaki değişiklikleri yapın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ardından Aralık alt kategorisini açın, her sütunun üst kenarına '-60px' ve alt dolgusuna '50px' ekleyin.

Birinci Sütun Metin Modülü

Arka plan rengi

Birinci Sütuna bir Metin Modülü ekleyerek ve arka plan rengi olarak 'rgba(255,255,255,0.89)' kullanarak devam edin.

Metin Ayarları

Tasarım sekmesine gidin ve aşağıdaki ayarları Metin alt kategorisine uygulayın:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 12px
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 2.2em
• Metin Yönü: Merkez

Sınır

Kenarlık alt kategorisini açın ve aşağıdaki ayarlardan yararlanın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #FFFFFF
• Kenar Genişliği: 17px
• Kenar Stili: Katı

boyutlandırma

Ardından, '%75' Genişlik kullanın ve Boyutlandırma alt kategorisinde orta Modül Hizalamasını seçin.

aralık

Son olarak, Aralık alt kategorisini açın ve aşağıdaki ayarların uygulanmasını sağlayın:

• Üst Kenar Boşluğu: -300px (Masaüstü), 0px (Tablet ve Telefon)
• Üst, Sağ, Alt, Sol Dolgu: 50px (Masaüstü ve Tablet), 20px (Telefon)

Metin Modülünü İki Kez Klonla ve Diğer İki Sütuna Yerleştir

Devam edin ve Metin Modülünü iki kez klonlayın. Ardından, klonların her birini kalan iki sütuna yerleştirin.

Aralığı Değiştir İkinci Sütun Metin Modülü

İkinci sütuna yerleştirilen Metin Modülünün Üst Kenar Boşluğunu '-220px' olarak değiştirmemiz gerekecek.

Aralığı Değiştir Üçüncü Sütun Metin Modülü

Üçüncü sütundaki Metin Modülü için de aynı şey geçerlidir ancak değer bunun yerine '-140px'dir.

Sonuç

Ve burada masaüstünde sonuç var:

Ve mobilde:

Son düşünceler

Bu gönderide, size kendi web sitenizde kullanabileceğiniz bazı güzel ve eğlenceli editoryal tarzda bölüm düzenleri gösterdik. Bu örnekler Divi'nin seçeneklerinin ne kadar esnek olduğunu ve ne kadar yaratıcı olabileceğinizi gösteriyor. Herhangi bir sorunuz veya öneriniz 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!

Öne Çıkan Görsel Julia Tim / Shutterstock.com