Cara Memadukan Salinan pada Gulir dengan Pengaturan Posisi & Efek Gulir Divi

Cara Anda menggunakan fitur bawaan Divi secara kreatif dapat membuat perbedaan dalam desain halaman Anda. Efek gulir Divi, misalnya, memungkinkan Anda membuat interaksi yang indah saat menggulir. Hari ini, kami menambahkan tutorial lain ke daftar hal-hal yang dapat Anda lakukan dengan efek gulir bawaan Divi. Lebih khusus lagi, kami akan menunjukkan cara memadukan salinan pada gulir. Pada pandangan pertama, salinan ditempatkan di bawah gambar yang menyertainya. Namun, segera setelah Anda menggulir ke titik tertentu, salinan akan muncul di atas gambar produk dan akan mulai menyatu dengan gambar. Ini mengarah pada efek eye-catching yang terlihat mudah. Anda juga dapat mengunduh file layout 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. 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!

Mari Mulai Berkreasi!

Tambahkan 2x Bagian Placeholder

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian placeholder ke halaman yang sedang Anda kerjakan.

Perekat

Buka pengaturan bagian dan ubah ketinggian di pengaturan ukuran.

• Tinggi: 50vh

Bagian Klon

Kloning bagian tersebut sekali. Ini membuat Anda memiliki dua bagian placeholder di halaman Anda. Bagian placeholder ini akan membantu Anda melihat efek akhir setelah melalui tutorial. Di situs web langsung, bagian placeholder akan diganti dengan bagian normal yang Anda gunakan di seluruh halaman.

Tambahkan Bagian Baru Antara Bagian Placeholder

Setelah bagian placeholder berada di tempatnya, tambahkan bagian baru di antara bagian placeholder.

Warna latar belakang

Buka pengaturan bagian dan gunakan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Jarak

Pindah ke tab desain bagian dan ubah nilai padding atas dan bawah yang sesuai:

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

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, buka pengaturan ukuran dan ubah nilai lebar dan lebar maksimum.

• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Teks ke Kolom

Tambahkan Salinan

Satu-satunya modul yang kita butuhkan untuk baris ini adalah Modul Teks. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Teks

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

• Font Teks: Montserrat
• Berat Font Teks: Sangat Tebal
• Gaya Font Teks: Huruf Besar
• Warna Teks: #fff2ea
• Ukuran Teks: 11vw
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Perekat

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

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar: 90%
• Penjajaran Baris: Pusat

Tambahkan Modul Gambar ke Kolom

Unggah Gambar

Tambahkan Modul Gambar ke kolom baris. Unggah gambar pilihan Anda.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan gambar yang sesuai:

• Penjajaran Gambar: Tengah

Perekat

Kemudian, buka pengaturan ukuran dan paksakan lebar penuh pada modul.

• Paksa Lebar Penuh: Ya

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang akan kita tambahkan ke kolom adalah Modul Tombol. Gunakan beberapa salinan pilihan Anda.

Penjajaran Tombol

Buka tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Kemudian, gaya tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 2px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Gunakan beberapa nilai padding khusus dalam pengaturan spasi juga.

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 5%
• Padding Kanan: 5%

Tambahkan Pemosisian Absolut ke Baris #1

Setelah Anda menyelesaikan baris kedua, navigasikan kembali ke baris #1. Buka pengaturan baris, buka tab lanjutan dan ubah bagian menjadi absolut. Dengan melakukan ini, baris, dan Modul Teks di dalamnya, akan ditempatkan di bawah baris yang berisi Modul Gambar.

• Posisi: Absolut
• Lokasi: Pusat

Kloning Baris #1 & Tempatkan Duplikat Di Bawah Baris #2

Agar Modul Teks muncul di atas gambar, kita memerlukan baris lain dengan nilai indeks z yang lebih tinggi. Kloning baris pertama dan tempatkan duplikat di bawah baris kedua.

Terapkan Efek ke Baris #3

Tingkatkan Indeks Z

Buka baris duplikat dan ubah indeks z di tab lanjutan.

• Indeks Z: 12

Ubah Warna Teks

Buka Modul Teks di baris dan ubah warna teks.

• Warna Teks: #1e1e1e

Terapkan Blend Mode ke Baris

Kemudian, buka pengaturan baris dan ubah mode campuran di pengaturan filter.

• Mode Campuran: Hamparan

Gunakan Efek Gulir pada Modul Teks di Baris #3

Tambahkan Efek Fading in & Out

Selesaikan tutorial dengan membuka Modul Teks lagi, buka efek gulir dan aktifkan efek fading in dan out. Itu dia!

• Aktifkan Fading In and Out: Ya
  • Mulai Opacity: 0%
  • Mid Opacity: 0% (pada 26%)
  • Opacity Akhir: 100% (pada 28%)
• Pemicu Efek Gerak: Elemen Tengah

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 efek gulir bawaan Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara memadukan salinan pada gulir. Pada awalnya, salinannya tampak di bawah gambar. Setelah menggulir, salinan muncul di atas gambar dan menyatu dengan gambar. 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.