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.
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
jarak
Hapus juga padding atas dan bawah default dari semua bagian.
- Lapisan atas: 0px
- Lapisan bawah: 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
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%
jarak
Kemudian hapus semua padding standar atas dan bawah.
- Lapisan atas: 0px
- Lapisan bawah: 0px
overflows
Dan sembunyikan luapan baris.
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
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
Indeks Z
Tingkatkan juga indeks z kolom.
- Indeks Z: 12
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
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.
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
jarak
Tambahkan juga margin atas.
- Margin atas: 10vw
Tambahkan modul teks # 2 ke kolom 1
Tambahkan konten
Sisipkan modul teks lain dengan 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,4 em
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)
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.
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
- Font tombol: Buka tanpa
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)
Tambahkan modul teks ke kolom 2
Tambahkan konten
Di kolom kedua, satu-satunya modul yang kita perlukan adalah modul teks. Masukkan konten pilihan Anda.
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)
jarak
Juga tambahkan nilai isian khusus.
- Lapisan atas: 5vw (meja),
- Lapisan bawah: 60vw (tablet dan telepon)
- Padding kiri: 5vw (tablet dan telepon)
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%
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
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%
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%)
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%
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.