Apakah Anda ingin membuat ikon media sosial Anda melekat dengan Divi?
Dengan opsi 'lengket' bawaan Divi, Anda dapat dengan mudah mendesain modul 'Ikuti Media Sosial' yang akan membuat ikon media sosial itu tetap di depan dan di tengah saat pengguna menggulir halaman ke bawah.
Selain itu, dengan menambahkan gaya kustom ke modul dalam status lengket, kita dapat membuat transisi desain unik saat beralih ke status lengket saat menggulir.
Jadi, jika Anda mencari kontrol penuh atas desain tombol media sosial Anda, tutorial ini cocok untuk Anda!
penelitian
Berikut adalah ikhtisar singkat dari hasil yang akan kita peroleh dalam tutorial ini.
Buat halaman baru dengan "Divi Builder"
Dari dasbor WordPress, buka “Halaman > Tambah Baru”
Berikan judul yang masuk akal bagi Anda lalu klik “Gunakan DiviBuilder”
Untuk tutorial ini, kita akan menggunakan tata letak yang telah ditentukan. Untuk melakukannya, klik “Jelajahi Tata Letak”
Temukan dan pilih tata letak "Perancang busana"
Pilih tata letak "Pendaratan" kemudian klik “Gunakan Tata Letak Ini”
Desain modul "Ikuti Media Sosial" di Divi
Pembuatan bagian
Tambahkan bagian reguler baru ke tata letak.
Kemudian pindahkan bagian baru ke bagian atas halaman (atau di mana pun Anda ingin menambahkan tautan ikuti media sosial Anda).
Buka pengaturan bagian dan perbarui warna latar belakang agar sesuai dengan tata letak sebagai berikut:
- Warna latar belakang: #fff9f2
Di bawah tab Mendesain, perluas opsi Spasi dan ubah parameter berikut:
- Padding (Atas dan Bawah): 10px
Penciptaan garis
Di dalam bagian, tambahkan baris ke kolom.
Buka pengaturan garis, tarik ke bawah opsi Spasi dan ubah pengaturan sebagai berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
Lanjutkan dengan menggulir ke bawah opsi Jarak
- Padding (Atas dan Bawah): 0px
Pembuatan modul "Ikuti Media Sosial" yang lengket
Setelah bagian dan garis terpasang, tambahkan modul baru “Ikuti Media Sosial” di garis.
Memperbarui pengaturan modul
Buka pengaturan modul "Ikuti Media Sosial".
Hal pertama yang perlu kita lakukan adalah menambahkan posisi sticky ke modul.
Di bawah tab Advanced, tarik ke bawah opsi Gulir Efek dan perbarui yang berikut:
- Posisi Lengket: Menempel ke Atas
Setelah posisinya dalam status lengket, Anda akan dapat menargetkan gaya modul dalam status lengket (seperti yang Anda bisa untuk status melayang). Ini dapat dilakukan dengan mengarahkan kursor ke opsi dan mengklik ikon pin.
Di bawah tab Mendesain, perbarui berikut ini:
- Modul Keselarasan: Pusat
- Warna Ikon: #000000 (Desktop), #ffffff (Hover), #ffffff (Sticky)
- Lebar: 100%
- Lebar Maks: 100%
- Padding: 20px (Atas), 12px (Bawah), 10px (Kiri dan Kanan)
Pengaturan media sosial
Setelah pengaturan modul siap, kita sekarang dapat mengalihkan perhatian kita untuk menata ikon media sosial individu.
Untuk melakukan ini, pertama-tama kita akan menyesuaikan ikon jejaring sosial. Kemudian kita akan menduplikasi jejaring sosial untuk membuat yang lain.
Anda seharusnya sudah memiliki dua jejaring sosial di bawah tab isi secara default. Hapus satu dan klik untuk mengedit sisanya.
Setelah berada di pengaturan jejaring sosial, pilih jejaring sosial dan perbarui warna latar belakang untuk desktop, arahkan kursor, dan status tempel.
- Jaringan sosial : Tiktok (atau apa pun yang Anda inginkan)
- Latar belakang: transparan (Desktop), #fe2c55 (Hover), #000000 (Sticky)
TRIK: Warna latar belakang akan otomatis berubah agar sesuai dengan merek media sosial. Anda dapat menyalin warna ini dan menambahkannya sebagai warna latar belakang status hover untuk ikon. Ini akan menampilkan warna latar belakang default jaringan sosial saat Anda mengarahkan kursor ke ikon.
Anda sekarang dapat beralih antar tab untuk melihat warna latar belakang untuk ketiga status (desktop, hover, dan sticky).
Selanjutnya, mari beri ikon bentuk oval yang bagus dan batas untuk mencocokkan tata letak dengan lebih baik. Di bawah tab Mendesain, perbarui berikut ini:
- Sudut Bulat: 50%
- Lebar batas: 1px
- Warna Batas: #000000 (Desktop), Transparan (Hover)
Saat ini, ikon memiliki bentuk lingkaran. Untuk mendapatkan bentuk yang lebih oval, kita akan mengubah pengaturan spasi sebagai berikut:
- Margin (Kiri dan Kanan): 15px (Desktop), 0px (Sticky), 0px (Telepon)
- Padding (Kiri dan Kanan): 16px (Desktop), 14px (Tablet), 0px (Ponsel)
Duplikat jejaring sosial
Sekarang setelah kita selesai mendesain jejaring sosial pertama, kita dapat menduplikasi ikon untuk membuat yang lain.
Untuk melakukan ini, buka pengaturan modul Media Sosial Ikuti dan klik ikon duplikat. Untuk contoh ini, mari kita buat 4 lagi.
Sekarang yang harus kita lakukan adalah memperbarui setiap jejaring sosial baru. Karena ini akan mengubah warna latar belakang, Anda juga perlu memperbarui warna latar belakang untuk masing-masing.
Untuk melakukan ini, buka pengaturan jejaring sosial kedua dan perbarui yang berikut:
- Jejaring Sosial: Facebook
- Latar belakang: transparan (Desktop), #3b5998 (Hover)
Lanjutkan proses yang sama untuk memperbarui jaringan sosial lainnya.
Hasil akhir
Sekarang mari kita lihat hasil yang diperoleh pada ukuran layar yang berbeda.
Unduh DIVI Sekarang!!!
Unduh DIVI Sekarang!!!
Kesimpulan
Tombol media sosial hampir selalu menjadi fitur utama di a situs jaringan. Mereka adalah salah satu cara utama untuk menghubungkan saluran media sosial ke a situs jaringan. Inilah sebabnya mengapa modul “Ikuti Media Sosial” of Divi berisi semua ikon jaringan dan opsi desain yang Anda butuhkan untuk membuat solusi sempurna untuk situs Anda.
Kami harap tutorial ini bermanfaat bagi Anda dalam proyek Divi Anda berikutnya. Jika Anda ingin tahu lebih banyak tentang Divi, jangan ragu untuk mengunjungi katalog kami tutorial Divi. Anda juga dapat berkonsultasi Cara membuat halaman Blog dengan modul Blog Divi
Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Tapi sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
