Bagaimana Mengubah Baris Divi menjadi Tab Arah Horisontal dan Vertikal

Tab pasti berguna untuk membuat informasi penting tersedia di area ringkas situs web Anda. Ini mengurangi kebutuhan pengguna untuk menggulir konten halaman yang panjang. Modul tab Divi mudah digunakan dan bagus untuk beralih melalui konten sederhana dengan klik.

Namun dalam tutorial ini, saya akan menunjukkan cara mengubah seluruh baris Divi menjadi tab hover. Saya juga akan menunjukkan cara membuat tab horizontal dan vertikal juga. Ini akan membuka kekuatan Divi untuk merancang tata letak baris lengkap dengan beberapa modul untuk setiap area konten tab. Tidak perlu plugin!

Mari kita mulai.

Sneak Peek

Berikut ini sekilas tentang tab hover horizontal dan vertikal yang akan kita buat bersama dalam tutorial ini.

Unduh Tata Letak Tab Divi Rows Hover secara GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Berlangganan Saluran Youtube Kami

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus memiliki pengaturan berikut:

1. Tema Divi diinstal dan aktif
2. Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
3. Tiga gambar yang akan digunakan untuk konten tiruan

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai membuat beberapa tab hover di Divi.

Membuat Tab Arah Arah Horizontal menggunakan Baris Divi

Untuk memulai, buat bagian reguler baru dengan baris dua kolom.

Latar Belakang Baris, Padding, dan Bayangan Kotak

Sebelum kita menambahkan modul kita, mari kita sedikit menyesuaikan pengaturan baris terlebih dahulu. Kita perlu kembali ke baris nanti untuk memposisikannya untuk fungsionalitas tab kita.

Buka pengaturan baris dan perbarui yang berikut:

Warna Kiri Gradien Latar Belakang: #284f91
Warna Kanan Gradien Latar Belakang: #4646c4

Padding: 50px atas, 50px bawah, 50px kiri, 50px kanan
Bayangan Kotak: lihat tangkapan layar
Warna Bayangan Kotak: rgba(70,70,196,0.66)

Menambahkan Konten ke Baris

Sekarang kita akan menambahkan beberapa konten tiruan ke baris kita. Ingatlah bahwa Anda dapat menambahkan kombinasi kolom dan modul apa pun untuk area konten Anda.

Di kolom 1, tambahkan gambar dengan modul gambar. Saya menggunakan salah satu dari Paket Tata Letak Konferensi Desain.

Di kolom kanan, tambahkan modul ajakan bertindak 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)

Membuat Tab

Untuk membuat tab yang sebenarnya, pengguna akan mengarahkan kursor untuk menampilkan konten baris ini, 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:

Konten: “Tab Satu”

Warna Latar Belakang: #284f91 (ini harus sesuai dengan warna gradien kiri baris)
Perataan Teks Teks: tengah
Warna Teks 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;

Css ini ditambah margin khusus yang kami tambahkan akan memastikan tab diposisikan tepat di kiri atas baris. Penting agar tab benar-benar berada di atas baris sehingga pengguna dapat mengarahkan kursornya nanti.

Bagian Tinggi dan Jarak

Sekarang sebelum kita melanjutkan membuat baris dan tab yang tersisa, mari beri baris kita sedikit ruang untuk bernafas dengan menambahkan beberapa margin atas dan bawah ke bagian tersebut. Untuk desain ini, penting bagi kita untuk menggunakan margin untuk memberi ruang pada bagian kita karena kita juga akan memberi bagian kita ketinggian yang ditentukan. Kita perlu memberi bagian kita ketinggian yang ditetapkan karena kita ingin baris kita menjangkau tinggi penuh bagian kita. Ini berarti bahwa setiap baris kami (isi tab) akan memiliki tinggi bagian yang sama. Jadi sebaiknya setiap baris memiliki jumlah konten yang sama atau akan ada ruang negatif yang tidak diinginkan di beberapa tab baris. Ini harus lebih masuk akal di kemudian hari.

Untuk saat ini, buka pengaturan bagian dan perbarui yang berikut:

Tinggi: 500 piksel (desktop), 900 piksel (tablet), 750 piksel (ponsel)
Margin: 100px atas, 100px bawah
Padding: 0px atas, 0px bawah

Perhatikan bahwa tinggi bagian perlu disesuaikan untuk memperhitungkan ruang konten yang lebih panjang saat kolom baris ditumpuk di seluler. Jadi perlu ada beberapa penyesuaian pada ketinggian ini untuk kebutuhan Anda sendiri.

Sekarang simpan pengaturan Anda dan mari kembali menambahkan lebih banyak baris.

Membuat Baris Kedua Konten Tab

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.

Buka pengaturan baris kedua dan alihkan warna gradien latar belakang dengan mengarahkan kursor ke area pratinjau latar belakang dan klik ikon "saklar" kecil.

Kemudian buka pengaturan modul teks yang digunakan untuk membuat tab di kolom 1 dan beri warna yang cocok dengan gradien atas yang baru.

Warna Latar Belakang: #4646c4

Kemudian kita perlu memindahkan tab ke kanan sehingga ketika baris ini tumpang tindih dengan baris di atas, Anda dapat melihat tab langsung di sebelah kanan tab di baris pertama.

Margin: Kiri 50px

Menambahkan Efek Hover Filter Opacity untuk Baris Kedua

Untuk baris, kita dapat menambahkan efek hover filter opacity sehingga ada transisi hover yang bagus saat mengarahkan kursor ke tab dan menampilkan konten baris.

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.

Durasi Transisi: 500ms
Kurva Kecepatan Transisi: Linear

Membuat Baris Ketiga Konten Tab

Sekarang kita dapat menambahkan baris terakhir dari konten tab. 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 Baris dengan gradien latar belakang baru.

Warna Kiri Gradien Latar Belakang: #333333
Warna Kanan Gradien Latar Belakang: #4646c4

Selanjutnya buka pengaturan modul teks yang digunakan untuk membuat tab di kolom 1 dan perbarui warna dan margin.

Warna Latar Belakang: #333333
Margin: 150px kiri

Seperti inilah tampilan halaman Anda sebelum kami memposisikan baris kami untuk saling tumpang tindih.

Tumpang Tindih Baris dengan Pemosisian Absolut

Untuk tumpang tindih baris kita, kita perlu menggunakan posisi absolut. Kemudian kita akan menggunakan opsi indeks Z untuk membawa setiap baris ke depan saat mengarahkan kursor ke tab. Tetapi karena kita memberikan baris kita posisi absolut (dan induk/bagian memiliki ketinggian yang ditetapkan), kita dapat menambahkan tinggi 100% ke setiap baris sehingga mereka menjangkau tinggi penuh bagian.

Berikut cara melakukannya.

Pertama, terapkan mode wireframe. Kemudian gunakan multiselect untuk memilih ketiga baris dan buka pengaturan salah satunya untuk menerapkan modal pengaturan elemen. Kemudian perbarui ketinggian menjadi 100%.

Tinggi: 100%

Ini akan mengatur ketinggian untuk ketiga baris menjadi 100%.

Kemudian tambahkan CSS khusus berikut ke Elemen Utama:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Sekarang gunakan mode tampilan desktop untuk melihat bagaimana baris tumpang tindih dengan baik untuk membuat tab kita.

Mengubah Urutan Baris saat Melayang dengan Indeks Z

Saat ini Anda mungkin telah memperhatikan baris/tab ketiga berada di garis depan. Jadi kita perlu menyusun ulang baris menggunakan Indeks Z sehingga tab pertama muncul terlebih dahulu hingga Anda mengarahkan kursor ke tab lain.

Untuk melakukan ini, kembali ke mode tampilan gambar rangka dan buka pengaturan untuk baris pertama yang Anda buat (dengan tab satu). Kemudian perbarui indeks z sebagai berikut:

Indeks Z: 10

Selanjutnya gunakan multiselect untuk memilih baris kedua dan ketiga. Kemudian buka modal pengaturan elemen dan tambahkan indeks z berikut saat mengarahkan kursor ke kedua baris.

Indeks Z: 11 (arahkan kursor)

Itu dia. Mari kita lihat hasil akhirnya.

Hasil Akhir

Alasan ini bekerja karena secara teknis setiap tab (modul teks) adalah bagian dari setiap baris meskipun mereka diposisikan di atas dan di luar baris. Itulah sebabnya mengarahkan kursor ke tab akan menampilkan baris di dalamnya.

Dan inilah tampilannya di ponsel.

Membuat Tab Arahan Vertikal

Jika Anda ingin menambahkan tab vertikal ke baris, yang perlu Anda lakukan hanyalah memposisikan ulang modul teks yang digunakan untuk membuat setiap tab. Kita juga perlu mengubah ukuran baris dan spasi bagian untuk memberi ruang bagi tab.

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, 10% kanan

Kemudian gunakan multiselect untuk memilih ketiga baris dan perbarui pengaturan elemen dengan yang berikut:

Lebar: 70% (desktop), 70% (tablet), 80% (ponsel)
Lebar Maks: 980px

Kemudian perbarui Arah gradien menjadi 90deg untuk ketiga uraian sehingga ketika kita menempatkan tab di sebelah kiri, warna gradien kiri akan menyatu dengan warna latar belakang tab.

Arah Gradien: 90 derajat

Sekarang saatnya untuk memposisikan tab modul teks kita di sebelah kiri baris kita untuk mendapatkan tab vertikal yang kita inginkan.

Buka pengaturan tab modul teks di baris pertama dan perbarui yang berikut:

Margin (desktop): -50px atas, -150px kiri
Margin (ponsel): -100px atas, -50px kiri

Pengaturan margin untuk ponsel adalah mengembalikan tab di atas baris untuk tampilan tab horizontal.

Selanjutnya, buka pengaturan untuk tab modul teks di baris bagian dan perbarui yang berikut:

Margin (desktop): 0px atas, -150px kiri
Margin (ponsel): -100px atas, 50px kiri

Dan untuk tab terakhir di baris ketiga, perbarui yang berikut:

Margin (desktop): 50px atas, -150px kiri
Margin (ponsel): -100px atas, 150px kiri

Hasil Akhir

Sekarang mari kita lihat hasil akhirnya.

Dan ini dia satu tablet dan ponsel.

Pikiran Akhir

Dengan sedikit pemikiran kreatif dan kekuatan Divi, Anda dapat membuat beberapa tab hover kustom yang cukup keren menggunakan baris Divi. Ada beberapa batasan untuk apa yang dapat Anda tampilkan. Misalnya, dengan pengaturan ini semua baris harus sama tingginya dengan bagian. Tapi, karena tidak perlu menggunakan plugin, saya pikir ini adalah solusi yang bagus. Dan jangan lupa, karena Anda dapat menggunakan baris Divi untuk konten Anda, ada banyak cara untuk menggunakan tab hover ini di proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!