Cara Persuasif Mengarahkan Pengunjung ke Halaman dengan Pengaturan Animasi Bawaan Divi

Salah satu tujuan utama dari bagian pahlawan adalah untuk meyakinkan orang untuk terus menggulir halaman ke bawah dan menemukan lebih banyak konten dan informasi yang telah Anda bagikan. Dengan opsi animasi bawaan Divi, Anda dapat menambahkan animasi interaktif ke halaman Anda yang akan membantu Anda mengarahkan pengunjung ke halaman secara persuasif. Dalam tutorial ini, kita akan memotivasi pengunjung untuk menggulir ke bawah ke bagian layanan menggunakan ikon panah yang mengarahkan mereka ke bagian layanan.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Desktop

Seluler

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian #1

Warna latar belakang

Buat halaman baru dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #0f0f0f

Pembagi Bawah

Lanjutkan dengan menambahkan pembagi bawah ke bagian tersebut.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Tinggi Pembagi: 30px
• Pembagi Horizontal Ulangi: 10x (Desktop), 4x (Tablet & Telepon)

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 269px (Desktop), 100px (Tablet & Ponsel)
• Padding Bawah: 674px (Desktop), 200px (Tablet & Ponsel)

Menambahkan baris

Struktur Kolom

Kemudian, tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, buka pengaturan ukuran dan aktifkan opsi 'Jadikan Baris Ini Penuh Lebar'.

• Jadikan Baris Ini Lebar Penuh: Ya

Tambahkan Modul Teks

Tambah isi

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Teks. Silakan dan tambahkan beberapa konten H1 pilihan.

Pengaturan Teks Judul

Ubah pengaturan teks heading selanjutnya.

• Font Judul: Didact Gothic
• Berat Huruf Judul: Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 170px (Desktop), 50px (Tablet & Ponsel)
• Judul Garis Tinggi: 0.8em

• Judul Teks Bayangan Panjang Vertikal: 1.5em
• Warna Bayangan Teks Judul: rgba(0,0,0,0.11)

Tambahkan Bagian #2

Warna latar belakang

Lanjutkan dengan menambahkan bagian kedua ke halaman. Ubah warna latar belakang di pengaturan bagian.

• Warna Latar Belakang: #0f0f0f

Pembagi Atas

Tambahkan pembagi atas ke bagian juga.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Tinggi Pembagi: 30px
• Pembagi Horizontal Ulangi: 10x (Desktop), 4x (Tablet & Telepon)

Jarak

Dan tingkatkan nilai spasi dalam pengaturan spasi.

• Padding Atas: 245px
• Padding Bawah: 245px

Menambahkan baris

Struktur Kolom

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

Perekat

Buka pengaturan baris, buka pengaturan ukuran dan buat beberapa perubahan.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2

Tambahkan Modul Blurb

Pilih Ikon

Modul pertama yang kita perlukan di kolom pertama adalah Modul Blurb. Satu-satunya bagian dari elemen Blurb Module yang kita butuhkan adalah ikon. Pilih ikon panah yang mengarah ke bawah.

Pengaturan Ikon

Kemudian, buka tab desain dan ubah pengaturan ikon.

• Warna Ikon: #4ffcff
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 150px

Jarak

Untuk meningkatkan jangkauan ikon, kita perlu menambahkan beberapa margin atas negatif. Ini akan memungkinkan Modul Blurb untuk tumpang tindih dengan bagian sebelumnya dan akan memungkinkan animasi antara dua bagian terjadi dengan lancar. Untuk menebus margin kustom, kami juga akan menambahkan padding atas kustom. Ini akan memastikan ikon tetap di posisi yang sama persis seperti sebelumnya. Satu-satunya hal yang berubah adalah ukuran dan jangkauan seluruh modul.

• Margin Atas: -550px
• Padding Atas: 550px

Animasi

Last but not least, tambahkan animasi ke Modul Blurb menggunakan pengaturan berikut:

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 3000ms
• Penundaan Animasi: 1200ms
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Gambar/Ikon Animasi: Tanpa Animasi

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Modul selanjutnya yang kita butuhkan pada kolom pertama adalah Modul Teks. Tambahkan beberapa konten pilihan.

Pengaturan Teks

Lanjutkan dengan mengubah pengaturan teks.

• Font Teks: Didact Gothic
• Berat Font Teks: Tebal
• Warna Teks: rgba(255,255,255,0.03)
• Ukuran Teks: 350px
• Orientasi Teks: Tengah

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Tambahkan Modul Teks kedua ke kolom pertama dengan beberapa konten pilihan H3.

Pengaturan Teks Judul

Dan ubah pengaturan teks heading di tab design.

• Judul 3 Font: Didact Gothic
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 40px (Desktop), 30px (Tablet & Ponsel)
• Spasi Judul 3 Huruf: -1px

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul selanjutnya yang dibutuhkan pada kolom pertama adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lanjutkan dengan mengubah warna pembagi di tab desain.

• Warna: #ffffff

Perekat

Buat beberapa perubahan pada pengaturan ukuran juga.

• Lebar: 59%
• Penyelarasan Modul: Pusat

Animasi

Dan tambahkan animasi ke modul juga.

• Gaya Animasi: Slide
• Arah Animasi: Pusat
• Durasi Animasi: 2000ms
• Intensitas Animasi: 10%
• Kurva Kecepatan Animasi: Ease-In-Out

Tambahkan Modul Teks #3 ke Kolom 1

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom satu adalah Modul Teks lainnya. Tambahkan beberapa konten pilihan.

Pengaturan Teks

Lanjutkan dengan mengubah pengaturan teks.

• Font teks Berat: Ringan
• Warna Teks: #b7b7b7
• Ukuran Teks: 18px
• Tinggi Baris Teks: 1.8em
• Orientasi Teks: Tengah

Animasi

Dan tambahkan animasi ke modul.

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Intensitas Animasi: 20%
• Kurva Kecepatan Animasi: Ease-In-Out

Modul Klon 3 Kali & Tempatkan Duplikat di Kolom Tersisa

Sekarang setelah kita selesai memodifikasi semua modul di kolom 1, kita dapat mengkloning semua modul di kolom satu sebanyak 3 kali dan menempatkan duplikatnya di kolom yang tersisa.

Ubah Konten Modul

Ubah konten duplikat.

Tambahkan Penundaan Animasi ke Modul Pembagi Duplikat

Tambahkan beberapa penundaan animasi ke masing-masing duplikat Modul Pembagi juga.

• Modul Pembagi di Kolom 2: 400ms
• Modul Pembagi di Kolom 3: 800ms
• Modul Pembagi di Kolom 4: 1200ms

Tambahkan Penundaan Animasi ke Modul Teks #3 Duplikat

Lakukan hal yang sama untuk Modul Teks terakhir di setiap kolom.

• Modul Teks Terakhir di Kolom 2: 400ms
• Modul Teks Terakhir di Kolom 3: 800ms
• Modul Teks Terakhir di Kolom 4: 1200ms

Sesuaikan Ikon Blurb #2

Warna Ikon

Kami juga memodifikasi warna dan animasi ikon uraian untuk setiap duplikat. Buka Modul Blurb di kolom 2 dan ubah warna ikon.

• Warna Ikon: #ff6b86

Animasi

Ubah juga pengaturan animasi.

• Jenis Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 2000ms
• Penundaan Animasi: 800ms
• Intensitas Animasi: 62%
• Animasi Mulai Opacity: 100%
• Gambar/Ikon Animasi: Tanpa Animasi

Sesuaikan Ikon Blurb #3

Warna Ikon

Lanjutkan dengan membuka Modul Blurb di kolom 3 dan ubah warna ikon.

• Warna Ikon: #ffe500

Animasi

Ubah juga pengaturan animasi.

• Jenis Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 1000ms
• Penundaan Animasi: 600ms
• Intensitas Animasi: 69%
• Animasi Mulai Opacity: 100%
• Gambar/Ikon Animasi: Tanpa Animasi

Sesuaikan Ikon Blurb #4

Warna Ikon

Buka Modul Blurb terakhir, di kolom 4, dan ubah warna ikon.

• Warna Ikon: #00ff9d

Animasi

Dan selesaikan desain dengan mengubah pengaturan animasi di tab desain.

• Jenis Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 3000ms
• Penundaan Animasi: 400ms
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%
• Gambar/Ikon Animasi: Tanpa Animasi

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana secara persuasif mengarahkan pengunjung ke halaman menggunakan pengaturan animasi Divi. Ide dasarnya adalah Anda menggunakan Modul Blurb untuk ikon mereka dan meningkatkan jangkauan animasi mereka ke bagian pahlawan. Anda dapat menggunakan pendekatan ini pada semua jenis situs web yang Anda buat dan menjadi sekreatif yang Anda inginkan. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!