Cara Membuat Garis Besar Animasi yang Indah untuk Setiap Kontainer dengan Divi

Opsi animasi Divi telah membantu menghidupkan banyak situs web tanpa memerlukan kode khusus. Pengaturan animasi bawaan sangat dapat disesuaikan dan memungkinkan Anda membuat desain yang sangat unik. Salah satu hal yang dapat Anda lakukan, misalnya, membuat kerangka wadah animasi. Itulah tepatnya yang akan kami tunjukkan kepada Anda di pos ini. Kami akan menambahkan batas ke setiap wadah dan menambahkan pengaturan animasi yang cocok dengan aliran setiap elemen. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Garis Besar Animasi GRATIS

Untuk meletakkan tangan Anda pada tata letak garis animasi gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan dan gunakan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Pindah ke tab desain dan tambahkan beberapa nilai margin dan padding kustom.

• Margin Atas: 3vw
• Margin Bawah: 3vw
• Margin Kiri: 3vw
• Margin Kanan: 3vw
• Padding Atas: 3vw
• Padding Bawah: 3vw

Berbatasan

Buka pengaturan perbatasan berikutnya dan tambahkan '2vw' ke masing-masing sudut. Gunakan perbatasan juga.

• Lebar Perbatasan: 1px
• Warna Perbatasan: #000000

Animasi

Tambahkan juga animasi kustom.

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Animasi Mulai Opacity: 100%

Visibilitas

Untuk memastikan tidak ada yang melebihi penampung bagian, kami akan menyembunyikan luapan di pengaturan visibilitas bagian.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar: 94%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 3vw
• Padding Bawah: 3vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

Berbatasan

Pindah ke pengaturan perbatasan dan tambahkan '2vw' ke masing-masing sudut. Tambahkan perbatasan juga.

• Lebar Perbatasan: 1px
• Warna Perbatasan: #000000

Animasi

Kami juga menambahkan animasi ke baris.

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Penundaan Animasi: 500ms
• Animasi Mulai Opacity: 100%

Visibilitas

Dan untuk memastikan animasi kolom (yang akan kita tambahkan nanti) berfungsi, kita akan membuat baris meluap terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Pengaturan Kolom 1

Lanjutkan dengan membuka pengaturan kolom pertama.

Berbatasan

Buka tab desain, tambahkan '2vw' ke masing-masing sudut dan gunakan batas.

• Lebar Perbatasan: 1px
• Warna Perbatasan: #000000

Animasi

Selesaikan pengaturan kolom dengan menambahkan animasi kustom.

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Penundaan Animasi: 1000ms
• Animasi Mulai Opacity: 100%

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Yang pertama kita butuhkan adalah Modul Blurb. Masukkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #000000
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 6vw (Desktop), 8vw (Tablet), 10vw (Telepon)

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: Poppins
• Judul Font Berat: Ultra Tebal
• Perataan Teks Judul: Tengah
• Judul Teks Ukuran: 1.2vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)

Pengaturan Teks Tubuh

Bersamaan dengan pengaturan teks isi.

• Font Tubuh: Buka Sans
• Perataan Teks Tubuh: Tengah
• Ukuran Teks Tubuh: 0.8vw (Desktop), 1.7vw (Tablet), 2.3vw (Telepon)

Jarak

Buat beberapa ruang di sekitar Modul Blurb dengan menambahkan nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: 3vw
• Margin Bawah: 3vw
• Margin Kiri: 3vw
• Margin Kanan: 3vw
• Padding Atas: 10vw (Desktop), 18vw (Tablet & Ponsel)
• Padding Bawah: 10vw (Desktop), 18vw (Tablet & Ponsel)
• Padding Kiri: 2vw (Desktop), 8vw (Tablet & Ponsel)
• Padding Kanan: 2vw (Desktop), 8vw (Tablet & Ponsel)

Berbatasan

Pindah ke pengaturan perbatasan, tambahkan '2vw' ke masing-masing sudut dan gunakan perbatasan.

• Lebar Perbatasan: 1px
• Warna Perbatasan: #000000

Animasi

Selesaikan desain Modul Blurb dengan menambahkan animasi khusus.

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 1300ms
• Penundaan Animasi: 1200ms
• Intensitas Animasi: 60%
• Animasi Mulai Opacity: 100%
• Ikon Animasi: Tanpa Animasi

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Ke modul berikutnya dan terakhir, yaitu Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Penyelarasan

Pindah ke tab desain dan ubah perataan.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah pengaturan tombol selanjutnya.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 1.5vw (Tablet), 2.2vw (Ponsel)
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #FFFFFF
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #000000
• Radius Perbatasan Tombol: 50vw
• Font Tombol: Buka Sans
• Berat Huruf Tombol: Sangat Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Dan bentuk Modul Tombol menggunakan nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: -5vw (Desktop), -6,5vw (Tablet), -7vw (Telepon)
• Margin Bawah: 2vw (Desktop), 3vw (Tablet & Ponsel)
• Padding Atas: 1vw (Desktop), 2vw (Tablet & Ponsel)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet & Ponsel)
• Padding Kiri: 5vw (Desktop), 8vw (Tablet & Ponsel)
• Padding Kanan: 5vw (Desktop), 8vw (Tablet & Ponsel)

Animasi

Selesaikan desain Modul Tombol dengan menambahkan animasi khusus.

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Penundaan Animasi: 1400ms
• Intensitas Animasi: 200%
• Animasi Mulai Opacity: 100%

Hapus Kolom 2 & Klon Kolom 1

Setelah Anda menyelesaikan kolom 1 dan modul di dalamnya, Anda dapat menghapus kolom kedua (kosong) dan mengkloning yang pertama. Ubah semua konten Modul Blurb agar sesuai dengan situs web Anda dan selesai!

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan pengaturan animasi Divi dalam kombinasi dengan berbagai wadah yang disediakan Divi dan pengaturan batasnya. Kami harap tutorial ini menginspirasi Anda untuk membuat variasi Anda sendiri dari teknik ini juga! Jika Anda memiliki pertanyaan, 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.