Animasi latar belakang gradien dapat menjadi teknik desain yang bagus untuk menghidupkan warna latar belakang di situs jaringan. Ini adalah solusi sempurna bagi mereka yang menginginkan sesuatu yang lebih realistis daripada warna latar belakang statis tanpa harus menggunakan latar belakang video yang lambat dimuat. Ide dasar di balik animasi latar belakang gradien adalah menggunakan CSS untuk memperbesar dan menganimasikan latar belakang gradien untuk membuat transisi warna yang bergerak mulus.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat animasi latar belakang gradien di Divi. Metode ini menggabungkan cuplikan CSS khusus yang menganimasikan warna gradien yang dipilih dalam pengaturan Divi terintegrasi. Konfigurasi sebenarnya cukup sederhana untuk hasil yang begitu indah.
Mari kita mulai!
Hasil yang mungkin
Berikut ini adalah ikhtisar dari dua cara kita dapat membuat animasi latar belakang gradien di Divi.
Tentu saja, prasyarat untuk tutorial ini adalah Anda memiliki Tema Divi terpasang dan mutakhir.
Pembuatan animasi latar belakang gradien dengan ekstrak CSS dan opsi latar belakang Divi
Untuk memulai, tambahkan sebaris kolom ke bagian default di Divi Builder.
Pengaturan bagian
Kemudian perbarui pengaturan bagian dengan gambar latar belakang. Latar belakang gradien kami akan ditambahkan ke garis kami sehingga tumpang tindih dengan gambar ini.
Kemudian perbarui pengisian sebagai berikut:
- Padding: 0px tinggi, 0px rendah
Pengaturan baris dan kolom
Parameter kolom
Buka pengaturan baris, lalu perbarui isian kolom sebagai berikut:
- Padding: di atas 12vw
Kemudian tambahkan CSS khusus berikut ke elemen kolom utama:
height: 40vw;
Pengaturan saluran
Latar belakang gradien
Sekarang kita dapat menambahkan latar belakang gradien ke garis. Pastikan untuk membuat warna gradien semi transparan jika Anda ingin melihat gambar latar belakang bagian tersebut.
Perbarui parameter garis sebagai berikut:
- Warna latar belakang gradien kiri: rgba (12,113,195,0.8)
- Warna latar belakang gradien di sebelah kanan: rgba (131,0,233,0.8)
- Jenis gradien: linier
- Arah gradien: 45 derajat
Ukuran
Kemudian perbarui ukuran garis sebagai berikut:
- Lebar: 100%
- Lebar maks: 100%
Kelas CSS khusus
Sekarang latar belakang gradien kita sudah siap, kita perlu menambahkan animasi melalui CSS khusus. Sebelum menambahkan kode CSS, kita perlu menambahkan kelas CSS khusus untuk menargetkan baris tertentu.
Buka tab lanjutan dan tambahkan kelas CSS berikut:
- Kelas CSS: animate-gradient
Tambahkan modul kode
Setelah kelas CSS ditambahkan ke baris, tambahkan modul kode ke baris.
Rekatkan CSS dalam modul kode
Kemudian rekatkan kode CSS berikut di area Modul Pengaturan Kode Kode:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
Pastikan untuk membungkus kode di <style></style>tag karena kita menambahkannya ke kode HTML halaman.
Hasil
Inilah hasilnya sejauh ini. Latar belakang gradien telah diperbesar hingga 400% dari ukuran aslinya dan dianimasikan dengan menggerakkan ke kiri dan kanan.
Tambahkan ajakan bertindak
Untuk menyelesaikan desain, mari tambahkan modul ajakan bertindak untuk menjadi bagiannya isi.
Pengaturan ajakan bertindak
Isi
Perbarui isi sebagai berikut:
- Tambahkan judul
- Tambahkan teks tombol
- Tambahkan teks isi
- URL tautan tombol: #
- Gunakan warna latar belakang: TIDAK
Pembuahan
Buka tab Desain dan perbarui yang berikut ini:
- Fon judul: Naskah Kaushan
- Ukuran teks judul: 4vw (desktop), 30px (telepon)
- Tinggi baris judul: 1,4 em
- Polisi Tubuh: Roboto
- Ukuran teks tombol: 16px
- Warna teks tombol: # 555555
- Latar belakang tombol: #ffffff
- Lebar batas tombol: 0px
- Jari-jari batas tombol: 30 piksel
- Penempatan huruf tombol: 3px
- Font tombol: Roboto kental
- Berat font tombol: tebal
Hasil
Sekarang periksa hasilnya di halaman langsung dengan isi dari seruan untuk bertindak di tempat. Ini akan menjadi tajuk yang bagus untuk Anda situs jaringan !
Ingat, Anda dapat dengan mudah mengubah warna latar belakang garis Anda menjadi apa pun yang Anda inginkan. Kode akan terus berjalan di latar belakang untuk menganimasikan latar belakang untuk Anda.
Jika Anda mengetahui sedikit tentang CSS, Anda dapat menyesuaikan kecepatan dan arah animasi dengan mengubah nilai properti animasi.
Saya harap tutorial ini bermanfaat bagi Anda. Jangan ragu untuk membagikan pendapat Anda tentang itu.
