Tutorial ini hadir sebagai tambahan dari tutorial yang kami buat beberapa hari yang lalu. Kami memang telah menunjukkan kepada Anda cara menambahkan teks gulir di kolom di Divi. Hari ini, kami akan menunjukkan kepada Anda bagaimana menggunakan teknik yang sama, untuk menambahkan bagian "pahlawan super" (ekspresi yang digunakan untuk dmenulis area halaman web yang luas yang dirancang untuk menarik perhatian dan menonjolkan elemen tertentu).
Mari kita mulai.
Tambahkan tata letak yang telah ditentukan
Untuk menambahkan tata letak ke halaman Anda, buka menu pengaturan di bagian bawah pembuat Divi dan klik simbol plus. Di jendela pop-up Muat dari Perpustakaan, pilih Paket Tata Letak Perekrut Pekerjaan. Kemudian klik untuk menggunakan tata letak halaman rumah.
Hapus konten tambahan dengan tata letak
Setelah presentasi dimuat ke halaman, terapkan tampilan wireframe dan hapus semuanya isi presentasi, kecuali header lebar penuh dan bagian tepat di bawahnya.
Membuat animasi teks pilihan
Seperti yang Anda lihat, kata "hired" sudah digunakan sebagai elemen desain teks besar di modul teks di bagian kedua. Kami akan mengubah modul teks ini menjadi elemen desain speaker teks responsif. Kunci untuk membuat persegi panjang teks responsif adalah dengan memastikan modul garis dan teks menjangkau lebar penuh dari jendela browser. Kita bisa melakukan ini dengan lebar 100%. Kemudian kita bisa menggunakan unit panjang vw untuk ukuran teks. Ini akan membuat teks cocok dengan lebar browser. Setelah itu, kami akan menerapkan prinsip yang sama yang kami gunakan sebelumnya untuk mengilustrasikan contoh teks bergulir sederhana kami.
Inilah cara melakukannya.
Perbarui parameter garis
Seperti yang disebutkan sebelumnya, baris harus 100% agar desain pemilihan teks responsif ini berfungsi. Ini memungkinkan modul teks kita menggunakan satuan panjang vw relatif terhadap lebar browser. Karena tata letak standar kami sudah memiliki garis dengan lebar 100%, kami tidak perlu melakukan apa pun.
Namun, kita harus menyesuaikan pengaturan lainnya sebagai berikut.
- Margin: -24vw bawah
- Ubah terjemahan sumbu Y: -24vw
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Margin bawah negatif adalah menghapus spasi negatif yang tersisa setiap kali kita memindahkan baris menggunakan perintah transform translate. Dan kita perlu menyembunyikan luapan baris untuk efek teks pilihan kita.
Perbarui desain teks dari modul teks
Sekarang yang harus Anda lakukan adalah memperbarui modul teks untuk mengubahnya menjadi elemen desain teks besar.
Buka modul teks dan perbarui yang berikut:
- Warna teks teks: rgba (255,255,255,0.16)
- Ukuran teks teks: 36vw
- Margin: -100% di sebelah kiri, 100% di sebelah kanan
Ukuran teks menggunakan satuan panjang vw, sehingga teks cocok dengan lebar browser.
Tambahkan animasi ke modul teks
- Gaya Animasi: Slide
- Arah animasi: kiri
- Durasi animasi: 10000ms
- Intensitas animasi: 100%
- Animasi kurva kecepatan: linier
- Animasi ulangi: Loop
Desain akhir
Sekarang, periksa desain final.
final pikiran
Kotak teks dapat menjadi alat yang berguna untuk desain web. Mereka tidak terbatas hanya berfungsi sebagai ticker saja. Mereka juga dapat menambahkan elemen animasi yang menarik ke desain web Anda. Dan bagian terbaiknya adalah itu Divi memudahkan untuk membuat dan mendesain segala macam hal yang indah. Saya harap tutorial ini membantu Anda membuat teks pilihan sederhana kapan pun Anda membutuhkannya.
Harapan untuk mendengar dari Anda di komentar.
Untuk kesehatanmu!
