Cara Mendesain Bilah Tombol Ikuti Media Sosial Pop Out ke Templat Halaman Anda di Divi

Tombol Ikuti Media Sosial terus menjadi tambahan populer untuk situs web mana pun. Perusahaan dan individu menggunakan tautan ini untuk mengarahkan pengguna ke halaman media sosial mereka dengan harapan pengunjung akan mengikuti mereka atau berlangganan saluran mereka. Biasanya, Anda melihat tombol-tombol ini di halaman kontak, sidebar, atau di footer situs web.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mendesain bilah tombol ikuti media sosial pop out ke templat halaman di Divi. Ini akan memberi tombol ikuti media sosial tersebut visibilitas yang lebih besar di situs Anda tanpa menjadi gangguan. Plus, dengan Pembuat Tema Divi, Anda membuat templat halaman yang menyertakan tombol-tombol ini untuk setiap (atau semua) halaman melalui situs Anda dengan mudah.

Ayo masuk dan mulai!

Sneak Peek

Berikut adalah tampilan cepat tombol ikuti media sosial yang dibuat dalam tutorial ini.

Unduh Templat Halaman Bilah Tombol Ikuti Media Sosial Pop Out GRATIS

Untuk meletakkan tangan Anda di Templat Halaman Bilah Tombol Ikuti Media Sosial dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada di daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan tambahkan salah satu file json ke Divi Theme Builder menggunakan opsi Theme Builder Portability.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus menginstal dan mengaktifkan Tema Divi. Pastikan Anda memiliki Divi versi terbaru.

Anda juga memerlukan setidaknya satu halaman yang dibuat dengan Divi Builder untuk tujuan pengujian agar dapat menetapkan template baru ke halaman tersebut untuk menampilkan hasilnya.

Setelah itu, Anda siap untuk pergi.

Membuat Bilah Tombol Ikuti Media Sosial Pop Out untuk Templat Halaman di Divi

Membuat Template Baru

Dari Dasbor WordPress, navigasikan ke Divi > Pembuat Tema. Kemudian klik kotak “Add New Template” untuk membuat template baru.

Tetapkan template ke halaman yang Anda inginkan agar bilah promo ditampilkan.

Pada template baru, klik area “Add Custom Body” lalu pilih “Build Custom Body”.

Kemudian pilih opsi "Build From Scratch".

Membuat Bilah Tombol Ikuti Media Sosial

Buat Baris Baru

Sebagai permulaan, mari tambahkan baris satu kolom ke template.

Tambahkan Modul Tombol Ikuti Media Sosial

Di baris satu kolom, tambahkan modul ikuti media sosial.

Tambahkan Jejaring Sosial

Di bawah pengaturan ikuti media sosial, tambahkan semua jejaring sosial yang ingin Anda tampilkan. Untuk menambahkan jaringan baru, klik ikon tambah abu-abu Tambah Jaringan Sosial Baru, lalu pilih jaringan dari daftar.

Anda juga perlu menambahkan URL tautan untuk halaman media sosial yang ingin Anda alihkan pengunjungnya. Untuk melakukan ini, klik ikon pengaturan di jaringan media sosial dan perbarui URL Tautan Akun.

Tambahkan Modul Tombol

Setelah Anda selesai mengikuti modul jaringan media sosial, kami siap menambahkan modul tombol. Tombol ini akan menjadi tempat pengguna mengarahkan kursor untuk membuka bilah pop out. Lanjutkan dan tambahkan modul tombol lalu seret ke atas modul ikuti media sosial.

Konten Tombol

Selanjutnya perbarui konten Tombol sebagai berikut:

• Teks Tombol: Ikuti
• URL Tautan Tombol: #

Gaya dan Pemosisian Tombol

Kemudian perbarui pengaturan desain tombol sebagai berikut:

• Ukuran Teks Tombol: 16px
• Warna Teks Tombol:
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 1px
• Font Tombol: Montserrat
• Font tombol Berat: Tebal
• Ikon Tombol: panah kanan (lihat tangkapan layar)
• Margin: 100% tersisa
• Padding: 100px bawah

Kemudian tambahkan CSS Kustom berikut ke Elemen Utama:

position: absolute;

Pengaturan Baris

Setelah tombol ditata dan siap digunakan, perbarui pengaturan baris sebagai berikut:

• Warna Latar Belakang: #ffffff
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 64px
• Padding: 24px atas, 16px bawah, 16px kiri

Bayangan Kotak Baris

• Bayangan Kotak: lihat tangkapan layar
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 30px
• Warna Bayangan (desktop): transparan
• Warna Bayangan (arahkan kursor): rgba(0,0,0,0.2)

Pemosisian Baris

Kemudian tambahkan CSS khusus berikut ke baris Elemen Utama:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Ini akan memposisikan baris dalam posisi tetap sepertiga dari bagian atas browser.

Munculkan pada Efek Arahkan Arah Dengan Margin Kustom

Sekarang tambahkan nilai margin berikut untuk menambahkan pop out pada fungsionalitas hover.

• Margin (desktop): -64px kiri
• Margin (arahkan kursor): 0px ke kiri

Itu menangani bilah tombol ikuti media sosial. Tetapi kita masih perlu menyelesaikan template dengan membuat modul konten posting yang diperlukan.

Menambahkan Modul Konten Postingan ke Template

Pada titik ini bilah tombol ikuti media sosial siap digunakan. Tetapi karena ini adalah template, kita perlu memastikan dan menambahkan modul konten posting untuk menampilkan konten halaman menggunakan template ini.

Tambahkan Baris Baru dengan Modul Konten Posting

Di bawah baris yang berisi bilah tombol ikuti media sosial Anda, tambahkan baris satu kolom baru.

Kemudian tambahkan Modul Konten Posting ke Baris.

Saat ini, modul konten postingan akan dibatasi pada lebar default baris induk. Kita perlu mengubah lebar dan padding baris sehingga akan menjangkau lebar penuh browser tanpa ada celah. Ini penting karena modul konten posting menentukan area yang Anda miliki untuk membangun halaman menggunakan Divi Builder.

Perbarui berikut ini:

• Lebar: 100%
• Lebar Maks: 100%
• Padding: 0px atas, 0px bawah

Sekarang perbarui pengaturan Bagian sebagai berikut:

• Padding: 0px atas, 0px bawah

Itu tentang melakukannya. Sekarang pastikan dan simpan tata letak sebelum keluar dari editor. Kemudian simpan juga perubahan untuk pembuat tema.

Hasil Akhir

Untuk melihat hasil akhir, kunjungi halaman yang memiliki template yang ditetapkan. Inilah yang akan terlihat seperti bilah tombol ikuti media sosial pop out.

Pikiran Akhir

Bilah tombol ikuti media sosial ini pasti akan membantu membawa jejaring sosial penting itu ke garis depan. Fungsionalitas pop out akan memastikan ikon tidak akan menjadi gangguan bagi pengguna. Dan Anda dapat menambahkan bilah ke templat halaman mana pun menggunakan Pembuat Tema. Semoga ini akan menjadi tambahan yang bagus untuk proyek Anda berikutnya!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!