Mari kita mulai! Sneak Peek Berikut ini sekilas desain yang akan kita buat dalam tutorial ini. Unduh Tata Letaknya GRATIS Untuk mendapatkan desain 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 bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor. Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda. Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di 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, Bagian 1: Merancang Tata Letak Bagian Di bagian pertama ini, kita akan mendesain tata letak bagian cepat untuk melengkapi efek gulir bayangan gambar bergerak.
Tambahkan Baris Dua Kolom Untuk memulai, tambahkan baris dua kolom ke bagian reguler.
Tambahkan Modul Teks Di kolom kiri, tambahkan modul teks baru. Ini akan berfungsi sebagai konten teks tiruan kami. Konten Teks Kemudian rekatkan HTML berikut di dalam konten tubuh:<h2>Our Wedding</h2><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> Desain Teks Di bawah tab desain, perbarui pengaturan sebagai berikut:
- Ukuran Teks Teks: 16px
- Tinggi Baris Teks: 2em
- Judul 2 Font: comfortaa
- Judul 2 Warna Teks: #444235
- Judul 2 Ukuran Teks: 60px (desktop), 40px (tablet)
- Opasitas: 20%
- Transformasi Terjemahkan Sumbu X: -20%
- Transformasi Terjemahkan Sumbu Y: -90%
- Posisi: Absolut
- Margin Bawah: 0px
Ini dia…
Tambahkan modul gambar di bawah gambar di kolom kanan. Kemudian unggah gambar ke modul. Filter Gambar Di bawah tab desain, perbarui filter untuk membuat gambar terlihat seperti bayangan.- Kecerahan: 0%
- Opasitas: 25%
- Kabur: 8px
- Aktifkan Gerakan Horizontal: YA
- Offset Awal: 0 (pada 0%)
- Offset Tengah: -3 (pada 50%)
- Offset Akhir: -6 (pada 100%)
Di bawah tab Scaling Up and Down…
- Aktifkan Penskalaan Naik dan Turun: YA
- Skala Awal: 160% (pada 0%)
- Skala Menengah: 160% (pada 50%)
- Skala Akhir: 160% (pada 100%)
(CATATAN: Ini akan memperbesar bayangan hingga 160% dan mempertahankannya di sana sepanjang seluruh efek pengguliran. Namun, jangan ragu untuk menyesuaikan persentase skala pada titik yang berbeda.) Di bawah tab Rotating…
- Aktifkan Gerakan Horizontal: YA
- Rotasi Mulai: 30° (pada 0%)
- Rotasi Pertengahan: 0 ° (pada 50%)
- Rotasi Akhir: -30 ° (pada 100%)
- Margin: 70vh atas, 70vh bawah
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
- Aktifkan Gerakan Horizontal: YA
- Offset Awal: 0 (pada 0%)
- Offset Tengah: 3 (pada 50%)
- Offset Akhir: 6 (pada 100%)
Di bawah tab Rotating…
- Aktifkan Gerakan Horizontal: YA
- Rotasi Mulai: 210 ° (pada 0%)
- Rotasi Pertengahan: 180 ° (pada 50%)
- Rotasi Akhir: 150 ° (pada 100%)
- Aktifkan Penskalaan Naik dan Turun: YA
- Skala Awal: 100% (pada 0%)
- Skala Menengah: 115% (pada 50%)
- Skala Akhir: 130% (pada 100%)
Ini akan membuat efek zoom-in saat pengguna menggulir.
Hasil Akhir Dan inilah hasil akhirnya. Pikiran Akhir Saya harap bayangan gambar bergerak ini menyenangkan untuk dibuat bagi Anda seperti halnya bagi saya. Ini adalah elemen desain yang sederhana namun menakjubkan yang memiliki potensi untuk penambahan yang lebih kreatif. Jangan ragu untuk menjelajahi menambahkan warna yang berbeda, mode campuran, dan efek gulir lainnya untuk membuat desain Anda sendiri. Saya berharap untuk mendengar dari Anda di komentar. Bersulang!