Ingin membuat tab dengan efek hover dari baris dengan Divi ?
Tab pasti berguna untuk membuat informasi penting tersedia di area ringkas Anda situs jaringan. Hal ini mengurangi kebutuhan pengguna untuk menelusuri isi dari halaman yang panjang. Modul tab Divi mudah digunakan dan ideal untuk browsing a isi sederhana dalam satu klik.
Namun dalam tutorial ini kami akan menunjukkan cara mengonversi baris Divi tab dan muncul di hover.
Kami juga akan menunjukkan cara membuat tab horizontal dan vertikal. Ini akan membuka kekuatan Divi untuk membuat tata letak lengkap dengan banyak modul untuk setiap area isi tab.
Tidak perlu plugin!
Mari kita mulai.
penelitian
Berikut adalah ikhtisar tab yang akan kita buat bersama dalam tutorial ini.
Unduh DIVI Sekarang!!!
Buat halaman baru dengan Divi Builder
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Membuat Tab Arahkan Horisontal Menggunakan "Baris Divi"
Di bagian default yang ada, tambahkan baris dua kolom.
Latar belakang garis, isi kotak dan bayangan
Sebelum kita menambahkan modul kita, mari kita sedikit menyesuaikan pengaturan baris terlebih dahulu. Buka Pengaturan Jalur dan perbarui yang berikut ini:
- Warna Gradien Kiri: #284f91
- Warna Gradien Kanan: #4646c4
- Padding: 50px (Atas dan Bawah), 50px (Kiri dan Kanan)
- Bayangan Kotak: lihat tangkapan layar
- Warna Bayangan Kotak: rgba(70,70,196,0.66)
Tambahkan konten ke baris
Kami sekarang akan menambahkan konten placeholder ke baris kami. Di kolom 1, tambahkan gambar pilihan Anda dengan modul Gambar. Di sini kami menggunakan gambar dari paket tata letak « Paket Tata Letak Konferensi Desain« .
Di kolom kanan, tambahkan modul Panggilan Untuk Aksi dan perbarui yang berikut:
- URL Tautan Tombol: # (hanya untuk menampilkan tombol untuk saat ini)
- Gunakan Warna Latar Belakang: TIDAK
- Perataan Teks: kiri
- Judul Font : Lato
- Judul Teks Ukuran: 60px (desktop), 50px (ponsel)
Pembuatan tab
Untuk membuat tab sebenarnya yang akan dituju pengguna untuk mengungkapkan konten baris itu, kita perlu membuat modul Teks dan memposisikannya di kanan atas dengan beberapa CSS khusus.
Lanjutkan dan tambahkan modul teks baru di bawah gambar di kolom 1 dan perbarui yang berikut:
- Isi: "Tab 1"
- Latar Belakang: #284f91 (ini harus sesuai dengan warna gradien kiri garis)
- Perataan Teks: terpusat
- Warna Teks: #ffffff
- Lebar: 100 piksel
- Tinggi: 50px
- Margin: -100px (Atas), -50px (Kiri)
- Padding: 14px (Atas)
Terakhir, tambahkan custom css berikut ke elemen utama untuk memberikannya posisi absolut di bagian atas baris.
position: absolute !important;
top: 0;
Tinggi dan jarak bagian
Untuk saat ini, buka pengaturan bagian dan perbarui yang berikut:
- Tinggi Min: 500px (Desktop), 900px (Tablet), 750px (Ponsel)
- Margin: 100px (Atas dan Bawah)
- Padding: 0px (Atas dan Bawah)
Pembuatan baris kedua
Untuk membuat baris kedua, duplikat baris yang Anda buat sebelumnya. Pindahkan modul teks ke kolom 1 dan gambar ke kolom 2. Kemudian perbarui gambar dengan yang baru. Ini akan membantu Anda mendapatkan gambaran tentang tampilan konten yang berbeda di setiap tab.
Kemudian buka pengaturan modul Teks yang digunakan untuk membuat tab di kolom 1 dan pindahkan tab ke kanan sehingga di mana baris ini tumpang tindih dengan baris di atas Anda dapat melihat tab langsung di sebelah kanan tab baris pertama.
- Margin: 50px (Kiri)
Menambahkan efek hover
Buka pengaturan baris dan tambahkan filter berikut:
- Opacity: 70% (default), 100% (arahkan kursor)
Kemudian tambahkan durasi transisi dan kurva kecepatan untuk efek hover filter opacity.
- Waktu transisi: 500 ms
- Kurva Kecepatan Transisi: Linear
Pembuatan tab ketiga
Kita sekarang dapat menambahkan tab terakhir kita. Untuk melakukan ini, duplikat baris kedua yang baru saja Anda buat. Kemudian pindahkan modul teks ke kolom 1 dan gambar ke kolom 2. Dan perbarui modul gambar dengan gambar baru.
Perbarui pengaturan garis dengan gradien latar belakang baru.
- Warna gradien latar belakang kiri: #333333
- Warna gradien latar belakang kanan: #4646c4
Kemudian buka pengaturan modul Teks yang digunakan untuk membuat tab di kolom 1 dan perbarui warna dan margin.
- Latar belakang: #333333
- Margin: 150px (Kiri)
Inilah tampilan halaman Anda sebelum kami memposisikan garis kami untuk tumpang tindih.
Garis yang tumpang tindih dengan posisi absolut
Untuk tumpang tindih garis kita, kita perlu menggunakan posisi absolut. Pertama, perbarui tinggi ketiga baris menjadi 100%.
- Tinggi: 100%
Kemudian tambahkan CSS khusus berikut ke elemen utama dari ketiga baris:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Seperti inilah tampilan tab kami saat ini.
Mengubah urutan baris saat melayang dengan indeks Z
Saat ini Anda mungkin telah memperhatikan bahwa baris/tab ketiga berada di latar depan. Jadi kita perlu mengatur ulang baris menggunakan Z Index sehingga tab pertama ditampilkan terlebih dahulu sampai Anda mengarahkan kursor ke tab lain.
Baca juga: Cara Membuat Hamparan Gambar Khusus di Divi
Untuk melakukan ini, buka pengaturan baris pertama dan perbarui indeks-z sebagai berikut:
Z-indeks: 10
Kemudian letakkan indeks Z dari dua baris lainnya di hover.
Z-index: 11 (Hover)
Hal ini dilakukan! Mari kita lihat hasil akhirnya.
Hasil akhir
Unduh DIVI Sekarang!!!
Membuat tab vertikal
Jika Anda ingin menambahkan tab vertikal ke baris, inilah yang harus dilakukan.
Lanjutkan dan duplikat bagian yang berisi tab hover yang baru saja kita buat sehingga Anda memiliki desain baru untuk dikerjakan.
Kemudian buka pengaturan bagian dan perbarui yang berikut:
- Padding: 10% (Kiri dan Kanan)
Perbarui parameter berikut untuk ketiga baris bagian duplikat dengan yang berikut ini:
- Lebar: 70% (Desktop), 70% (Tablet), 80% (Ponsel)
- Lebar Maks: 980px
Selanjutnya, perbarui arah gradien menjadi 90 derajat untuk ketiga garis.
- Arah Gradien: 90 derajat
Sekarang saatnya untuk memposisikan tab modul Teks kita di sebelah kiri baris kita untuk mendapatkan tab vertikal yang diinginkan.
Lihat juga: Cara Membuat Menu Roda Pemintal saat Melayang di Divi
Buka pengaturan tab modul teks di baris pertama dan perbarui yang berikut:
- Margin (Desktop): -50px (Atas), -150px (Kiri)
Selanjutnya, buka pengaturan tab modul Teks Baris Bagian ke-2 dan perbarui yang berikut:
- Margin (Desktop): 0px (Atas), -150px (Kiri)
Dan untuk tab terakhir di baris ketiga, perbarui yang berikut:
- Margin (desktop): 50px atas, -150px kiri
Hasil akhir
Sekarang mari kita lihat hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Dengan sedikit kreativitas dan kekuatan Divi, Anda dapat membuat beberapa tab kustom yang cukup keren menggunakan garis Divi. Ada beberapa batasan untuk apa yang dapat Anda tampilkan.
Misalnya, dengan konfigurasi ini, semua baris harus memiliki tinggi yang sama dengan bagian. Tapi, untuk tidak perlu menggunakan plugin, ini adalah solusi yang bagus.
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.
...
