Cara Menambahkan Efek Garis Bawah dan Garis Atas Bergaya di Menu Divi

Diterbitkan: 2024-11-25

Menu Divi adalah alat navigasi serbaguna dan dapat disesuaikan yang merupakan komponen inti situs web yang dibangun dengan Divi Theme Builder. Dikenal karena fleksibilitasnya, menu Divi memungkinkan kami menciptakan sistem navigasi yang menakjubkan secara visual dan sangat fungsional yang selaras sempurna dengan identitas merek Anda.

Menambahkan efek garis bawah dan garis atas yang bergaya adalah salah satu cara untuk meningkatkan menu situs web Anda. Animasi yang halus namun menarik secara visual ini meningkatkan interaksi pengguna dan meningkatkan pengalaman menjelajah secara keseluruhan.

Tutorial ini akan mengeksplorasi cara membuat efek hover dinamis untuk menu Divi Anda menggunakan CSS dan pengaturan khusus. Ini akan membantu Anda mendapatkan tampilan yang halus dan modern untuk situs web Anda, baik Anda seorang desainer web berpengalaman atau pemula Divi. Tutorial ini mudah diikuti dan memastikan hasil akhir yang profesional.

Garis bawahi efek hover
Efek hover garis besar

Cara Menambahkan Efek Garis Bawah dan Garis Atas Bergaya di Menu Divi

Langkah 1: Buat atau Buka Templat Header

Di dasbor WordPress Anda, navigasikan ke Divi -> Pembuat Tema . Pada halaman Pembuat Tema, buat templat header baru atau buka yang sudah ada dengan mengklik tombol Tambahkan Header Global atau pilih templat header yang ingin Anda tambahkan efek hover garis bawah atau garis atas yang bergaya.

Jika Anda membuat Header dari awal, setelah Anda memasukkan Template Header, Anda bisa mulai dengan mendesainnya.

Tambahkan bagian dan baris baru, lalu pilih tata letak (misalnya, satu baris, dua kolom). Setelah itu, gunakan modul seperti modul Menu untuk navigasi, modul Pencarian jika Anda menginginkan bilah pencarian, dan modul Ikuti Media Sosial untuk ikon sosial. Dalam contoh ini, kami hanya menambahkan modul Menu ke header kami.

Selanjutnya, edit dan tata header sesuai keinginan Anda.

Langkah 2: Tambahkan CSS Khusus

Setelah Anda menambahkan dan menata header Anda, kami akan menambahkan CSS khusus ke template header Anda.

Buka Pengaturan Halaman dengan mengklik tombol roda gigi (️) pada editor Template Header Anda. Setelah itu, navigasikan ke tab Advanced -> Custom CSS . Setelah Anda masuk ke bagian Custom CSS , salin cuplikan CSS sederhana di bawah ini dan tempelkan ke kolom input CSS Khusus .

Berikut adalah contoh cuplikan CSS yang dapat Anda terapkan untuk menambahkan efek hover garis bawah yang bergaya ke menu Anda: 

 .et_pb_menu_0_tb_header ul li > a:sebelum{
    isi: '';
    lebar: 0;
    kiri: 50%;
    tinggi: 4 piksel;
    radius batas: 2px;
    latar belakang: rgb(145, 255, 2);
    posisi: mutlak;
    indeks-z: -1;
    bawah: 14 piksel;
    opacity: 0;
    transisi: .4s kubik-bezier(.27,.03,.30,1.63);
}

.et_pb_menu_0_tb_header ul li > a:hover:before{
    lebar: 110%;
    kiri: -5%;
    opacity: 1;
}

.et-menu li li > a{
    lebar: 140 piksel;
    bantalan: 15 piksel;
}

Catatan : Jika Anda ingin mengubah efek hover dari underline menjadi overline, Anda dapat mengganti properti dan nilai “ bottom: 14px; ” (misalnya, top:15px ;).

Itu saja. Setelah menambahkan CSS khusus, klik tombol Simpan Perubahan pada halaman Pembuat Tema untuk menerapkan modifikasi.

Untuk melihat hasilnya, buka halaman mana pun di situs Anda yang menyertakan templat header yang baru saja Anda sesuaikan.

Apa fungsi kode CSS?

Keadaan Awal 

 .et_pb_menu_0_tb_header ul li > a:sebelum {
}

Pemilih CSS ini menargetkan elemen semu :before elemen jangkar (< a >) dalam item daftar (< li >) dari daftar tak berurutan (< ul >) dengan kelas.

.et_pb_menu_0_tb_header . Ini menerapkan gaya berikut:

  • content: '' : Membuat konten kosong untuk elemen semu.
  • width: 0 : Menyetel lebar awal menjadi 0 piksel.
  • left: 50% : Memposisikan elemen garis secara horizontal di tengah.
  • height: 4px : Menyetel tinggi menjadi 4 piksel.
  • border-radius: 2px : Membulatkan sudut.
  • background: rgb(145, 255, 2) : Mengatur warna latar belakang ke nilai RGB tertentu.
  • position: absolute : Memposisikan elemen garis dalam wadah induknya (item menu).
  • z-index: -1 : Menempatkan elemen di belakang konten lainnya.
  • bottom: 14px : Memposisikan elemen garis 14 piksel dari bagian bawah item menu.
  • opacity: 0 : Membuat elemen garis awalnya tidak terlihat.
  • transition: .4s cubic-bezier(.27,.03,.30,1.63) : Menambahkan efek transisi yang mulus ketika properti elemen berubah.

Negara Bagian Arahkan 

 .et_pb_menu_0_tb_header ul li > a:hover:before {
}

Pemilih ini menargetkan elemen semu yang sama seperti sebelumnya, namun hanya ketika jangkar diarahkan. Ini mengubah properti berikut:

  • width: 110% : Memperluas lebar hingga 110% dari lebar item menunya.
  • left: -5% : Ini menggeser elemen garis 5% ke kiri.
  • opacity: 1 : Membuat elemen garis terlihat.

Gaya Tambahan 

 .et-menu li li > a {
    lebar: 140 piksel;
    bantalan: 15 piksel;
}

Kode CSS ini menerapkan gaya pada item submenu di dalam item menu utama. Berikut rincian tiap bagiannya:

  • width: 140px : Menyetel lebar jangkar menjadi 140 piksel.
  • padding: 15px : Menambahkan 15 piksel padding di sekitar konten jangkar.

Intinya

Menambahkan efek garis bawah dan garis atas yang bergaya ke menu Divi Anda dapat meningkatkan daya tarik visual dan pengalaman pengguna situs web Anda secara signifikan. Anda dapat membuat menu yang menonjol sekaligus menyelaraskan dengan identitas merek Anda dengan memanfaatkan CSS khusus, penyesuaian desain yang cermat, dan pembuat tema Divi yang fleksibel.

Kesimpulannya, efek hover ini tidak hanya menambah sentuhan profesional tetapi juga meningkatkan navigasi dengan memberikan umpan balik visual yang jelas. Jangan ragu untuk bereksperimen dengan nilai properti dalam cuplikan CSS, seperti warna, ketebalan, posisi garis, dan kecepatan animasi, untuk menyesuaikan efek dengan gaya unik situs Anda, memastikan desain yang halus dan menarik.