Apakah Anda ingin menyorot bagian tertentu dari halaman Anda? Hari ini kami akan menunjukkan cara membuat hamparan batas animasi untuk menyorot isi dari halaman Anda. Kami akan membuat batas animasi ini menggunakan templat Paket Tata Letak Pengembang Aplikasi, tersedia dari Divi Pembangun. Namun Anda dapat menggunakan teknik ini untuk semua jenis situs jaringan yang Anda buat. Ini pasti akan membantu Anda menambahkan dimensi ekstra ke halaman Anda. Kami harap tutorial ini menginspirasi Anda untuk membuat overlay perbatasan animasi Anda sendiri juga.
penelitian
Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil dari ketiga contoh ini. Anda juga dapat mengharapkan hasil serupa di layar yang lebih kecil.
Buat laman baru menggunakan laman landas Paket Tata Letak Pengembang Aplikasi
Hal pertama yang harus dilakukan adalah membuat halaman baru dan menggunakan Paket Tata Letak Pengembang Aplikasi.
Bagian Pahlawan Klon
Contoh kita akan dibuat di bagian pahlawan. Sebagai pengingat, inilah yang akan kami buat:
Tambahkan baris baru ke bagian pahlawan
Struktur kolom
Mari kita mulai menciptakan contoh pertama! Tambahkan baris baru di bagian khusus menggunakan struktur kolom berikut:
Tambahkan modul teks
Biarkan konten kosong
Tambahkan modul teks baru ke baris dan pastikan untuk meninggalkan kotak teks isi kosong. Kami menggunakan modul untuk opsi desain bawaannya, bukan untuk menampilkan konten. isi menulis.
jarak
Pergi ke pengaturan jarak modul teks dan bentuk dengan menambahkan margin dalam dan bawah kustom. Buat tumpang tindih antara modul ini dan modul sebelumnya dengan juga menambahkan margin atas negatif.
- Margin atas: -480px
- Padding terbaik: 223px
- Lapisan bawah: 223px
Batas
Kemudian pergi ke pengaturan batas modul dan tambahkan batas pilihan Anda.
- Lebar perbatasan: 9px
- Warna perbatasan: #0ae2ff
- Gaya perbatasan: Awal
Kotak bayangan
Tambahkan naungan kotak juga.
- Box Shadow Blur Force: 1px
- Ketebalan bayangan kotak: 15px
- Warna bayangan: rgba (10,226,255,0.59)
animasi
Dan bermain-main dengan pengaturan animasi untuk menampilkan konten. Namun, Anda harus mencatat bahwa Anda dapat menggunakan opsi yang paling Anda sukai.
- Animasi Gaya: Balik
- Ulangi Animasi: Sekali
- Arah Animasi: Benar
- Durasi animasi: 1500ms
- Penundaan animasi: 1500ms
- Animasi Intensitas: 500%
penelitian
Sekarang kita telah melalui semua langkah, mari kita melihat hasil dari tiga contoh yang kita buat sepanjang tutorial ini.
final pikiran
Dalam tutorial ini, kami menunjukkan cara menyorot konten Anda menggunakan overlay batas animasi. Ini adalah teknik yang bagus untuk menarik perhatian ke bagian tertentu dari halaman Anda, dan melakukannya dengan gaya. Anda dapat menggunakan teknik ini untuk semua jenis situs jaringan yang Anda bangun. Jika Anda memiliki pertanyaan atau saran, pastikan untuk memberikan komentar di bagian komentar di bawah!
