Cara Membuat Konten Baris Tersembunyi Muncul di Arahkan dengan Divi (Unduh Gratis!)

Menambahkan interaksi halus ke situs web Anda benar-benar dapat meningkatkan pengalaman pengguna secara keseluruhan yang dimiliki pengunjung. Salah satu hal yang akan membuat situs web Anda terlihat lebih menarik, sambil tetap menghormati keramahan pengguna, adalah membuat konten baris muncul di hover. Ini adalah pendekatan yang bagus untuk menampilkan layanan, produk, fitur, dan lainnya.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat desain khusus dari A hingga Z, tetapi begitu Anda mendapatkan pendekatannya, Anda dapat membuatnya bekerja untuk semua jenis situs web yang sedang Anda kerjakan. Di akhir posting blog ini, kami juga akan membagikan file JSON dari desain ini yang dapat Anda unduh secara GRATIS dan digunakan tanpa batasan apa pun.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Desktop

Seluler

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna Latar Default

Mulailah dengan menambahkan bagian baru ke halaman baru atau yang sudah ada dan ubah warna latar belakang bagian.

• Warna Latar Belakang: #e0e0e0

Arahkan Warna Latar Belakang

Ubah warna latar belakang ini saat melayang.

• Warna Latar Belakang: #000000

Jarak

Pindah ke tab desain dan tambahkan beberapa nilai spasi khusus. Untuk membuat tutorial ini berfungsi, kita hanya akan menggunakan unit viewport. Ini akan membantu memastikan bahwa semuanya tetap di tempatnya, tidak peduli ukuran layarnya.

• Margin Atas: 5vw
• Margin Bawah: 5vw
• Margin Kiri: 3vw
• Margin Kanan: 3vw
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien.

• Warna 1: #ff5b79
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 15%
• Posisi Akhir: 15%

Perekat

Buat beberapa perubahan pada pengaturan ukuran baris juga.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Dan tambahkan beberapa nilai padding khusus dalam pengaturan spasi.

• Padding Atas: 9vw
• Padding Bawah: 9vw
• Kolom 1 Padding Kiri: 5vw
• Kolom 1 Padding Kanan: 5vw
• Kolom 2 Padding Kiri: 5vw
• Kolom 2 Padding Kanan: 5vw

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita perlukan adalah Modul Teks di kolom 1. Tambahkan konten H3 dan tautan.

Pengaturan Teks Tautan

Kemudian, buka pengaturan teks tautan dan buat beberapa perubahan pada tampilan tautan.

• Font Tautan: Didact Gothic
• Gaya Font Tautan: Garis Bawah
• Gaya Garis Bawah Tautan: Padat
• Warna Teks Tautan: #ffffff
• Ukuran Teks Tautan: 20px

Pengaturan Teks Judul

Ubah juga pengaturan teks H3.

• Judul 3 Font: Didact Gothic
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 50px

Visibilitas

Last but not least, nonaktifkan modul di desktop. Kami hanya membutuhkan modul ini untuk muncul pada ukuran layar yang lebih kecil.

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul kedua dan terakhir yang dibutuhkan pada kolom 1 adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Kemudian, ubah warna pembagi.

• Warna: #ffffff

Jarak

Tambahkan beberapa nilai margin khusus ke Modul Pembagi juga.

• Margin Atas: 11vw (Desktop), 80px (Tablet),
• Margin Bawah: 50px (Tablet & Ponsel)

Tambahkan Modul Teks #1 ke Kolom 2

Tambah isi

Ke kolom kedua! Tambahkan Modul Teks dengan beberapa konten pilihan H4.

Pengaturan Teks Judul

Kemudian, buka pengaturan teks H4 dan buat beberapa perubahan.

• Judul 4 Font: Didact Gothic
• Judul 4 Berat Font: Tebal
• Judul 4 Warna Teks: #ffffff
• Judul 4 Ukuran Teks: 2vw (Desktop), 40px (Tablet), 30px (Telepon)

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Tepat di bawah Modul Teks sebelumnya, lanjutkan dan tambahkan yang lain dengan beberapa konten paragraf pilihan.

Pengaturan Teks

Buka pengaturan teks berikutnya dan buat beberapa perubahan.

• Font Teks: Didact Gothic
• Warna Teks: #ffffff
• Ukuran Teks: 0.9vw (Desktop), 18px (Tablet & Ponsel)
• Tinggi Baris Teks: 2em

Jarak

Tambahkan beberapa nilai margin khusus juga.

• Margin Atas: 2vw
• Margin Kanan: 15vw

Tambahkan Baris #2

Struktur Kolom

Setelah Anda selesai memodifikasi baris pertama dan semua modulnya, Anda dapat melanjutkan dan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat beberapa perubahan pada pengaturan Ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Hapus semua padding default di pengaturan spasi baris juga.

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

Visibilitas

Last but not least, sembunyikan baris ini di tablet dan ponsel.

Tambahkan Modul Teks ke Kolom

Tambah isi

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Teks. Tambahkan beberapa konten H3 dan tautan.

Warna Latar Default

Kemudian, buka pengaturan latar belakang dan tambahkan warna latar belakang ke Modul Teks.

• Warna Latar Belakang: #e0e0e0

Arahkan Warna Latar Belakang

Ubah warna latar belakang ini saat melayang.

• Warna Latar Belakang: rgba(255,255,255,0)

Pengaturan Teks Default

Selanjutnya, buka pengaturan teks dan buat beberapa perubahan.

• Font Tautan: Didact Gothic
• Gaya Font Tautan: Garis Bawah
• Gaya Garis Bawah Tautan: Padat
• Warna Teks Tautan: #ffffff
• Ukuran Teks Tautan: 0px
• Spasi Huruf Tautan: -1px

Arahkan ke Pengaturan Teks Tautan

Ubah juga ukuran teks tautan saat mengarahkan kursor.

• Ukuran Teks Tautan: 1.7vw

Pengaturan Teks Judul Default

Lanjutkan dengan membuat beberapa perubahan pada pengaturan teks H3.

• Judul 3 Font: Didact Gothic
• Judul 3 Berat Font: Tebal
• Judul 3 Warna Teks: #000000
• Judul 3 Ukuran Teks: 12vw
• Spasi Judul 3 Huruf: -0.8vw

Arahkan Arahkan ke Pengaturan Teks Judul

Ubah beberapa pengaturan teks H3 saat mengarahkan kursor.

• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 4vw
• Spasi Judul 3 Huruf: -0,2vw

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa nilai margin dan padding khusus.

• Margin Atas: -34.3vw
• Margin Bawah: -5vw
• Padding Atas: 10vw
• Padding Bawah: 10vw
• Padding Kiri: 26.5vw

Spasi Arahkan

Ubah nilai spasi saat mengarahkan kursor.

• Margin Atas: -34.1vw
• Margin Bawah: -5vw
• Padding Atas: 12vw
• Padding Bawah: 12vw
• Padding Kiri: 11.5vw

Transisi

Tingkatkan durasi transisi Modul Teks juga.

• Durasi Transisi: 400ms

Bagian Klon

Setelah bagian pertama Anda selesai, lanjutkan dan klon seluruh bagian hingga sebanyak yang Anda inginkan. Di bagian selanjutnya dari tutorial, kami akan menunjukkan kepada Anda perubahan yang perlu Anda buat untuk setiap duplikat.

Ubah Bagian Arahkan Warna Latar Belakang

Hal pertama yang perlu Anda ubah adalah bagian hover warna latar belakang.

• Warna Latar Belakang: #ff5b79

Ubah Latar Belakang Gradien Baris #1

Ubah juga latar belakang gradien baris #1.

• Warna 1: #000000

Ubah Warna & Salin Teks

Bersama dengan warna teks dan semua salinannya.

• Judul 3 Warna Teks: #ff5b79

Ubah Spasi Modul Teks

Last but not least, ubah padding kiri Modul Teks di baris #2. Jumlah padding kiri yang perlu Anda gunakan bergantung pada panjang konten yang Anda gunakan.

• Padding Kiri: 21vw

Unduh Tata Letaknya GRATIS

Untuk meletakkan tangan Anda pada tata letak, Anda harus terlebih dahulu mengunduhnya 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!

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara mengungkapkan konten baris tersembunyi saat mengarahkan kursor. Hasil yang kami buat dibuat menggunakan opsi bawaan Divi saja. Kami juga telah membagikan file JSON di akhir tutorial yang diharapkan akan membantu Anda membuat desain alternatif Anda sendiri. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!