Apakah Anda ingin menampilkan ikon media sosial saat mengarahkan kursor ke foto? Divi ?
Saat membuat halaman tentang Anda, Anda dapat mempertimbangkan untuk menambahkan berbagai anggota tim perusahaan Anda ke etalase.
Saat Anda memulai proses desain ini, Anda akan melihat bahwa tiga hal tidak boleh hilang sejak awal: gambar, nama, dan posisi. Tetapi jika Anda ingin lebih memamerkan anggota tim Anda, Anda juga dapat mempertimbangkan untuk menambahkan tautan media sosial mereka ke dalam desain.
Tentu saja, Anda dapat menggunakan cara lama dan menambahkan modul 'Ikuti kami di media sosial' di bawah nama dan posisi orang tersebut. Namun, Anda juga dapat memilih untuk menambahkan sedikit interaksi dengan menunjukkan ikon-ikon ini segera setelah seseorang mengarahkan kursor ke salah satu gambar orang tersebut.
Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana melakukan ini dengan menggunakan Divi.
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Hasil di laptop
Hasil di ponsel
Mari kita mulai realisasinya dengan Divi!
Tambahkan bagian # 1
Warna latar belakang
Tambahkan bagian baru ke halaman yang sedang Anda kerjakan.
Buka pengaturan bagian dan ubah warna latar belakang.
- Latar belakang: #0f0f0f
jarak
Beralih ke tab Mendesain opsi tarik turun Jarak lalu ubah pengaturan spasi.
- Padding (Atas dan Bawah): 100px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
Tambahkan modul "Teks" #1 ke kolom
Tambahkan judul ukuran H1
Tambahkan modul pertama "Teks" ke baris kolom
Menambahkan isi ukuran H1 (Judul 1) pilihan Anda.
Pengaturan teks H1
Beralih ke tab Mendesain, tarik ke bawah opsi Heading Text dan ubah pengaturan teks H1 sesuai:
- Font Judul: Alata
- Warna Teks Judul: #ffffff
- Ukuran teks:
- Desktop: 50px
- Tablet: 45px
- Telepon: 35px
- Tinggi Garis Pos: 1,2 em
Tambahkan modul "Pembagi" ke kolom
jarak penglihatan
Selanjutnya, kita akan menambahkan modul "Pembagi". Pastikan opsi "Tampilkan Pembagi" diaktifkan.
- Tampilkan Pembagi: YA
Baris
Beralih ke tab Mendesain, tarik ke bawah opsi baris dan mengubah warna garis.
- Warna Garis: #ffffff
perekat
Opsi tarik-turun Perekat dan 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 perlukan pada baris ini adalah modul “Teks” lainnya dengan a isi deskripsi pilihan Anda.
Pengaturan teks
Beralih ke tab Mendesain, tarik ke bawah opsi Teks dan ubah pengaturan teks sebagai berikut:
- Font Teks: Alata
- Warna Teks: #7c7c7c
- Ukuran: 17px
- Tinggi Baris Teks: 1,9 em
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 yang ini.
- Warna Kiri: #0f0f0f
- Warna Kanan: #000000
- Posisi Kiri: 10%
- Posisi Kanan: 90%
jarak
Beralih ke tab Mendesain, tarik ke bawah opsi Jarak lalu ubah pengaturan spasi.
- 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 garis 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 Anda
Modul pertama yang kami butuhkan di baris kami adalah modul "Ikuti Media Sosial" di kolom 1. Tambahkan jejaring sosial pilihan Anda.
Hapus warna dari setiap jejaring sosial satu per satu
Buka setiap jejaring sosial satu per satu
Hapus warna latar belakang.
Tambahkan tautan ke setiap jejaring sosial satu per satu
Tambahkan juga tautan yang sesuai dengan setiap jejaring sosial.
Warna latar belakang default
Kemudian, kembali ke pengaturan modul umum dan terapkan warna latar belakang berikut:
- Latar belakang: rgba(0,0,0,0)
Warna latar belakang saat melayang
Ubah warna latar belakang saat melayang.
- Latar Belakang (Arahkan Arahkan kursor): #494949
Gambar latar belakang
Selanjutnya, unggah gambar latar belakang.
- Ukuran Gambar Latar Belakang : Sampul
- Campuran Gambar Latar Belakang: Kalikan
penjajaran
Beralih ke tab Mendesain dan memodifikasi keselarasan.
- Modul Keselarasan: Pusat
icon
Juga mengubah warna ikon.
- Warna Ikon: rgba(0,0,0,0)
jarak
Lalu pergi ke pengaturan spasi (Jarak) dan terapkan nilai berikut:
- Margin (Bawah): 0px
- Bantalan (Atas):
- Desktop: 250px
- Tablet: 450px
- Telepon: 200px
- Padding (Bawah): 20px
Perbatasan
Kami juga mengubah pengaturan perbatasan.
- Sudut Bulat: 100px
- Lebar Perbatasan: 2px
- Warna Perbatasan: rgba (255,255,255,0)
Perbatasan pada hover
Gunakan warna perbatasan lain saat mengarahkan kursor.
- Warna Batas (Hover): #ffffff
Kelas CSS
Lalu pergi ke tab Advanced dan terapkan kelas CSS khusus.
- Kelas CSS: tim-sosial
Css Khusus (Sebelumnya)
Dan selesaikan pengaturan modul dengan mengaktifkan pengaturan hover pada elemen "Sebelum" dan dengan menyalin dan menempelkan baris kode CSS berikut:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Tambahkan modul "Orang" ke kolom 1
Tambahkan konten deskripsi
Modul berikutnya dan terakhir yang kita perlukan di kolom 1 adalah modul “Orang”. Tambahkan beberapa isi deskripsi pilihan Anda.
Pengaturan teks
Beralih ke tab Mendesain dan ubah pengaturan teks sebagai berikut:
- Perataan Teks: Tengah
- Warna Teks: Cahaya
Pengaturan teks judul
Kemudian sesuaikan teks judul.
- Judul Font : Alata
- Judul Teks Ukuran judul:
- Desktop: 27px
- Tablet: 25px
- Telepon: 22px
Pengaturan teks deskripsi pekerjaan
Kemudian edit pengaturan teks deskripsi pekerjaan.
- Posisi Font: Alata
- Ukuran Teks Posisi:
- Desktop: 17px
- Tablet dan Ponsel: 15px
jarak
Ubah pengaturan spasi sebagai berikut:
- Padding (Atas dan Bawah): 40px
Perbatasan
Dan selesaikan pengaturan modul dengan menerapkan pengaturan perbatasan berikut:
- Lebar Perbatasan: 1px
- Warna Perbatasan: #ffffff
Hapus kolom yang tersisa dari baris
Setelah Anda menyelesaikan modul Kolom 1, Anda dapat menghapus dua kolom yang tersisa dari baris.
Kolom klon dua kali
Gunakan kembali kolom 1 dengan mengkloningnya dua kali.
Kloning seluruh baris
Kemudian kloning seluruh baris sebanyak yang diperlukan.
Edit semua konten duplikat
Tambahkan modul Kode di bawah modul teks terakhir di baris 1 bagian 1
Sekarang, untuk memastikan bahwa setiap jejaring sosial mengubah gayanya segera setelah seluruh modul diarahkan, kita memerlukan beberapa baris kode CSS. Kami akan menempatkan kode ini dalam modul kode baru yang akan kami tambahkan ke bagian pertama, tepat di bawah teks deskripsi
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>
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Biro
Unduh DIVI Sekarang!!!
mobil
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami telah menunjukkan kepada Anda cara berkreasi dengan memperkenalkan anggota tim Anda.
Secara khusus, kami telah menunjukkan kepada Anda cara menampilkan ikon media sosial saat Anda mengarahkan kursor ke salah satu gambar anggota tim. Hasilnya adalah interaksi yang halus namun menyenangkan yang dapat Anda gunakan untuk semua jenis situs jaringan yang Anda buat.
Jika Anda membutuhkan lebih banyak elemen untuk menyelesaikan proyek pembuatan situs web Anda, telusuri juga panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Tapi sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
