Mari kita mulai. Sneak Peek
Unduh Tata Letak Gambar Latar Belakang Paralaks Animasi GRATIS Untuk mengetahui tata letak dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file JSON ke Divi Builder.
Langsung saja ke tutorialnya ya? Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi. Membuat Gambar Latar Belakang Paralaks Animasi dengan Efek Gulir Divi Menambahkan Kolom Untuk memulai, buat baris satu kolom.
Membuat Modul Teks Kemudian tambahkan modul teks ke kolom. Konten Teks Tambahkan huruf "p" ke konten isi. Tambahkan Gambar Latar Belakang Paralaks ke Modul Teks Selanjutnya, tambahkan gambar latar belakang paralaks ke modul teks sebagai berikut:- Gambar Latar Belakang: sisipkan gambar
- Gunakan Efek Paralaks: YA
- Metode Paralaks: CSS
- Font Teks: Montserrat
- Gaya Font Teks: TT
- Warna Teks Teks: #ffffff
- Ukuran Teks Teks: 100px (desktop), 70px (ponsel)
- Spasi Huruf Teks: 5px (telepon)
- Tinggi Baris Teks: 1em
- Perataan Teks: tengah
- Padding: 250px atas, 250px bawah
Padding inilah yang menciptakan ketinggian yang diperlukan untuk mengekspos gambar latar belakang paralaks.
Pengaturan Baris Sekarang setelah modul teks kita selesai, buka pengaturan baris dan perbarui yang berikut:- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
- Aktifkan Horizontal: YA
- Mulai Offset: -2 (pada 0% viewport)
- Offset Tengah: 0 (pada 40%-60%)
- Offset Akhir: -2 (pada 100%)
Di bawah tab efek Rotating…
- Aktifkan Rotasi: YA
- Rotasi Mulai: 20 derajat (pada area pandang 0%)
- Rotasi Pertengahan: 0 derajat (pada 40% -60%)
- Rotasi Akhir: -20deg (pada 100%)
Membuat Kolom 2 Meskipun kita mulai dengan tata letak satu kolom, kita akan membuat total 5 kolom. Lebih mudah untuk menduplikasi kolom dengan semua konten dan pengaturannya untuk membuat empat berikutnya yang diperlukan untuk desain. Gandakan seluruh kolom pertama (dengan modul teks) untuk membuat kolom kedua.
Memperbarui Efek Gulir Kolom 2 Kemudian perbarui efek gulir untuk kolom 2 sebagai berikut: Di bawah tab efek Rotating…- Mulai Rotasi: -20deg
- Rotasi Akhir: 20deg
Di bawah tab efek Gerakan Horizontal…
- Aktifkan Gerakan Horizontal: TIDAK
Di bawah tab Rotating Effect…
- Rotasi Mulai: 20 derajat
- Rotasi Akhir: 10deg
- Mulai Offset: 2
- Offset Akhir: 2
Di bawah tab Rotating Effects…
- Mulai Rotasi: -15deg
- Rotasi Akhir: 20deg
Di bawah tab Rotating Effects…
- Mulai Rotasi: 15deg
- Rotasi Akhir: -15deg
- Font Teks: Montserrat Subrayada
- Warna Teks Teks: #e0e722
- Ukuran Teks Teks: 150px (desktop)
- Tinggi Baris Teks: 100px
Isi Tubuh di Tablet dan Ponsel: <p>po<span style="color: #edf000; font-family: ‘Montserrat Subrayada’;">w</span>er</p>
Perbarui Pengaturan Kolom 1 Selanjutnya, buka pengaturan untuk kolom 1 dan perbarui yang berikut:- Sudut Bulat (desktop): 100% kiri atas
- Sudut Bulat (tablet dan ponsel): 40% kiri atas, 40% kanan bawah
- Sudut Bulat (desktop): 100% kanan bawah
- Warna Latar Belakang: #e0e722
- Gaya Pembagi Atas: Lihat Tangkapan Layar
- Warna Pembagi Atas: #222222
- Tinggi Pembagi Atas: 650px (desktop), 500px (tablet dan ponsel)
- Gaya Pembagi Bawah: Lihat Tangkapan Layar
- Warna Pembagi Bawah: #222222
- Tinggi Pembagi Bawah: 500px (desktop), 400px (tablet dan ponsel)
