Cara Membuat Halaman Tim Arahkan Arahkan Arah untuk Proyek Divi Anda Berikutnya

Halaman tim sering diremehkan. Sebelum membeli produk atau menyewa layanan, banyak pengguna menavigasi ke tim atau tentang halaman untuk mendapatkan ide yang lebih baik tentang perusahaan dan orang-orang di belakangnya. Jika halaman tim Anda meninggalkan kesan pertama yang positif, itu bisa mengarah pada tingkat konversi yang lebih tinggi. Sekarang, ada banyak cara untuk membuat halaman tim yang indah dengan Divi, tetapi jika Anda sedang mencari beberapa inspirasi untuk proyek Anda berikutnya, Anda akan menyukai posting ini. Kami akan membuat ulang halaman tim hover yang dinamis yang memicu bios anggota saat mengarahkan kursor.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Berlangganan Saluran Youtube Kami

1. Mulailah Dengan Bagian Reguler + Baris Satu Kolom Untuk Judul

Buka halaman baru dan setel atribut halaman ke 'halaman kosong'. Setelah Anda selesai melakukannya, masukkan Divi Builder dan tambahkan bagian dengan baris satu kolom.

Tambahkan modul teks dan pembagi.

2. Tambahkan Konten ke Modul Teks & Gaya Itu

Tambahkan beberapa konten H1 ke modul teks.

Pindah ke tab desain dan gaya pengaturan teks H1 sesuai:

• Font Judul: Poppins
• Judul Font Berat: Ringan
• Perataan Teks Judul: Tengah
• Warna Teks Judul: Hitam #000000
• Ukuran Teks Judul:
  • Desktop = 6vw
  • Tablet = 9vw
  • Telepon = 11vw
• Spasi Surat Judul: -0.4vw

3. Gaya Pembagi

Lanjut ke modul selanjutnya yaitu modul pembagi. Ubah warna pembagi menjadi hitam dan ubah pengaturan ukuran.

• Warna Pembagi: Hitam #oooooo
• Berat Pembagi: 12px
• Lebar: 14%
• Penyelarasan Modul: Pusat

4. Buat Bios Tim Menggunakan Bagian Reguler + Baris Tiga Kolom

Sekarang kita telah menyelesaikan bagian judul, kita siap untuk mulai membangun bios tim. Mulailah dengan menambahkan bagian reguler baru dengan baris tiga kolom.

5. Sesuaikan Pengaturan Ukuran Baris

Izinkan baris untuk mengambil seluruh lebar wadah bagian dengan mengubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

6. Sesuaikan Pengaturan Spasi Baris

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 2vw
• Padding Bawah: 2vw

7. Tambahkan Modul Gambar & Blurb ke Kolom Satu

Dua modul utama yang akan kita gunakan untuk membuat efek akhir adalah gambar dan modul uraian. Pertama, tambahkan modul gambar dan kemudian uraian.

8. Unggah Gambar & Gaya Itu

Halaman tim hover Anda adalah tentang menampilkan anggota tim. Buka modul gambar dan tambahkan foto salah satunya. Kami akan menggunakan salah satu gambar stok Divi kami. Pastikan dimensi gambar Anda adalah 612px X 612px.

Penyelarasan

Pindah ke tab desain dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah juga pengaturan ukuran.

• Lebar: 30%
• Penyelarasan Modul: Pusat

Jarak

Dan tambahkan beberapa margin atas negatif.

• Batas:
  • Desktop = -3vw
  • Tablet dan Telepon = -13vw

Berbatasan

Untuk mengubah gambar menjadi lingkaran, kita akan mengubah pengaturan batas.

• Sudut Bulat: 20vw Semua Empat Sudut
• Gaya Perbatasan: Semua Empat Sisi
• Lebar Perbatasan: 12px
• Warna Perbatasan: Putih #ffffff
• Gaya Perbatasan: Ganda

Bayangan Kotak

Kami juga menambahkan beberapa kedalaman pada gambar dengan menerapkan bayangan kotak yang halus.

• Bayangan Kotak: Opsi Pertama
• Kekuatan Buram Bayangan Kotak: 50px

Indeks Z

Di salah satu langkah sebelumnya, kami telah menambahkan beberapa margin atas negatif. Untuk memastikan gambar tetap berada di atas kolom, bahkan saat melebihinya, kita akan meningkatkan indeks z dalam pengaturan visibilitas.

• Indeks Z: 3

9. Tambahkan Konten ke Blurb & Style It

Tambahkan CSS Khusus ke Pengaturan Halaman

Sebelum kita melakukan hal lain, kita akan menambahkan beberapa CSS khusus untuk menghilangkan margin bawah default dari ikon di dalam uraian. Tambahkan baris kode CSS berikut ke pengaturan halaman:

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Berikan Blurb Kelas CSS

Buka modul uraian berikutnya dan tambahkan kelas CSS yang cocok.

• Kelas CSS: ikon uraian

Tambah isi

Kami akan menggunakan teks placeholder tetapi Anda dapat memasukkan nama dan deskripsi sebenarnya dari anggota tim.

Pilih Ikon

Pilih ikon plus berikutnya.

• Gunakan Ikon: Ya
• Ikon: Tanda Plus Di Dalam Lingkaran

Latar Belakang Gaya

Pindah ke pengaturan latar belakang, tambahkan warna latar belakang default putih dan latar belakang gradien saat melayang.

• Latar belakang: Putih #ffffff
• Arahkan kursor ke Latar Belakang: Gradien
• Warna Gradien Satu: #00ffa1
• Warna Gradien Dua: #29c4a9
• Tipe Gradien: Linier
• Arah Gradien: 154deg
• Posisi Awal: 0
• Posisi Akhir: 46%

Ikon Gaya

Terapkan pengaturan ikon berikut selanjutnya:

• Warna Ikon:
  • Bawaan: #29c4a9
  • Arahkan: RGB transparan (255,255,255,0)
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon:
  • Desktop = 2vw
  • Tablet = 4vw
  • Telepon = 6vw

Penyelarasan

Pindah ke pengaturan teks dan ubah perataan teks.

• Perataan Teks: Tengah

Teks Judul Gaya

Kemudian, buka pengaturan teks judul dan buat beberapa perubahan di berbagai ukuran layar.

• Judul: H4
• Judul Font: Poppins
• Judul Font: Tebal
• Judul Teks Warna: Putih #ffffff
• Ukuran Teks Judul:
  • Desktop: 1.5vw
  • Tablet: 2.5vw
  • Telepon: 3.5vw

Teks Tubuh Gaya

Lakukan hal yang sama untuk pengaturan teks isi.

• Warna Teks Tubuh: Putih #ffffff
• Ukuran Teks Tubuh:
  • Desktop = 0.8vw
  • Tablet = 1.9vw
  • Telepon = 2.6vw
• Tinggi Garis Tubuh:
  • Desktop = 2vw
  • Tablet + Telepon = 3vw

Perekat

Selanjutnya, kita akan mengubah pengaturan ukuran modul uraian kita.

• Lebar Konten: 100%
• Lebar: 81%
• Penyelarasan Modul: Pusat

Jarak

Kami akan menerapkan beberapa nilai margin dan padding khusus di berbagai ukuran layar juga.

• Batas atas:
  • Desktop = -4vw
  • Tablet + Telepon = -9vw
• Margin Bawah:
  • Desktop = 3.5vw
  • Tablet + Telepon = 10vw
• Padding Atas dan Bawah:
  • Desktop = 7.1vw
  • Tablet = 30vw
  • Telepon = 28vw
• Padding Kiri dan Kanan
  • Desktop = 2vw
  • Tablet + Telepon = 8vw

Berbatasan

Ubah modul uraian menjadi lingkaran dengan menambahkan beberapa radius batas.

• Sudut Bulat: 50vw Semua Empat Sudut

Bayangan Kotak

Dan lengkapi desain modul blurb dengan menambahkan bayangan kotak yang muncul di hover.

• Bayangan Kotak: Gaya Kelima
• Posisi Horizontal Bayangan Kotak: 0vw
• Posisi Vertikal Bayangan Kotak:
  • Desktop + Arahkan kursor = -14vw
  • Tablet = -44vw
  • Telepon = -46vw
• Kekuatan Penyebaran Bayangan Kotak:
  • Desktop + Arahkan kursor = -6vw
  • Tablet + Telepon = -19vw
• Warna Bayangan Kotak:
  • Arahkan kursor = rgba(0,0,0,0.05)

10. Gaya Kolom Satu

Sekarang kita telah menambahkan semua modul yang kita butuhkan ke kolom satu, saatnya untuk menata kolom.

Latar belakang

Buka pengaturan latar belakang kolom satu dan terapkan latar belakang gradien berikut:

• Gaya Latar Belakang: Gradien
• Warna Gradien Satu: #00ffa1
• Warna Gradien Dua: #29c4a9
• Tipe Gradien: Liner
• Arah Gradien: 282deg

Berbatasan

Pindah ke tab desain dan ubah kolom menjadi lingkaran dengan menambahkan beberapa radius batas.

• Sudut Bulat: 50vw

Meluap

Untuk memastikan gambar muncul di atas kolom, kita akan mengubah luapan horizontal dan vertikal dalam pengaturan visibilitas.

• Luapan Horisontal dan Vertikal: Terlihat

11. Hapus Kolom Kosong & Duplikat Kolom Pertama Dua Kali

Kami telah menyelesaikan kolom pertama dan semua modul di dalamnya. Untuk menghemat waktu, kita akan menghapus kolom kosong dan mengkloning kolom pertama dua kali.

Hapus Kolom Dua & Tiga

Kembali ke pengaturan baris utama dan klik ikon tempat sampah untuk kolom dua dan tiga.

Duplikat Kolom Satu Dua Kali

Setelah Anda menghapus kolom dua dan tiga, kolom satu akan terlihat aneh untuk sesaat, tetapi semua itu berubah segera setelah Anda mengkloning kolom dua kali.

12. Ubah Konten & Warna Kolom Dua

Sekarang saatnya untuk menata kolom baru untuk dua anggota tim Anda yang lain.

Kolom Dua

Buka pengaturan kolom kedua dan ubah latar belakang gradien

• Warna Gradien Latar Belakang Satu: #00eeff
• Warna Gradien Latar Belakang Dua: #309ce5

Unggah gambar yang berbeda juga.

Lanjutkan dengan membuka modul blurb dan mengubah latar belakang gradien.

• Arahkan Warna Latar Belakang Satu: #00eeff
• Arahkan Warna Latar Belakang Dua: #309ce5

Ubah warna ikon juga.

• Warna Ikon Default: #309ce5

Kolom Tiga

Buka pengaturan kolom ketiga dan ubah latar belakang gradien.

• Warna Gradien Latar Belakang Satu: #ff91ec
• Warna Gradien Latar Belakang Dua: #a500ff

Ubah latar belakang gradien blurb berikutnya.

• Arahkan Warna Latar Belakang Satu: #ff91ec
• Arahkan Warna Latar Belakang Dua: #a500ff

Seiring dengan warna ikon.

• Warna Ikon Default: #a500ff

Pratinjau

Sekarang setelah kita melalui langkah-langkah yang berbeda, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Ini adalah Bungkus!

Dalam posting ini, kami menunjukkan kepada Anda cara membuat halaman tim hover yang dinamis dengan opsi hover yang berwarna-warni. Jangan ragu untuk menggunakan desain ini dalam proyek Divi Anda berikutnya. Cobalah untuk halaman tim atau direktori kontributor. Beri tahu kami jika Anda memiliki pemikiran di komentar.