Desain Efek Scroll Menumpuk dengan Divi Builder

Dalam dunia desain web modern, menciptakan pengalaman pengguna yang menarik dan interaktif adalah kunci untuk membuat situs Anda menonjol. Salah satu cara efektif untuk mencapai ini adalah dengan memanfaatkan fitur sticky pada tema Divi.

Tutorial ini akan membahas secara lengkap bagaimana Anda dapat membuat efek row stacking atau penumpukan baris saat menggulung halaman menggunakan opsi sticky di Divi. Efek ini membuat setiap baris konten “menumpuk” di bawah baris sebelumnya saat Anda menggulir, menciptakan tampilan visual yang dinamis dan elegan.

Anda akan belajar tidak hanya membuat efek tersebut, tetapi juga memahami prinsip-prinsip penting yang dapat diterapkan pada berbagai desain menggunakan Divi.

Mari kita mulai dan eksplorasi bagaimana fitur sticky di Divi membuka banyak kemungkinan kreatif dalam membangun website Anda.

Memahami Efek Row Stacking pada Scroll

Efek stacking baris pada scroll memungkinkan setiap baris (row) dalam halaman web untuk “menempel” atau sticky ketika mencapai bagian atas viewport saat Anda menggulir.

Baris pertama akan tetap menempel di atas sampai baris kedua mencapai posisi yang sama, kemudian baris pertama akan meluncur ke bawah di bawah baris kedua, dan proses ini berlanjut untuk baris berikutnya. Hasilnya adalah deretan baris yang tampak seperti menumpuk satu sama lain secara vertikal ketika pengguna menggulir halaman.

Efek ini sangat cocok digunakan pada desktop karena memberikan pengalaman visual yang menarik dan terstruktur. Namun, pada layar tablet dan ponsel, biasanya lebih baik mengembalikan alur konten ke mode normal tanpa efek sticky untuk menjaga kenyamanan pengguna dan keterbacaan.

Langkah Awal: Menyiapkan Halaman dan Struktur Dasar

Untuk memulai, buka halaman baru di Divi dan aktifkan Visual Builder. Anda akan mulai membangun dari awal dengan menyiapkan sebuah section yang akan menjadi wadah untuk baris-barisan yang akan dibuat.

Langkah pertama adalah mengatur spasi pada section tersebut. Atur padding atas dan bawah menjadi sekitar 100 piksel pada desktop, kemudian sesuaikan untuk tablet (40 piksel) dan ponsel (25 piksel). Ini memberikan ruang yang cukup agar desain tidak terasa sempit dan rapi secara visual.

Setelah section siap, tambahkan baris baru dengan dua kolom. Struktur dua kolom ini akan digunakan untuk menempatkan konten dan gambar latar secara berdampingan, memberikan tampilan yang seimbang dan menarik.

Mengatur Baris dan Kolom untuk Efek Stacking

Selanjutnya, buka pengaturan baris dan atur beberapa hal penting:

• Gutter Width: Aktifkan opsi custom gutter width dan pilih nilai 1 untuk menghilangkan jarak antar kolom sehingga keduanya berdempetan.
• Equalize Column Heights: Aktifkan agar kedua kolom memiliki tinggi yang sama, menciptakan keseimbangan visual.
• Width dan Max Width: Atur lebar baris menjadi 90% dengan max width sekitar 2580 piksel agar menyesuaikan berbagai ukuran layar desktop.
• Padding Baris: Hapus padding atas dan bawah default agar baris-barisan bisa menyentuh satu sama lain tanpa celah, penting untuk efek stacking yang mulus.

Sekarang, Anda sudah menyiapkan fondasi yang kuat untuk efek penumpukan baris yang akan dibuat.

Menambahkan Background dan Spasi pada Kolom

Untuk mempercantik tampilan, tambahkan background color dan gambar pada kolom pertama. Anda bisa menggunakan gambar dari layout yang disediakan Divi, seperti layout produk kecantikan yang menyediakan asset gambar berkualitas gratis.

Atur gambar latar agar menggunakan ukuran fit sehingga proporsinya tetap terjaga. Kemudian, sesuaikan padding kolom agar gambar dan konten tidak saling bertabrakan.

Padding atas dan bawah bisa diatur sekitar 25 piksel pada desktop dan disesuaikan pada perangkat yang lebih kecil (misalnya 40% dan 50% pada tablet dan ponsel) agar proporsi tetap nyaman dilihat.

Untuk kolom kedua, gunakan warna latar yang kontras namun masih dalam satu palet warna agar terlihat harmonis. Tambahkan padding atas dan bawah sekitar 13% dan padding kiri dan kanan sekitar 5% agar konten di dalamnya memiliki ruang yang cukup. Jangan lupa tambahkan efek box shadow untuk memberikan efek kedalaman pada kolom ini.

Menambahkan Modul Konten: Teks, Tombol, dan Divider

Setelah struktur dasar siap, saatnya menambahkan modul-modul konten yang akan tampil di setiap kolom:

• Modul Teks (Kolom 1): Tambahkan teks judul menggunakan tag h2 dengan font Alada, sebuah font Google yang elegan dan belum terlalu umum namun sangat menarik. Gunakan ukuran font besar (sekitar 200 piksel di desktop) dengan warna putih agar kontras dengan background. Atur posisi teks menjadi absolute di pojok kiri atas kolom untuk memastikan teks tidak mengambil ruang layout dan bisa ditempatkan bebas sesuai kebutuhan.
• Modul Tombol (Kolom 1): Tambahkan tombol dengan teks seperti “Browse Products”. Gunakan warna latar tombol yang kontras dan warna teks putih. Atur padding tombol agar terlihat proporsional dan posisikan tombol di pojok kanan bawah kolom dengan posisi absolute juga.
• Modul Teks (Kolom 2): Tambahkan teks judul menggunakan tag h3 dengan font Alada yang tebal dan ukuran sekitar 40 piksel, serta warna putih untuk keterbacaan maksimal.
• Modul Divider: Tambahkan garis pemisah dengan warna yang cocok untuk latar gelap dan terang. Atur ketebalan garis menjadi 5 piksel dan panjangnya sekitar 19%, serta beri margin bawah 20% untuk memberikan ruang visual.
• Modul Teks Deskripsi (Kolom 2): Tambahkan teks deskriptif dengan font Monstera ukuran 15 piksel, dan sesuaikan ukuran menjadi 14 piksel pada perangkat lebih kecil. Gunakan line height 2em agar teks mudah dibaca dan tidak terlalu padat.

Mengatur Posisi dan Efek Sticky pada Baris

Ini adalah bagian terpenting untuk menciptakan efek stacking baris saat scroll. Berikut adalah pengaturan utama yang harus Anda lakukan pada setiap baris:

1. Z-Index: Setel nilai z-index baris menjadi 1. Ini penting agar baris berikutnya bisa tampil di atas baris sebelumnya saat terjadi tumpang tindih. Dengan pengaturan ini, baris yang lebih rendah secara visual akan berada di atas baris yang lebih tinggi secara kode, menciptakan efek tumpukan.
2. Sticky Position: Aktifkan opsi sticky pada posisi top di pengaturan scroll effects. Ini membuat baris menempel di bagian atas viewport saat digulir.
3. Bottom Sticky Limit: Setel limit bawah sticky ke section. Ini mencegah baris melewati batas section dan menimpa konten lain di bawahnya.
4. Offset from Surrounding Sticky Elements: Matikan opsi ini (set ke no) agar setiap baris hanya mengatur perilakunya sendiri tanpa mempengaruhi baris sticky lain di halaman. Ini penting agar efek stacking berjalan mulus dan independen.

Dengan ketentuan ini, setiap baris akan “menempel” pada bagian atas ketika digulir dan akan tumpang tindih dengan baris berikutnya, menciptakan efek tumpukan yang dinamis dan menarik.

Penggandaan Baris dan Kustomisasi Desain

Setelah baris pertama selesai dan pengaturan sticky diterapkan, Anda dapat menggandakan baris tersebut sebanyak yang Anda butuhkan untuk memperpanjang efek stacking. Setiap baris yang digandakan akan mengikuti aturan sticky yang sama sehingga menciptakan pengalaman menggulung dengan efek tumpuk yang konsisten.

Untuk membuat tampilan lebih menarik, ubah warna latar, gambar background, teks, dan tombol pada setiap baris yang digandakan. Ini memberikan variasi visual sekaligus tetap menjaga konsistensi efek animasi scrolling. Anda juga dapat mengubah konten sesuai kebutuhan proyek Anda.

Tips dan Trik untuk Desain dengan Efek Sticky

Dalam penggunaan efek sticky ini, ada beberapa hal penting yang perlu diperhatikan agar desain tetap optimal dan tidak mengganggu pengalaman pengguna:

• Ukuran Baris: Pastikan tinggi baris tidak melebihi viewport (100vh) agar sticky dapat bekerja dengan baik tanpa membuat konten tersembunyi.
• Overflow: Jika baris memiliki konten yang tinggi, Anda bisa mengatur overflow menjadi auto atau scroll agar pengguna tetap bisa menggulir dalam baris tersebut tanpa kehilangan efek sticky.
• Penggunaan di Perangkat Kecil: Disarankan untuk menonaktifkan sticky pada tablet dan ponsel agar desain tidak terasa rumit dan tetap mudah dinavigasi.
• Posisi Absolute: Manfaatkan posisi absolute untuk modul seperti teks dan tombol agar bisa ditempatkan secara bebas dalam kolom tanpa mempengaruhi layout utama.
• Font dan Warna: Gunakan font yang mudah dibaca dan warna yang kontras untuk memastikan keterbacaan dan daya tarik visual.

Mengapa Memilih Divi untuk Efek Sticky Ini?

Divi adalah tema WordPress yang sangat fleksibel dengan fitur visual builder dan opsi sticky yang kuat. Anda dapat mengatur posisi elemen secara bebas, menerapkan efek sticky dengan mudah, dan menggabungkan berbagai modul untuk menghasilkan desain yang kompleks tanpa perlu coding rumit.

Fitur sticky di Divi memungkinkan Anda mengontrol perilaku elemen pada berbagai ukuran layar dan menyesuaikan efek sesuai kebutuhan desain. Tutorial ini hanya satu contoh bagaimana Anda bisa memaksimalkan fitur tersebut untuk membuat efek visual yang memukau dan interaktif.

Contoh yang sudah jadi pada contoh penggunaan efek scroll untuk menumpuk baris ini dapat Anda lihat pada contoh website kosmetik skincare.

Kesimpulan

Menciptakan efek row stacking saat scroll menggunakan opsi sticky Divi adalah teknik yang efektif untuk memperkaya pengalaman pengguna dan menambah nilai estetika pada website Anda. Setelah mengikuti langkah-langkah yang telah dijelaskan, Anda dapat dengan mudah membangun desain yang dinamis dan profesional.

Jika Anda ingin mendalami lebih, Anda dapat mengikuti pelatihan membuat website tanpa coding menggunakan DIVI Builder. Ya, sekarang sudah bukan jamannya membuat website dengan coding kecuali ingin membuat website dengan fungsi khusus (biasanya untuk perusahaan besar).

Inti dari efek ini adalah pengaturan z-index yang tepat dan konfigurasi sticky yang cermat agar setiap baris dapat menempel dan tumpang tindih secara harmonis. Ditambah lagi, dengan pengaturan padding dan posisi absolute pada modul, Anda dapat menyesuaikan tampilan konten agar tetap rapi dan menarik.

Jangan ragu untuk bereksperimen dengan warna, gambar, dan konten untuk menciptakan variasi yang unik sesuai dengan identitas brand Anda. Jika Anda belum menggunakan Divi, ini adalah saat yang tepat untuk mulai mengeksplorasi tema ini yang menawarkan banyak fitur canggih untuk membangun website impian Anda.

Semoga panduan ini membantu Anda memahami dan mengimplementasikan efek stacking baris dengan mudah dan efektif. Selamat mencoba dan berkreasi dengan Divi!