Yeni Divi Seçenekleriyle Bölücü Modülü Kullanmanın 10 Eğlenceli Yolu

Bugünün Divi eğitiminde, önceki güncellemelerde Divi'ye eklenen yeni seçeneklerle neler yapabileceğinize dair bir fikir paylaşacağız. Daha kesin; Bu yeni değişikliklerle Divider Module'ü şekillendirmenin 10 ilginç yolunu paylaşacağız. Olasılıklar gerçekten sonsuzdur, ancak bu gönderi bir sonraki projeniz için ihtiyaç duyduğunuz ilhamı bulmanıza yardımcı olabilir.

Gizlice Bakış

Bu eğitimle ilgili en iyi şeylerden biri, herhangi bir ek CSS (veya bu konuda herhangi bir kod) kullanmayacağız. Oluşturacağımız tüm örneklerde sadece Divider Module içerisinde bulunan seçenekler kullanılacaktır. Her birini adım adım nasıl oluşturacağınızı göstermeden önce, oluşturacağımız bölücülere hızlıca bir göz atalım:

Yeni Divi Seçenekleriyle Bölücü Modülü Kullanmanın 10 Eğlenceli Yolu

Youtube Kanalımıza Abone Olun

Yeniden Kullanılabilir Bölüm Oluştur

Yapmanız gereken ilk şey, 10 örneğin tamamında kullanacağımız bölümü oluşturmak. Elbette bölücüleri başka bağlamlarda da kullanabilirsiniz, ancak önce bu bölümü yaparak, kendi Divi Builder'ınızla oynama ve hangisini tercih ettiğinizi görme fırsatına sahip olacaksınız.

Yeni Sayfa Oluştur

WordPress panonuzda yeni bir sayfa oluşturarak başlayın, Divi Builder'ı etkinleştirin ve Visual Builder'ı açın.

Üç Sütunlu Satırla Bölüm Oluştur

Yeni sayfanıza girdikten sonra standart bir bölüm oluşturun ve bu standart bölüm içinde üç sütunlu bir satır kullanın. Bölüm arka plan rengi olarak '#f4f4f4' kullandık.

İlk Metin Modülünü Ekle

Ardından, ilk Metin Modülünü satırın ilk sütununa ekleyin. Ayarları açın, görünmesini istediğiniz metni yazın ve Tasarım sekmesine gidin. Tasarım sekmesinde, Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Yazı Tipi: Istakoz
• Metin Yazı Tipi Boyutu: 35
• Metin Rengi: #000000
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

İkinci Metin Modülü Ekle

İlk Metin Modülünü ekledikten sonra, hemen altına bir tane daha ekleyebilirsiniz. Görünmesini istediğiniz metni ekleyin ve Tasarım sekmesine gidin. Tasarım sekmesinde aşağıdaki değişikliklerin geçerli olduğundan emin olun:

• Metin Yazı Tipi: Roboto
• Metin Yazı Tipi Boyutu: 14
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

Metin Modüllerini Klonla ve Diğer İki Sütundaki Yeri

Bu iki metin modülünü oluşturduktan sonra, bunları satırın diğer iki sütununa da yerleştirebilirsiniz.

Başlamadan Önce

Divi'nin ayırıcı modülünü şekillendirmenin 10 eğlenceli yolunu paylaşacağız. Örneklerin her biri birbiriyle uyumlu üç bölücüye sahip olacaktır. Ayarların çoğu, üç modül için de aynıdır. Size her biri için geçerli olan ayarları göstererek başlayacağız ve diğer iki bölücüde yapmanız gereken değişiklikleri göstererek devam edeceğiz. Bu nedenle, ilk bölücüyü her bitirdiğinizde, onu klonlayın ve diğer iki sütuna yerleştirin. Bunu yaptıktan sonra, diğer iki bölücüde değişiklikler yapabilirsiniz.

Not: Bölücülerin her biri için İçerik sekmesinde 'Bölücüyü Göster' seçeneğini etkinleştirmeniz gerekir.

1. Bulanık Üçgen

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

İçerik sekmesinde aşağıdaki arka plan ayarlarından yararlanacağız:

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

Tasarım Sekmesi

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisi için aşağıdaki ayarların geçerli olduğundan emin olun:

• Bölücü Ağırlığı: 0
• Yükseklik: 25 piksel
• Genişlik: %35
• Modül Hizalaması: Merkez

Aynı sekmeyi aşağı kaydırın ve Animasyon alt kategorisinde aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Merkez
• Animasyon Süresi: 1200ms
• Animasyon Yoğunluğu: %80

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İçerik sekmesinde, yapmanız gereken tek şey ilk degrade rengini '#0c71c3' olarak değiştirmek.

Tasarım Sekmesi

Ardından, Animasyon alt kategorisine '250ms'lik bir animasyon gecikmesi eklemeniz gerekecek.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Son ayırıcı için ilk degrade rengini '#8300e9' olarak değiştirin.

Tasarım Sekmesi

Son bölücünün Animasyon alt kategorisine eklemeniz gereken animasyon gecikmesi '500ms'dir.

2. Renk Gölgesi

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

İçerik sekmesinde aşağıdaki degrade arka plan ayarlarını kullanın:

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

Tasarım Sekmesi

Tasarım sekmesinde yapmanız gereken ilk şey, ayırıcının rengini '#000000' olarak değiştirmek.

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

Aşağı kaydırmaya devam edin ve Boyutlandırma alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Bölücü Ağırlığı: 2
• Yükseklik: 20 piksel
• Genişlik: %70
• Modül Hizalaması: Merkez

Son olarak, Animasyon alt kategorisi için aşağıdaki seçenek ayarlarını kullanın:

• Animasyon Stili: Sıçrama
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Merkez
• Animasyon Süresi: 2000ms

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

Degrade arka planının ilk degrade rengini '#0c71c3' olarak değiştirin.

Tasarım Sekmesi

Animasyon alt kategorisinde, Animasyon Gecikmesi seçeneğine '350ms' ekleyin.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Üçüncü bölücüde de aynı değişikliği yapın ama bunun yerine '#8300e9' rengini kullanın.

Tasarım Sekmesi

Ve son olarak, '700ms'lik bir animasyon gecikmesi ekleyin.

3. Gradyan Serisi

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

İlk bölücü için aşağıdaki degrade arka plan ayarlarını kullanın:

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

Tasarım Sekmesi

Tasarım sekmesinde, ayırıcınızın rengi olarak '#FFFFFF' öğesini seçin.

Ardından, Stiller alt kategorisinde aşağıdaki değişiklikleri yapın:

• Bölücü Stili: Katı
• Bölücü Konumu: Dikey Ortalanmış

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

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

Aralık alt kategorisindeki alt dolguya da '15px' ekleyin.

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

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sol
• Animasyon Süresi: 2000ms
• Animasyon Yoğunluğu: %100

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İkinci bölücü için degrade arka plan ayarları biraz farklıdır:

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

Tasarım Sekmesi

Boyutlandırma alt kategorisinde, Modül Hizalamasını orta olarak değiştirin.

Son olarak, Animasyon Yönünü de merkezileştirin.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Üçüncü bölücü, başka bir degrade arka planı da içerir:

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

Tasarım Sekmesi

İkinci bölücüde yaptığımız değişiklikleri yapacağız ama merkez yerine sağı kullanacağız.

4. Yuvarlanan Daire

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

Aşağıdaki degrade arka plan ayarlarını uygulayarak başlayın:

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

Tasarım Sekmesi

Tasarım sekmesinde yapmanız gereken ilk şey, ayırıcı için '#000000' rengini kullanmaktır.

Ardından, Bölücü Stiliniz olarak 'Katı'yı ve Bölücü Konumunuz olarak 'Dikey Ortalanmış'ı seçin.

Devam ederek, Boyutlandırma alt kategorisinde aşağıdaki değişiklikleri yapın:

• Bölücü Ağırlığı: 2
• Yükseklik: 50 piksel
• Genişlik: %40
• Modül Hizalaması: Merkez

Son olarak, Animasyon alt kategorisi aşağıdaki ayarlara ihtiyaç duyacaktır:

• Animasyon Tarzı: Rulo
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Merkez
• Animasyon Süresi: 1500ms
• Animasyon Gecikmesi: 850ms
• Animasyon Yoğunluğu: %60

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İlk degrade rengini '#0c71c3' olarak değiştirin.

Tasarım Sekmesi

Ve Animasyon Gecikmesini '0ms' olarak değiştirin.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Son ayırıcı için yalnızca ilk degrade arka plan rengini '#8300e9' olarak değiştirmeniz gerekir.

5. Parantez

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

Aşağıdaki degrade arka plan ayarlarını kullanın:

• İlk Renk: #e0d1b1
• İkinci Renk: #e09900
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %36
• Bitiş Konumu: %100

Tasarım Sekmesi

Ayırıcının renginin, bölümün arka plan rengiyle aynı olduğundan emin olun. Bu durumda, bu '#f4f4f4'.

Tasarım sekmesini aşağı kaydırın ve Bölücü Tarzınız olarak 'Çizgili' ve Bölücü Konumunuz olarak 'Üst'ü kullanın.

Aşağıdaki ayarları Boyutlandırma alt kategorisine uygulayın:

• Bölücü Ağırlığı: 100
• Yükseklik: 18 piksel
• Genişlik: %60
• Modül Hizalaması: Merkez

Ayrıca üst, sağ ve sol dolguya '15px' eklemeniz gerekecek.

Son olarak, aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Stili: Yakınlaştır
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Merkez
• Animasyon Süresi: 1000ms
• Animasyon Yoğunluğu: %80

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

Degrade arka planın renklerini '#87acc1' ve '#0c71c3' olarak değiştirin.

Tasarım Sekmesi

Ardından, Animasyon Süresini '1300ms' ve Animasyon Gecikmesini '250ms' olarak değiştirin.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Üçüncü bölücüde kullanılan gradyan renkleri '#c9a4e8' ve '#8300e9'dur.

Tasarım Sekmesi

Animasyon Süresini '1300ms' ve Animasyon Gecikmesini '500ms' olarak değiştirin.

6. Çift Hatlar

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

Aşağıdaki degrade arka plan ayarlarını uygulayın:

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

Tasarım Sekmesi

Ayırıcı renginiz olarak '#000000' seçin.

Stiller alt kategorisinde, Bölücü Stiliniz olarak 'Çift' ve Bölücü Konumunuz olarak 'Dikey Ortalanmış'ı kullanın.

Devam ederek, Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

• Bölücü Ağırlığı: 5
• Yükseklik: 25 piksel
• Genişlik: %35
• Modül Hizalama: Sol

Son olarak, aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Tarzı: Rulo
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sol
• Animasyon Süresi: 1000ms
• Animasyon Yoğunluğu: %50

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İlk degrade rengini '#0c71c3' olarak değiştirin.

Tasarım Sekmesi

Ardından, ikinci bölücü için farklı bir animasyon kullanın:

• Animasyon Stili: Soluk
• Animasyon Tekrarı: Bir kez
• Animasyon Süresi: 1400ms

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Üçüncü bölücü için, ilk degrade arka plan rengi olarak '#8300e9' kullanın.

Tasarım Sekmesi

Tasarım sekmesinde değiştirmeniz gereken tek şey, bu durumda 'Doğru' olan Animasyon Yönüdür.

7. Köprü

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

Arka plana '#8300e9' atayarak başlayın.

Tasarım Sekmesi

Bu durumda '#f4f4f4' olan ayırıcı renginiz olarak bölüm arka plan rengini kullanarak devam edin.

Ardından, Bölücü Tarzınız olarak 'Noktalı' ve Bölücü Konumunuz olarak 'Üst'ü kullanın.

Boyutlandırma alt kategorisinde aşağıdaki ayarları kullanın:

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

Bazı özel dolgulara da ihtiyacımız olacak:

• Üst Dolgu: 7px
• Sağ Dolgu: -7px
• Sol Dolgu: -7px

Kullanacağımız animasyon aşağıdaki ayarlara sahiptir:

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sol
• Animasyon Süresi: 800ms
• Animasyon Gecikmesi: 400ms
• Animasyon Yoğunluğu: %30

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İkinci bölücü için arka planı '#0c71c3' olarak değiştirin.

Tasarım Sekmesi

Farklı bir animasyon da kullanacağız:

• Animasyon Stili: Yakınlaştır
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Merkez
• Animasyon Süresi: 800ms
• Animasyon Yoğunluğu: %30

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Üçüncü bölücü, arka plan rengi olarak '#8300e9'u kullanacaktır.

Tasarım Sekmesi

Üçüncü bölücünün animasyonu da biraz farklıdır:

• Animasyon Stili: Yakınlaştır
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sağ
• Animasyon Süresi: 800ms
• Animasyon Gecikmesi: 400ms
• Animasyon Yoğunluğu: %30

8. Zarafet

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

İlk Bölücüye aşağıdaki gradyan arka planını ekleyerek başlayın:

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

Tasarım Sekmesi

Ayırıcınız için '#8300e9' rengini kullanın.

Ardından, Bölücü Tarzınız olarak 'noktalı' ve Bölücü Konumunuz olarak 'Dikey Ortalanmış'ı kullanın.

Ayrıca '40px'lik bir üst dolguya ihtiyacımız olacak.

Ve aşağıdaki ayarlara sahip bir animasyon:

• Animasyon Stili: Sıçrama
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1000ms

İkinci Bölücü Modül Ayarları

Tasarım Sekmesi

İkinci bölücü için rengi '#0c71c3' olarak değiştirin.

Animasyonun da bazı değişikliklere ihtiyacı olacak:

• Animasyon Yönü: Merkez
• Animasyon Süresi 1500ms

Üçüncü Bölücü Modül Ayarları

Tasarım Sekmesi

Üçüncü bölücü, rengi olarak '#8300e9'u kullanacak.

Ve Animasyon Yönü olarak 'Yukarı' olacak.

9. İncelik

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

Degrade arka planı için aşağıdaki ayarları seçin:

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

Tasarım Sekmesi

Boyutlandırma alt kategorisinde aşağıdaki ayarlara ihtiyacınız olacak:

• Bölücü Ağırlığı: 0
• Yükseklik: 4 piksel
• Genişlik: %100

Son olarak, kullanacağımız animasyon aşağıdaki ayarlara sahiptir:

• Animasyon Stili: Sıçrama
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Yukarı
• Animasyon Süresi 1800ms

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İkinci bölücü için, ilk degrade arka plan rengini '#0c71c3' olarak değiştirin.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Aynı değişikliği üçüncü bölücüde de yapın ama bunun yerine '#8300e9' mor rengini kullanın.

10. Parıltı

Birinci Bölücü Modül Ayarları

İçerik Sekmesi

Son ayırıcı serisi için aşağıdaki gradyan arka plan ayarlarından yararlanın:

• İlk Renk:
• İkinci Renk:
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %38

Tasarım Sekmesi

Bölüm arka plan rengini de ayırıcı renginiz olarak seçin, bu durumda '#f4f4f4' olur.

Ardından, Bölücü Tarzınız olarak 'Çizgili' ve Bölücü Konumunuz olarak 'Dikey Ortalanmış'ı kullanın.

Boyutlandırma alt kategorisinde aşağıdaki ayarları kullanın:

• Bölücü Ağırlığı: 70
• Yükseklik: 20 piksel
• Genişlik: %100

Son olarak, aşağıdaki seçeneklere sahip bir animasyon kullanacağız:

• Animasyon Stili: Soluk
• Animasyon Tekrarı: Bir kez
• Animasyon Süresi: 1800ms
• Animasyon Gecikmesi: 800ms

İkinci Bölücü Modül Ayarları

İçerik Sekmesi

İkinci bölücü için ikinci degrade arka plan rengini '#0c71c3' olarak değiştirin.

Tasarım Sekmesi

Ve '250ms'lik bir Animasyon Gecikmesi ekleyin.

Üçüncü Bölücü Modül Ayarları

İçerik Sekmesi

Son bölücü için ikinci degrade arka plan rengini '#8300e9' olarak değiştirin.

Tasarım Sekmesi

Ve Animasyon Gecikmesini '0ms' olarak ayarlayarak bitirin.

Son düşünceler

Yeni Divi seçenekleriyle, her modülün yerleşik ayarlarıyla birçok yeni yaratıcı şey mümkün. Bu gönderide, bu seçeneklerin tasarımınızı Bölücü Modül aracılığıyla geliştirmenize nasıl yardımcı olabileceğini özellikle gösterdik. 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!

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