Bölüm Ayırıcı'yı kullanarak kaydırma efektleri oluşturmak, hayatınıza hayat katabilecek basit ve eğlenceli bir tekniktir. Site Web kullanmak WordPress tema Divi. Bölüm bölücü, geçişlerinize yaratıcılık dokunuşu katmak için yararlı, çok yönlü bir tasarım öğesi olmaya devam ediyor. içindekiler sayfa.
Ancak Divi'nin kaydırma efektleriyle bölüm bölücüler daha da ilginç hale geliyor! İşin püf noktası, tercih edilen bölücü stiline ayrılmış bir bölümü izole etmektir. Daha sonra, bölüme arka plan olarak güzel kaydırma efektleri oluşturmak için kaydırma tarafından oluşturulan her türlü hareketi bölüme ekleyebilirsiniz. içindekiler sayfa.
Hadi başlayalım!
Olası sonuç
İşte bu öğreticiyi tamamladıktan sonra elde edebileceğimiz tasarımlara genel bir bakış.
Divi ile animasyonlu kaydırma bölümü bölücüler nasıl oluşturulur
İki içerik bölümünün oluşturulması
Satır ekle
Başlamak için, varsayılan bölümde bir sütun içeren bir satır oluşturun.
Bölüm marjı (testler için)
Test amacıyla, kaydırma için yerimiz olması amacıyla bölüme bir üst kenar boşluğu ekleyin. Bölüm ayarlarını açın ve aşağıdakileri ekleyin:
- Üst kenar boşluğu: 80vh
Metin modülü ekle
Sütun satırına yeni bir metin modülü ekleyin.
Metin modülünün içeriği
İçinde içindekiler gövdeye aşağıdaki H2 başlığını ekleyin:
<h2>Section Avec Séparateurs</h2>
Metin modülü tasarımı
Tasarım ayarları altında aşağıdakileri güncelleyin:
- Metin yazı tipi: Roboto
- Metnin hizalanması: orta
- Öğe 2 Metin rengi: # bae0d8
- Başlık 2 Metin boyutu: 80 piksel (masaüstü), 50 piksel (tablet), 30 piksel (telefon)
İkinci bir içerik bölümü ekleyin
Önceki bölümün altına yeni bir normal bölüm ekleyin.
Satır ekle
Yeni bölümde bir sütuna 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övdenin içinde tutabiliriz. Tasarım sekmesine geçelim ve aşağıdakileri güncelleyelim:
- Metin yazı tipi: Roboto
- Metin metni rengi: #dddddd
- Metin boyutu: 16px
- Metin satır yüksekliği: 1,5 em
- Metin hizalama: sol
- Maksimum genişlik: 400 piksel
- Modülün hizalanması: orta
Bölüm ayarları
Bölümün varsayılan arka plan rengini kaldırdığınızdan emin olun, ancak tamamen şeffaf bir arka plan verin. Ardından üst dolguyu kaldırabilir ve kaydırma testi amacıyla bir 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
Hareketli bölüm ayırıcısının oluşturulması
İki içerik bölümü tamamlandığında, animasyonlu bölüm bölücülerimiz 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ün bağlamı
Ve yine, bölümün varsayılan arka plan rengini kaldırın, ancak aşağıdakileri güncelleyin:
- Arka plan rengi: rgba (0,0,0,0)
Bölüm ayırıcı tasarımı
Endişelenmeyin, arka plan rengimizi bölüm bölücülerle 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ün bölücü tasarımı
- Üst Bölücü Stili: ekran görüntüsüne bakın
- Üst bölücünün rengi: # 524fbf
- Üst bölücünün yüksekliği: 20vw
- Üst bölücünün yatay tekrarı: 0,6x
- Üst bölücünün kapağı: yatay
Alt bölücü tasarımı
- Alt bölücü stili: ekran görüntüsüne bakın
- Alt ayırıcı rengi: # 524fbf
- Alt bölücünün yüksekliği: 20vw
- Alt bölücünün yatay tekrarı: 0,5x
- Alt bölücü eğimi: yatay ve dikey
Bölüm yüksekliği ve dolgu
Bu bölüm tamamen bölücü tasarıma yönelik olduğundan, yükseklik ve dolgudan kurtulabiliriz, böylece yalnızca bölücünün stili gösterilir ve iki içerik bölümü arasında gereksiz boşluk kalmaz. Aşağıdakileri güncelleyin:
- Yükseklik: 0px
- Dolgu: 0 piksel yüksek, 0 piksel düşük
Bölüm Ayırıcı Kaydırma Efektleri
Ardından bölüme aşağıdaki kaydırma efektlerini verin:
Sekmenin altında Yatay hareket ...
- Yatay hareketi etkinleştir: EVET
Bunun için varsayılan ayarları, büro .
Ardından yatay hareket parametrelerini Tablet :
- Başlangıç ofseti: 3 (pencerenin% 0'ında)
- Ortalama uzaklık: 0 (görüntü alanının% 50'sinde)
- Bitiş uzaklığı: -3 (görüntü alanının% 100'ünde)
Sekmenin altında Yukarı ve Aşağı Etkisini Ölçeklendirme , aşağıdakileri güncelleyin: büro ...
- Başlangıç ölçeği:% 200 (pencerenin% 0'ında)
- Ortalama ölçek:% 150 (görüntü alanının% 45 -% 65'inde)
- Bitiş ölçeği:% 150 (görüntü alanının% 100'ünde)
Ardından, ölçek büyütme ve küçültme efektini Tablet aşağıdaki gibi
- Başlangıç ölçeği:% 400 (pencerenin% 0'ında)
- Ortalama ölçek:% 300 (görüntü alanının% 45 -% 65'inde)
- Bitiş ölçeği:% 400 (görüntü alanının% 100'ünde)
Tabletteki (ve telefondaki) hareket efektlerini ayarlamamızın ana nedeni, piksel uzunluk birimleri (yani 3 = 300 piksel) kullanan yatay hareket değerlerinden kaynaklanmaktadır. mutlaktır ve tarayıcının genişliğine göre ayarlamayın.
Şimdi kaydırma animasyonlu bölüm bölücümüzün nihai sonucunu görelim.
Son düşünceler
Kaydırma üzerindeki bölüm ayırıcıları canlandırmak, bir web sayfasını hayata geçirmenin eğlenceli ve etkili bir yoludur. Umarım bu, daha yaratıcı tasarımları kendiniz harekete geçirmek için size biraz ilham verir.
