Divi'de Bölüm Bölücü Kaydırma Efektleri Nasıl Oluşturulur

Bölüm bölücü kaydırma efektleri oluşturmak, Divi web sitenize hayat katabilecek basit ve eğlenceli bir tekniktir. Bölüm ayırıcı, sayfa içeriği geçişlerinize yaratıcılık dokunuşu eklemek için kullanışlı, çok yönlü bir tasarım öğesi olmaya devam ediyor. Ancak Divi'nin kaydırma efektleriyle bölüm ayırıcılar daha da ilginç hale geliyor! İşin püf noktası, bölücü seçim stiline ayrılmış bir bölümü izole etmektir. Ardından, sayfa içeriği için arka plan olarak güzel kaydırma efektleri oluşturmak için bölüme kaydırma ile oluşturulan her türlü hareketi ekleyebilirsiniz.

Başlayalım!

Gizlice Bakış

İşte bugün inşa edeceğimiz tasarımlara bir göz atın.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi ile Scroll'da Animasyonlu Bölüm Bölücüler Nasıl Oluşturulur

İki İçerik Bölümünü Oluşturma

Satır ekle

Başlamak için, varsayılan bölümün içinde tek sütunlu bir satır oluşturun.

Bölüm Marjı (test için)

Test amacıyla, kaydırma için yerimiz olması için bölüme biraz üst kenar boşluğu ekleyin. Bölüm ayarlarını açın ve aşağıdakileri ekleyin:

• Üst Kenar: 80vh

Metin Modülü Ekle

Tek sütunlu satırın içine yeni bir metin modülü ekleyin.

Metin Modülü İçeriği

Gövde içeriğinin içine aşağıdaki H2 başlığını ekleyin:

<h2>Moving Section Dividers</h2>

Metin Modülü Tasarımı

Tasarım ayarları altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi: Roboto
• Metin Hizalama: Merkez
• Başlık 2 Metin Rengi: #bae0d8
• Başlık 2 Metin Boyutu: 80px (masaüstü), 50px (tablet), 30px (telefon)

İkinci İçerik Bölümünü Ekle

Önceki bölümün altına yeni bir normal bölüm ekleyin.

Satır ekle

Yeni bölümün içine tek sütunlu bir satır ekleyin.

Metin Modülü Ekle

Ardından satıra yeni bir metin modülü ekleyin.

Metin Modülü Tasarımı

Varsayılan dolgu içeriğini şimdilik gövde içinde tutabiliriz. Tasarım sekmesine geçelim ve aşağıdakileri güncelleyelim:

• Metin Yazı Tipi: Roboto
• Metin Metin Rengi: #dddddd
• Metin Metin Boyutu: 16px
• Metin Satırı Yüksekliği: 1.5em
• Metin Hizalama: Sol
• Maksimum Genişlik: 400 piksel
• Modül Hizalaması: Merkez

Bölüm Ayarları

Bölümün varsayılan arka plan rengini çıkardığınızdan emin olun, ancak ona tamamen şeffaf bir arka plan verin. Ardından, üst dolguyu çıkarabilir ve kaydırma testi amacıyla bir miktar alt kenar boşluğu ekleyebiliriz.

Bunu yapmak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: rgba(0,0,0,0)
• Alt Kenar Boşluğu: 80vh
• Dolgu: 0px

Animasyonlu Bölüm Bölücüyü Oluşturma

İçeriğin iki bölümü tamamlandıktan sonra, animasyonlu bölüm ayırıcılarımız için bölümü eklemeye hazırız.

Yeni Bölüm Ekle

Devam edin ve iki içerik bölümünün ortasında yeni bir normal bölüm oluşturun.

Bölüm Arka Planı

Ve yine, bölümün varsayılan arka plan rengini çıkarın, ancak aşağıdakileri güncelleyin:

• Arka Plan Rengi: rgba(0,0,0,0)

Bölüm Bölücü Tasarımı

Endişelenmeyin, arka plan rengimizi bölüm ayırıcılarla oluşturacağız. Bunu yapmak için tasarım sekmesine tıklayın ve bölüme aşağıdaki gibi bir üst ve alt ayırıcı ekleyin:

Üst Bölücü Tasarımı

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Üst Bölücü Rengi: #524fbf
• Üst Bölücü Yüksekliği: 20vw
• Üst Bölücü Yatay Tekrar: 0.6x
• Üst Bölücü Çevirme: yatay

Alt Bölücü Tasarımı

• Alt Bölücü Stili: ekran görüntüsüne bakın
• Alt Bölücü Rengi: #524fbf
• Alt Bölücü Yüksekliği: 20vw
• Alt Bölücü Yatay Tekrar: 0,5x
• Alt Bölücü Çevirme: yatay ve dikey

Kesit Yüksekliği ve Dolgu

Bu bölüm tamamen bölücü tasarımı için olduğu için, yükseklik ve dolgudan kurtulabiliriz, böylece sadece bölücü tarzı gösterilir ve iki içerik bölümü arasında gereksiz boşluk kalmaz. Aşağıdakileri güncelleyin:

• Yükseklik: 0 piksel
• Dolgu: 0 piksel üst, 0 piksel alt

Bölüm Bölücü Kaydırma Efektleri

Ardından bölüme aşağıdaki kaydırma efektlerini verin:

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET

Bunun için varsayılan ayarları masaüstü görünümünde tutabiliriz.

Ardından tabletteki Yatay Hareket ayarlarını güncelleyin:

• Başlangıç ​​Ofseti: 3 (%0 görünüm alanında)
• Orta Ofset: 0 (%50 görünüm alanında
• Bitiş Ofseti: -3 (%100 görünüm alanında)

Ölçekleme Yukarı ve Aşağı Etkisi sekmesi altında, masaüstünde aşağıdakileri güncelleyin…

• Başlangıç ​​Ölçeği: %200 (%0 görünüm alanında)
• Orta Ölçek: %150 (%45-%65 görünüm alanında
• Bitiş Ölçeği: %150 (%100 görünüm alanında)

Ardından tablette Ölçekleme Yukarı ve Aşağı efektini aşağıdaki gibi güncelleyin:

• Başlangıç ​​Ölçeği: %400 (%0 görünüm alanında)
• Orta Ölçek: %300 (%45-65 görünüm alanında
• Bitiş Ölçeği: %400 (%100 görünüm alanında)

Tablette (ve telefonda) hareket efektlerini ayarlamamızın temel nedeni, mutlak olan ve tarayıcının genişliğine uyum sağlamayan piksel uzunluk birimlerini (yani 3 = 300 piksel) kullanan yatay hareket değerlerinden kaynaklanmaktadır.

Şimdi kaydırmadaki animasyonlu bölüm ayırıcımızın nihai sonucunu kontrol edelim.

Kolaylıkla Yeni Bölücü Stilleri Oluşturma

Bu basit şablon yerindeyken, yeni bölüm ayırıcı stillerini kolaylıkla keşfedebiliriz. Bölüm bölücü stilini güncellemek için Divi Builder Ayarları menüsündeki katmanlar simgesini tıklatarak katmanlar kutusunu dağıtın. Ardından, ayırıcı stilleri içeren orta bölümün ayarlarını açmak için tıklayın.

Ardından ayırıcıya yeni bir üst ayırıcı stili verin:

Ardından ayırıcıya yeni bir alt ayırıcı stili verin:

Ve aynen böyle, yeni bir animasyonlu bölüm ayırıcı tasarımınız var:

Birden Çok Animasyonlu Bölüm Bölücü Katmanı Oluşturma

Bölücü tasarımı için kullanılan bölümün yüksekliği olmadığından, örtüşen animasyonlu bölüm bölücü tasarımları oluşturmak için kolayca çoğaltılabilir. Bu, çok daha yaratıcı tasarımların kapısını açar.

İşte nasıl yapılacağı.

Bölüm Bölücü 1 için Bölücü Stilini Güncelle

İlk olarak, orta bölüm için bölüm ayarlarını tekrar açın ve üst ve alt ayırıcı stilini aşağıdakilerle güncelleyin (ekran görüntülerine bakın):

Bölüm Bölücü 2'yi oluşturun (ikinci katman)

Ardından, başka bir (özdeş) bölüm ayırıcı tasarımı oluşturmak için bu orta bölümü çoğaltmak için katmanlar kutusunu kullanın. Her iki bölüm de 0px yüksekliğe sahip olduğu için üst üste oturacaktır.

Bölüm Bölücü Rengi

Ardından yeni yinelenen bölümü açın ve aşağıdakileri güncelleyin:

• Üst Bölücü Rengi: #08e1c0

• Alt Bölücü Rengi: #08e1c0

Bölüm Bölücü Kaydırma Efektleri

Ardından yatay hareket kaydırma efektini aşağıdaki gibi güncelleyin:

Masaüstü için…

• Başlangıç ​​Ofseti: 6 (%0 görünüm alanında)
• Orta Ofset: 0 (%50 görünüm alanında
• Bitiş Ofseti: -3 (%100 görünüm alanında)

Tablet için…

• Başlangıç ​​Ofseti: 3 (%0 görünüm alanında)
• Orta Ofset: 0 (%50 görünüm alanında
• Bitiş Ofseti: -3 (%100 görünüm alanında)

Bölüm Bölücü 3'ü oluşturun (üçüncü katman)

Animasyonlu bölüm ayırıcı tasarımımızın üçüncü katmanını oluşturmak için önceki bölümü çoğaltın.

Bölüm Bölücü 3 Renk

Yinelenen bölümü açın ve aşağıdaki ayırıcı stillerini güncelleyin:

• Üst Bölücü Rengi: #9191ff

• Alt Bölücü Rengi: #9191ff

Bölüm Bölücü 3 Kaydırma Efektleri

Ardından yatay hareket kaydırma efektini aşağıdaki gibi güncelleyin:

• Başlangıç ​​Ofseti: 3 (%0 görünüm alanında)
• Orta Ofset: 0 (%50 görünüm alanında)
• Bitiş Ofseti: -2 (%100 görünüm alanında)

Temel olarak, içeriğin arka planında daha düzensiz hareketler oluşturmak için her katmanın kaydırma efekti ofsetlerinde küçük değişiklikler yapıyoruz.

Bölüm Bölücü Z İndeksi

Artık üç katmanımızı tamamladığımıza göre, o bölüm için z indeksini güncelleyerek hangi bölücüyü üstte göstermek istediğimizi seçebiliriz. Bu örnekte, birinci bölüm ayırıcıyı harika bir z indeksi ile aşağıdaki gibi güncelleyelim:

• Z İndeksi: 1

Taşmayı Gizleme

Son bir adım olarak, ölçekleme bölümlerimizin sayfa kapsayıcısının dışına taşmadığından emin olmamız gerekiyor. Bunun olmadığından emin olmak için sayfa ayarlarını açın ve aşağıdaki Özel CSS'yi ekleyin:

.et_builder_inner_content {overflow: hidden;}

Son sonuç

İşte son statik tasarım.

Ve işte kullanıcı sayfayı aşağı kaydırırken tasarım. Güzel hareketli renklere dikkat edin!

Son düşünceler

Kaydırmada bölüm bölücüleri canlandırmak, bir web sayfasına daha fazla hayat getirmenin eğlenceli ve etkili bir yoludur. Umarım bu, kendi başınıza daha da yaratıcı tasarımlar yaratmanız için size biraz ilham verecektir.

Yorumlarda sizden haber bekliyorum.

Şerefe!