Cara Menambahkan Icon Pada Menu Utama di DIVI

Mar 13, 2021 | Tutorial DIVI

Kali ini kita akan jelaskan cara menambahkan icon pada menu utama (primary menu) di DIVI. Biasanya ini untuk Call-to-action, seperti “hubungi kami” attau “daftar sekarang”. Dengan menambahkan icon di sebelah kiri teks menu, tentu akan memperjelas maksud dan menarik perhatian.

Oke, langsung saja kita mulai tutorial cara menambahkan icon pada primary menu di DIVI.

Cara Menambahkan Icon Pada Menu di Website Anda

Untuk memberikan gambaran seperti apa maksudnya icon di sebelah kiri menu, silahkan perhatikan pada gambar di bawah ini:

Menu “Beli Sekarang” pada website distributor hazmat atau APD tersebut merupakan link call-to-action yang akan membuka WhatsApp di tab yang baru. Tujuannya adalah untuk mempermudah para pelanggan atau pengunjung website untuk menghubungi bisnis tersebut.

Berikut langkah-langkah untuk modifikasi menu utama website

  1. Buka Divi -> Opsi Tema -> CSS Kustom
  2. Tambahkan kode ini:
    .ld-menu-home > a:before {
    font-family: ‘ETMODULES’;
    content: ‘\e090’; /* change icon code here */
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #25D366; /* change icon color here */
    font-size: 1em; /* change icon size here */
    transition: all .3s ease;
    }
  3. Simpan dan Buka Tampilan -> Menu
  4. Klik Opsi Layar dan centang : Target taut, Atribut Judul, dan Kelas CSS
  5. Edit menu yang akan Anda modifikasi menjadi Call-To-Action
  6. Simpan, dan uji perubahan tersebut dengan meng-klik menu, jika sudah terlihat logo telepon, serta di klik membuka ke link untuk kirim pesan whatsapp maka artinya modifikasi menu website Anda sudah berhasil.

Cukup mudah bukan? tapi tunggu dulu, ada baiknya Anda mengetahui maksud dari kode dan settingan pada menu di atas.

Penjelasan Kode dan Settingan Menu

  • ld-menu-home ini merupakan nama kelas CSS yang kemudian harus “dipanggil” pada Kelas CSS di settingan menu.
  • \e090′ ini merupakan kode icon yang ada di DIVI, Anda dapat ganti icon ini sesuai kebutuhan atau relevansi pada teks menu Anda. Silahkan lihat kode icon DIVI selengkapnya disini.
  • #25D366 ini adalah kode warna hex, dalam hal ini.. warna tersebut adalah warna hijau WhatsApp.
  • Untuk merubah margin dan ukuran tombol, anda cukup ganti nilai pada margin dan font-size.
  • Pada settingan menu, kenapa ada Atribut Judul “Nofollow” ? ini tujuannya untuk memberi sinyal ke Google bahwa website kita tidak ada kaitannya secara khusus ke link tujuan, dalam hal ini link untuk kirim whatsapp. Ini semata-mata untuk menjaga kualitas SEO onsite website.
  • Link keluar sebaiknya dibuka di tab baru, agar supaya website Anda dapat terus terbuka. Ini akan menambah performa SEO Anda, dan sebaliknya jika tidak anda lakukan maka dapat menganggu kualitas SEO Anda.

Demikian sedikit penjelasan mengenai kode tersebut dan settingan menu tersebut.

Kesimpulan:

Modifikasi menu dengan menambahkan icon selain dapat membuat website semakin menarik juga memberikan fungsi Call-to-Action yang mana dapat meningkatkan konversi online pada website landing page bisnis Anda. Caranya cukup mudah, ikuti 6 langkah diatas.

Akan tetapi, ada beberapa pertimbangan untuk menjaga kinerja SEO Anda secara onsite, yakni dengan menambahkan link rel “nofollow” pada atribut link di menu, dan buka di tab baru.

Semoga tutorial singkat mengenai cara memodifikasi menu website ini dapat bermanfaat untuk Anda, khususnya rekan-rekan developer website landing page agar UMKM Indonesia semakin cepat berkembang bisnisnya, karena kita sebagai pemberi jasa pembuatan website dan digital marketing hanya akan berkembang jika Client kita juga berkembang bisnisnya.

 

Kenapa Website Tidak Terindeks Oleh Google? Apa Sebabnya?

Kenapa Website Tidak Terindeks Oleh Google? Apa Sebabnya?

Untuk Anda yang sedang bertanya-tanya kenapa website tidak terindeks oleh google, mungkin dapat temui jawabannya di sini. Pelajari apa sebabnya dan mulailah lakukan perbaikan, lihat dalam beberapa hari kedepan perubahan yang terjadi. SEO telah menjadi salah satu...

Kualitas Website Mempengaruhi Ranking SEO Website Anda

Kualitas Website Mempengaruhi Ranking SEO Website Anda

Sejak September 2021 kemarin, Google melakukan update besar-besaran pada algoritma mesin pencari mereka yang semakin kompleks. Salah satu perubahaan terbesar itu adalah mengenai kualitas website yang berpengaruh pada ranking SEO. Bagaimana Kualitas Website...

Staff Admin Online Semakin Banyak Dibutuhkan di Indonesia

Staff Admin Online Semakin Banyak Dibutuhkan di Indonesia

Ada kabar baik di tahun 2022 ini, staff admin online semakin banyak dibutuhkan. Banyak Client KiosMaya yang menanyakan referensi admin online karena KiosMaya sendiri tidak ada jasa admin online. Ini karena kebanyakan perusahaan memerlukan staff tersebut yang berada di...

Pentingnya Landing Page Berkualitas untuk Konversi Iklan

Pentingnya Landing Page Berkualitas untuk Konversi Iklan

Kenapa landing page yang berkualitas memiliki pengaruh penting pada konversi iklan ? dan kenapa ada landing page yang alami penurunan pada konversi iklan ? ini bahasan kita kali ini di penghujung Tahun 2021. Pentingnya Landing Page Berkualitas   Landing page atau...

Tips Membuat Website Landing Page Sesuai Praktik Terbaik

Tips Membuat Website Landing Page Sesuai Praktik Terbaik

Website landing page akhir-akhir ini semakin banyak peminatnya. Maklum, tipikal bisnis online di Indonesia mereka banyak menemukan para "master" yang mengajarkan cara instan jualan banyak pakai website landing page. Namun, dalam membuat website landing page tidak bisa...

Manfaat SEO untuk Perusahaan di Era Digital Sekarang Ini

Manfaat SEO untuk Perusahaan di Era Digital Sekarang Ini

Di era digital semakin banyak perusahaan yang mendapat manfaat dari SEO atau Search Engine Optimization. Dalam artikel kali ini kami jelaskan beberapa manfaat SEO untuk bisnis, baik bisnis online maupun offline. SEO merupakan optimasi halaman website agar berkualitas...

Pin It on Pinterest

Share This