Cara Menambahkan Ikon Sosial ke Menu Utama Divi
Diterbitkan: 2017-06-27Dalam tutorial Divi hari ini, kami akan menunjukkan cara menambahkan ikon sosial ke menu utama situs web Divi Anda. Dengan mengikuti tutorial ini selangkah demi selangkah, Anda akan dapat menambahkan ikon sosial ke situs web apa pun yang Anda buat – baik itu untuk Anda sendiri atau klien.
Kami sudah memiliki kemampuan untuk menambahkan ikon sosial langsung ke header dan footer situs web dengan penyesuai tema Divi. Tetapi jika bukan itu yang Anda cari, tutorial ini mungkin bisa membantu Anda karena dalam banyak kasus; orang lebih suka memiliki ikon sosial di menu utama mereka daripada header atau footer situs web mereka.
Kami akan menunjukkan kepada Anda bagaimana Anda dapat menambahkannya, bagaimana Anda dapat menyesuaikannya dan bagaimana membukanya ke dalam tab baru. Ini semua adalah hal yang benar-benar perlu Anda ketahui agar ikon sosial di menu utama Anda dapat membawa nilai tambah ke seluruh situs web Anda.
Mengapa Menambahkan Ikon Sosial ke Menu Utama?
Situs web dan saluran media sosial dalam banyak kasus saling melengkapi. Tidak semua konten yang dibagikan di situs web muncul di saluran media sosial dan sebaliknya. Itu sebabnya mempromosikan situs web Anda di saluran media sosial Anda dan saluran media sosial Anda di situs web Anda tidak jarang dan terus terang; sangat didorong.
Anda ingin orang berinteraksi dengan perusahaan atau merek Anda dengan cara yang paling mereka kenal. Website Anda biasanya ' wilayah yang tidak diketahui ' bagi mereka. Oleh karena itu, hambatan untuk menghubungi Anda secara langsung melalui situs web Anda mungkin lebih besar daripada saluran media sosial. Kebanyakan orang yang mengunjungi halaman Facebook atau halaman Twitter Anda sudah terintegrasi ke dalam platform dan perasaan nyaman dapat mempengaruhi perilaku mereka secara positif.
Itu sebabnya, secara keseluruhan, menempatkan ikon sosial di situs web Anda sangat dianjurkan. Tetapi mengapa membagikannya secara eksplisit di menu utama Anda? Kami telah mencantumkan dua alasan utama.
Mudah Ditemukan/Menu Mengikuti Pengunjung Selama Kunjungan Mereka
Saat Anda menambahkan ikon sosial ke situs web Anda, Anda ingin ikon tersebut terlihat sejelas mungkin. Orang tidak perlu berusaha keras untuk menemukan ikon sosial di situs web Anda. Di situlah menempatkan ikon sosial di menu utama dapat membuat perbedaan. Menu utama mengikuti seseorang selama mereka tinggal di situs web Anda. Tidak perlu pergi mencari ikon, ikon datang kepada Anda. Satu-satunya hal yang harus dilakukan orang tersebut adalah mengklik dan mereka akan sampai di sana.
Menu utama mengikuti seseorang selama mereka tinggal di situs web Anda. Tidak perlu pergi mencari ikon, ikon datang kepada Anda. Satu-satunya hal yang harus dilakukan pengunjung adalah mengkliknya dan mereka akan sampai di sana.
Memicu Aksi
Seperti yang disebutkan sebelumnya; saluran media sosial dan situs web saling melengkapi. Mereka bekerja sama dan biasanya memiliki tujuan yang sama seperti menginformasikan calon prospek dan menarik mereka ke layanan atau produk yang ditawarkan. Semakin mereka dihadapkan dengan mereka, semakin besar kemungkinan rasa ingin tahu mereka akan terpicu
Untuk mendukung hubungan antara situs web dan saluran media sosial, ada baiknya untuk menghadapkan pengunjung dengan ikon sosial sesering mungkin. Semakin mereka dihadapkan dengan mereka, semakin besar kemungkinan rasa ingin tahu mereka akan terpicu dan semakin besar kemungkinan mereka akhirnya akan mengkliknya.
Cara Menambahkan Ikon Sosial ke Menu Utama Divi
Berlangganan Saluran Youtube Kami
Instal Font Luar Biasa
Pertama-tama, kita perlu menginstal Font Awesome ke situs WordPress kita. Kita akan melakukan ini dengan menambahkan beberapa kode CSS ke dalam Opsi Tema Divi.
Buka situs WordPress Anda, buka Divi > Opsi Tema > Integrasi dan tempel kode berikut di bagian <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Font mengagumkan sekarang harus ditambahkan ke font yang sedang digunakan di situs web Anda. Anda sekarang dapat menambahkan ikon-ikon ini ke menu utama Anda dengan mengikuti bagian selanjutnya dari posting kami langkah demi langkah.
Mulai Membuat Menu Utama
Kemungkinan besar, Anda telah membuat menu utama kustom Anda sendiri di mana Anda telah mencantumkan semua halaman yang ingin Anda tampilkan di menu utama situs web Anda. Jika Anda belum melakukannya, buka halaman 'Menus' di dalam Appearance dan buat menu baru.
Selanjutnya, beri nama menu, tambahkan halaman yang ingin Anda tampilkan di menu utama Anda dan pilih opsi 'Menu Utama' di bawah.
Tambahkan Ikon Sosial
Selanjutnya, kami ingin menambahkan ikon sosial. Saat membuat menu utama, Anda dapat memilih di mana Anda ingin ikon sosial Anda muncul. Dalam kebanyakan kasus, mereka akan muncul tepat setelah halaman, tetapi Anda juga dapat menempatkannya terlebih dahulu. Ada ikon media sosial yang tersedia untuk semua situs web penting dan paling populer di luar sana; dari Facebook ke Twitter, Instagram, LinkedIn, dan lainnya.
Mulailah dengan membuka tautan berikut di situs web Font Awesome. Kami akan membutuhkan situs web ini untuk bagian selanjutnya dari posting ini di mana kami akan menambahkan ikon secara manual.
Tambahkan Ikon Secara Manual
Cara kerja yang sama berlaku untuk setiap ikon sosial yang Anda tambahkan ke menu utama Anda. Sebagai contoh, kami akan menunjukkan cara menambahkan ikon Instagram. Untuk semua ikon lain yang ingin Anda tambahkan juga; ketahuilah bahwa cara kerjanya sama (hanya ikon, kode HTML, dan URL yang berbeda).
Buka opsi 'Tautan Khusus' dan Anda akan melihat dua bidang muncul: URL dan Label Navigasi. Jelas, bidang URL adalah tempat Anda mengetik URL yang mengarahkan pengunjung ke salah satu saluran media sosial. Dalam contoh ini, kami ingin ikon mengarah ke Instagram, jadi ketikkan saja URL Instagram Anda.
Selanjutnya, buka situs web Font Awesome di browser Anda dan cari ikon Instagram melalui bilah pencarian. Demikian juga, Anda dapat mencari Facebook, LinkedIn, dan ikon lainnya.
Setelah Anda mengklik ikon Instagram, Anda akan melihat bahwa situs web menyediakan kode HTML berikut:
<i class="fa fa-instagram" aria-hidden="true"></i>
Ini adalah kode persis yang perlu kita gunakan di bidang Label Navigasi, jadi lanjutkan dan selesaikan tautan khusus dengan menyalin dan menempelkan kode ke dalam bidang.
Ulangi proses yang sama untuk setiap ikon sosial yang ingin Anda tampilkan di menu utama Anda dan lihat tampilannya di bagian depan situs web Anda.
Ubah Tampilan Ikon Sosial
Perubahan Kolektif pada Menu Utama (Termasuk Ikon Sosial)
Penyesuai Tema memungkinkan Anda membuat semua perubahan tampilan yang ingin Anda buat pada menu utama di satu tempat.
Perubahan yang dapat Anda lakukan pada menu utama dengan opsi Divi juga berlaku untuk ikon sosial. Saat Anda memberi warna tertentu ke menu utama Anda, misalnya, ikon sosial akan memiliki warna yang sama. Itu karena kami menggunakan font alih-alih gambar untuk membuat ini berfungsi.
Anda dapat membuat semua perubahan yang ingin Anda buat pada tampilan di Penyesuai Tema dengan membuka Header & Navigasi > Bilah Menu Utama. Perubahan yang Anda buat berlaku secara real-time dan memberi Anda perspektif yang baik tentang tampilan menu utama yang Anda inginkan.
Buka Ikon Sosial di Tab Baru
Bagian dari pos ini adalah sesuatu yang ekstra yang dapat Anda lakukan dengan ikon sosial. Anda mungkin tidak ingin membuat pengunjung Anda menjauh dari situs web, meskipun mereka mengunjungi saluran media sosial Anda. Anda ingin menjaga kedua interaksi tetap hidup selama mungkin dengan membuka tautan media sosial ke tab baru setiap kali seseorang mengkliknya.
Kita dapat dengan mudah membuat opsi 'Buka di Tab Baru' berfungsi di semua ikon media sosial dengan kembali ke menu yang telah kita buat sebelumnya. Kita perlu membuat semua penyesuaian secara manual untuk masing-masing ikon. Dalam contoh ini, kita akan membuat perubahan pada ikon Instagram.
Lanjutkan dan hapus URL yang Anda berikan di bidang URL dan tempel kode berikut ke dalam URL navigasi:
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
Lakukan hal yang sama untuk setiap ikon jika Anda ingin ikon tersebut terbuka di tab baru. Setiap kali pengunjung mengkliknya, mereka akan terbuka di tab baru yang memungkinkan Anda menjaga pengunjung tetap ada selama mungkin.
Pikiran Akhir
Tutorial ini pasti akan membantu Anda mengintegrasikan ikon sosial ke situs web Divi Anda sendiri seperti yang Anda inginkan. Anda dapat menyesuaikannya dan menyesuaikannya dengan menu utama lainnya. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah. Kami akan tetap berhubungan dan mencoba menjawab semua pertanyaan atau saran yang Anda miliki.
Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!
Gambar Unggulan melalui Oceans / shutterstock.com