Cara Menambahkan Arahkan Ikon Sosial ke Gambar Anggota Tim dengan Divi

Saat membangun halaman tentang Anda, Anda dapat mempertimbangkan untuk menambahkan anggota tim perusahaan Anda yang berbeda dalam sebuah etalase. Saat memulai proses desain itu, Anda akan melihat bahwa ada tiga hal yang tidak bisa dilewatkan begitu saja: gambar, nama, dan posisi. Tetapi jika Anda ingin lebih menonjolkan anggota tim Anda, Anda dapat mempertimbangkan untuk menambahkan tautan jejaring sosial mereka ke desain juga. Tentu saja, Anda dapat melakukannya dengan cara kuno dan menambahkan Modul Ikuti Media Sosial di bawah nama dan posisi orang tersebut. Namun, Anda juga dapat memilih untuk menambahkan sedikit interaksi dengan memicu ikon sosial segera setelah seseorang mengarahkan salah satu gambar orang tersebut. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana melakukannya menggunakan Divi. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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 dalam 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!

Mari Mulai Berkreasi!

Tambahkan Bagian #1

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #0f0f0f

Jarak

Pindah ke tab desain bagian dan ubah pengaturan spasi berikutnya.

• Lapisan Atas
  • Desktop & Tablet: 100px
  • Telepon: 50px
• Bantalan Bawah:
  • Desktop & Tablet: 100px
  • Telepon: 50px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H1

Tambahkan Modul Teks pertama ke kolom baris dengan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Alata
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul:
  • Desktop: 50px
  • Tablet: 45px
  • Telepon: 35px
• Tinggi Garis Pos: 1.2em

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Selanjutnya, kita akan menambahkan Modul Pembagi. Pastikan opsi "Tampilkan Pembagi" diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain modul dan ubah warna garis.

• Warna Garis: #ffffff

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 2px
• Lebar Maks: 100px
• Tinggi: 2px

Tambahkan Modul Teks #2 ke Kolom

Tambahkan Konten Deskripsi

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Teks lain dengan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Alata
• Warna Teks: #7c7c7c
• Ukuran Teks: 17px
• Tinggi Baris Teks: 1.9em

Jarak

Hapus juga margin bawah default.

• Margin Bawah: 0px

Tambahkan Bagian #2

Latar Belakang Gradien

Tambahkan bagian lain tepat di bawah yang sebelumnya dan gunakan latar belakang gradien untuk itu.

• Warna 1: #0f0f0f
• Warna 2: #000000
• Posisi Awal: 10%
• Posisi Akhir: 10%

Jarak

Ubah pengaturan spasi berikutnya.

• Padding Atas: 0px
• Padding Bawah: 200px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2px

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Tambahkan Jejaring Sosial Pilihan

Modul pertama yang kami butuhkan di baris kami adalah Modul Ikuti Media Sosial di kolom 1. Tambahkan jejaring sosial pilihan Anda.

Hapus Setiap Warna Latar Belakang Jejaring Sosial Satu per satu

Kemudian, buka setiap jejaring sosial satu per satu dan hapus warna latar belakang.

Tambahkan Tautan ke Setiap Jejaring Sosial Secara Individual

Tambahkan tautan yang sesuai ke setiap jejaring sosial juga.

Warna Latar Default

Kemudian, kembali ke pengaturan modul umum dan terapkan warna latar belakang berikut:

• Warna Latar Belakang: rgba(0,0,0,0)

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Arahkan Warna Latar Belakang: #494949

Gambar latar belakang

Kemudian, unggah gambar latar belakang.

• Ukuran Gambar Latar Belakang: Sampul
• Campuran Gambar Latar Belakang: Kalikan

Penyelarasan

Pindah ke tab desain modul dan ubah perataan.

• Penyelarasan Modul: Pusat

ikon

Ubah warna ikon juga.

• Warna Ikon: rgba(0,0,0,0)

Jarak

Lalu, buka pengaturan spasi dan terapkan nilai berikut:

• Margin Bawah: 0px
• Bantalan Atas:
  • Desktop: 250px
  • Tablet: 450 piksel
  • Telepon: 200px
• Padding Bawah: 20px

Berbatasan

Kami juga mengubah pengaturan perbatasan.

• Semua Sudut: 100px
• Lebar Perbatasan: 2px
• Warna Perbatasan: rgba (255,255,255,0)

Arahkan Perbatasan

Gunakan warna perbatasan lain saat mengarahkan kursor.

• Arahkan Warna Batas: #ffffff

Kelas CSS

Lalu, buka tab lanjutan dan terapkan kelas CSS khusus.

• Kelas CSS: sosial tim

Arahkan ke Sebelum Elemen

Dan selesaikan pengaturan modul dengan mengaktifkan pengaturan hover pada elemen before dan copy-paste baris kode CSS berikut:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

Tambahkan Modul Orang ke Kolom 1

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah Modul Person. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Perataan Teks: Tengah
• Warna Teks: Cahaya

Pengaturan Teks Judul

Gaya teks judul berikutnya.

• Judul Font: Alata
• Ukuran Teks Judul:
  • Desktop: 27px
  • Tablet: 25px
  • Telepon: 22px

Pengaturan Teks Posisi

Kemudian, ubah pengaturan teks posisi.

• Posisi Font: Alata
• Ukuran Teks Posisi:
  • Desktop: 17px
  • Tablet & Telepon: 15px

Jarak

Terapkan beberapa bantalan atas dan bawah khusus ke pengaturan jarak.

• Padding Atas: 40px
• Padding Bawah: 40px

Berbatasan

Dan selesaikan pengaturan modul dengan menerapkan pengaturan perbatasan berikut:

• Lebar Perbatasan: 1px
• Warna Perbatasan: #ffffff

Hapus Kolom Baris yang Tersisa

Setelah Anda menyelesaikan modul di kolom 1, Anda dapat menghapus dua kolom baris yang tersisa.

Kolom Klon Dua Kali

Gunakan kembali kolom 1 dengan mengkloningnya dua kali.

Klon Seluruh Baris

Kemudian, kloning seluruh baris sebanyak yang Anda butuhkan.

Ubah Semua Konten Duplikat

Tautan Ikuti Media Sosial

Tentu saja, Anda harus memodifikasi semua duplikat konten, dimulai dengan tautan jejaring sosial di setiap Modul Ikuti Media Sosial duplikat.

Media Sosial Ikuti Gambar Latar Belakang

Kemudian, ubah gambar latar belakang di setiap Modul Ikuti Media Sosial.

Konten Modul Orang

Dan selesaikan perubahan dengan memodifikasi konten di setiap Modul Person.

Tambahkan Modul Kode Di Bawah Modul Teks Terakhir di Baris #1 Bagian #1

Sekarang, untuk memastikan setiap jejaring sosial mengubah gaya segera setelah seluruh modul diarahkan, kita memerlukan beberapa baris kode CSS. Kami akan menempatkan kode ini di dalam Modul Kode baru yang akan kami tambahkan ke bagian pertama, tepat di bawah deskripsi Modul Teks.

Tambahkan Kode CSS

Copy-paste baris kode CSS berikut dan selesai:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam postingan ini, kami telah menunjukkan kepada Anda cara berkreasi dengan etalase anggota tim Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara memicu ikon sosial saat Anda mengarahkan salah satu gambar anggota tim. Ini menghasilkan interaksi yang halus namun menyenangkan yang dapat Anda gunakan untuk semua jenis situs web yang Anda buat. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.