Membuat efek gulir menggunakan Pembagi Bagian adalah teknik sederhana dan menyenangkan yang dapat menambah kehidupan Anda situs jaringan menggunakan tema WordPress Divi. Pembatas bagian tetap menjadi elemen desain serbaguna, berguna untuk menambahkan sentuhan kreativitas pada transisi Anda isi de halaman.
Namun dengan efek gulir Divi, pembagi bagian menjadi lebih menarik! Caranya adalah dengan mengisolasi bagian yang didedikasikan untuk gaya pemisah pilihan. Kemudian Anda dapat menambahkan semua jenis gerakan yang dihasilkan gulir ke bagian tersebut untuk menciptakan efek gulir yang indah sebagai latar belakang isi Halaman.
Ayo mulai!
Kemungkinan hasil
Berikut ini gambaran umum desain yang akan bisa kita capai setelah menyelesaikan tutorial ini.
Cara membuat pembagi bagian gulir animasi dengan Divi
Pembuatan dua bagian konten
Tambahkan satu baris
Untuk memulai, buat baris dengan satu kolom di bagian default.
Margin bagian (untuk tes)
Untuk tujuan pengujian, tambahkan margin atas ke bagian tersebut sehingga kita memiliki ruang untuk menggulir. Buka pengaturan bagian dan tambahkan yang berikut ini:
- Margin teratas: 80vh
Tambahkan modul teks
Di baris kolom, tambahkan modul teks baru.
Isi modul teks
Di dalam isi dari badan, tambahkan judul H2 berikut:
<h2>Section Avec Séparateurs</h2>
Desain modul teks
Di bawah pengaturan desain, perbarui yang berikut:
- Fon teks: Roboto
- Penyelarasan teks: pusat
- Butir 2 Warna teks: # bae0d8
- Header 2 Ukuran teks: 80px (desktop), 50px (tablet), 30px (telepon)
Tambahkan bagian konten kedua
Di bawah bagian sebelumnya, tambahkan bagian reguler baru.
Tambahkan satu baris
Di bagian baru, tambahkan baris ke kolom.
Tambahkan modul teks
Kemudian tambahkan modul teks baru ke baris.
Desain modul teks
Kami dapat menyimpan konten padding default di dalam body untuk saat ini. Mari beralih ke tab desain dan perbarui yang berikut ini:
- Fon teks: Roboto
- Warna teks teks: #dddddd
- Ukuran teks: 16px
- Tinggi baris teks: 1,5 em
- Perataan teks: kiri
- Lebar maksimum: 400 px
- Penyelarasan modul: pusat
Pengaturan bagian
Pastikan untuk menghapus warna latar belakang default bagian tersebut, tetapi berikan latar belakang yang sepenuhnya transparan. Kemudian kita dapat menghapus bantalan atas dan menambahkan margin bawah untuk tujuan uji gulir.
Untuk melakukan ini, buka pengaturan bagian dan perbarui yang berikut:
- Warna latar: rgba (0,0,0,0)
- Margin bawah: 80vh
- Padding: 0px
Pembuatan pemisah bagian animasi
Setelah dua bagian konten selesai, kami siap untuk menambahkan bagian untuk pembagi bagian animasi kami.
Tambahkan bagian baru
Silakan dan buat bagian reguler baru di tengah-tengah dua bagian konten.
Konteks bagian
Dan sekali lagi, hapus warna latar belakang default bagian tersebut, tetapi perbarui yang berikut:
- Warna latar: rgba (0,0,0,0)
Desain pembagi bagian
Jangan khawatir, kami akan membuat warna latar belakang kami dengan pemisah bagian. Untuk melakukan ini, klik pada tab desain dan tambahkan pemisah atas dan bawah ke bagian sebagai berikut:
Desain pembagi superior
- Gaya Pembagi Atas: lihat tangkapan layar
- Warna pembagi atas: # 524fbf
- Tinggi pembagi atas: 20vw
- Pengulangan horizontal pembagi atas: 0,6x
- Balik pembagi atas: horisontal
Desain pembagi yang lebih rendah
- Gaya pembatas bawah: lihat tangkapan layar
- Warna separator lebih rendah: # 524fbf
- Tinggi pembagi bawah: 20vw
- Pengulangan horizontal pembagi bawah: 0,5x
- Kemiringan pembagi bawah: horizontal dan vertikal
Bagian tinggi dan bantalan
Karena bagian ini murni untuk desain pembatas, kita dapat menghilangkan ketinggian dan bantalan sehingga hanya gaya pembatas yang ditampilkan dan tidak ada ruang yang tidak perlu di antara dua bagian konten. Perbarui yang berikut ini:
- Tinggi: 0px
- Padding: 0px tinggi, 0px rendah
Pemisah Bagian Efek Gulir
Kemudian berikan bagian efek gulir berikut:
Di bawah tab Pergerakan horizontal ...
- Aktifkan gerakan horisontal: YES
Kami dapat menyimpan pengaturan default untuk yang satu ini pada tampilan file biro .
Kemudian perbarui parameter gerakan horizontal pada tablette :
- Mulai offset: 3 (pada 0% dari jendela)
- Offset rata-rata: 0 (pada 50% viewport)
- Offset akhir: -3 (pada 100% viewport)
Di bawah tab Meningkatkan Efek Naik dan Turun , perbarui berikut ini di biro ...
- Skala awal: 200% (pada 0% dari jendela)
- Skala rata-rata: 150% (pada 45% -65% dari viewport)
- Skala akhir: 150% (pada 100% viewport)
Kemudian perbarui efek Scaling Up dan Down pada tablette sebagai berikut:
- Skala awal: 400% (pada 0% dari jendela)
- Skala rata-rata: 300% (pada 45% -65% dari viewport)
- Skala akhir: 400% (pada 100% viewport)
Alasan utama kami perlu menyesuaikan efek gerakan pada tablet (dan ponsel) adalah karena nilai gerakan horizontal menggunakan satuan panjang piksel (yaitu 3 = 300 piksel), yaitu mutlak dan tidak menyesuaikan dengan lebar browser.
Sekarang mari kita lihat hasil akhir dari pembagi bagian animasi gulir kami.
final pikiran
Pembagi bagian animasi pada gulungan adalah cara yang menyenangkan dan efektif untuk menghidupkan halaman web. Semoga ini memberi Anda inspirasi untuk memicu desain yang lebih kreatif sendiri.