Cara Menambahkan Ikon Sosial ke Menu Utama Divi

Hampir tidak mungkin menjalankan situs web yang sukses tanpa kehadiran media sosial khusus. Apakah Anda memilih itu untuk Instagram, Twitter, TikTok, Facebook, atau kombinasi apa pun dari itu dan apa pun, orang ingin berinteraksi dengan Anda dan merek Anda secara langsung. Memastikan bahwa Anda memiliki ikon sosial di menu utama Divi adalah cara yang bagus untuk menyalurkan lalu lintas dari situs web Anda ke jaringan pilihan Anda. Ini cepat dan mudah, dan kami akan memandu Anda melalui setiap langkah.

Mari kita mulai!

Pratinjau

Desktop

Seluler

Gunakan Pembuat Tema Divi untuk Mengunggah Gratis Header Global

Untuk artikel ini, kita akan menggunakan paket tata letak Klub Tenis dan freebie header/footer. Anda dapat mengunduh paket tata letak dari dalam pembuat Divi Anda, dan paket header/footer dari blog kami. Saat Anda mengunduhnya, file akan menjadi arsip .zip . Pastikan Anda mengekstraknya sehingga Anda memiliki file .json untuk diunggah ke Divi.

Sekarang, masuk ke dasbor WordPress Anda dan temukan Divi Theme Builder di bawah Divi – Theme Builder . Klik ikon panah atas-bawah di pojok kanan atas halaman. Ini membuka modal Portabilitas , pilih tab Impor , temukan file .json untuk header/footer yang Anda unduh, dan klik Impor Divi Theme Builder Templates .

Anda kemudian ingin masuk ke bagian header situs Anda. Karena ini adalah ikon sosial, kami akan menempatkannya di Header Global karena menurut kami ikon tersebut harus ada di semua halaman di situs Anda (kecuali ditentukan lain).

Anda harus berada di dalam pembangun sekarang. Jika Anda mengikuti petunjuk di atas, tajuk baru yang Anda unggah seharusnya sudah muncul di tempatnya.

Anda mungkin memperhatikan bahwa sudah ada ikon sosial di sini. Ikon sosial itu tidak ada di Menu Utama Divi yang sedang kami kerjakan hari ini. Jadi mari kita masuk ke gulma itu, ya?

Tambahkan Ikon Sosial ke Bilah Menu Utama

Hal pertama yang pertama, mari kita ubah struktur baris/kolom. Kami ingin menemukan baris di bagian #2 (yang paling bawah dengan tautan Rumah/Kontak ).

Kami memilih struktur dua kolom untuk tutorial ini, tapi itu yang terbaik untuk situs Anda. Setelah Anda memilih itu, masuk ke pengaturan Baris dan arahkan ke tab Desain . Temukan menu Sizing , dan aktifkan Use Custom Gutter Width . Atur nilai Lebar Talang ke 1. Anda dapat memasukkan angka atau menggunakan penggeser untuk melakukannya.

Klik tanda centang hijau untuk menyimpan pengaturan Anda. Kemudian kembali ke pengaturan Baris. Kali ini, pilih roda gigi pengaturan untuk kolom atas/pertama/kiri.

Selanjutnya, navigasikan ke tab Advanced . Temukan area Custom CSS dan klik ke bidang Elemen Utama . Di dalam bidang ini, Anda ingin menambahkan CSS berikut.

width:80%;

atau

width:80%!important;

Anda mungkin harus menambahkan tag !important untuk menata elemen ini. Tidak apa-apa. Seharusnya tidak membuat masalah kinerja atau kode spageti untuk ditangani karena itu adalah elemen tunggal.

Kemudian, masuk ke pengaturan Responsiveness dan gunakan kode yang sama untuk mengubah lebar kolom kembali ke 100% untuk perangkat seluler.

Selanjutnya, ulangi langkah ini untuk kolom kedua. Hanya saja kali ini, setel nilai default pada 20% dan masih memiliki nilai seluler pada 100% .

Setelah itu selesai, simpan perubahan Anda dan bersiaplah untuk menambahkan dan menata ikon media sosial Anda.

Tambahkan Modul Ikuti Media Sosial

Klik ikon + hitam di Kolom 2 untuk menambahkan modul baru dan gulir hingga Anda menemukan Ikuti Media Sosial . Masukkan itu.

Terlepas dari header yang Anda gunakan, ikon media sosial default kemungkinan besar tidak akan cocok dengan gaya Anda. Mereka juga tidak akan diposisikan dengan benar. Langkah selanjutnya adalah menata dan menempatkannya dengan benar. Di dalam pengaturan modul Ikuti Media Sosial , buka Desain lalu Perataan . Pilih di mana Anda ingin modul ditempatkan.

Kami memilih pembenaran kanan untuk desktop dan kemudian masuk ke opsi Responsiveness dan memusatkannya.

Selanjutnya adalah menggulir ke bawah ke menu Ikon . Pilih warna ikon yang Anda inginkan. Ini adalah f untuk Facebook, burung untuk Twitter, kamera untuk Instagram. Ini bukan latar belakang biru, misalnya.

Selanjutnya adalah spasi. Memang hal utama yang perlu disesuaikan adalah margin atas. Kami akan menerapkan margin atas 1,5 vw sehingga berpusat dengan teks menu. Jika Anda menginginkannya lebih atau kurang untuk seluler, Anda juga dapat menyesuaikannya.

Sekarang, klik pada tab Konten dan masuk ke ikon jejaring sosial individual yang ingin Anda sesuaikan. Anda akan mengulangi langkah-langkah ini untuk setiap ikon yang Anda pilih untuk situs Anda.

Gulir ke bawah ke Latar Belakang dan pilih warna yang Anda inginkan yang cocok dengan desain situs Anda. Sekali lagi, ingat ini hanya akan mengubah latar belakang ikon khusus ini.

Anda mungkin juga ingin mengubah warna ikon khusus ini. Anda dapat melakukannya di bawah tab Desain dan bagian Ikon , sama seperti di keseluruhan modul itu sendiri. Pengaturan ini akan mengesampingkan yang umum, jadi Anda tidak perlu khawatir mengganggu orang lain jika Anda menginginkan warna satu kali.

Kemudian, gulir ke bawah ke entri Border di bawah tab Design dan di dalamnya, Anda akan menemukan Border Width . Tetapkan nilai ini ke 3px, lalu pilih Warna Perbatasan yang menonjol dari latar belakang Menu Utama Divi.

Pada titik ini, Anda akan kembali ke tab Konten dan ulangi langkah-langkah ini untuk setiap ikon jejaring sosial yang ingin Anda tampilkan. Jika Anda ingin setiap ikon dalam modul ini memiliki desain yang sama, Anda cukup mengeklik kanan ikon yang Anda rancang dan memilih Copy Item Styles .

Selanjutnya, klik kanan jaringan lain yang ingin Anda beri gaya dan pilih Tempel Item Styles .

Dan itu saja! Pastikan untuk mengklik tombol Simpan di sudut kanan bawah layar untuk menyimpan keseluruhan tata letak. Kemudian, Anda aman untuk X keluar dari layar edit di sudut kanan atas.

Pastikan halaman Divi Theme Builder menampilkan Semua Perubahan yang Disimpan di kiri atas. Jika tidak, klik Simpan Perubahan . Setelah selesai, situs Anda akan langsung menampilkan ikon media sosial di Menu Utama Divi Anda!

Hasil Akhir

Dan seperti inilah hasil akhir Anda.

Desktop

Seluler

Membungkus

Memastikan bahwa audiens Anda selalu dapat menemukan jejaring sosial utama Anda adalah hal yang mudah dengan Divi. Hanya dalam beberapa langkah, Anda dapat menyesuaikan salah satu paket header/footer gratis kami untuk menyertakan ikon media sosial Anda ke menu utama (atau di mana pun Anda menginginkannya). Semoga beruntung!

Apa pendapat Anda tentang ikon media sosial di menu utama? Di mana Anda cenderung menempatkannya?