Cara Membuat Animasi Perbatasan Tumpang Tindih untuk Menyorot Konten dengan Divi

Mencari cara unik untuk menonjolkan bagian tertentu dari halaman Anda? Baca terus! Hari ini, kami akan menunjukkan cara membuat animasi tumpang tindih perbatasan untuk menyorot konten di halaman Anda. Kami akan membuat tiga tumpang tindih batas animasi yang berbeda pada halaman arahan Paket Tata Letak Pengembang Aplikasi, tetapi Anda dapat menggunakan teknik ini untuk semua jenis situs web yang Anda buat. Ini pasti akan membantu Anda menambahkan dimensi ekstra ke halaman Anda. Kami harap tutorial ini mengilhami Anda untuk membuat tumpang tindih perbatasan animasi alternatif Anda sendiri juga.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil dari ketiga contoh tersebut. Anda juga dapat mengharapkan hasil yang serupa pada ukuran layar yang lebih kecil.

Contoh 1

Contoh #2

Contoh #3

Berlangganan Saluran Youtube Kami

Buat Halaman Baru Menggunakan Halaman Arahan Paket Tata Letak Pengembang Aplikasi

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru menggunakan halaman arahan Paket Tata Letak Pengembang Aplikasi.

Bagian Pahlawan Klon

Dua contoh pertama kami dibuat di bagian pahlawan. Jika Anda ingin membuat ulang kedua contoh, Anda disarankan untuk mengkloning bagian pahlawan sehingga Anda dapat beralih ke duplikat untuk membuat ulang contoh kedua.

Buat Ulang Contoh #1

Tambahkan Baris Baru ke Bagian Pahlawan

Struktur Kolom

Mari kita mulai membuat ulang contoh pertama! Tambahkan baris baru di bagian khusus menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Biarkan Kotak Konten Kosong

Tambahkan e Modul Teks baru ke baris dan pastikan Anda membiarkan kotak konten kosong. Kami menggunakan modul untuk opsi desain bawaannya, bukan untuk menampilkan konten tertulis.

Jarak

Buka pengaturan jarak Modul Teks dan beri modul bentuk dengan menambahkan bantalan atas dan bawah khusus. Buat tumpang tindih antara modul ini dan modul sebelumnya dengan menambahkan beberapa margin atas negatif juga.

• Margin Atas: -480px
• Padding Atas: 223px
• Padding Bawah: 223px

Berbatasan

Kemudian, buka pengaturan perbatasan modul dan tambahkan perbatasan pilihan Anda.

• Lebar Perbatasan: 9px
• Warna Batas: #0ae2ff
• Gaya Perbatasan: Awal

Bayangan Kotak

Tambahkan bayangan kotak juga.

• Kekuatan Buram Bayangan Kotak: 1px
• Kekuatan Penyebaran Bayangan Kotak: 15px
• Warna Bayangan: rgba (10,226,255,0,59)

Animasi

Dan bermain-main dengan pengaturan animasi untuk membuat konten muncul.

• Gaya Animasi: Balik
• Pengulangan Animasi: Sekali
• Arah Animasi: Kanan
• Durasi Animasi: 1500ms
• Penundaan Animasi: 1500ms
• Intensitas Animasi: 500%

Buat Ulang Contoh #2

Tambahkan Baris Baru ke Bagian Duplikat Pahlawan

Ke contoh kedua! Tambahkan baris baru ke bagian duplikat pahlawan menggunakan struktur kolom berikut:

Tambahkan Modul Teks #1

Biarkan Kotak Konten Kosong

Kami, sekali lagi, menggunakan Modul Teks kosong.

Jarak

Buka pengaturan jarak dan berikan modul bentuk menggunakan bantalan atas dan bawah khusus. Buatlah tumpang tindih dengan modul sebelumnya dengan menambahkan beberapa margin atas negatif juga.

• Margin Atas: -480px
• Padding Atas: 223px
• Padding Bawah: 223px

Berbatasan

Lanjutkan dengan menambahkan batas ke Modul Teks.

• Lebar Perbatasan: 9px
• Warna Batas: #0ae2ff
• Gaya Perbatasan: Ganda

Animasi

Dan bermain-main dengan pengaturan animasi untuk membuat efek bergulir.

• Gaya Animasi: Roll
• Pengulangan Animasi: Sekali
• Arah Animasi: Pusat
• Durasi Animasi: 4500ms
• Penundaan Animasi: 1500ms
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%

Modul Teks Klon

Setelah Anda selesai memodifikasi Modul Teks pertama, lanjutkan dan klon.

Ubah Spasi

Buka pengaturan duplikat dan ubah nilai margin atas dalam pengaturan spasi.

• Margin Atas: -495px

Ubah Perbatasan

Ubah warna perbatasan juga.

• Warna Tepi: #ededed

Ubah Animasi

Dan ubah pengaturan animasi untuk mencapai hasil yang Anda lihat di pratinjau posting ini.

• Pengulangan Animasi: Loop
• Durasi Animasi: 5000ms
• Penundaan Animasi: 2000ms

Buat Ulang Contoh #3

Ubah Spasi Modul Gambar di Kolom 2

Ke contoh berikutnya dan terakhir! Arahkan ke bagian proses pada halaman dan tambahkan beberapa padding atas ke Modul Gambar yang berisi ilustrasi besar di tengah.

• Margin Atas: 70px (Desktop), 0px (Tablet & Ponsel)

Tambahkan Warna Latar Belakang ke Modul Teks yang Ada

Lanjutkan dengan menambahkan warna latar belakang putih ke masing-masing Modul Teks di kolom pertama dan ketiga.

• Warna Latar Belakang: #ffffff

Tambahkan Modul Teks ke Kolom 1

Biarkan Kotak Konten Kosong

Sekarang kita dapat mulai menambahkan animasi perbatasan tumpang tindih pertama! Tambahkan Modul Teks baru ke kolom pertama (lihat layar cetak) dan pastikan Anda membiarkan kotak konten kosong.

Jarak

Buka pengaturan spasi Modul Teks berikutnya dan buat bentuk dan tumpang tindih menggunakan margin kustom dan nilai padding.

• Margin Atas: -230px
• Margin Kiri: 80px
• Margin Kanan: 100px
• Padding Atas: 120px
• Padding Bawah: 120px

Berbatasan

Tambahkan perbatasan berikutnya.

• Lebar Perbatasan: 13px
• Warna Batas: #bcf5f3
• Gaya Perbatasan: Ganda

Animasi

Lanjutkan dengan menambahkan animasi pilihan Anda yang akan membantu Anda menyoroti konten yang Anda bagikan.

• Gaya Animasi: Lipat
• Pengulangan Animasi: Sekali
• Arah Animasi: Kanan
• Intensitas Animasi: 100%

Indeks Z

Untuk memastikan batas muncul di bawah konten, kita akan menggunakan nilai negatif untuk indeks Z dari Modul Teks yang berisi pengaturan batas.

• Indeks Z: -1

Modul Teks Klon & Tempatkan di Akhir Kolom 1

Setelah Anda selesai membuat dan memodifikasi Modul Teks, lanjutkan dan klon. Tempatkan duplikat di akhir kolom pertama.

Ubah Perbatasan

Ubah warna perbatasan.

• Warna Perbatasan: #ffc0ec

Ubah Animasi

Dan tambahkan penundaan animasi juga.

• Penundaan Animasi: 1000ms

Tambahkan Modul Teks ke Kolom 3

Biarkan Kotak Konten Kosong

Lanjutkan dengan menambahkan Modul Teks ke kolom ketiga (lihat layar cetak) dan pastikan Anda membiarkan kotak konten kosong.

Jarak

Pindah ke pengaturan spasi dan buat bentuk dan tumpang tindih menggunakan margin kustom dan nilai padding.

• Margin Atas: -230px
• Margin Kiri: 100px
• Margin Kanan: -80px
• Padding Atas: 120px
• Padding Bawah: 120px

Berbatasan

Tambahkan perbatasan pilihan Anda selanjutnya.

• Lebar Perbatasan: 13px
• Warna Batas: #7479ff
• Gaya Perbatasan: Ganda

Animasi

Bersamaan dengan animasi yang menyertakan penundaan animasi yang lebih tinggi dari yang diberikan pada dua Modul Teks sebelumnya.

• Gaya Animasi: Lipat
• Pengulangan Animasi: Sekali
• Arah Animasi: Kiri
• Penundaan Animasi: 2000ms
• Intensitas Animasi: 100%

Indeks Z

Pastikan modul muncul di bawah konten dengan menggunakan indeks Z negatif.

• Indeks Z: -1

Modul Teks Klon & Tempatkan di Akhir Kolom 3

Setelah Anda selesai menambahkan dan memodifikasi Modul Teks, klon dan tempatkan duplikatnya di akhir baris ketiga.

Ubah Perbatasan

Ubah warna batas duplikat.

• Warna Batas: #b3d1ff

Ubah Animasi

Tambahkan beberapa penundaan animasi ekstra dan selesai!

• Penundaan Animasi: 3000ms

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir dari ketiga contoh yang telah kita buat ulang sepanjang tutorial ini.

Contoh 1

Contoh #2

Contoh #3

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana menempatkan konten Anda dalam sorotan menggunakan tumpang tindih perbatasan animasi. Ini adalah teknik yang bagus untuk menarik perhatian ke bagian tertentu dari halaman Anda dan melakukannya dengan cara yang elegan juga. Anda dapat menggunakan teknik ini untuk semua jenis situs web yang Anda buat. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!