Cara Menggunakan Transformasi Bentuk Gerak sebagai Latar Belakang dengan Divi

Efek gulir baru Divi dibuat agar Anda dapat dengan mudah membawa pengalaman desain web Anda ke tingkat berikutnya. Tentu saja, Anda dapat menerapkannya ke elemen dalam bagian Anda secara langsung, tetapi Anda juga dapat memilih untuk menambahkan gerakan ke elemen yang mendasarinya. Pergi untuk pendekatan yang mendasari memungkinkan Anda untuk menjaga konten tetap statis saat memiliki gerakan latar belakang yang terjadi. Dalam tutorial ini, kita akan menggunakan bentuk gerakan yang diubah sebagai elemen dasar kita untuk membuat bagian animasi. Kami akan menangani dua contoh berbeda tetapi kemungkinannya benar-benar tidak terbatas. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Unduh Tata Letak Bentuk Gerakan yang Diubah secara GRATIS

Untuk meletakkan tangan Anda pada tata letak bentuk gerakan yang diubah secara gratis, Anda harus mengunduhnya terlebih dahulu 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!

Langkah Umum

Tambahkan Bagian Baru

Latar Belakang Gradien

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

• Warna 1: #ffffff
• Warna 2: #97c6fc
• Tipe Gradien: Linier
• Arah Gradien: 306deg
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Pindah ke tab desain bagian dan gunakan beberapa nilai margin dan padding kustom.

• Margin Kiri: 4%
• Margin Kanan: 4%
• Padding Atas: 11%
• Padding Bawah: 11%

Bayangan Kotak

Kami juga menggunakan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.1)
• Posisi Bayangan Kotak: Bayangan Luar

Visibilitas

Dan kami akan menyelesaikan pengaturan bagian dengan menyetel luapan ke tersembunyi. Ini akan memastikan bahwa ketika kita menambahkan bentuk gerakan yang diubah, mereka tidak akan melebihi wadah bagian.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah lebar maksimal dalam pengaturan ukuran.

• Lebar Maks: 1580px

Spasi Kolom 1

Kami juga menambahkan beberapa padding atas ke pengaturan spasi kolom pertama.

• Padding Atas: 9%

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H2

Setelah Anda menyelesaikan pengaturan baris, saatnya untuk menambahkan modul, dimulai dengan Modul Teks di kolom 1. Tambahkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

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

• Judul 2 Font: Abril Fatface
• Judul 2 Warna Teks: #7206a0
• Judul 2 Ukuran Teks: 80px (Desktop), 65px (Tablet), 50px (Telepon)

Tambahkan Modul Teks #2 ke Kolom 1

Pengaturan Teks

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dengan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks modul sebagai berikut:

• Font Teks: Buka Sans
• Warna Teks: #7206a0
• Tinggi Baris Teks: 2em

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul terakhir yang kita butuhkan di kolom 1 adalah Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Kemudian, lanjutkan ke tab desain dan gaya tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 20px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #077bff
• Lebar Batas Tombol: 0px

• Font Tombol: Abril Fatface

Jarak

Kami juga menambahkan beberapa nilai padding khusus.

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Gambar ke Kolom 2

Unggah Gambar

Di kolom kedua baris, satu-satunya modul yang kita butuhkan adalah Modul Gambar. Unggah ilustrasi pilihan Anda. Jika Anda ingin menggunakan yang persis seperti yang kami gunakan dalam tutorial ini, Anda dapat menemukannya di folder unduhan yang dapat Anda unduh di awal posting ini.

Penyelarasan

Pindah ke tab desain modul berikutnya dan ubah perataan gambar.

• Penjajaran Gambar: Kanan

Perekat

Selesaikan pengaturan modul dengan memodifikasi lebar di berbagai ukuran layar.

• Lebar: 100% (Desktop), 50% (Tablet & Ponsel)

Buat Ulang Contoh #1

Tambahkan Modul Teks ke Atas Kolom 1

Setelah semua modul reguler terpasang, saatnya menambahkan bentuk gerakan yang diubah! Kami akan membuat ulang contoh pertama dengan menambahkan Modul Teks baru ke bagian atas kolom pertama. Biarkan kotak konten kosong.

Latar Belakang Gradien

Tambahkan latar belakang gradien ke modul berikutnya.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #00fff6
• Tipe Gradien: Linier
• Arah Gradien: 306deg
• Posisi Awal: 54%
• Posisi Akhir: 54%

Perekat

Ubah juga pengaturan ukuran.

• Lebar: 165%
• Tinggi: 270%

Jarak

Kemudian, buka pengaturan spasi dan gunakan beberapa nilai spasi khusus.

• Margin Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Atas: 29%
• Padding Bawah: 29%

Ubah Putar

Kami memutar modul berikutnya.

• Kiri: 270 derajat

Transformasi Kemiringan

Kami akan menerapkan nilai kemiringan transformasi juga.

• Bawah: 16 derajat
• Kanan: 16 derajat

Posisi

Kemudian, lanjutkan ke tab lanjutan dan ubah pengaturan posisi sebagai berikut:

• Posisi: Absolut
• Lokasi: Kiri Atas
• Offset Vertikal: -50%
• Offset Horisontal: -50%

Efek Gulir Gerak Vertikal

Selanjutnya, kita akan menambahkan efek gulir, dimulai dengan beberapa gerakan vertikal.

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset: 4
• Offset Tengah: 0 (pada 50%)
• Offset Akhir: -4

Efek Gulir Gerak Horisontal

Dan kita akan menyelesaikan pengaturan modul dengan menambahkan beberapa gerakan horizontal juga!

• Aktifkan Gerakan Horizontal: Ya
• Mulai Offset: 4
• Offset Tengah: 0 (pada 50%)
• Offset Akhir: -4%

Buat Ulang Contoh #2

Tambahkan Modul Teks ke Atas Kolom 1

Ingin membuat ulang contoh kedua? Tambahkan Modul Teks ke bagian atas kolom pertama.

Warna latar belakang

Buka pengaturan modul dan terapkan warna latar belakang.

• Warna Latar Belakang: #00fff6

Perekat

Pindah ke tab desain modul dan ubah pengaturan ukuran.

• Lebar: 165%
• Tinggi: 270%

Jarak

Kami juga menambahkan beberapa nilai spasi khusus.

• Margin Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Atas: 29%
• Padding Bawah: 29%

Putar Kemiringan

Dan kami akan menerapkan efek kemiringan transformasi dalam pengaturan transformasi.

• Kanan: -54 derajat

Posisi

Kemudian, kita akan pergi ke tab lanjutan dan mengubah pengaturan posisi modul.

• Posisi: Absolut
• Lokasi: Kiri Atas
• Offset Vertikal: -50%
• Offset Horisontal: -50%

Efek Gulir Gerak Vertikal

Kami akan, kemudian, menambahkan efek gulir. Dimulai dengan beberapa gerakan vertikal.

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset: 4
• Offset Tengah: 0 (pada 50%)
• Offset Akhir: -4

Efek Gulir Gerak Horisontal

Dan kita akan menyelesaikan pengaturan modul dengan menambahkan beberapa gerakan horizontal juga!

• Aktifkan Gerakan Horizontal: Ya
• Mulai Offset: 4
• Offset Tengah: 0 (pada 50%)
• Offset Akhir: -4

Pratinjau

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

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menambahkan bentuk gerakan yang diubah secara kreatif ke desain bagian Anda. Bentuk gerakan transformasi yang mendasarinya membantu menambahkan animasi halus ke desain bagian Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, 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.