Cara Menerapkan Animasi Bertabrakan ke Elemen Desain dengan Divi

Menambahkan animasi ke elemen desain di halaman Anda pasti dapat membantu Anda meningkatkan keterlibatan. Ada banyak pilihan animasi yang tersedia di Divi's Visual Builder dan mereka cukup mudah digunakan. Tetapi Anda juga bisa berkreasi dengan animasi ini dan menggunakannya dengan cara yang unik. Dalam posting ini, kami akan menangani tiga contoh animasi bertabrakan yang akan kami buat ulang selangkah demi selangkah, hanya menggunakan opsi bawaan Divi.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas tiga contoh yang akan kita buat ulang dalam tutorial ini.

Contoh #1: Teks Bertabrakan

Contoh #2: Pembagi Bertabrakan

Contoh #3: Tabrakan Grid

Arahkan kursor

Berlangganan Saluran Youtube Kami

Buat Ulang Contoh #1: Teks Bertabrakan

Tambahkan Bagian Khusus

Struktur

Mari kita mulai dengan contoh pertama! Buka halaman baru atau yang sudah ada dan tambahkan bagian khusus baru menggunakan struktur berikut:

Perekat

Tanpa menambahkan modul atau baris apa pun, buka pengaturan bagian dan aktifkan opsi 'Jadikan Bagian Ini Lebar Penuh' di pengaturan ukuran.

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris ke bagian khusus:

Perekat

Buka pengaturan baris dan buat beberapa perubahan pada pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Ubah juga nilai padding kustom dalam pengaturan spasi.

• Padding Atas: 44px
• Padding Bawah: 0px

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Teks ke kolom pertama dari baris dan tambahkan beberapa konten.

Pengaturan Teks Judul

Ubah pengaturan teks heading selanjutnya.

• Font Judul: Montserrat
• Berat Font Judul: Ringan
• Ukuran Teks Judul: 4.4vw (Desktop), 8.2vw (Tablet), 40px (Telepon)
• Tinggi Garis Pos: 0,7em

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul kedua yang dibutuhkan pada kolom 1 adalah Modul Pembagi. Pastikan pembagi muncul dengan mengaktifkan opsi 'Tampilkan Pembagi'.

• Tampilkan Pembagi: Ya

Warna

Pindah ke tab desain dan ubah warna pembagi.

• Warna: #000000

Perekat

Kurangi lebar pembagi juga.

• Lebar: 91%

Jarak

Dan tambahkan beberapa margin atas untuk membuat ruang antara Modul Pembagi dan Modul Teks.

• Margin Atas: 30px

Animasi

Terakhir, tambahkan animasi halus ke Modul Pembagi.

• Gaya Animasi: Slide
• Arah Animasi: Kiri

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Pindah ke kolom kedua dan tambahkan Modul Teks kedua dengan beberapa konten pilihan.

Pengaturan Teks Judul

Ubah pengaturan teks heading selanjutnya.

• Font Judul: Montserrat
• Berat Font Judul: Ringan
• Warna Teks Judul: #3f46ff
• Ukuran Teks Judul: 3.8vw (Desktop), 6.5vw (Tablet), 40px (Telepon)
• Judul Garis Tinggi: 0.8em

Animasi

Dan tambahkan animasi ke modul ini juga.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 600ms
• Intensitas Animasi: 10%

Tambahkan Baris #2

Struktur Kolom

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

Tambahkan Modul yang Tersisa

Tambahkan modul lain yang ingin Anda tampilkan di baris baru ini dan ubah sesuai kebutuhan Anda.

Buat Ulang Contoh #2: Pembagi Bertabrakan

Tambahkan Bagian Khusus

Struktur

Lanjut ke contoh berikutnya! Tambahkan bagian khusus baru menggunakan struktur berikut:

Perekat

Tanpa menambahkan baris atau modul apa pun, buka pengaturan bagian dan aktifkan opsi 'Jadikan Bagian Ini Lebar Penuh'.

• Jadikan Bagian Ini Lebar Penuh: Ya

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Jarak

Buka pengaturan baris dan ubah pengaturan padding kustom.

• Padding Atas: 44px
• Padding Bawah: 0px

Tambahkan Modul Teks

Tambah isi

Selanjutnya, tambahkan Modul Teks ke baris dengan beberapa konten pilihan.

Pengaturan Teks Judul

Pindah ke tab desain dan ubah pengaturan teks judul.

• Font Judul: Montserrat
• Judul Font Berat: Ringan
• Ukuran Teks Judul: 70px (Desktop), 50px (Tablet), 40px (Telepon)
• Judul Garis Tinggi: 0.8em

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris lain menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 53% (Desktop), 100% (Tablet & Ponsel)

Jarak

Ubah juga nilai padding kustom.

• Padding Atas: 50px
• Padding Bawah: 0px

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Setelah Anda selesai memodifikasi pengaturan baris, lanjutkan dan tambahkan Modul Pembagi ke kolom pertama dan pastikan pembagi muncul dengan mengaktifkan opsi 'Tampilkan Pembagi'.

• Tampilkan Pembagi: Ya

Warna

Ubah warna pembagi berikutnya.

• Warna Pembagi: #3f46ff

Gaya

Dan ubah gaya pembagi dalam pengaturan gaya.

• Gaya Pembagi: Ganda

Perekat

Tingkatkan bobot pembagi dalam pengaturan ukuran juga.

• Berat Pembagi: 8px

Animasi

Terakhir, tambahkan animasi ke Modul Divider.

• Gaya Animasi: Slide
• Arah Animasi: Kanan

Modul Pembagi Klon & Tempatkan di Kolom 2

Setelah Anda selesai memodifikasi pengaturan Modul Pembagi, lanjutkan dan klon modul. Tempatkan duplikat di kolom kedua dari baris.

Ubah Animasi

Untuk membuat efek bertabrakan, ubah arah animasi Modul Pembagi duplikat.

• Gaya Animasi: Slide
• Arah Animasi: Kiri

Tambahkan Baris #3

Struktur Kolom

Lanjutkan dengan menambahkan baris lain menggunakan struktur kolom berikut:

Tambahkan Modul yang Tersisa

Dan tambahkan sebanyak mungkin modul yang Anda inginkan untuk menyelesaikan desain bagian.

Buat Ulang Contoh #3: Tabrakan Grid

Tambahkan Bagian Baru

Jarak

Ke contoh berikutnya dan terakhir! Tambahkan bagian reguler dan buka pengaturan. Buka pengaturan spasi, tambahkan beberapa nilai padding khusus:

• Padding Atas: 300px
• Padding Bawah: 200px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Gambar ke Kolom

Unggah Hamparan Gambar Berbentuk

Simpan overlay gambar berbentuk berikut ke desktop Anda dengan mengklik kanan:

Setelah Anda menyimpan hamparan gambar berbentuk, kembali ke situs web Divi Anda dan tambahkan Modul Gambar ke baris. Unggah file overlay gambar berbentuk yang dapat Anda temukan di folder unduhan Anda.

Latar Belakang Gradien

Selanjutnya, tambahkan latar belakang gradien ke modul.

• Warna 1: #aa2bff
• Warna 2: #09f7eb

Penyelarasan

Ubah perataan gambar juga.

• Penjajaran Gambar: Tengah

Perekat

Dan aktifkan opsi 'Force Fullwidth' di pengaturan ukuran.

• Paksa Lebar Penuh: Ya

Jarak

Tambahkan beberapa margin khusus ke modul juga.

• Margin Kiri: 200px
• Margin Kanan: 200px

Animasi

Terakhir, tambahkan animasi ke modul.

• Gaya Animasi: Zoom
• Arah Animasi: Pusat
• Durasi Animasi: 3000ms
• Intensitas Animasi: 100%

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua. Gunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat beberapa perubahan pada pengaturan ukuran.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 944px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Blurb ke kolom pertama. Masukkan beberapa konten pilihan.

ikon

Pilih ikon berikutnya.

Warna latar belakang

Dan tambahkan warna latar belakang ke modul juga.

• Warna Latar Belakang: rgba(255,255,255,0.83)

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon.

• Warna Ikon: #000000
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 73px

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: Open Sans
• Judul Font Berat: Semi Tebal
• Perataan Teks Judul: Tengah
• Ukuran Teks Judul: 15px
• Spasi Huruf Judul: -1px
• Tinggi Baris Judul: 1.8em

Perekat

Dan kurangi lebar konten dalam pengaturan ukuran.

• Lebar Konten: 183px

Jarak

Kami akan menambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 50px
• Padding Bawah: 50px

Bayangan Kotak

Lanjutkan dengan memberikan Blurb Module bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Transisi

Dan tingkatkan durasi transisi di tab lanjutan.

• Durasi Transisi: 600ms

Clone Blurb Module 8 Kali & Tempatkan 3 Duplikat di Setiap Kolom Tersisa

Sekarang, setelah Anda selesai memodifikasi Modul Blurb pertama, Anda dapat melanjutkan dan mengkloningnya 8 kali. Tempatkan tiga duplikat di kolom kedua dan tiga di kolom ketiga. Di bagian selanjutnya dari tutorial ini, kita akan membuat perubahan unik pada masing-masing Modul Blurb. Untuk melakukannya, kami akan mengikuti penomoran di bawah ini:

Ubah Modul Blurb #1

Jarak

Buka Modul Blurb pertama dan tambahkan beberapa margin atas negatif.

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

Spasi Arahkan

Ubah nilai margin saat mengarahkan kursor.

• Margin Atas: -380px
• Margin Bawah: 40px
• Margin Kiri: -40px
• Margin Kanan: 40px

Sudut Bulat

Lanjutkan dengan menambahkan '30px' ke sudut kiri atas modul.

Animasi

Dan tambahkan animasi.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 200ms

Ubah Modul Blurb #2

Warna latar belakang

Buka Modul Blurb kedua dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.93)

Jarak

Lanjutkan dengan menambahkan beberapa margin atas negatif ke modul.

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

Spasi Arahkan

Ubah nilai margin ini saat mengarahkan kursor.

• Margin Atas: -380px
• Margin Bawah: 40px

Animasi

Dan tambahkan animasi ke modul.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 400ms

Ubah Modul Blurb #3

Jarak

Ke Modul Blurb ketiga. Tambahkan beberapa margin atas negatif.

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

Spasi Arahkan

Ubah nilai margin saat mengarahkan kursor.

• Margin Atas: -380px
• Margin Bawah: 40px
• Margin Kiri: 40px
• Margin Kanan: -40px

Sudut Bulat

Tambahkan '30px' ke sudut kanan atas modul juga.

Animasi

Dan tambahkan animasi.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 600ms

Ubah Modul Blurb #4

Warna latar belakang

Lanjut ke modul keempat. Buka pengaturan dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.93)

Spasi Arahkan

Tambahkan beberapa nilai margin hover berikutnya.

• Margin Kiri: -40px
• Margin Kanan: 40px

Animasi

Dan tambahkan animasi juga.

• Gaya Animasi: Memudar
• Penundaan Animasi: 800ms

Ubah Modul Blurb #5

Animasi

Ke modul kelima. Satu-satunya hal yang perlu Anda lakukan di sini adalah menambahkan animasi.

• Gaya Animasi: Memudar
• Penundaan Animasi: 1000ms

Ubah Modul Blurb #6

Warna latar belakang

Lanjutkan dengan membuka modul keenam dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.93)

Spasi Arahkan

Ubah juga nilai spasi pada hover.

• Margin Kiri: 40px
• Margin Kanan: -40px

Animasi

Dan tambahkan animasi.

• Gaya Animasi: Memudar
• Penundaan Animasi: 1200ms

Ubah Modul Blurb #7

Spasi Arahkan

Ke modul ketujuh. Tambahkan beberapa nilai margin hover ke pengaturan spasi.

• Margin Atas: 40px
• Margin Kiri: -40px
• Margin Kanan: 40px

Sudut Bulat

Lanjutkan dengan menambahkan '30px' radius perbatasan ke sudut kiri bawah modul.

Animasi

Dan tambahkan animasi.

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 1400ms

Ubah Modul Blurb #8

Warna latar belakang

Lanjutkan dengan membuka modul kedelapan dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.93)

Spasi Arahkan

Tambahkan beberapa margin khusus saat mengarahkan kursor ke modul berikutnya.

• Margin Atas: 40px

Animasi

Tambahkan animasi ke Modul Blurb ini juga.

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 1600ms

Ubah Modul Blurb #9

Spasi Arahkan

Ke modul kesembilan dan terakhir! Buka pengaturan spasi dan tambahkan beberapa nilai margin hover khusus.

• Margin Atas: 40px
• Margin Kiri: 40px
• Margin Kanan: -40px

Sudut Bulat

Tambahkan '30px' radius perbatasan ke sudut kanan bawah juga.

Animasi

Dan tambahkan animasi.

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 1800ms

Tambahkan Margin Bawah Negatif ke Modul Gambar di Baris #1

Sekarang, untuk membenturkan lingkaran yang telah kita buat di bagian pertama dari contoh ini dan grid, kita akan memberikan Image Module (berisi overlay gambar berbentuk) beberapa margin bawah negatif.

• Margin Bawah: -520px

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir yang telah kita capai.

Contoh #1: Pembagi Bertabrakan

Contoh #2: Teks Bertabrakan

Contoh #3: Tabrakan Grid

Arahkan kursor

Pikiran Akhir

Menambahkan animasi ke halaman Anda dapat membantu menciptakan lebih banyak interaksi antara pengunjung dan Anda. Tentu saja, Anda hanya dapat menggunakan pengaturan animasi yang Anda miliki dalam Visual Builder, tetapi Anda juga dapat mengambil satu langkah lebih jauh dengan menerapkan animasi bertabrakan ke elemen desain yang akan membantu Anda mencapai hasil yang menakjubkan. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!