Apakah Anda ingin anggota tim Anda disajikan dalam bentuk korsel dengan Divi ?
Saat menyiapkan halaman Tentang Anda, Anda mungkin juga ingin menyertakan anggota tim Anda di sana. Dengan melakukan itu, Anda mengizinkan pengunjung untuk terhubung dengan orang-orang di balik bisnis Anda.
Jika Anda mencari cara untuk menganimasikan bagian anggota tim Anda di scroll, Anda akan menyukai tutorial ini.
Kami akan membuat ulang carousel anggota tim pengguliran otomatis yang indah yang bergerak sesuai keinginan Anda pengunjung gulir halaman.
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Komputer desktop
Versi seluler
Mari mulai mendesain dengan Divi
Baca juga: Divi: Cara mengungkapkan konten saat mengarahkan kursor ke pembagi bagian
Tambahkan bagian baru
Penyihir Internal
Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan tambahkan padding khusus pada ukuran layar yang berbeda.
- Padding (Atas dan Bawah): 200px (Desktop), 100px (Tablet dan Ponsel)
jarak penglihatan
Untuk memastikan bahwa tidak ada scrollbar horizontal yang muncul dalam desain kami, kami akan menyembunyikan bagian yang meluap di tab lanjutan.
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Tambahkan baris #1
Struktur kolom
Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
Lebar
Tanpa menambahkan modul apa pun, buka pengaturan baris, alihkan ke tab Mendesain dan ubah lebar dan lebar maksimal dalam pengaturan ukuran.
- Lebar: 90%
- Lebar Maks: 1px
jarak
Kami juga menambahkan lapisan atas dan bawah khusus.
- Padding (Atas dan Bawah): 100px
Tambahkan modul Teks ke kolom
Tambahkan konten ukuran H2
Saatnya menambahkan modul, dimulai dengan modul Teks pertama. Masukkan a isi Ukuran H2 pilihan Anda.
Pengaturan teks H2
Beralih ke tab Mendesain modul dan memodifikasi parameter teks H2 sebagai berikut:
- Font: Pasir hisap
- Berat Huruf: Semi Tebal
- Warna Teks: #000000
- Ukuran Teks: 70px (Desktop), 50px (Tablet), 40px (Telepon)
Tambahkan modul "Pembagi" ke kolom
jarak penglihatan
Kemudian tambahkan modul Pembagi. Pastikan opsi "Tampilkan Pembagi" diaktifkan.
- Tampilkan Pembagi: YA
Baris
Kemudian buat beberapa perubahan pada pengaturan baris.
- Warna Garis: #edf000
- Gaya: Padat
- Posisi Garis: Atas
Perekat
Dan lengkapi parameter modul dengan memodifikasi parameter ukuran yang sesuai:
- Berat Pembagi: 20px
- Lebar: 11%
- Modul penyelarasan: kiri
- Tinggi: 20px
Tambahkan baris 2
Struktur kolom
Baris berikutnya! Gunakan struktur kolom berikut:
Perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:
- Gunakan Lebar Talang Kustom: Ya
- Lebar Talang: 2
- Lebar: 100%
- Lebar Maks: 100%
Spasi (khusus Tablet dan Ponsel)
Selanjutnya, tambahkan padding kiri dan kanan hanya pada ukuran layar kecil.
- Padding (Kiri dan Kanan): 5% (Hanya Tablet dan Ponsel)
Parameter kolom (5x)
Sekarang, dalam tiga langkah berikutnya dari tutorial ini, kita akan membuat beberapa perubahan pada kolom. Terapkan tiga langkah ke setiap kolom di baris Anda.
Gradien Latar Belakang
Pertama, tambahkan latar belakang gradien ke setiap kolom.
- Gradien Berhenti (25%): rgba(255,255,255,0)
- Gradien Berhenti (86%): rgba(0,0,0,0.84)
- Mengetik: Linier
- Gradien Persegi Di Atas Gambar Latar Belakang : YA
Gambar Latar
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
Menambahkan CSS Khusus (Khusus Tablet)
Selesaikan pengaturan kolom dengan menambahkan CSS khusus ke elemen utama (Untuk tampilan Tablet saja) dari setiap kolom.
Baris kode CSS ini akan membantu kita menempatkan kolom satu di bawah yang lain di tablet, alih-alih memiliki dua berdampingan.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Tambahkan modul 'Orang' ke kolom
Tambahkan konten
Untuk berbagi informasi anggota tim, kami akan menggunakan modul Orang.
Tambahkan modul Person pertama ke kolom 1 dan gunakan isi pilih pemilih.
Hapus gambar
Kemudian hapus gambar tersebut. Sebagai gantinya, kami menggunakan gambar latar kolom.
Gambar Latar
Selanjutnya, kita akan menambahkan overlay gambar sebagai gambar latar untuk modul.
- Ukuran Gambar Latar Belakang: Sampul
- Posisi gambar latar belakang: tengah
Pengaturan teks judul
Beralih ke tab Mendesain modul dan ubah pengaturan teks judul sebagai berikut:
- Judul Judul Tingkat: H3
- Judul Font: Pasir Isap
- Berat Huruf: Tebal
- Warna Teks Judul: #ffffff
- Ukuran Teks Judul: 230%
Pengaturan teks tubuh
Juga ubah pengaturan teks isi.
- Font Tubuh: Buka Sans
- Warna Teks: #ffffff
- Tinggi Garis: 2,2 em
Pengaturan teks posting anggota tim
Selanjutnya, lakukan beberapa perubahan pada pengaturan teks dari posisi yang dipegang oleh anggota tim.
- Posisi Font: Terbuka Tanpa
- Warna Teks Posisi: #edf000
jarak
Dan selesaikan pengaturan modul dengan menambahkan nilai padding kustom ke pengaturan jarak.
- Padding: 70% (Atas), 10% (Bawah, Kiri dan Kanan)
Kloning modul "Orang" empat kali
Setelah Anda menyelesaikan modul Person, Anda dapat mengkloning seluruh modul empat kali.
Tempatkan duplikat di kolom yang tersisa
Tempatkan modul duplikat di empat kolom baris yang tersisa.
Pastikan juga untuk mengubah isi.
Ubah baris menjadi korsel gulir otomatis
Lihat juga: Divi: Cara membuat kisi kolom cair di hover
Ubah ukuran baris #2
Sekarang, untuk mengubah garis ini menjadi korsel gulir otomatis, kita perlu membuka kembali pengaturan garis dan mengubah lebar dan lebar maksimum dalam pengaturan ukuran.
- Lebar: 180%
- Lebar Maks: 220% (Desktop), 100% (Tablet dan Ponsel)
Tambahkan gerakan horizontal ke baris 2
Selesaikan pengaturan garis dengan menambahkan gerakan horizontal ke pengaturan efek gulir di tab Advanced di bawah opsi Gulir Efek dan Anda sudah selesai!
- Aktifkan Gerakan Horizontal: Ya
- Mulai Offset:
- Desktop: 2,5
- Tablet & Telepon: 0
- Offset Tengah: 0 (hingga 40%)
- Mengakhiri Offset:
- Desktop: -25 (hingga 62%)
- Tablet & Telepon: 0
- Pemicu Efek Gerak: Elemen Tengah
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Komputer desktop
Unduh DIVI Sekarang!!!
Tampilan seluler
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami telah menunjukkan kepada Anda cara berkreasi dengan efek gulir bawaan dari Divi.
Secara khusus, kami membuat ulang carousel indah yang menampilkan anggota tim yang melakukan gulir otomatis. Ketika pengunjung gulir halamannya, bagian lain dari carousel muncul.
Kami berharap tutorial ini akan menginspirasi Anda untuk proyek Anda berikutnya. Divi. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
