Cara Membuat Efek Arahkan Tombol Ikuti Media Sosial yang Unik dengan Divi

Modul Ikuti Media Sosial Divi memungkinkan Anda untuk dengan mudah menata dan menambahkan tautan penting itu ke jejaring sosial Anda di mana saja di situs web Anda. Dan jika Anda ingin mengotori tangan Anda dengan beberapa efek hover bawaan Divi yang kuat, Anda juga dapat mendesain beberapa efek hover kreatif untuk tombol ikuti media sosial Anda.

Dalam tutorial ini, saya akan menunjukkan kepada Anda beberapa efek hover tombol ikuti media sosial yang unik yang mungkin akan mengejutkan Anda.

Coba lihat!

Sneak Peek

Berikut ini adalah sneak peek efek hover yang akan kita buat.

Bagian 1: Memindahkan Bayangan Kotak untuk Menyoroti Tombol Ikuti Media Sosial Anda

Perbatasan ke Titik

Titik ke Perbatasan

Memantul Bayangan 1

Memantul Bayangan 2

Mulai Membangun Bagian 1 Efek Arahkan Arah

Bagian 2: Mengubah Warna, Ukuran, dan Bentuk saat Melayang

Mengubah Ukuran dan Warna

Mengubah Ukuran, Warna dan Bentuk

Mulai Membangun Bagian 2 Efek Arahkan Arah

Bagian 3: Efek Filter

Mulai Membangun Efek Arahkan Bagian 3

Bagian 4: Ikon Besar dengan Campuran Layar dan Efek Filter

Mulai Membangun Efek Arahkan Bagian 4

Mulai

Berlangganan Saluran Youtube Kami

Untuk menjalankan tutorial ini, yang Anda perlukan hanyalah Tema Divi yang diinstal dan aktif. Kemudian buat halaman baru dan beri judul halaman Anda. Kemudian klik untuk menggunakan Divi Builder dan pilih opsi Use a Premade Layout. Dari modal popup Muat dari Perpustakaan, pilih Paket Tata Letak Pengembang Aplikasi. Kemudian klik untuk menggunakan tombol Untuk memulai desain tombol ikuti media sosial kami, kami akan menggunakan tata letak Halaman Beranda Pengembang Aplikasi.

Publikasikan halaman Anda dan klik tombol untuk Membangun di Front End.

Sekarang hapus semua bagian halaman kecuali bagian yang berisi tombol ikuti media sosial di bagian bawah halaman.

Ini akan berfungsi sebagai template awal untuk membuat efek hover kami.

Mari simpan bagian tersebut ke Divi Library sehingga kita dapat menambahkan versi baru dari desain tombol ikuti media sosial ini bila diperlukan.

Anda juga dapat menduplikasi bagian tersebut beberapa kali di halaman Anda. Ini akan memungkinkan Anda untuk membuat efek hover yang berbeda dimulai dengan bagian premade.

Sekarang Anda siap untuk mulai membuat efek hover.

Mari kita mulai.

#1 Memindahkan Bayangan Kotak untuk Menyoroti Tombol Ikuti Media Sosial Anda

Perbatasan ke Titik

Untuk efek hover ini, kita akan menambahkan bayangan kotak di sekitar tombol yang mengecil dan melayang di atas tombol saat hover. Untuk melakukan ini, buka modul ikuti media sosial dan klik untuk membuka pengaturan jejaring sosial facebook.

Kemudian salin warna latar belakang yang digunakan untuk ikon ke clipboard Anda (#3b5998). Warna ini akan digunakan untuk bayangan kotak.

Sekarang buka tab desain dan perbarui yang berikut:

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px (default), -46px (arahkan kursor)
Kekuatan Buram Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 5px (default), -16px (arahkan kursor)

Untuk warna bayangan, tempel di warna latar belakang (#3b5998) dan kurangi opacity sebesar 50%. Ini akan memberi Anda versi warna latar tombol yang lebih terang.

Warna Bayangan: rgba (59,89,152,0.5)

Sekarang klik kanan pada kategori style Box Shadow dan pilih Copy Box Shadow Styles.

Simpan pengaturan untuk jejaring sosial facebook dan kemudian klik kanan pada masing-masing jejaring sosial dan pilih Tempel Item Styles untuk masing-masing. Ini akan menerapkan gaya bayangan kotak yang sama ke tombol lainnya.

Namun, Anda masih perlu memperbarui warna bayangan kotak yang spesifik untuk masing-masing. Untuk melakukannya, ulangi proses yang sama yang kami lakukan untuk jejaring sosial Facebook. Buka pengaturan jejaring sosial tertentu, salin warna latar belakang yang digunakan, tempelkan sebagai warna bayangan kotak baru, lalu turunkan opacity sebesar 50%.

Berikut adalah warna bayangan kotak untuk masing-masing jejaring sosial yang tersisa:

Warna Bayangan Kotak Twitter: rgba (0,172.237,0.5)
Warna Kotak Bayangan Instagram: rgba (234,44,89,0.5)
Warna Bayangan Kotak Dribble: rgba (234,76,141,0.5)
Warna Bayangan Kotak Youtube: rgba(168,36,0,0.5)

Setelah warna bayangan kotak diperbarui, lihat hasil akhirnya.

Titik ke Perbatasan

Anda dapat dengan mudah membalikkan efek hover dengan mengganti nilai default dan hover untuk posisi vertikal bayangan kotak dan kekuatan penyebaran.

Gandakan bagian tersebut (jika Anda ingin mempertahankan desain "batas ke titik") dan kemudian buka pengaturan modul ikuti media sosial. Kemudian buka pengaturan untuk jejaring sosial Facebook dan perbarui yang berikut:

Posisi Vertikal Bayangan Kotak: -46px (default), 0px (arahkan kursor)
Kekuatan Penyebaran Bayangan Kotak: -16px (default), 5px (arahkan kursor)

Anda perlu memperbarui pengaturan bayangan kotak baru ini untuk setiap jejaring sosial yang tersisa. Anda dapat melakukan ini secara manual atau Anda dapat menggunakan klik kanan untuk menyalin posisi Box Shadow Vertical dan menyebarkan kekuatan dan kemudian menempelkannya ke masing-masing jaringan.

Setelah selesai, desain akhir Anda akan terlihat seperti ini.

Efek Bayangan Memantul

Untuk versi selanjutnya dari desain dan efek hover ini, kita akan membuat bayangan kotak (titik) dari masing-masing tombol dimulai di lokasi yang sama secara default. Ini akan menciptakan semacam efek memantul.

Untuk memulai, Anda dapat menduplikasi desain "titik ke batas" yang telah kami buat sebelumnya. Buka pengaturan modul ikuti media sosial dan kemudian buka pengaturan jejaring sosial facebook. Perbarui gaya bayangan kotak berikut:

Posisi Horizontal Bayangan Kotak: 140px (default), 0px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: -70px (default), 0px (arahkan kursor)

Untuk jejaring sosial Twitter, perbarui yang berikut ini:

Posisi Horizontal Bayangan Kotak: 70px (default), 0px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: -70px (default), 0px (arahkan kursor)

Untuk jejaring sosial Instagram, perbarui yang berikut:

Posisi Horizontal Bayangan Kotak: 70px (default), 0px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: -70px (default), 0px (arahkan kursor)

Untuk jejaring sosial Dribble, perbarui yang berikut ini:

Posisi Horizontal Bayangan Kotak: -70px (default), 0px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: -70px (default), 0px (arahkan kursor)

Untuk jejaring sosial Youtube, perbarui yang berikut:

Posisi Horizontal Bayangan Kotak: -140px (default), 0px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: -70px (default), 0px (arahkan kursor)

Lihat hasil akhirnya.

Jika Anda tidak ingin titik muncul pada awalnya, Anda dapat mengatur warna bayangan kotak default menjadi transparan dan kemudian menambahkan warna bayangan kotak saat mengarahkan kursor. Ini akan memberi Anda desain yang terlihat seperti berikut:

#2 Mengubah Warna, Ukuran, dan Bentuk saat Melayang

Untuk rangkaian efek hover berikutnya, saya akan menunjukkan cara mudah mengubah warna, ukuran, dan atau bentuk tombol media sosial di hover. Untuk memulai, pastikan Anda menggunakan versi baru dari bagian tombol ikuti media sosial dari tata letak Halaman Beranda Pengembang Aplikasi. Jika Anda menyimpannya ke Perpustakaan Divi Anda, sekarang saat yang tepat untuk menambahkannya ke halaman Anda.

Mengubah Warna

Mengubah warna tombol media sosial saat melayang cukup mudah. Untuk contoh ini, mari kita mulai dengan warna latar belakang abu-abu gelap secara default yang berubah menjadi warna jejaring sosial.

Untuk melakukan ini, buka modul Ikuti Media Sosial dan kemudian buka pengaturan Jaringan Facebook. Perbarui berikut ini:

Warna Latar Belakang: #333333 (default), #3b5998 (arahkan kursor)

Kemudian lanjutkan proses ini untuk memperbarui empat warna latar belakang jejaring sosial yang tersisa sebagai berikut:

Warna latar belakang Twitter: #333333 (default), #00aced (arahkan kursor)
Warna latar belakang Instagram: #333333 (default), #ea2c59 (arahkan kursor)
Warna latar belakang dribble: #333333 (default), #ea4c8d (arahkan kursor)
Warna latar belakang Youtube: #333333 (default), a82400 (arahkan kursor)

Inilah hasilnya.

Mengubah Ukuran

Untuk mengubah ukuran tombol, kita dapat menambahkan bayangan kotak di hover. Ini memungkinkan tombol tumbuh lebih besar tanpa menambahkan ruang aktual apa pun ke tombol yang akan mendorong tombol yang berdekatan menjauh saat melayang.

Untuk melakukan ini, buka pengaturan jaringan Facebook dan tambahkan gaya bayangan kotak berikut:

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Buram Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 0px (default), 10px (arahkan kursor)
Warna Bayangan: #3b5998 (warna ini harus sama dengan warna latar belakang tombol)

Untuk mempercepat proses menambahkan desain bayangan kotak yang sama ke tombol jejaring sosial lainnya, klik kanan pada kategori bayangan kotak di Jaringan Facebook dan klik "Simpan Gaya Bayangan Kotak".

Simpan pengaturan dan kemudian klik kanan pada masing-masing jejaring sosial dan pilih "Tempel Item Styles".

Sekarang yang tersisa untuk Anda lakukan adalah memperbarui warna bayangan kotak dengan warna jejaring sosial yang benar yang cocok dengan warna latar belakang hover.

Untuk melakukan pembaruan ini, berikut ini:

Warna Twitter Box Shadow: #00aced
Instagram Box Shadow warna: #ea2c59
Warna Bayangan Kotak Dribble: #ea4c8d
Youtube Box Shadow warna: #a82400

Berikut adalah hasil akhirnya.

Mengubah Bentuk

Untuk mengubah bentuk tombol saat mengarahkan kursor, yang perlu Anda lakukan hanyalah menyesuaikan opsi “Rounded Corners”. Modul mengikuti media sosial ini saat ini memiliki sudut membulat yang diatur ke 40px membuat tombol melingkar. Jika kita ingin mengubahnya menjadi persegi, yang perlu Anda lakukan adalah menyesuaikan sudut yang membulat menjadi 0px saat mengarahkan kursor.

Untuk melakukan ini, buka pengaturan Jaringan Facebook dan perbarui yang berikut ini:

Sudut Bulat (arahkan kursor): 4px di keempat sudut

Kemudian salin gaya batas dan tempel ke setiap jaringan yang tersisa.

Berikut adalah desain akhir.

#3 Efek Filter

Untuk efek hover berikutnya, saya akan menunjukkan cara menggunakan beberapa efek filter untuk mengubah warna tombol media sosial saat mengarahkan kursor. Untuk memulai, pastikan Anda menggunakan versi baru dari bagian tombol ikuti media sosial dari tata letak Halaman Beranda Pengembang Aplikasi. Jika Anda menyimpannya ke Perpustakaan Divi Anda, sekarang saat yang tepat untuk menambahkannya ke halaman Anda.

Efek Saturasi dan Invert Filter pada hover

Menggunakan saturasi dan efek filter terbalik adalah cara sederhana dan ampuh untuk mengubah gaya tombol media sosial Anda saat melayang. Dalam contoh ini, saya akan menunjukkan cara menggabungkan saturasi dan invert untuk membuat tombol abu-abu dengan ikon hitam yang bertransisi kembali ke warna aslinya saat melayang.

Untuk melakukan ini, buka pengaturan modul ikuti media sosial dan kemudian buka masing-masing pengaturan jaringan sosial individu dan perbarui opsi filter berikut:

Saturasi: 0% (default), 100% (arahkan kursor)
Balikkan: 100% (default), 0% (arahkan kursor)

Lihat hasilnya.

#4 Ikon Berwarna Besar dengan Campuran Layar dan Efek Filter

Untuk desain hover tombol media sosial terakhir ini, kita akan memulai sepenuhnya dari awal. Jadi buat bagian baru dengan baris satu kolom dan tambahkan modul ikuti media sosial ke baris.

Kemudian buka pengaturan ikuti media sosial dan hapus jejaring sosial twitter default hanya menyisakan item jejaring sosial facebook.

Kemudian perbarui pengaturan ikuti media sosial sebagai berikut:

Warna Latar Belakang: #ffffff
Penyelarasan item: tengah
Mode Campuran: Layar

Selanjutnya, buka pengaturan item jejaring sosial Facebook dan perbarui yang berikut:

Warna Latar Belakang: #000000
Margin Kustom: 10px kiri, 10px kanan
Padding Kustom: 10px atas, 10px bawah, 10px kiri, 10px kanan
Saturasi: 0% (default), 100% (arahkan kursor)
Balikkan: 100% (default), 0% (arahkan kursor)

Simpan Pengaturan.

Kemudian duplikat item jejaring sosial facebook 4 kali sehingga Anda memiliki total 5 tombol jejaring sosial.

Sekarang buka setiap item jaringan sosial yang digandakan dan perbarui jaringan sosial dan warna latar belakang ke #000000.

Simpan Pengaturan.

Sekarang karena kita memiliki mode campuran layar yang berlaku, kita dapat menambahkan warna latar belakang ke kolom baris yang berisi modul ikuti media sosial kita. Apa pun warna latar belakang yang kita gunakan akan menentukan warna ikon media sosial kita dan warna latar belakang hover.

Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut ini:

Kolom 1 Warna Latar Belakang: #0c71c3

Perhatikan bagaimana warna ikon berubah menjadi warna latar belakang ini.

Sekarang lihat hasilnya sejauh ini.

Untuk memperbesar ikon/tombol, kita dapat menggunakan potongan CSS Kustom. Untuk melakukan ini, pertama-tama kita harus menambahkan ID CSS ke modul mengikuti media sosial dan kemudian menambahkan beberapa CSS ke pengaturan halaman kita.

Buka modul ikuti media sosial dan tambahkan ID CSS berikut di bawah tab lanjutan.

ID CSS: ikon besar

Selanjutnya, buka pengaturan halaman Anda dan tambahkan css khusus berikut.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Kode ini meningkatkan ukuran ikon menjadi 50px dan tinggi serta lebar tombol menjadi 100px. Kueri media memastikan gaya ini hanya diterapkan ke desktop.

Lihat hasil akhirnya.

Pikiran Akhir

Saya harap efek hover tombol ikuti media sosial ini akan memberi Anda beberapa ide baru yang segar tentang cara menangkap pengunjung Anda dengan beberapa desain unik. Sebagian besar contoh ini mudah dibuat terutama jika Anda membiasakan diri dengan cara kerja efek hover dalam Divi. Sampai waktu berikutnya, terus kuasai keterampilan Divi Anda dan ciptakan sesuatu yang indah untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!