Cara Mengungkapkan Konten dengan Efek Shutter Hover di Divi

Mengungkap konten modul saat mengarahkan kursor dapat memiliki beberapa manfaat yang bermanfaat. 1) Ini bisa menjadi cara yang bagus untuk memiliki desain halaman web Anda yang lebih ringkas atau elegan pada awalnya. 2) Menghemat ruang. 3) Ini dapat menarik pengguna untuk berinteraksi dengan halaman Anda. 4) Terlihat keren :). Ide dasarnya adalah untuk menampilkan hanya sebagian dari konten modul (seperti penggoda) yang membuatnya menarik bagi pengunjung untuk mengarahkan kursor untuk melihat lebih banyak. Begitu mereka mengarahkan kursor ke modul, seluruh konten terungkap dengan efek hover halus yang membuka dan menutup seperti rana.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat mengungkapkan konten modul dengan efek hover gaya rana menggunakan Divi builder.

Sneak Peek

Berikut ini sekilas tentang apa yang akan kita bangun bersama.

Mulai

Berlangganan Saluran Youtube Kami

Untuk memulai, buat halaman baru, beri Anda judul halaman, lalu gunakan Divi Builder untuk membangun di bagian depan. Pilih opsi "Choose a Premade Layout". Kemudian dari popup Divi Library, pilih paket Day Spa Layout dan klik untuk menggunakan Landing Page Layout.

Setelah tata letak dimuat ke halaman, Anda siap untuk memulai!

Menambahkan Pembagi ke bagian atas dan bawah Blurb

Gulir ke bawah halaman ke bagian Berjudul "Pengalaman Spa Mewah" dengan empat uraian. Kami akan menggunakan baris dengan empat uraian untuk memulai desain.

Menambahkan Pembagi Pertama

Langkah pertama kami adalah menambahkan pembagi di atas dan di bawah modul uraian untuk menyembunyikan konten uraian kami di belakang. Anda dapat menganggap pembagi ini sebagai daun jendela yang akan membuka dan menutup saat melayang.

Tambahkan modul pembagi di atas uraian di kolom pertama dan perbarui yang berikut:

Warna latar belakang: #ffffff
Warna (pembagi): #ffffff
Berat Pembagi: 100px
Tinggi: 100 piksel
Margin khusus: 0px bawah

Latar belakang putih cocok dengan latar belakang bagian kita karena kita tidak ingin melihatnya. Pastikan berat dan tinggi pembagi sama.

Menambahkan Pembagi Kedua (oranye)

Selanjutnya, buat pembagi lain langsung di bawah pembagi yang baru saja Anda buat dan perbarui yang berikut:

Warna: #ff7a6b
Berat Pembagi: 2px
Tinggi: 2px
Margin khusus: 0px bawah

Kemudian lompat ke tab konten dan beri label admin "pembagi oranye" pada pembagi tersebut. Ini akan membantu membedakan pembagi dari pembagi sebelumnya (putih) ketika kita menggunakan mode gambar rangka untuk menyalin dan menempelkan pembagi ke kolom lainnya.

Simpan halaman Anda.

Menyalin dan Menempel Pembagi di Sekitar Blurb

Sekarang kita siap untuk menyalin dan menempelkan pembagi kita di atas dan di bawah setiap uraian di setiap kolom. Untuk membuat proses ini sedikit lebih mudah, terapkan mode wireframe dengan membuka menu pengaturan di bagian bawah halaman dan mengklik ikon wireframe. (atau gunakan shft + w)

Dalam mode wireframe, temukan baris yang berisi uraian dan pembagi yang baru saja kita buat. Kemudian copy pastekan pembatas dan pembatas oranye di atas dan di bawah masing-masing blurb sehingga hasil akhirnya terlihat seperti ini.

Selanjutnya, kembali ke tampilan desktop (shft + w) untuk menyelesaikan desain. Halaman Anda akan terlihat seperti ini.

Menyesuaikan Modul Blurb

Sekarang setelah Anda memiliki semua pembagi di tempat, saatnya untuk mengedit modul uraian kami dengan beberapa penyesuaian gaya termasuk margin khusus untuk membuat efek melayang gaya rana.

Pertama, gunakan multiselect untuk memilih keempat modul uraian. Untuk melakukan ini cukup tahan ctrl (atau cmd) dan klik pada setiap modul. Kemudian buka pengaturan salah satu modul untuk menerapkan modal pengaturan elemen.

Di bawah tab konten, tambahkan beberapa baris konten tiruan.

Kemudian nonaktifkan bayangan kotak gambar sama sekali.

Untuk membuat efek shutter hover, kita perlu menambahkan margin atas dan bawah negatif untuk menyembunyikan konten di belakang pembagi secara default. Kemudian kami mengatur margin ke 0px untuk mengungkapkan konten saat melayang. Untuk melakukan ini, tambahkan spasi berikut.

Margin Kustom (default): -100px atas, -65px bawah
Margin Kustom (arahkan kursor): 0px atas, 0px bawah

Padding Kustom (arahkan kursor): 10px atas, 10px bawah

Anda mungkin perlu menyesuaikan nilai margin negatif tergantung pada seberapa banyak konten yang Anda miliki. Misalnya, Anda mungkin perlu memiliki lebih banyak margin negatif untuk konten teks yang lebih panjang.

Sekarang lihat hasilnya sejauh ini.

Perhatikan bagian atas dan bawah setiap modul tersembunyi di balik pembagi sampai Anda mengarahkan kursor ke atasnya.

Membersihkan Efek Shutter Hover

Memusatkan Modul Secara Vertikal

Saat ini, efek kursor rana mendorong sisa konten ke bawah halaman dengan setiap kursor. Hal ini menyebabkan beberapa gerakan halaman yang mungkin mengganggu. Plus, tindakan hover hanya mengarah ke bawah yang bukan merupakan efek rana yang sebenarnya. Kami ingin konten terbuka ke atas dan ke bawah dari tengah. Untuk mencapai ini kita perlu melakukan hal berikut:

Buka pengaturan baris dan samakan tinggi kolom.

Lalu buka tab lanjutan dan masukkan CSS khusus berikut di bawah Elemen Utama:

align-items: center;

Ini akan memastikan modul tetap terpusat secara vertikal di dalam kolom, memberi kita efek rana ke atas dan ke bawah.

Memberi Baris Ketinggian Tetap

Untuk menghentikan efek hover dari menekan konten halaman di bawah, kita perlu menghentikan baris agar tidak bertambah tinggi dengan setiap hover. Untuk melakukan ini, kita harus mengatur ketinggian tetap ke baris kita di desktop. Karena tingginya akan tetap, Anda perlu memastikan bahwa tinggi baris cukup tinggi untuk mengakomodasi ketinggian konten uraian dalam keadaan melayang. Namun, Anda tidak ingin membuatnya terlalu tinggi karena Anda akan meninggalkan terlalu banyak ruang kosong di atas dan di bawah modul. Dalam contoh ini, saya akan mengatur tinggi baris menjadi 600px. Tapi, karena kita hanya ingin mengatur ketinggian tetap di desktop saja, kita perlu menambahkan beberapa CSS ke pengaturan halaman kita menggunakan kueri media.

Inilah yang perlu Anda lakukan.

Pertama-tama, dalam pengaturan baris, berikan ID CSS pada baris Anda:

ID CSS: tinggi tetap

Kemudian buka pengaturan halaman (di bawah tab lanjutan) dan tambahkan CSS Kustom berikut:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Ini memberi baris Anda ketinggian tetap 600px di desktop dan menghentikan efek hover dari mendorong sisa konten halaman ke bawah.

Itu dia!

Hasil akhir

Lihat desain akhir.

Dan inilah efek shutter hover.

Mungkin ide yang baik untuk menonaktifkan efek hover di ponsel. Untuk melakukannya, yang perlu Anda lakukan adalah mengatur margin khusus untuk setiap modul uraian sebagai berikut:

Margin Kustom (tablet): 0px atas, 0px bawah

Pikiran Akhir

Efek shutter hover ini adalah cara kreatif untuk menggoda audiens Anda untuk mencari informasi lebih lanjut tentang berbagai layanan Anda. Dan dengan keajaiban Divi dan beberapa potongan CSS, hasil akhirnya cukup elegan. Saya yakin masih banyak lagi aplikasi untuk efek shutter hover ini karena Anda dapat menggunakan modul apa pun yang Anda inginkan. Jangan ragu untuk menjelajahi beberapa desain baru yang menarik dari Anda sendiri, dan jangan ragu untuk membagikannya kepada kami. Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!