Hello, AMPs

Cara Membuat Tombol Call To Action di Menu Divi

by | Jun 11, 2019 | Tutorial Tema Divi | 0 comments

Salah satu bagian terpenting dari situs web yang sukses berdasarkan konversi adalah hadirnya tombol Call To Action atau Ajakan Bertindak yang terdapat di area menu.

Menu berfungsi seperti peta untuk situs web Anda agar memudahkan pengguna mencari informasi yang mereka inginkan. Sangat penting untuk menyorot elemen terpenting yang ingin dilihat pengguna, misalnya ialah ajakan untuk bertindak dengan nomor telepon (jika Anda mengharapkan pengguna untuk menghubungi Anda secara langsung) atau tautan ke halaman produk, layanan, atau halaman pendaftaran Anda. tombol call to action

Cara Membuat Call To Action dari Item Menu

WordPress hadir dengan menu navigasi yang memudahkan pengguna pemula. Silahkan ikuti langkah-langkah ini untuk membuat tombol agar bisa membuat link ke apa pun di menu!

  1. Masuk ke Dasbord WordPress.
  2. Dari menu ‘Appearance’ di sisi kiri Dashboard, pilih menu ‘Menus’.
  3. Temukan item menu yang ingin Anda sesuaikan.
  4. Tambahkan nama kelas khusus ke item menu Anda: menu_cta

Jika Anda tidak melihat kotak untuk memasukkan CSS Classes kustom Anda klik “Opsi Layar” di kanan atas dasbor menu Anda untuk mengaktifkannya.

Baca juga : Pengaturan Lengkap Tema Divi

Tambahkan CSS khusus

Pada langkah ini, saatnya menambahkan beberapa CSS ke situs web Anda. CSS dapat ditambahkan dalam tiga cara berikut:

  • Console CSS khusus di Opsi Tema Divi> tab general
  • Plugin Custom CSS dan JavaScript Developer Edition
  • File Style.css dalam tema anak situs web

call to action css Untuk tutorial ini, kami akan menggunakan kotak CSS Kustom, Caranya seperti berikut :

  1. Masuk ke Dasbor WordPress.
  2. Pergi ke “Divi> theme options” di mana Anda akan menemukan opsi tema Divi.
  3. Buka tab “general” (harus yang sekarang.)
  4. Tambahkan kode CSS ke kotak yang disebut dengan “Custom CSS”.
  5. Klik save changes “Custom CSS”.

Costum Css

.

.menu_cta { background-color: #ff6900; color: #fff; padding: 0 !important; } .menu_cta a { color: #fff !important; padding: 15px 15px 15px 15px !important; }

Jika Anda ingin mempelajari lebih lengkap tentang Css Anda bisa mengikuti kelas kursus di Dumet School.

Semoga tutorial ini memberikan informasi yang bermanfaat. Anda bisa melihat tutorial tentang tema Divi lainnya disini, Jika Anda memiliki pertanyaan, Silahkan tinggalkan dikomentar.