Loncat ke Konten Utama

Cara membuat korsel gulir anggota tim dengan Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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.

Gulir anggota tim divi

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)
Konfigurasi parameter

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
Konfigurasi overflow

Tambahkan baris # 1

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Pilih tata letak divi

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
Parameter garis Divi

jarak

Kami juga menambahkan lapisan atas dan bawah khusus.

  • Lapisan atas: 100px
  • Lapisan bawah: 100px
Konfigurasi divi spasi baris

Tambahkan modul teks ke kolom

Tambahkan konten H2

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

Temui Tim

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)
Spasi teks Divi

Tambahkan modul pemisahan ke kolom

jarak penglihatan

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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

  • Tampilkan pemisah: Ya
Tampilkan pemisah divi

Baris

Kemudian buat beberapa perubahan pada pengaturan garis.

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

perekat

Dan lengkapi parameter modul dengan memodifikasi parameter dimensi sesuai:

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

Tambahkan baris # 2

Struktur kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

Konfigurasi kolom Divi

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%
Konfigurasi lebar talang

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)
Konfigurasi gaya spasi baris

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.

Konfigurasi baris parameter Divi

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
Konfigurasi kolom belakang Divi

Gambar latar belakang

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

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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

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;
Kode kolom divi css

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.

Nama orang divi

Hapus gambar

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

Hapus gambar divi

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
Konfigurasi latar belakang modul orang

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%
Kustomisasi judul modul Divi

Pengaturan teks tubuh

Juga ubah pengaturan teks isi.

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

Pengaturan teks posisi

Kemudian buat beberapa perubahan pada pengaturan teks posisi.

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

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%
Jarak modul orang Divi

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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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)
Spasi modifikasi baris divi

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
Konfigurasi animasi scrolling Divi

penelitian

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

Biro

Gulir anggota tim divi

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.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register