Apakah Anda ingin mempresentasikan fungsi atau produk Anda dalam bentuk tab Divi dengan efek melayang?
Apakah Anda mencari cara kreatif baru untuk menampilkan fitur dan/atau produk di halaman web Anda?
Jika demikian, teruslah membaca karena dalam artikel ini, kami akan menunjukkan kepada Anda cara menampilkan fitur di tab saat mengarahkan kursor hanya menggunakan opsi bawaan Divi. Kemungkinan yang Anda miliki dengan pendekatan ini tidak terbatas dan pasti akan membuat Anda memahaminya Divi pada tingkat yang lebih dalam.
Efek tab hover hanya akan terjadi di desktop. Pada ukuran layar yang lebih kecil, mereka akan muncul dalam bentuk normalnya.
Mari kita pergi!
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat hasil yang ingin kita capai.
Mari kita mulai proses pembuatannya dengan Divi
Tambahkan bagian baru
Latar belakang gradien
Tambahkan halaman baru atau buka halaman yang ada dan tambahkan bagian baru. Buka pengaturan bagian dan tambahkan latar belakang gradien ke bagian.
- Warna Kiri: #f2f2f2
- Warna Kanan: #ffffff
- Arah Gradien: 87 derajat
- Posisi Kiri: 20%
- Posisi Kanan: 80%
jarak
Selanjutnya, Ubah pengaturan spasi berikut:
- Padding (Atas dan Bawah): 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
Warna latar belakang
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang.
- Warna latar belakang: #ffffff
Ukuran dan Keselarasan
Di tab Mendesain, tarik ke bawah opsi Perekat dan ubah pengaturan berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar : 400px
- Penjajaran Baris: Kiri
Arahkan Ukuran
Ubah opsi Lebar dalam pengaturan ukuran hover. Ini akan memungkinkan garis melebar saat melayang.
- Lebar (Hover): 2 piksel
jarak
Lalu pergi ke pengaturan jarak di opsi Jarak
- Padding (Atas dan Bawah): 0px
Perbatasan (Desktop)
Tambahkan '20px' ke sudut kanan atas garis dan juga tambahkan batas kiri ke garis.
- Sudut Bulat (Desktop): 20px (Pojok Kanan Atas)
- Lebar Batas Kiri: 20px
- Warna Batas Kiri: #6d44ff
Perbatasan pada hover
Hapus sudut bulat kanan atas '20px' saat mengarahkan kursor dengan menambahkan '0px' sebagai gantinya.
Bayangan Kotak (Desktop)
Terakhir, tambahkan bayangan halus.
- Kekuatan Buram Bayangan Kotak: 80px
- Kekuatan Penyebaran Bayangan Kotak: -10px
- Warna Bayangan: rgba (0,0,0,0.11)
Bayangan Arahkan
Dan ubah warna bayangan menjadi warna yang benar-benar transparan saat melayang.
- Bayangan Kotak: rgba (255,255,255,0)
Tambahkan Modul Blurb ke Baris
Tambahkan konten
Sekarang setelah kita selesai mengubah 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 isi pilih pemilih.
Pilih ikonnya
Kemudian pilih ikon pilihan Anda.
Pengaturan ikon
Dan ubah tampilan ikon di pengaturan ikon. Pergi ke tab Mendesain
- Warna Ikon: #5323ff
- Penempatan Gambar/Ikon: Atas
- Lebar Gambar/Ikon: 50px
Pengaturan Judul Teks (Desktop)
Kemudian ubah pengaturan judul.
- Judul Font: Poppins
- Perataan Teks: terpusat
- Warna Teks Judul: #5323ff
- Ukuran Teks Judul: 25px
- Spasi Huruf: -1px
- Tinggi Garis: 1 em
Arahkan pengaturan judul teks
Dan ubah ketinggian baris judul saat melayang.
- Judul Baris Tinggi: 1,5 em
Pengaturan Teks Isi (Desktop)
Selanjutnya, buka pengaturan teks isi dan buat beberapa perubahan. Ini termasuk mengubah ukuran teks menjadi '0px'. Ini akan membantu kita membuat teks isi hanya muncul saat mengarahkan kursor.
- Font Tubuh: Poppins
- Berat Huruf Tubuh: ringan
- Perataan Teks: terpusat
- Warna Teks Tubuh: #000000
- Ukuran Teks Isi: 0px (Desktop), 15px (Tablet dan Ponsel)
- Tinggi Garis: 2,2 em
Pengaturan teks isi saat melayang
Untuk memastikan bahwa teks isi muncul di hover, ubah ukuran teks hover.
- Ukuran Teks Tubuh: 15px
Spasi (Desktop)
Untuk memberi ruang pada modul, kami memodifikasi parameter spasi berikut:
- Padding (Atas dan Bawah): 80px
Jarak Arahkan
Kami akan mengubah pengaturan jarak hover.
- Padding (Atas dan Bawah): 80px
- Padding (Kiri dan Kanan): 20vw
Baris klon 3 kali
Setelah Anda selesai mengedit baris pertama dan modul Blurb-nya, Anda dapat melanjutkan dan mengkloning baris sebanyak yang Anda inginkan.
Edit Modul Garis dan Blurb #2
Ubah warna batas garis
Mari kita mulai dengan mengubah warna batas kiri garis.
- Warna Batas Kiri: #00ffcc
Edit konten dan ikon Blurb
Selanjutnya, buka pengaturan modul Blurb dan ubah ikonnya.
Ubah Warna Ikon Modul Blurb
Dengan warna ikon.
- Warna Ikon: #00eda6
Ubah warna judul
Dan warna teks judul.
- Warna Teks Judul: #00eda6
Edit baris dan modul Burb #3
Warna batas garis
Mari kita ubah warna batas garis kiri.
- Warna Batas Kiri: #afebff
Edit konten dan ikon Blurb
Mari kita ubah juga ikon dan isi dari teks presentasi.
Ubah Warna Ikon Modul Blurb
Juga mengubah warna ikon.
- Warna Ikon: #68d9ff
Ubah warna teks judul
Dan warna teks judul juga.
- Warna Teks Judul: #68d9ff
Edit Modul Garis dan Blurb #4
Ubah warna batas garis
Di modul berikutnya dan terakhir, ubah juga warna batas kiri garis.
- Warna Batas Kiri: #dd87cf
Edit konten dan ikon Blurb
Buka modul Blurb di baris dan ubah ikon dan isi modul du.
Ubah Warna Ikon Modul Blurb
Dengan warna ikon.
- Warna Ikon: #dd6aca
Ubah warna teks judul
Dan warna teks judul juga.
- Warna Teks Judul: #dd6aca
penelitian
Sekarang kita telah melalui tutorial, mari kita lihat hasilnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Pada artikel ini, kami menunjukkan kepada Anda cara menggunakan opsi bawaan Divi hanya untuk membuat tab yang tersedia saat mengarahkan kursor.
Pendekatan ini akan membantu Anda berbagi konten tentang fitur atau produk secara interaktif.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
