Apakah Anda ingin tahu cara menyesuaikan modul "Penghitung Waktu Mundur" dari Divi dengan GIF?
Dalam tutorial hari ini, kami akan menunjukkan cara menggunakan video latar belakang layar penuh dalam kursus Anda. “Penghitung Waktu Mundur”. Ini dapat digunakan untuk "menciptakan ketegangan" dengan cara yang menyenangkan dan luar biasa.
Mari kita mulai!
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat hasil yang ingin kita capai.
Desain hitung mundur dengan Divi
Persiapan elemen desain
Hitung mundur yang akan kita desain menggunakan video di latar belakang. Ada banyak tempat untuk menemukan rekaman stok gratis atau premium. Namun untuk tutorial kali ini, kita akan memanfaatkan beberapa video klip gratis dari Video.
Berikut adalah tautan langsung ke video yang akan kita gunakan: Partikel Terbang.
Implementasi desain dengan Divi
Anda dapat menggunakan halaman yang ada. Tapi demi kesederhanaan, kami akan bekerja di halaman baru.
Jadi buat halaman baru dan tambahkan baris dengan struktur kolom berikut.
Masukkan modul " Penghitung Waktu Mundur ».
Mengatur parameter modul
Pertama, pilih tanggal hingga hitungan mundur, lalu edit:
- Gunakan Warna Latar Belakang: TIDAK
Sekarang klik pada tab "Rancangan" dan ubah pengaturan di bawah ini.
- Ukuran Teks Angka: 85px
- Ukuran Teks Label: 15px
KOMENTAR : itu akan terlihat seperti tidak ada hitungan mundur sama sekali, karena kami menghapus warna latar belakang. Setelah kami menambahkan video latar belakang kami dalam petunjuk di bawah ini, kami akan dapat melihat hitungan mundur.
Mengatur Parameter Bagian
Sekarang kita perlu membuat beberapa perubahan kecil pada bagian tersebut. Arahkan kursor ke bagian dan buka pengaturan.
Di tab Konten, pergi ke pengaturan " Latar belakang Video »dan kemudian Latar Belakang Video MP4.
Klik «Tambahkan Latar Belakang Video » dan tambahkan video yang kami unduh sebelumnya dari Video. Anda sekarang akan melihat video latar belakang diputar di belakang hitungan mundur kami.
Kita sekarang hanya perlu membuat satu penyesuaian kecil di tab Advanced parameter modul bagian. Tambahkan CSS khusus di bawah ini di Elemen Utama.
height: 100vh; 
Inilah yang harus Anda lihat sejauh ini.
Menambahkan CSS khusus
Hal terakhir yang perlu kita lakukan adalah menambahkan CSS khusus untuk membawa kita sepenuhnya.
Jadi, buka pengaturan modul, klik pada tab "Canggih" dan tambahkan kelas CSS
- Kelas CSS: hitung mundur khusus-5
Sekarang kelas kustom kita telah ditambahkan, kita siap untuk menambahkan CSS kustom kita.
Untuk melakukan ini, buka pengaturan halaman.
Buka tab Advanced dan tambahkan CSS khusus di bawah ini.
.custom-countdown-5.et_pb_countdown_timer .sep {
display: none;
}
.custom-countdown-5.et_pb_countdown_timer .section.values {
border-left: 1px solid #808080;
}
.custom-countdown-5 .days {
border-left: none !important;
margin-right: 16px;
}
Kemudian simpan perubahan Anda dan kagumi kreasi Anda!
BONUS: kustomisasi tambahan
Kami dapat menggabungkan gradien animasi ke video latar belakang kami untuk tampilan yang lebih unik. Cukup tambahkan CSS di bawah ini (setelah CSS di atas).
.et_pb_section:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-animation: colorcycle 20s ease infinite;
-moz-animation:
colorcycle 20s ease infinite;
-webkit-animation: colorcycle 20s ease infinite; animation: colorcycle 20s ease infinite;
background: linear-gradient(270deg, #a253e0, #f15b4f, #2ea3f2);
background-size: 600% 600%;
}
@-webkit-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.et_pb_section_video_bg { opacity: .9; }Inilah yang akan terlihat seperti:
Unduh DIVI Sekarang!!!
Kesimpulan
Kami berharap tutorial ini akan menginspirasi Anda untuk proyek Anda berikutnya. Divi. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Lihat juga panduan kami untuk Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
