Cara Membuat Judul Anda Pop dengan Pengaturan Animasi Divi

Judul Anda biasanya adalah hal pertama yang dibaca orang ketika mereka mengunjungi situs web Anda. Selain memiliki judul yang sangat bagus, penting juga untuk membuat orang memperhatikan dan benar-benar membaca apa pun yang Anda tunjukkan kepada mereka. Judul biasanya tidak luput dari perhatian karena ukuran dan posisi sentralnya di bagian pahlawan, tetapi jika Anda ingin melangkah lebih jauh dan benar-benar membuat judul menonjol, tutorial ini cocok untuk Anda.

Kami akan menggabungkan pengaturan animasi Divi untuk membuat judul yang menonjol dan menarik perhatian pengunjung Anda. Kami akan membagi headline menjadi 5 bagian dan membuat efek flash yang akan membuat pengunjung Anda ingin mengikuti pergerakan dan membaca apa yang dibagikan.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna latar belakang

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

• Warna Latar Belakang: #ededed

Jarak

Kemudian, pergi ke pengaturan jarak bagian dan tambahkan beberapa bantalan bawah kustom.

• Padding Bawah: 10vw

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang baris.

• Warna Latar Belakang: #c9c9c9

Perekat

Buka pengaturan ukuran berikutnya dan biarkan baris memenuhi seluruh lebar layar.

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

Jarak

Hapus padding atas dan bawah default dari baris juga.

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

Tambahkan Modul Teks #1

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Teks. Masukkan bagian pertama dari judul Anda ke kotak konten menggunakan gaya teks paragraf.

Warna latar belakang

Kemudian, buka pengaturan latar belakang modul dan tambahkan warna latar belakang.

• Warna Latar Belakang: #c9c9c9

Pengaturan Teks

Ubah juga pengaturan teks di tab desain.

• Font Teks: Didact Gothic
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 10vw
• Tinggi Baris Teks: 0.9em
• Orientasi Teks: Tengah

Jarak

Dan buat bentuk yang Anda inginkan menggunakan bantalan atas dan bawah khusus.

• Padding Atas: 10vw
• Padding Bawah: 3vw

Animasi

Last but not least, kita akan menambahkan animasi. Sangat penting untuk memastikan durasi animasi dan opacity awal adalah nol. Ini akan memungkinkan modul teks muncul dengan efek flash.

• Gaya Animasi: Memudar
• Pengulangan Animasi: Sekali
• Durasi Animasi: 0ms
• Penundaan Animasi: 1000ms

Modul Teks Klon x4

Setelah Anda selesai memodifikasi Modul Teks pertama, Anda dapat melanjutkan dan mengkloning modul tersebut sebanyak yang Anda inginkan, tergantung pada panjang judul Anda. Untuk setiap bagian judul yang ingin Anda tampilkan dengan efek flash, Anda memerlukan Modul Teks terpisah. Untuk contoh ini, kita membutuhkan 4 modul tambahan.

Ubah Duplikat #1

Isi

Ubah salinan duplikat pertama.

Warna latar belakang

Seiring dengan warna latar belakang.

• Warna Latar Belakang: #5900ff

Warna teks

Ubah warna teks menjadi putih.

• Warna Teks: #ffffff

Animasi

Dan tingkatkan penundaan animasi dalam pengaturan animasi. Ini akan memungkinkan pengunjung Anda memiliki cukup waktu untuk membaca Modul Teks sebelumnya sebelum modul ini muncul.

• Penundaan Animasi: 1500ms

Ubah Duplikat #2

Isi

Ubah isi duplikat kedua selanjutnya.

Warna latar belakang

Seiring dengan warna latar belakang.

• Warna Latar Belakang: #ffb200

Warna teks

Dan juga warna teksnya.

• Warna Teks: #ffffff

Animasi

Sekali lagi, kami akan memastikan bahwa penundaan animasi lebih tinggi dari penundaan animasi yang digunakan untuk dua modul sebelumnya. Kami meninggalkan 500 md di antara masing-masing dari mereka untuk memberi orang cukup waktu untuk membaca.

• Penundaan Animasi: 2000ms

Ubah Duplikat #3

Isi

Lanjutkan dengan mengubah konten duplikat ketiga.

Animasi

Seiring dengan penundaan animasi.

• Penundaan Animasi: 2500ms

Ubah Duplikat #4

Isi

Ke duplikat berikutnya dan terakhir. Ubah konten.

Warna latar belakang

Seiring dengan warna latar belakang.

• Warna Latar Belakang: #000000

Warna teks

Ubah warna teks juga.

• Warna Teks: #3a3a3a

Animasi

Dan tingkatkan penundaan animasi dalam pengaturan animasi.

• Penundaan Animasi: 3000ms

Tambahkan Margin Negatif ke Setiap Modul Teks Kecuali Yang Pertama

Setelah Anda selesai menyesuaikan semua Modul Teks, Anda dapat melanjutkan dan membuat tumpang tindih. Untuk membuat tumpang tindih ini, kita akan menambahkan beberapa margin atas negatif ke masing-masing Modul Teks duplikat. Dengan kata lain, kami memastikan semua modul yang datang setelah modul pertama muncul di atas Modul Teks pertama itu.

• Margin Atas: -21.98vw

Transform Baris

Ubah Terjemahan

Lanjutkan dengan mengubah seluruh baris, dimulai dengan mengubah pengaturan terjemahan.

• Bawah: -35vw

Ubah Putar

Ubah juga nilai transform rotate.

• Kiri: 320 derajat

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua! Sekarang setelah kita memiliki efek headline, kita dapat mulai menambahkan modul yang tersisa. Tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar dalam pengaturan ukuran:

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

Jarak

Hapus padding atas default dari baris berikutnya.

• Padding Atas: 0px

Tambahkan Modul Teks Judul ke Kolom 2

Tambahkan Konten H1

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah modul teks judul. Tambahkan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Lalu, buka tab desain dan ubah pengaturan teks H1.

• Font Judul: Didact Gothic
• Berat Huruf Judul: Tebal
• Ukuran Teks Judul: 1.8vw (Desktop), 3.8vw (Tablet), 4vw (Telepon)

Jarak

Tambahkan beberapa nilai margin khusus ke pengaturan spasi.

• Margin Atas: -4vw
• Margin Bawah: 2vw
• Margin Kiri: 30vw
• Margin Kanan: 30vw (Desktop), 15vw (Tablet & Ponsel)

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #000000

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 8px
• Lebar: 7%

Jarak

Seiring dengan pengaturan spasi.

• Margin Bawah: 1vw
• Margin Kiri: 30vw

Tambahkan Modul Teks Deskripsi ke Kolom 2

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks lainnya. Masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Kemudian, ubah pengaturan teks di tab desain.

• Ukuran Teks: 0.8vw (Desktop), 1.3vw (Tablet), 1.6vw (Telepon)
• Tinggi Baris Teks: 2.2em

Jarak

Tambahkan beberapa nilai margin khusus dalam pengaturan spasi juga.

• Margin Bawah: 3vw
• Margin Kiri: 30vw
• Margin Kanan: 30vw (Desktop), 15vw (Tablet & Ponsel)

Tambahkan Modul Tombol ke Kolom 2

Pengaturan Tombol

Ke modul berikutnya dan terakhir, yaitu Modul Tombol. Tambahkan beberapa salinan pilihan Anda dan ubah pengaturan tombol yang sesuai:

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 1.5vw (Tablet), 2vw (Telepon)
• Lebar Batas Tombol: 0px
• Font Tombol: Poppins
• Berat Huruf: Tebal
• Gaya Font: Huruf Besar

Jarak

Buka pengaturan spasi dan tambahkan beberapa margin kustom dan nilai padding, dan selesai!

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

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 bagaimana membuat headline Anda muncul hanya menggunakan opsi bawaan Divi. Ini adalah teknik yang bagus untuk menarik perhatian pengunjung Anda dan mengkomunikasikan pesan Anda dengan cara yang orisinal. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!