Saat membuat halaman Tentang Anda, Anda mungkin juga ingin memperkenalkan anggota tim Anda di sana. Dengan melakukannya, Anda mengizinkan pengunjung berinteraksi dengan orang-orang di belakang bisnis Anda. Jika Anda sedang mencari cara untuk menganimasikan bagian anggota tim Anda pada scroll, tutorial ini mungkin berguna bagi Anda. Kita akan membuat korsel anggota tim pengguliran otomatis yang bergerak saat Anda pengunjung gulir halaman.
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 itu isi 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, kita akan menggunakan modul Person. Tambahkan modul Person pertama ke kolom 1 dan gunakan isi pilih pemilih.
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 tersisa pada baris. Pastikan juga untuk mengubah isi.
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 cara berkreasi dengan efek gulir bawaan dari Divi. Secara khusus, kami membuat ulang carousel anggota tim pengguliran otomatis yang indah. Ketika pengunjung gulir halamannya, bagian lain dari carousel muncul.
