Cara Membuat Warna Latar Belakang Animasi dengan Divi

Opsi animasi Divi dapat dengan cepat mengubah halaman yang sudah indah menjadi halaman yang menarik juga. Sekarang, kita semua sudah terbiasa dengan berbagai animasi yang dibangun ke dalam berbagai elemen desain yang disediakan Divi untuk Anda. Tapi tahukah Anda bahwa Anda dapat menggunakan animasi ini untuk menyorot satu opsi desain tertentu juga?

Dalam tutorial ini, kita akan fokus pada pembuatan warna latar belakang animasi. Untuk mencapai hasil yang diinginkan, kita akan menggunakan Modul Pembagi untuk warna latar belakangnya dan menempatkan Modul Teks di atasnya. Kami harap tutorial ini menginspirasi Anda untuk menambahkan warna latar belakang animasi ke proyek desain web yang akan datang.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Warna Latar Belakang Animasi GRATIS

Untuk mendapatkan tata letak warna latar belakang animasi gratis, 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.

UNDUH

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

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Jarak

Hal pertama yang perlu Anda lakukan adalah menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 5vw
• Padding Bawah: 17vw

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Pembagi #1 ke Kolom

Visibilitas

Saatnya untuk mulai menambahkan berbagai modul yang kita butuhkan, dimulai dengan Modul Pembagi. Modul Pembagi ini akan digunakan untuk warna latar belakang, ukuran dan animasinya. Pastikan opsi 'Tampilkan Pembagi' dinonaktifkan.

• Tampilkan Pembagi: Tidak

Warna latar belakang

Buka pengaturan latar belakang dan tambahkan warna latar belakang berikut:

• Warna Latar Belakang: #212121

Jarak

Pindah ke pengaturan jarak dan berikan modul Anda bentuk yang diinginkan menggunakan unit ketinggian viewport.

• Padding Atas: 30vh
• Padding Bawah: 30vh

Animasi

Kami mengizinkan warna latar belakang dianimasikan dengan menambahkan animasi khusus dengan penundaan animasi.

• Gaya Animasi: Slide
• Pengulangan Animasi: Sekali
• Arah Animasi: Kanan
• Penundaan Animasi: 1000ms
• Intensitas Animasi: 88%
• Animasi Mulai Opacity: 100%

Tambahkan Modul Teks #1 ke Kolom

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten H2 dan paragraf pilihan Anda.

Pengaturan Teks

Kemudian, buka pengaturan teks dan ubah nilainya sesuai:

• Font Teks: Didact Gothic
• Warna Teks: #ffffff
• Ukuran Teks: 1.1vw (Desktop), 1.7vw (Tablet), 2.5vw (Telepon)
• Tinggi Baris Teks: 2.1em
• Orientasi Teks: Justify

Pengaturan Teks Judul 2 Default

Buat beberapa perubahan pada pengaturan teks H2 berikutnya.

• Judul 2 Font: Abril Fatface
• Judul 2 Warna Teks: #1c1c1c
• Judul 2 Ukuran Teks: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Pos 2 Tinggi Baris: 1.8em

Arahkan Arahkan Heading 2 Pengaturan Teks

Kami juga memodifikasi warna teks saat mengarahkan kursor.

• Judul 2 Warna Teks: #ffffff

Klon Kedua Modul

Setelah selesai menambahkan dan menyesuaikan kedua modul, Anda dapat mengkloningnya. Pada langkah selanjutnya dari posting ini, kita akan memodifikasi keempat modul untuk membuat animasi warna latar belakang yang datang dari kedua sisi. Kami juga akan menambahkan tumpang tindih ke Modul Teks agar terlihat seperti modul pembagi dan modul teks dibuat dalam wadah yang sama.

Ubah Duplikat Modul Pembagi

Ubah Warna Latar Belakang

Buka Modul Pembagi duplikat dan ubah warna latar belakang.

• Warna Latar Belakang: #0bbfa1

Ubah Animasi

Untuk membuat animasi latar belakang muncul dari sisi lain, kita mengubah arah animasi. Kami juga akan menambahkan penundaan animasi yang sedikit lebih tinggi untuk mencapai hasil yang kami inginkan.

• Arah Animasi: Kiri
• Penundaan Animasi: 1500ms

Ubah Duplikat Modul Teks

Ubah Konten

Lanjutkan dengan membuka Modul Teks duplikat dan mengubah kontennya.

Ubah Pengaturan Teks Judul 2

Pindah ke tab desain dan ubah pengaturan teks H2 juga.

• Judul 2 Perataan Teks: Kanan
• Judul 2 Warna Teks: #0cc9ad

Penempatan Pembagi

Modul Pembagi #1

Untuk memungkinkan beberapa ruang putih muncul di sisi kanan Modul Pembagi pertama, kita akan menambahkan beberapa margin kanan menggunakan unit lebar viewport.

• Margin Kanan: 20vw

Modul Pembagi #2

Buka juga Modul Pembagi kedua dan biarkan ruang yang sama digunakan, tetapi di sisi kiri halaman sebagai gantinya.

• Margin Atas: 2vw
• Margin Kiri: 20vw

Tambahkan Tumpang Tindih

Modul Teks #1

Sekarang kita telah menyesuaikan semua modul di baris kita, kita dapat mulai membuat tumpang tindih, dimulai dengan Modul Teks pertama. Tambahkan nilai margin kustom berikut ke pengaturan spasi modul:

• Margin Atas: -49vh
• Margin Kanan: 20vw (Desktop), 15vw (Tablet), 10vw (Telepon)

Modul Teks #2

Gunakan nilai margin khusus berikut untuk Modul Teks duplikat juga:

• Margin Atas: -49vh
• Margin Kiri: 20vw (Desktop), 15vw (Tablet), 10vw (Telepon)

Keluar dari Visual Builder untuk Melihat Hasil

Setelah Anda membuat tumpang tindih, Anda harus keluar dari Visual Builder untuk melihat hasilnya!

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Kami selalu mencari cara untuk membantu Anda mendorong batasan dalam desain web dan membuat situs web yang indah dan menarik. Dalam posting ini, kami secara kreatif menggabungkan elemen desain yang berbeda dan tumpang tindih untuk membuat warna latar belakang animasi. Ini adalah cara yang bagus untuk menambahkan beberapa dimensi ekstra ke halaman mana pun yang sedang Anda kerjakan dan membuat situs web Anda cocok dengan tren desain saat ini dengan sempurna. Jika Anda memiliki pertanyaan atau saran, pastikan Anda 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.