Cara Membuat Transisi Salin Paralaks dengan Opsi Lengket Divi

Saat Anda mencari cara kreatif untuk membumbui desain halaman Anda, efek paralaks bisa berguna. Mereka membawa interaksi ekstra pada gulir tanpa terlalu invasif. Jika Anda mencari cara untuk memperluas efek paralaks ke beberapa bagian di halaman Anda, Anda akan menyukai tutorial ini. Hari ini, kami akan menunjukkan cara membuat transisi salinan paralaks dengan opsi tempel Divi. Segera setelah pengunjung menggulir melewati bagian tertentu, salinannya bergulir ke bawah dengan gambar latar belakang paralaks, yang memberikan efek yang sangat rapi. Segera setelah bagian berikutnya dalam antrean tercapai, salinannya kemudian diganti dengan judul lain. Hasil yang kita cari terlihat bagus di semua ukuran layar dan Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

https://youtu.be/uZCD0__Apjk

Berlangganan Saluran Youtube Kami

1. Buat Struktur Elemen

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Efek ini terutama akan bekerja dengan baik jika Anda memiliki konten di atas dan di bawah tata letak yang akan kita buat.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Samakan Tinggi Kolom: Ya
• Lebar: 95%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Gambar Latar Belakang Kolom

Sekarang setelah kita mengubah pengaturan baris umum, kita juga akan menerapkan beberapa pengaturan khusus ke kolom di dalam baris kita. Mulailah dengan membuka pengaturan kolom.

Unggah gambar latar belakang dan aktifkan efek paralaks di atasnya.

• Gunakan Efek Paralaks: Ya
• Metode Paralaks: CSS

Spasi Kolom

Selanjutnya, buka tab desain dan terapkan beberapa bantalan bawah kustom.

• Padding Bawah: 50vh

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H2

Saatnya menambahkan modul, dimulai dengan Modul Teks yang berisi beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain modul dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Montserrat
• Judul 2 Berat Font: Tebal
• Judul 2 Gaya Font: Huruf Besar
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks:
  • Desktop: 9vw
  • Tablet: 14vw
  • Telepon: 15vw

Filter

Kami juga mengaktifkan mode campuran di pengaturan filter.

• Mode Campuran: Hamparan

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Tambahkan Tautan

Selanjutnya, masukkan tautan.

Pengaturan Tombol

Kemudian, pindah ke tab desain modul dan ubah pengaturan tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol:
  • Desktop: 2vw
  • Tablet & Telepon: 7vw
• Warna Teks Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 0,06vw

• Font Tombol: Karla
• Tampilkan Ikon Tombol: Ya
• Penempatan Ikon Tombol: Kiri
• Hanya Tampilkan Ikon Saat Arahkan ke Tombol: Tidak

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 8%
• Padding Bawah: 8%

Posisi

Dan selesaikan pengaturan modul dengan memposisikan ulang modul di pojok kanan bawah kolom.

• Posisi: Absolut
• Lokasi: Kanan Bawah

2. Langkah-Langkah yang Dibutuhkan untuk Efek

Ubah Modul Teks Lengket

Sekarang kita telah menyiapkan fondasi desain kita dengan semua elemen yang dibutuhkan, saatnya untuk mengaktifkan transisi salinan paralaks. Untuk melakukannya, kita akan menggunakan opsi tempel bawaan Divi pada Modul Teks. Buka pengaturan modul, buka tab lanjutan dan terapkan pengaturan tempel berikut:

• Posisi Lengket: Menempel ke Atas
• Offset Atas Lengket: 150px
• Batas Lengket Bawah: Bagian
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Ubah Spasi Modul Teks

Bawaan

Sekarang kita telah mengaktifkan opsi sticky pada modul ini, kita dapat menerapkan gaya sticky. Secara default, modul akan ditempatkan di atas kolom itu sendiri. Dan karena warna teks putih modul, itu akan menyatu dengan warna latar belakang bagian dan membuatnya tampak seperti tidak ada teks sama sekali. Untuk membuat pemosisian ini, kami akan menggunakan beberapa margin atas negatif di berbagai ukuran layar.

• Batas atas:
  • Desktop: -10vw
  • Tablet: -14vw
  • Telepon: -15vw

Lengket

Setelah Modul Teks menjadi lengket, kami ingin itu kembali terlihat. Untuk memastikan itu terjadi, kami akan mengembalikan margin atas ini ke "0vh" dalam status lengket.

• Margin Atas Lengket: 0vh

Spasi Bagian

Kami juga membutuhkan beberapa ruang di bagian atas dan bawah bagian kami, sehingga latar belakang dan Modul Teks dapat bergabung dalam warna. Untuk melakukan itu, kami akan membuka pengaturan bagian lagi dan menerapkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 10vh
• Padding Bawah: 10vh

Klon Seluruh Bagian sebanyak yang Diinginkan

Setelah Anda menyelesaikan desain bagian, Anda dapat mengkloningnya sebanyak yang Anda mau.

Ubah Konten & Tautan

Pastikan Anda mengubah konten dan tautan untuk setiap modul di dalam bagian duplikat dan selesai!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan opsi lengket Divi. Lebih tepatnya, kami telah menunjukkan kepada Anda cara membuat transisi salinan paralaks yang memungkinkan Anda memperluas efek paralaks ke beberapa bagian di halaman Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.