Cara Menampilkan Fitur di Tab Arahkan kursor dengan Divi

Diterbitkan: 2019-02-10

Apakah Anda mencari cara baru dan kreatif untuk menampilkan fitur dan/atau produk di halaman web Anda? Jika demikian, teruslah membaca karena dalam posting ini, kami akan menunjukkan kepada Anda cara menampilkan fitur di tab hover menggunakan opsi bawaan Divi saja. Kemungkinan yang Anda miliki dengan pendekatan ini tidak terbatas dan mereka pasti akan memungkinkan Anda untuk memahami Divi pada tingkat yang lebih dalam. Efek tab hover hanya akan terjadi pada lingkungan desktop yang ramah hover. Saat tab hover dilihat dari ukuran layar yang lebih kecil, fitur akan dicantumkan dalam bentuk aslinya.

Mari kita lakukan!

Pratinjau

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

Desktop

arahkan tab

Seluler

arahkan tab

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Latar Belakang Gradien

Tambahkan halaman baru atau buka yang sudah ada dan tambahkan bagian baru. Buka pengaturan bagian dan tambahkan latar belakang gradien ke bagian. Kami akan menggunakan latar belakang gradien untuk menutupi bagian kiri tab hover seperti yang Anda lihat di layar cetak di atas.

Warna 1: #f2f2f2
Warna 2: #ffffff
Arah Gradien: 87deg
Posisi Awal: 20%
Posisi Akhir: 20%

arahkan tab

Jarak

Kemudian, hapus padding atas dan bawah kustom bagian dengan menambahkan '0px' ke kedua opsi.

Padding Atas: 0px
Padding Bawah: 0px

arahkan tab

Tambahkan Baris Baru

Struktur Kolom

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

arahkan tab

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang.

Warna Latar Belakang: #ffffff

arahkan tab

Penjajaran Baris

Ubah perataan baris juga.

Penjajaran Baris: Kiri

arahkan tab

Ukuran Default

Dan ubah juga pengaturan ukuran.

Gunakan Lebar Kustom: Ya
Satuan: PX
Lebar Kustom: 400px
Gunakan Lebar Talang Kustom: Ya
Lebar Talang: 1

arahkan tab

Arahkan Ukuran

Ubah opsi Lebar Kustom di pengaturan Ukuran saat mengarahkan kursor. Ini akan memungkinkan baris meluas saat dilayangkan.

Lebar Kustom: 2000px

arahkan tab

Jarak

Kemudian, buka pengaturan spasi dan hapus nilai padding atas dan bawah default.

Padding Atas: 0px
Padding Bawah: 0px

arahkan tab

Perbatasan Default

Tambahkan '20px' ke sudut kanan atas baris dan tambahkan batas kiri ke baris juga.

Lebar Batas Kiri: 20px
Warna Batas Kiri: #6d44ff

arahkan tab

Arahkan Perbatasan

Hapus sudut bulat kanan atas '20px' saat mengarahkan kursor dengan menambahkan '0px' sebagai gantinya.

arahkan tab

Bayangan Kotak Default

Last but not least, tambahkan bayangan kotak halus.

Kekuatan Buram Bayangan Kotak: 80px
Kekuatan Penyebaran Bayangan Kotak: -10px
Warna Bayangan: rgba (0,0,0,0.11)

arahkan tab

Arahkan Bayangan Kotak

Dan ubah warna bayangan menjadi warna yang benar-benar transparan saat dilayangkan.

Warna Bayangan: rgba (255,255,255,0)

arahkan tab

Tambahkan Modul Blurb ke Baris

Tambah isi

Sekarang setelah kita selesai memodifikasi semua pengaturan baris, kita dapat melanjutkan dan menambahkan Modul Blurb ke kolom. Jangan ragu untuk menggunakan modul lain pilihan Anda. Setelah Anda menambahkan modul, tambahkan beberapa konten pilihan.

arahkan tab

Pilih Ikon

Pilih ikon pilihan Anda selanjutnya.

arahkan tab

Pengaturan Ikon

Dan ubah tampilan ikon di pengaturan ikon.

Warna Ikon: #5323ff
Penempatan Ikon: Atas
Gunakan Ukuran Font Ikon: Ya
Ukuran Font Ikon: 54px

arahkan tab

Pengaturan Teks Judul Default

Ubah pengaturan teks judul berikutnya.

Judul Font: Poppins
Perataan Teks Judul: Tengah
Warna Teks Judul: #5323ff
Ukuran Teks Judul: 25px
Spasi Huruf Judul: -1px
Tinggi Baris Judul: 1em

arahkan tab

Arahkan ke Pengaturan Teks Judul

Dan ubah tinggi baris judul saat melayang.

Judul Baris Tinggi: 1.5em

arahkan tab

Pengaturan Teks Tubuh Default

Kemudian, buka pengaturan teks isi dan buat beberapa perubahan. Ini termasuk mengubah ukuran teks menjadi '0px'. Ini akan membantu kita membuat teks isi hanya muncul di hover.

Font Tubuh: Poppins
Berat Huruf Tubuh: Ringan
Perataan Teks Tubuh: Tengah
Warna Teks Tubuh: #000000
Ukuran Teks Isi: 0px (Desktop), 15px (Tablet & Ponsel)
Tinggi Garis Tubuh: 2.2em

arahkan tab

Arahkan Arahkan ke Pengaturan Teks Tubuh

Untuk memastikan teks isi muncul di hover, ubah ukuran teks di hover.

Ukuran Teks Tubuh: 15px

arahkan tab

Spasi Default

Untuk memberi modul ruang untuk bernafas, kami menambahkan beberapa bantalan atas dan bawah khusus ke modul.

Padding Atas: 80px
Padding Bawah: 80px

arahkan tab

Spasi Arahkan

Kami akan mengubah pengaturan spasi saat mengarahkan kursor. Anda tidak akan dapat melihat hasil akhirnya sebelum keluar dari Visual Builder karena kami menerapkan opsi arahkan kursor ke baris dan Modul Blurb.

Padding Atas: 80px
Padding Bawah: 80px
Padding Kiri: 20vw
Padding Kanan: 20vw

arahkan tab

Baris Klon 3 Kali

Setelah Anda selesai memodifikasi baris pertama dan Modul Blurb-nya, Anda dapat melanjutkan dan mengkloning baris tersebut sebanyak yang Anda inginkan.

arahkan tab

Ubah Baris & Modul Blurb #2

Ubah Spasi Baris

Buka duplikat pertama dan tambahkan beberapa margin kiri kustom. Ini akan memungkinkan kita untuk membuat efek tangga yang dapat Anda perhatikan di pratinjau posting ini.

Margin Kiri: 6vw

arahkan tab

Ubah Warna Perbatasan Baris

Ubah warna batas kiri baris juga.

Warna Batas Kiri: #00ffcc

arahkan tab

Ubah Konten & Ikon Blurb

Kemudian, buka Modul Blurb dan ubah ikonnya.

arahkan tab

Ubah Warna Ikon Modul Blurb

Seiring dengan warna ikon.

Warna Ikon: #00eda6

arahkan tab

Ubah Warna Teks Judul

Dan warna teks judul.

Warna Teks Judul: #00eda6

arahkan tab