Efek gulir Divi menghadirkan banyak kemungkinan desain baru ke situs web yang Anda buat. Interaksi halus yang Anda pilih untuk ditambahkan benar-benar dapat membantu meningkatkan keseluruhan tampilan Anda situs jaringan. Semuanya menjadi lebih baik segera setelah Anda menyinkronkan efek gulir. Dalam tutorial ini, kita akan secara khusus menangani pembuatan bagian hero bertabrakan yang bagus dengan kolom pada scroll. Desain bagian pahlawan menggabungkan dua kolom berbeda pada gulungan, yang pada gilirannya membantu menekankan salinan. 

Kemungkinan Hasil

Sekarang setelah kita melalui semua langkah, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Tabrakan bagian divi

Buat kembali tata letak Bagian Pahlawan

Tambahkan bagian baru

Menyesuaikan warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang.

  • Warna Latar Belakang: # f4f2f7
Konfigurasi bagian Divi

jarak

Hapus juga padding atas dan bawah default dari semua bagian.

  • Lapisan atas: 0px
  • Lapisan bawah: 0px
Konfigurasi jarak Divi

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tata letak kolom divi

perekat

Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sesuai:

  • Gunakan lebar selokan khusus: Ya
  • Lebar selokan: 1
  • Menyamakan ketinggian kolom: Ya
  • Lebar: 100%
  • Lebar maks: 100%
Konfigurasi spasi baris Divi

jarak

Kemudian hapus semua padding standar atas dan bawah.

  • Lapisan atas: 0px
  • Lapisan bawah: 0px
Spasi baris Divi

overflows

Dan sembunyikan luapan baris.

  • Overflow horisontal: disembunyikan
  • Overflow vertikal: disembunyikan
Konfigurasi garis visibilitas Divi

Pengaturan kolom 1

jarak

Kemudian buka pengaturan di kolom 1 dan tambahkan nilai isian khusus.

  • Lapisan atas: 15vw
  • Lapisan bawah: 10vw
  • Padding kiri: 5vw
  • Padding kanan: 5vw
Konfigurasi spasi kolom baris Divi

Indeks Z

Tingkatkan juga indeks z kolom.

  • Indeks Z: 12
Posisi relatif divi

Pengaturan kolom 2

Gambar latar belakang

Lanjutkan dengan membuka pengaturan di kolom 2 dan unggah gambar latar pilihan Anda.

  • Ukuran Gambar Latar Belakang: Sampul
  • Posisi gambar latar belakang: Tengah
  • Ulangi gambar latar belakang: tidak ada pengulangan
  • Mencampur gambar latar belakang: Normal
Latar belakang kolom Divi

Tambahkan modul teks # 1 ke kolom 1

Tambahkan konten H1

Saatnya menambahkan modul, dimulai dengan modul teks pertama di kolom 1. Tambahkan konten H1 pilihan Anda.

Bantuan freelance divi

Pengaturan teks H1

Beralih ke tab desain modul dan ubah pengaturan teks H1 sesuai:

  • Font judul: Bayangan dalam cahaya
  • Berat font judul: tebal
  • Warna Teks Tajuk: # 000000
  • Ukuran Teks Header: 6vw (desktop), 11vw (tablet), 13vw (ponsel)
  • Spasi Huruf Header: -2px
  • Tinggi garis kepala: 1.2em
Konfigurasi font Divi

jarak

Tambahkan juga margin atas.

  • Margin atas: 10vw
Konfigurasi spasi teks

Tambahkan modul teks # 2 ke kolom 1

Tambahkan konten

Sisipkan modul teks lain dengan konten deskripsi pilihan Anda.

Tambahkan kolom teks 1 divi

Pengaturan teks

Ubah pengaturan teks modul sebagai berikut:

  • Font teks: Buka Sans
  • Warna teks: # 1e1e1e
  • Ukuran teks: 0.9vw (desktop), 1.9vw (tablet), 3vw (telepon)
  • Tinggi baris teks: 2,4 em
Kustomisasi font teks Divi

jarak

Dan tambahkan nilai margin khusus pada ukuran layar yang berbeda.

  • Margin atas: 4vw (desktop), 8vw (tablet), 12vw (telepon)
  • Margin bawah: 4vw (desktop), 8vw (tablet), 12vw (ponsel)
Konfigurasi spasi teks Divi

Tambahkan modul tombol ke kolom 1

Tambahkan salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah modul tombol. Tambahkan salinan pilihan Anda.

Tambahkan modul tombol divi

Pengaturan tombol

Ubah parameter tombol modul sebagai berikut:

  • Gunakan gaya khusus untuk tombol: Ya
  • Ukuran teks tombol: 1vw (desktop), 2vw (tablet), 3vw (telepon)
  • Warna teks tombol: #ffffff
  • Warna latar tombol: # 000000
  • Lebar batas tombol: 0px
  • Jari-jari batas tombol: 100px
Tombol gaya kustom divi
  • Font tombol: Buka tanpa
Pengaturan parameter tombol font

jarak

Dan selesaikan pengaturan tombol dengan menambahkan nilai padding kustom pada berbagai ukuran layar.

  • Lapisan atas: 1vw (desktop), 2vw (tablet), 3vw (telepon)
  • Lapisan bawah: 1vw (meja), 2vw (tablet), 3vw (telepon)
  • Padding kiri: 3vw (desktop), 5vw (tablet), 7vw (ponsel)
  • Padding kanan: 3vw (meja), 5vw (tablet), 7vw (telepon)
Jarak tombol Divi

Tambahkan modul teks ke kolom 2

Tambahkan konten

Di kolom kedua, satu-satunya modul yang kita perlukan adalah modul teks. Masukkan konten pilihan Anda.

Kolom teks 2 divi

Pengaturan teks

Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:

  • Font teks: bayangan di cahaya
  • Warna teks: rgba (0,0,0,0,25)
  • Ukuran teks: 9vw (desktop), 14vw (tablet dan telepon)
  • Penspasian surat teks: -3px
  • Tinggi baris teks: 1em
  • Perataan teks: tengah (kantor), kiri (tablet dan telepon)
Jane doe teks kolom 2 divi

jarak

Juga tambahkan nilai isian khusus.

  • Lapisan atas: 5vw (meja),
  • Lapisan bawah: 60vw (tablet dan telepon)
  • Padding kiri: 5vw (tablet dan telepon)
Spasi teks Divi

Terapkan animasi gulir

Bagian

Pendakian dan keturunan

Setelah semua mod Anda terpasang, saatnya menerapkan efek gulir! Pertama buka parameter bagian dan gunakan efek penskalaan berikut:

  • Aktifkan Sclaing dari atas ke bawah
  • Skala awal: 100% (hingga 49%)
  • Skala menengah:
    • Kantor: 70% (100%)
    • Tablet dan telepon: 100% (100%)
  • Skala akhir:
    • Kantor: 70%
    • Tablet dan telepon: 100%
Animasi efek gulir divi

Kolom 1

Pergerakan horizontal

Lanjutkan dengan membuka pengaturan di kolom 1 dan gunakan efek gerakan horizontal berikut:

  • Aktifkan gerakan horizontal: Ya
  • Mulai offset: 0
  • Offset rata-rata:
    • Kantor: 0 (pada 65%)
    • Tablet dan telepon: 0 (93%)
  • End offset:
    • Kantor: 6
    • Tablet dan telepon: 0
Perataan horizontal Divi

Pendakian dan keturunan

Juga terapkan efek skala naik dan turun ke kolom.

  • Aktifkan penskalaan naik dan turun: Ya
  • Skala awal:
    • Kantor: 10%
    • Tablet dan telepon: 100%
  • Skala menengah:
    • Kantor: 90%
    • Tablet dan telepon: 100%
  • Skala akhir: 100%
bagian dari pahlawan bertabrakan dengan kolom

Kolom 2

Pergerakan horizontal

Kemudian buka parameter di kolom 2 dan gunakan parameter gerakan horizontal berikut:

  • Aktifkan gerakan horizontal: Ya
  • Mulai offset: 0
  • Offset rata-rata:
    • Kantor: 0 (pada 53%)
    • Tablet dan telepon: 0 (56%)
  • End offset:
    • Kantor: -6 (pada 53%)
    • Tablet dan telepon: 0 (100%)
Animasi horizontal divi

Pudar masuk dan keluar

Selesaikan pengaturan kolom dengan menambahkan efek fade in dan fade out.

  • Aktifkan fade in dan out: Ya
  • Opacity awal: 100% (pada 47%)
  • Opacity rata-rata:
    • Kantor: 0% (47%)
    • Tablet dan telepon: 100% (47%)
  • Akhir opasitas:
    • Kantor: 0%
    • Tablet dan telepon: 100%
Animasi gerak divi

final pikiran

Dalam artikel ini, kami telah menunjukkan kepada Anda cara menggunakan efek gulir Divi secara kreatif untuk membuat bagian pahlawan yang bertabrakan dengan kolom. Segera setelah pengunjung gulir, dua kolom berbeda dan elemennya mulai bergabung. Ini, pada gilirannya, akan memungkinkan Anda untuk lebih menekankan salinannya.

Sumber Daya Lainnya

Berikut adalah daftar konten yang memungkinkan Anda berbuat lebih banyak dengan Anda tema WordPress divi.