Memiliki judul yang menonjol berarti memastikan bahwa Anda memiliki kesempatan untuk menarik perhatian Anda pengunjung. Judul biasanya tidak luput dari perhatian karena ukuran dan posisinya yang sentral, tetapi jika Anda ingin melangkah lebih jauh dan membuat judul benar-benar menonjol, Anda telah datang ke tempat yang tepat.

Dalam tutorial ini, kami akan menggabungkan pengaturan animasi dari Divi untuk membuat judul yang menonjol dan menarik perhatian Anda pengunjung.

Hasil akhir

Bagian Satu: Desain

Konfigurasi Bagian

Warna latar belakang

Mari mulai mendesain! Buat halaman baru dan tambahkan bagian biasa padanya. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna latar belakang: #EEE

jarak

Lalu, buka pengaturan jarak bagian dan tambahkan margin isian khusus.

• Lapisan bawah: 10vw

Tambahkan baris 1

Struktur kolom

Lanjutkan 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: #DDD

perekat

Lalu pergi ke pengaturan ukuran dan biarkan baris memenuhi seluruh lebar layar.

• Jadikan garis ini lebar penuh: Ya
• Gunakan lebar selokan khusus: Ya
• Lebar selokan: 1

jarak

Juga, lepaskan lapisan internal atas dan bawah default untuk saluran.

• Padding di atas: 0px
• Bawah Pelapis: 0px

Tambahkan modul teks

Saatnya untuk mulai menambahkan modul! Modul pertama yang kita perlukan adalah modul teks. Masukkan bagian pertama judul Anda ke dalam kotak isi menggunakan gaya teks paragraf.

Warna latar belakang

Lalu pergi ke pengaturan latar belakang modul dan tambahkan warna latar belakang.

• Warna latar: #ccc

Pengaturan teks

Ubah juga pengaturan teks pada tab Desain.

• Teks huruf: Didact Gothic
• Berat font teks: tebal
• Warna teks: #000000
• Ukuran teks: 10vw
• Tinggi baris teks: 0.9em
• Orientasi Teks: Tengah

jarak

Kemudian buat bentuk apa pun yang Anda suka menggunakan padding khusus di bagian atas dan bawah.

• Padding di atas: 10vw
• Lapisan bawah: 3vw

animasi

Last but not least, kami akan menambahkan beberapa animasi. Penting untuk memastikan bahwa durasi animasi dan opasitas awal adalah nol. Ini akan memungkinkan modul teks untuk ditampilkan dengan efek flash.

• Gaya Animasi: Pudar
• Ulangi Animasi: Sekali
• Durasi Animasi: 0ms
• Penundaan animasi: 1000ms

Mengkloning modul teks x4

Setelah Anda selesai mengedit modul teks pertama, Anda dapat melanjutkan dan mengkloningnya sebanyak yang Anda inginkan, tergantung pada panjang judul Anda. Untuk setiap bagian dari judul yang ingin Anda tampilkan dengan efek flash, Anda memerlukan modul teks terpisah. Untuk contoh ini, kita akan membutuhkan modul 4 tambahan.

Warna latar belakang

Dengan warna latar belakang.

• Salin 1 = Warna latar: # 5900ff, warna teks: #FFF
• Copy 2 = biarkan apa adanya, modifikasi durasi animasi (Animation Delay): 1500ms
• Salin 3 = Warna latar: # ffb200, warna teks: #FFF, ubah durasi animasi: 2000ms
• Salin 4 = Warna latar: # 000, warna teks #FFF, ubah durasi animasi: 2500ms

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, kami akan menambahkan margin atas negatif ke setiap modul teks duplikat. Dengan kata lain, kami memastikan bahwa semua modul yang mengikuti modul pertama muncul di atas modul teks pertama tersebut.

• Margin atas: -31.98vw

Garis transformasi

Transform Terjemahan

Lanjutkan dengan mengubah seluruh baris, dimulai dengan parameter transformasi.

• Bawah: -35vw

Transformasi Rotasi

Juga mengubah nilai rotasi transformasi.

• Kiri: 320deg

Tambahkan baris 2

Struktur kolom

Di tempat kedua! Sekarang karena efek judul sudah ada, 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 garis ini lebar penuh: Ya
• Gunakan lebar selokan khusus: Ya
• Lebar selokan: 1

jarak

Menghapus isi teratas default dari baris berikutnya.

• Lapisan atas: 0px

Tambahkan modul deskripsi teks ke kolom 2

Tambahkan konten H1

Saatnya menambahkan modul. Modul pertama akan menjadi modul teks. Anda dapat menambahkan isi yang kamu inginkan.

Pengaturan teks H1

Lalu pergi ke tab desain dan ubah pengaturan H1.

• Font judul: Didact Gothic
• Judul Berat: Tebal
• Ukuran Fon: 1.8vw (Komputer), 3.8vw (Tablet), 4vw (Telepon)

jarak

Tambahkan margin khusus di bagian spasi.

• Margin atas: -4vw
• Margin bawah: 2vw
• Margin kiri: 30vw
• Margin kanan: 30vw (Komputer), 15vw (Tablet & Telepon)

Tambahkan modul pemisah ke kolom 2

jarak penglihatan

Modul selanjutnya adalah modul pemisah. Pastikan opsi "Show Divider" diaktifkan.

• Tampilkan Pemisah: Ya

Warna

Lalu pergi ke tab "Desain" dan ubah warna pemisah.

• Warna: #000000

Dimentionnement

Ubah opsi spasi juga.

• Spacing Weight: 8px
• Lebar: 7%

jarak

Selalu dengan opsi ukuran.

• Margin rendah: 1vw
• Margin kiri: 30vw

Tambahkan modul teks ke kolom 2

Tambahkan konten

Modul berikutnya akan menjadi modul teks lainnya. Anda harus menyediakan isi pilih pemilih.

Pengaturan teks

Kemudian Anda perlu mengubah pengaturan teks di tab "Desain".

• Ukuran Teks: 0.8vw (Komputer), 1.3vw (Tablet), 1.6vw (Telepon)
• Ketinggian garis: 2.2em

jarak

Tambahkan juga beberapa margin di bagian jarak.

• Margin rendah: 3vw
• Margin Kiri: 30vw
• Margin Kanan: 30vw (Komputer), 15vw (Tablet & Ponsel)

Tambahkan modul tombol ke kolom 2

Pengaturan modul tombol

Untuk modul terakhir, yang akan menjadi modul tombol. Anda akan menambahkan konten pilihan Anda dan mengubah pengaturan sebagai berikut:

• Gunakan gaya khusus: Ya
• Ukuran Fon: 1vw (Komputer), 1.5vw (Tablet), 2vw (Telepon)
• Lebar batas tombol: 0px
• Fon tombol: Poppins
• Berat teks: Tebal
• Gaya Huruf: Huruf Besar

jarak

Pergi ke pengaturan jarak dan tambahkan margin luar kustom serta margin dalam dan hanya itu.

• Margin Eksternal Kiri: 30vw
• Margin tinggi dalam: 1vw
• Di dalam margin rendah: 1vw
• Margin dalam kiri: 3vw
• margin dalam kanan: 3vw

Selesai

Dalam tutorial ini, kita melihat cara mendesain judul dengan teks animasi, hanya menggunakan opsi internal Divi. Ini adalah teknik luar biasa yang memungkinkan Anda menarik perhatian Anda pengunjung dengan cara yang sangat orisinal.