Cara Membuat Tenda Teks Sederhana dengan Divi
Diterbitkan: 2019-08-24Tenda teks menyediakan area pengguliran teks ke situs web Anda yang melibatkan pembaca dengan cuplikan konten yang bermanfaat. Mereka juga disebut ticker (atau ticker berita) dan sering digunakan untuk menunjukkan aliran pembaruan berita yang stabil di bagian atas atau bawah halaman . Biasanya animasi scrolling dilakukan dengan satu baris konten dalam satu lingkaran sehingga informasi ditampilkan berulang kali. Sayangnya, <marquee> html <marquee> sudah usang sehingga kami mengandalkan CSS dan JavaScript untuk membuat <marquee> hari ini. Namun, dengan Divi, Anda dapat membuat tenda sederhana tanpa harus khawatir tentang kode khusus.
Dalam tutorial ini, kami akan memandu Anda melalui betapa mudahnya membuat tenda teks sederhana dengan Divi. Kami bahkan akan membahas cara menjeda animasi teks gulir saat melayang dan cara menambahkan tenda teks besar sebagai elemen desain unik untuk header Anda.
Mari kita mulai.
Sneak Peek
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Berlangganan Saluran Youtube Kami
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Bagian 1: Membuat Tenda Teks Sederhana di Divi
Untuk contoh pertama ini, kita akan membuat tenda teks sederhana untuk sebaris teks. Untuk melakukan ini, kami akan memberikan baris lebar maksimum dengan overflow tersembunyi. Kemudian kita akan menambahkan animasi slide perulangan ke modul teks yang berisi baris teks sehingga slide melintasi baris berulang kali muncul seperti tenda.
Berikut cara melakukannya.
Pertama, buat bagian reguler dengan satu baris kolom.
Kemudian, sebelum menambahkan modul, perbarui baris dengan lebar tetap, bayangan kotak, dan radius batas sebagai berikut:
- Lebar Maks: 200px
- Padding: 10px atas, 10px bawah
- Sudut Bulat: 10px
- Bayangan Kotak: lihat tangkapan layar
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Tambahkan Modul Teks
Setelah baris selesai, tambahkan modul teks baru ke baris.
Kemudian perbarui konten isi dengan satu baris teks. Untuk saat ini pastikan baris teks tidak masuk ke baris lain.
- Tubuh: "Ini adalah kalimat"
Desain Modul Teks
Perbarui pengaturan desain modul teks sebagai berikut:
- Margin: -100% kiri, 100% kanan
Ini memposisikan modul teks di luar kiri baris. Karena baris memiliki visibilitas overflow yang disembunyikan, modul akan disembunyikan hingga kami menambahkan animasi untuk menampilkannya.
- Gaya Animasi: Slide
- Arah Animasi: Kanan
- Durasi Animasi: 5000ms
- Intensitas Animasi: 100%
- Animasi Mulai Opacity: 100%
- Kurva Kecepatan Animasi: Linear
- Pengulangan Animasi: Loop
Hasil
Sekarang mari kita lihat hasilnya.
Membuat Garis Teks yang Lebih Panjang
Dalam desain tenda teks sederhana di atas, kami telah membatasi lebar baris teks dengan lebar baris yang sama. Namun, jika kita ingin membuat baris teks yang lebih panjang dengan lebar baris yang sama, kita perlu sedikit mengubah pengaturannya.
Pertama, pada modul teks dan ganti teks isi dengan yang berikut:
<p>This is a sentence in a marquee with a <a href="#">link</a></p>
Tambahkan Lebih Banyak Lebar dan Margin untuk Mengakomodasi Baris Teks yang Lebih Panjang
Seperti yang mungkin Anda perhatikan, teks sekarang terbagi menjadi tiga baris, bukan satu.
Oleh karena itu, kita perlu menyesuaikan margin dan intensitas animasi.
- Lebar: 207%
- Margin: -207% kiri, 207% kanan
- Intensitas Animasi: 75%
Triknya di sini adalah menambah lebar dan memperbarui nilai margin sehingga Anda menyediakan cukup ruang untuk satu baris teks. Kemudian sesuaikan intensitas animasi sehingga tidak ada jeda besar di antara animasi perulangan.
Hasil
Berikut adalah hasil akhirnya.
Menjeda Animasi Teks Marquee di Arahkan
Karena tenda ini menyertakan tautan, akan sulit bagi pengguna untuk benar-benar mengeklik tautan saat sedang bergerak. Namun, kita dapat menambahkan potongan kecil css ke modul teks yang akan menjeda animasi saat mengarahkan kursor.
Tambahkan Cuplikan CSS untuk Menjeda Animasi saat Melayang
Untuk menambahkan cuplikan css, buka pengaturan modul teks dan tambahkan CSS khusus berikut ke elemen utama di bawah tab hover :
animation-play-state: paused;
Hasil Akhir
Sekarang lihat hasil akhirnya. Perhatikan bagaimana animasi teks akan berhenti ketika kursor melayang di atas teks, memungkinkan pengguna untuk mengklik link.
Part 2: Membuat Text Marquee sebagai Elemen Desain Responsif di Divi
Sekarang setelah kita memahami cara membuat tenda teks sederhana di Divi, kita dapat mengambil konsep yang sama untuk membuat elemen desain tenda teks responsif. Ini akan bekerja dengan baik untuk membuat desain animasi unik untuk header atau judul bagian.
Untuk melakukan ini, kita akan menggunakan tata letak Premade Home Page Perekrut Pekerjaan Divi.
Tambahkan Tata Letak Premade
Untuk menambahkan tata letak ke halaman Anda, buka menu pengaturan di bagian bawah pembuat Divi dan klik simbol plus. Dari popup beban dari perpustakaan, pilih paket tata letak perekrut pekerjaan. Kemudian klik untuk menggunakan tata letak halaman rumah.
Hapus Konten Ekstra dengan Tata Letak
Setelah tata letak dimuat ke halaman, terapkan mode tampilan gambar rangka dan hapus semua konten tata letak kecuali header lebar penuh dan bagian langsung di bawahnya.
Membuat Animasi Teks Marquee
Seperti yang Anda lihat, kata "dipekerjakan" sudah digunakan sebagai elemen desain teks besar dalam modul teks di bagian kedua. Kita akan mengubah modul teks itu menjadi elemen desain tenda teks responsif. Kunci untuk membuat teks marquee responsif adalah memastikan baris dan modul teks menjangkau lebar penuh jendela browser. Kita dapat melakukan ini dengan menggunakan lebar 100%. Kemudian kita dapat menggunakan satuan panjang vw untuk ukuran teks. Ini akan membuat skala teks bagus dengan lebar browser. Setelah itu kita akan menerapkan prinsip yang sama yang kita gunakan untuk membuat contoh tenda teks sederhana kita sebelumnya.
Berikut cara melakukannya.
Perbarui Pengaturan Baris
Seperti disebutkan sebelumnya, baris harus 100% agar desain tenda teks responsif ini berfungsi. Hal ini memungkinkan modul teks kita untuk menggunakan satuan panjang vw yang relatif terhadap lebar browser. Karena tata letak premade kami sudah memiliki baris dengan lebar 100%, kami tidak perlu melakukan apa pun.
Namun, kita perlu menyesuaikan sisa pengaturan sebagai berikut.
- Margin: -24vw bawah
- Transformasi Terjemahkan sumbu Y: -24vw
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Margin bawah negatif adalah untuk menghilangkan ruang negatif yang tersisa setiap kali kita memindahkan baris ke atas menggunakan transform translate. Dan kita perlu menyembunyikan luapan baris untuk efek tenda teks kita.
Perbarui Desain Teks Modul Teks
Sekarang yang perlu Anda lakukan adalah memperbarui modul teks untuk mengubahnya menjadi elemen desain tenda teks besar.
Buka modul teks dan perbarui yang berikut ini:
- Warna Teks Teks: rgba(255,255,255,0.16)
- Ukuran Teks Teks: 36vw
- Margin: -100% kiri, 100% kanan
Ukuran teks menggunakan satuan panjang vw sehingga teks akan diskalakan dengan baik dengan lebar browser.
Tambahkan Animasi ke Modul Teks
- Gaya Animasi: Slide
- Arah Animasi: Kiri
- Durasi Animasi: 10000ms
- Intensitas Animasi: 100%
- Kurva Kecepatan Animasi: Linear
- Pengulangan Animasi: Loop
Desain Akhir
Sekarang periksa desain akhir.
Pikiran Akhir
Tenda teks dapat menjadi alat yang nyaman untuk dimiliki dalam desain web. Mereka juga tidak terbatas hanya berfungsi sebagai ticker berita. Mereka juga dapat menambahkan elemen animasi yang bagus ke desain web Anda. Dan bagian terbaiknya adalah Divi memudahkan untuk membuat dan mendesainnya dengan berbagai cara yang indah. Saya harap tutorial ini akan membantu Anda membuat beberapa teks sederhana kapan pun Anda membutuhkannya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!