Cara Menambahkan Icon Pada Menu Utama di DIVI

Mar 13, 2021 | Tutorial DIVI Builder

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 mengubah 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.

 

GPT-4 Akan Segera Hadir Dengan Fitur Lebih Canggih

GPT-4 Akan Segera Hadir Dengan Fitur Lebih Canggih

Open A.I yang sebelumnya mengeluarkan GPT (Generative Pre-Trained Transformer) versi 3.5 yang kita kenal dengan ChatGPT, kini mengumumkan akan mengeluarkan GPT-4 dengan fitur yang lebih canggih. GPT-4 Hadir Pertengahan Maret 2023 Antusias tinggi terjadi pada komunitas...

Strategi Digital Marketing yang Efektif untuk Ramadhan

Strategi Digital Marketing yang Efektif untuk Ramadhan

Strategi digital marketing yang efektif dapat menjadi kunci sukses bagi perusahaan dalam menjangkau target pemirsa mereka selama event Ramadhan. Dalam artikel ini, kami akan membahas strategi digital marketing yang efektif untuk event Ramadhan, agar Anda bisa mencapai...

Harga Jasa SEO Dapat Ditentukan Dari Kunjungan Website

Harga Jasa SEO Dapat Ditentukan Dari Kunjungan Website

Berapa harga jasa SEO yang sebelumnya "gelap" kini sudah tidak lagi seperti itu. Dulu, harga jasa SEO bisa sangat murah dan juga bisa sangat mahal. Artikel menginformasikan beberapa cara penerapan harga jasa SEO yang bertujuan agar para pengguna jasa dapat memahami...

ChatGPT Untuk Menulis Artikel SEO? Pahami Konsekuensinya

ChatGPT Untuk Menulis Artikel SEO? Pahami Konsekuensinya

Secara sepintas, ChatGPT sepertinya memudahkan para penulis artikel SEO. Akan tetapi, ChatGPT untuk menulis artikel SEO memiliki konsekuensi sendiri. ChatGPT dari Open.ai merupakan alat online untuk menjawab pertanyaan dengan memahami konteks dan menyajikan jawaban...

Cara Membuat Website Landing Page Sesuai Praktik Terbaik

Cara Membuat Website Landing Page Sesuai Praktik Terbaik

Website landing page akhir-akhir ini semakin banyak peminatnya, demikian tentang cara bikin landing page juga semakin banyak dicari di Google. Maklum, tipikal bisnis online di Indonesia mereka banyak menemukan para "master" yang mengajarkan cara instan jualan banyak...

Digital Marketing Perusahaan B2B Harus Perkuat Konten

Digital Marketing Perusahaan B2B Harus Perkuat Konten

Pemasaran konten merupakan strategi digital marketing perusahaan B2B yang sudah teruji efektifitasnya. Pelajari apa saja elemen yang ada untuk menjalankan misi digital marketing di tahun 2023 ini, lengkap beserta tujuan dan perkiraan biaya yang dibutuhkan. Trend...

Pin It on Pinterest

Share This