Cara Membuat Bagian Pahlawan Tabrakan Kolom yang Indah di Scroll dengan Divi

Efek gulir Divi membawa banyak kemungkinan desain baru ke situs web yang Anda buat. Interaksi halus yang Anda pilih untuk ditambahkan benar-benar dapat membantu meningkatkan keseluruhan tampilan dan nuansa situs web Anda. Semuanya menjadi lebih baik segera setelah Anda menyinkronkan efek gulir. Dalam tutorial ini, kami akan secara khusus menangani pembuatan bagian hero yang bertabrakan kolom yang indah pada scroll. Desain bagian pahlawan menggabungkan dua kolom berbeda pada gulir, yang pada gilirannya membantu menekankan salinan. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Bagian Pahlawan Bertabrakan Kolom GRATIS

Untuk meletakkan tangan Anda pada tata letak bagian pahlawan bertabrakan kolom gratis, Anda harus terlebih dahulu mengunduhnya menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Buat Ulang Tata Letak Bagian Bagian Pahlawan

Tambahkan Bagian Baru

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

Jarak

Hapus juga padding atas dan bawah default semua bagian.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Dan sembunyikan luapan baris.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 15vw
• Padding Bawah: 10vw
• Padding Kiri: 5vw
• Padding Kanan: 5vw

Indeks Z

Tingkatkan indeks z kolom juga.

• Indeks Z: 12

Pengaturan Kolom 2

Gambar latar belakang

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

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Normal

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H1

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

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Bayangan Menjadi Cahaya
• Berat Huruf Judul: Tebal
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 6vw (Desktop), 11vw (Tablet), 13vw (Telepon)
• Spasi Surat Judul: -2px
• Tinggi Garis Pos: 1.2em

Jarak

Tambahkan beberapa margin atas juga.

• Margin Atas: 10vw

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Masukkan Modul Teks lain dengan beberapa konten deskripsi pilihan Anda.

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.4em

Jarak

Dan tambahkan beberapa nilai margin khusus di berbagai ukuran layar.

• Margin Atas: 4vw (Desktop), 8vw (Tablet), 12vw (Telepon)
• Margin Bawah: 4vw (Desktop), 8vw (Tablet), 12vw (Telepon)

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

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

Pengaturan Tombol

Ubah pengaturan tombol modul sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px

• Font Tombol: Buka Sans

Jarak

Dan selesaikan pengaturan tombol dengan menambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Padding Kanan: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Tambahkan Modul Teks ke Kolom 2

Tambah isi

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

Pengaturan Teks

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

• Font Teks: Bayangan Menjadi Cahaya
• Warna Teks: rgba(0,0,0,0.25)
• Ukuran Teks: 9vw (Desktop), 14vw (Tablet & Ponsel)
• Spasi Huruf Teks: -3px
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah (Desktop), Kiri (Tablet & Ponsel)

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 5vw (Desktop),
• Padding Bawah: 60vw (Tablet & Ponsel)
• Padding Kiri: 5vw (Tablet & Ponsel)

Terapkan Animasi Gulir

Bagian

Menskalakan Atas dan Bawah

Setelah semua modul Anda terpasang, saatnya untuk menerapkan efek gulir! Buka pengaturan bagian terlebih dahulu dan gunakan efek penskalaan naik dan turun berikut:

• Aktifkan Sclaing Atas dan Bawah
• Skala Awal: 100% (pada 49%)
• Skala Menengah:
  • Desktop: 70% (pada 100%)
  • Tablet & Telepon: 100% (pada 100%)
• Skala Akhir:
  • Desktop: 70%
  • Tablet & Telepon: 100%

kolom 1

Gerak Horisontal

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

• Aktifkan Gerakan Horizontal: Ya
• Mulai Offset: 0
• Offset Tengah:
  • Desktop: 0 (pada 65%)
  • Tablet & Telepon: 0 (pada 93%)
• Mengakhiri Offset:
  • Meja: 6
  • Tablet & Telepon: 0

Menskalakan Atas dan Bawah

Terapkan efek penskalaan naik dan turun ke kolom juga.

• Aktifkan Scaling Up and Down: Ya
• Skala Awal:
  • Desktop: 10%
  • Tablet & Telepon: 100%
• Skala Menengah:
  • Desktop: 90%
  • Tablet & Telepon: 100%
• Skala Akhir: 100%

Kolom 2

Gerak Horisontal

Selanjutnya, buka pengaturan kolom 2 dan gunakan pengaturan gerakan horizontal berikut:

• Aktifkan Gerakan Horizontal: Ya
• Mulai Offset: 0
• Offset Tengah:
  • Desktop: 0 (pada 53%)
  • Tablet & Telepon: 0 (pada 56%)
• Mengakhiri Offset:
  • Desktop: -6 (pada 53%)
  • Tablet & Telepon: 0 (pada 100%)

Memudar Masuk dan Keluar

Selesaikan pengaturan kolom dengan menambahkan efek fading in dan out.

• Aktifkan Fading In and Out: Ya
• Mulai Opacity: 100% (pada 47%)
• Opasitas Tengah:
  • Desktop: 0% (pada 47%)
  • Tablet & Telepon: 100% (pada 47%)
• Mengakhiri Opasitas:
  • Desktop: 0%
  • Tablet & Telepon: 100%

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara kreatif menggunakan efek gulir Divi untuk membuat bagian pahlawan yang bertabrakan kolom. Segera setelah pengunjung menggulir, dua kolom berbeda dan elemennya akan mulai bergabung. Ini, pada gilirannya, akan memungkinkan Anda untuk lebih menekankan salinan. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.