Divi'nin Yeni Tasarım Özelliklerini Kullanarak Güzel Bölüm Geçişleri Nasıl Oluşturulur

Bu Divi eğitiminde, yerleşik Divi seçeneklerinden başka bir şey kullanmadan güzel bölüm geçişlerinin nasıl oluşturulacağını göstereceğiz.

Bölümler, web sitenizde paylaştığınız tüm içeriğin temelidir. Her bölüm bir bölümdür ve bir bölümden diğerine geçmek hikaye anlatma sürecinin bir parçasıdır. Bu geçişi olabildiğince yumuşak yapmak, ifade etmeye çalıştığınız mesajı vurgulayacaktır. Bu konuda size yardımcı olmak için, bir sonraki web sitesi projeniz için nasıl güzel bölüm geçişleri oluşturabileceğinizi göstereceğiz.

Gizlice Bakış

Tüm farklı bölüm geçişlerine ayrı ayrı dalmadan önce, neler bekleyebileceğinize bir göz atalım:

Divi'nin Yeni Tasarım Özelliklerini Kullanarak Güzel Bölüm Geçişleri Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Bölümleri Yeniden Oluştur

Tüm örneklerde kullanacağımız iki bölümü yeniden oluşturarak başlayacağız. Bu iki bölümde, geçişlerden en iyi şekilde yararlanmak için gerekli dolguyu kullandık. Bununla birlikte, farklı yükseklikte bölümler kullanıyorsanız, bölümleri mükemmel şekilde eşleştirmek için kullanılan degrade arka planlarını biraz ayarlamanız gerekebilir.

İlk Bölümü Oluştur

İlk standart bölümü oluşturarak ve tam genişlikte bir satır seçerek başlayın.

Bölüm Ayarları

Tasarım sekmesinin Aralık alt kategorisine ekleyebileceğiniz '300 piksel'lik bir üst ve alt dolguya ihtiyacımız olacak.

İlk Metin Modülü

Ardından, tam genişlik satırımıza bir Metin Modülü ekleyeceğiz. Görünmesini istediğiniz metni yazın ve Tasarım sekmesine gidin. Tasarım sekmesinde, Metin alt kategorisi için aşağıdaki ayarları kullanın:

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

İkinci Metin Modülü

İkinci Metin Modülü için de aynısını yapın, ancak bunun yerine aşağıdaki ayarları kullanın:

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

Düğme Modülü

Son olarak, bir Düğme Modülü de ekleyeceğiz. Tasarım sekmesinde merkez hizalamayı seçerek başlayın.

Ardından, Düğme alt kategorisini açın, 'Düğme için Özel Stilleri Kullan' seçeneğini etkinleştirin ve Düğme Metin Boyutu olarak '20'yi seçin.

Hala Düğme alt kategorisindeyken, düğme için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: #2b87da
• İkinci Renk: #29c4a9
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 162deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

İkinci Bölüm Oluştur

Başka bir standart bölüm ekleyin ancak bunun yerine üç sütunlu bir satır seçin.

Bölüm Ayarları

İkinci bölüm, üst ve alt kısım için de bir '300 piksel' dolgu kullanacaktır.

Bulanıklık Modülü

Ardından, satırın ilk sütununa bir Bulanıklık Modülü ekleyeceğiz. Görünmesini istediğiniz metne karar verdikten sonra, İçerik sekmesini aşağı kaydırın, 'Simge Kullan' seçeneğini etkinleştirin ve bir simge seçin.

Bunu yaptıktan sonra Tasarım sekmesine gidin ve Simge Alt Kategorisi için aşağıdaki ayarları kullanın:

• Simge Rengi: #515151
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 55px

Ardından, Başlık Metni alt kategorisi için aşağıdaki ayarların geçerli olduğundan emin olun:

• Başlık Yazı Tipi: Comfortaa
• Başlık Metni Hizalama: Merkez
• Başlık Yazı Tipi Boyutu: 18

Ve son olarak, Gövde Metni Alt Kategorisi için ayarlar şunlardır:

• Gövde Yazı Tipi: Comfortaa
• Gövde Metni Hizalama: Orta
• Gövde Yazı Tipi Boyutu: 14
• Gövde Çizgisi Yüksekliği: 1.7em

Klon Blurb Modülü

Blurb Module'ü oluşturduktan sonra, onu iki kez klonlayın ve satırın diğer iki sütununa yerleştirin.

1. Tüm Yol Çapraz

Bölümleri oluşturduğumuza göre, bölüm geçişlerini eklemeye başlamanın zamanı geldi. Size nasıl oluşturulacağını göstereceğimiz ilk örnek, basit çapraz çizgilerden oluşuyor.

Birinci Bölümün Gradyan Arka Planı Ayarları

İlk bölümün ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:

• İlk Renk: #dddddd
• İkinci Renk: #f7f7f7
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 183deg
• Başlangıç ​​Konumu: %85
• Bitiş Konumu: %70.05

İkinci Bölümün Gradyan Arka Planı Ayarları

İkinci bölüm, bunun yerine aşağıdaki gradyan arka plan ayarlarına ihtiyaç duyacaktır:

• İlk Renk: #f7f7f7
• İkinci Renk: #dddddd
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 183deg
• Başlangıç ​​Konumu: %85
• Bitiş Konumu: %69,05

İkinci Bölümün Üst Dolgusunu Kaldır

Bu örnek için yapmanız gereken son şey, ikinci bölümün üst dolgusunu çıkarmaktır.

2. Benimle Yarı Yolda Buluş

Paylaşmak istediğimiz bir sonraki örnek, iki zıt gradyan arka planın kullanıldığı çok zarif bir örnektir. Bu efekti kullanarak bölümler birbirini takip ediyormuş gibi hissettiriyor.

Birinci Bölümün Gradyan Arka Planı Ayarları

İlk bölüm için aşağıdaki degrade arka plan ayarlarına ihtiyacımız olacak:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: rgba(224,43,32,0.07)
• Gradyan Türü: Radyal
• Radyal Yön: Sol Üst
• Başlangıç ​​Konumu: %60
• Bitiş Konumu: %50

İkinci Bölümün Gradyan Arka Planı Ayarları

İkinci bölüm, aşağıdaki gradyan arka planının keyfini çıkaracaktır:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: rgba(224,43,32,0.33)
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Alt
• Başlangıç ​​Konumu: %58
• Bitiş Konumu: %50

3. Füzyon

Bir sonraki örnek diğerlerinden biraz farklı. Aşağıdaki resimde göreceğiniz sonucu elde etmek için her iki bölüm arasında fazladan bir bölüme ihtiyaç duyacaktır.

Birinci Bölümün Gradyan Arka Planı Ayarları

İlk bölümünüz için aşağıdaki gradyan arka planına ihtiyacınız olacak:

• İlk Renk: rgba(12,113,195,0.19)
• İkinci Renk: rgba(255,255,255,0.39)
• Gradyan Türü: Radyal
• Radyal Yön: Sol Alt
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

İkinci Bölümün Gradyan Arka Planı Ayarları

İkinci bölüm için aşağıdaki gradyan arka plan ayarlarını kullanacağız:

• İlk Renk: rgba(224,43,32,0.17)
• İkinci Renk: rgba(255,255,255,0.39)
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Üst
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Araya Yeni Standart Bölüm Ekle

Her iki bölüme degrade arka planları ekledikten sonra, aralarına bir bölüm eklemenin zamanı geldi.

Yeni Bölüme Degrade Arka Plan Rengi Ekle

Bu yeni bölüm, aşağıdaki ayarları kullanarak degrade bir arka plana ihtiyaç duyacaktır:

• İlk Renk: rgba(12,113,195,0.19)
• İkinci Renk: rgba(224,43,32,0.17)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 92deg
• Başlangıç ​​Konumu: %43
• Bitiş Konumu: %62

4. Ters

Ardından, diğerleri kadar çarpıcı olmayan ama yine de bölümlerinize ince bir dokunuş katmayı başaran bir bölüm geçişimiz var.

Birinci Bölümün Gradyan Arka Planı Ayarları

İlk bölümün gradyan arka planı şu şekildedir:

• İlk Renk: #f2f2f2
• İkinci Renk: rgba(104,153,193,0.58)
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Alt
• Başlangıç ​​Konumu: %7,9
• Bitiş Konumu: %7,9

İkinci Bölümün Gradyan Arka Planı Ayarları

Ve ikinci degrade arka planı, aşağıdaki degrade arka plan ayarlarına ihtiyaç duyacaktır:

• İlk Renk: rgba(104,153,193,0.58)
• İkinci Renk: #f2f2f2
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Üst
• Başlangıç ​​Konumu: %8
• Bitiş Konumu: %8

5. İşaretçiler

Beşinci örnek, diğerlerinden biraz daha temiz ve minimalist görünüyor. İşaretçileri veya daireleri (veya her ikisini) görerek geçişi iki şekilde algılayabilirsiniz.

Birinci Bölümün Gradyan Arka Planı Ayarları

İlk bölüm için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: #f4f4f4
• İkinci Renk: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %88
• Bitiş Konumu: %88.05

İkinci Bölümün Gradyan Arka Planı Ayarları

Son olarak, aşağıdaki degrade arka plan ayarlarını ikinci bölüme uygulayın:

• İlk Renk: rgba(43,135,218,0)
• İkinci Renk: rgba(12,113,195,0.43)
• Gradyan Türü: Radyal
• Radyal Yön: Alt
• Başlangıç ​​Konumu: %87
• Bitiş Konumu: %87

6. Bulmaca

Son örnek kesinlikle bölümlerin birbirine ait olduğunu hissettiriyor.

Birinci Bölümün Gradyan Arka Planı Ayarları

İlk bölümün ayarlarını açın ve aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(160,181,193,0.46)
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %56.3
• Bitiş Konumu: %43

İkinci Bölümün Gradyan Arka Planı Ayarları

Ardından, ikinci bölüm için aşağıdaki degrade arka plan ayarlarını kullanın:

• İlk Renk: rgba(242,242,242,0)
• İkinci Renk: rgba(160,181,193,0.46)
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %56
• Bitiş Konumu: %40

Birinci Bölümün Dolgusunu Değiştir

İki bölümün daha iyi oturması için ilk bölümün üst ve alt dolgusunu '150px' olarak değiştireceğiz.

İkinci Bölümün Üst Dolgusunu Kaldır

Son olarak, ikinci bölümün üst dolgusunu da kaldıracağız.

Son düşünceler

Bölüm geçişleri, farklı bölümleri ve amaçlarını birbirine bağlamaya yardımcı olur. Bu gönderide, Divi'nin yerleşik seçeneklerinden başka bir şey kullanmadan yeniden oluşturabileceğiniz 6 örnek paylaştık. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin!

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: NikVector / Shutterstock.com