Cara membuat korsel gulir anggota tim dengan Divi

Saat membuat halaman Tentang Anda, Anda mungkin ingin memperkenalkan anggota tim Anda juga. Dengan demikian, Anda mengizinkan pengunjung untuk berinteraksi dengan orang-orang di belakang bisnis Anda. Jika Anda mencari cara untuk menghidupkan bagian anggota tim Anda pada gulungan, tutorial ini mungkin cocok untuk Anda. Kami akan membuat korsel anggota tim gulir otomatis yang bergerak saat pengunjung Anda menggulir laman. 

Demonstrasi

Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Awal konsepsi

Tambahkan bagian baru

jarak

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan tambahkan padding khusus pada ukuran layar yang berbeda.

• Lapisan atas: 200px (meja), 100px (tablet dan telepon)
• Lapisan bawah: 200px (meja), 100px (tablet dan telepon)

overflows

Untuk memastikan bahwa tidak ada bilah gulir horizontal yang muncul dalam desain kami, kami akan menyembunyikan luapan bagian di tab lanjutan.

• Overflow horisontal: disembunyikan
• Overflow vertikal: disembunyikan

Tambahkan baris # 1

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, alihkan ke tab desain, lalu ubah lebar dan lebar maksimum dalam pengaturan ukuran.

• Lebar: 90%
• Lebar maks: 1580px

jarak

Kami juga menambahkan lapisan atas dan bawah khusus.

• Lapisan atas: 100px
• Lapisan bawah: 100px

Tambahkan modul teks ke kolom

Tambahkan konten H2

Saatnya menambahkan modul, dimulai dengan modul teks pertama. Masukkan konten H2 pilihan Anda.

Pengaturan teks H2

Buka tab desain modul dan ubah pengaturan teks H2 sebagai berikut:

• Judul font 2: Pasir hisap
• Judul font 2: semi-tebal
• Warna teks item 2: # 000000
• Header 2 Ukuran teks: 70px (desktop), 50px (tablet), 40px (telepon)

Tambahkan modul pemisahan ke kolom

jarak penglihatan

Kemudian tambahkan modul pemisah. Pastikan opsi "Tampilkan Pemisah" diaktifkan.

• Tampilkan pemisah: Ya

Baris

Kemudian buat beberapa perubahan pada pengaturan garis.

• Warna garis: # edf000
• Gaya garis: solid
• Posisi Baris: Atas

perekat

Dan lengkapi parameter modul dengan memodifikasi parameter dimensi sesuai:

• Berat pembagi: 20px
• Lebar: 11%
• Perataan modul: kiri
• Tinggi: 20px

Tambahkan baris # 2

Struktur kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

perekat

Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sebagai berikut:

• Gunakan lebar selokan khusus: Ya
• Lebar selokan: 2
• Lebar: 100%
• Lebar maks: 100%

jarak

Kemudian tambahkan padding kiri dan kanan pada layar yang lebih kecil saja.

• Padding kiri: 5% (hanya tablet dan telepon)
• Padding kanan: 5% (hanya tablet dan telepon)

Parameter kolom (5x)

Sekarang, dalam tiga langkah selanjutnya dari tutorial ini, kita akan membuat beberapa perubahan pada kolom. Terapkan tiga langkah ke setiap kolom di baris Anda.

Latar belakang gradien

Pertama, tambahkan latar belakang gradien ke setiap kolom.

• Warna 1: rgba (255,255,255,0)
• Warna 2: rgba (0,0,0,0,84)
• Jenis gradien: linier
• Posisi Mulai: 25%
• Posisi Akhir: 86%
• Tempatkan gradien di atas gambar latar belakang: Ya

Gambar latar belakang

Kemudian unggah gambar latar pilihan Anda. Gambar latar ini mewakili setiap anggota tim, jadi gunakan gambar yang berbeda untuk setiap kolom.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi gambar latar belakang: Tengah

Elemen Utama

Selesaikan pengaturan kolom dengan menambahkan CSS khusus ke elemen tablet utama di setiap kolom. Baris kode CSS ini akan membantu kita menempatkan kolom satu di bawah yang lain pada tablet, alih-alih memiliki dua kolom secara berdampingan.

lebar: 100%! penting; margin: 50px 0px 50px 0px! penting;

Tambahkan modul orang ke kolom

Tambahkan konten

Untuk berbagi informasi tentang anggota tim, kami akan menggunakan modul Person. Tambahkan modul Orang pertama ke kolom 1 dan gunakan konten apa pun yang Anda inginkan.

Hapus gambar

Kemudian hapus gambar tersebut. Kami menggunakan gambar latar belakang kolom sebagai gantinya.

Gambar latar belakang

Kami kemudian akan menambahkan overlay gambar sebagai gambar latar belakang modul. Anda dapat menemukan yang kami gunakan dengan mengunduh folder di awal tutorial ini.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi gambar latar belakang: Tengah

Pengaturan teks judul

Buka tab desain modul dan ubah pengaturan teks judul sebagai berikut:

• Tingkat judul: H3
• Font judul: Pasir hisap
• Berat font judul: tebal
• Warna teks judul: #ffffff
• Ukuran teks judul: 230%

Pengaturan teks tubuh

Juga ubah pengaturan teks isi.

• Font Tubuh: Buka Sans
• Warna teks badan: #ffffff
• Tinggi garis tubuh: 2,2 em

Pengaturan teks posisi

Kemudian buat beberapa perubahan pada pengaturan teks posisi.

• Posisi Font: Buka Sans
• Warna teks posisi: # edf000

jarak

Dan selesaikan pengaturan modul dengan menambahkan nilai padding kustom ke pengaturan jarak.

• Lapisan atas: 70%
• Bantalan bawah: 10%
• Bantalan kiri: 10%
• Padding kanan: 10%

Gandakan modul Person 4 kali

Setelah Anda menyelesaikan modul Person, Anda dapat mengkloning seluruh modul empat kali.

Tempatkan duplikat di kolom lainnya

Tempatkan modul duplikat di empat kolom baris yang tersisa. Pastikan untuk mengedit kontennya juga.

Ubah Baris menjadi Korsel Gulir Otomatis

Ubah ukuran garis # 2

Sekarang, untuk mengubah baris ini menjadi carousel anggota tim yang menggulir otomatis, kita perlu membuka kembali pengaturan baris dan mengubah lebar dan lebar maksimum dalam pengaturan ukuran.

• Lebar: 180%
• Lebar maksimum: 220% (meja), 100% (tablet dan telepon)

Tambahkan gerakan horizontal garis # 2

Selesaikan pengaturan garis dengan menambahkan gerakan horizontal ke pengaturan efek gulir di tab lanjutan dan selesai!

• Aktifkan gerakan horizontal: Ya
• Mulai offset:
  • Kantor: 2,5
  • Tablet dan telepon: 0
• Offset rata-rata: 0 (40%)
• End offset:
  • Kantor: -25 (pada 62%)
  • Tablet dan telepon: 0
• Pemicu Efek Gerak: Bagian Tengah Elemen

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Biro

final pikiran

Dalam tutorial ini, kami telah menunjukkan kepada Anda cara berkreasi dengan efek gulir bawaan Divi. Secara khusus, kami telah membuat ulang carousel anggota tim yang menggulir otomatis dan indah. Saat pengunjung menggulir ke bawah halaman, bagian lain dari carousel akan muncul.