Kapital teks menyediakan kotak teks bergulir ke . Anda situs jaringan yang melibatkan pembaca dengan kutipan bermanfaat dari isi. Mereka juga disebut ticker (atau ticker berita) dan sering digunakan untuk menampilkan aliran pembaruan berita di bagian atas atau bawah halaman. . Biasanya animasi scrolling dilakukan dengan satu baris isi dalam satu lingkaran sehingga informasi ditampilkan berulang kali. Sayangnya <marquee>Karena tag html sudah usang, kami mengandalkan CSS dan JavaScript untuk membuat marquees akhir-akhir ini. Namun, dengan Divi, Anda dapat membuat kotak pemilihan sederhana tanpa mengkhawatirkan kode kustom.

Dalam tutorial ini, kami akan menjelaskan betapa mudahnya membuat teks pemilihan sederhana dengan Divi. Kami bahkan akan melihat cara menjeda animasi teks gulir saat mengarahkan kursor dan cara menambahkan teks gulir besar sebagai elemen desain unik untuk tajuk Anda.

Mari kita mulai.

penelitian

Apa yang Anda butuhkan untuk memulai

Untuk memulai, Anda perlu yang berikut:

1. Le Tema Divi terpasang dan aktif
2. Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Awal dari Konsepsi

Untuk contoh pertama ini, kita akan membuat persegi panjang teks sederhana untuk satu baris teks. Untuk melakukan ini, kami akan memberi baris lebar maksimum dengan luapan tersembunyi. Selanjutnya, kita akan menambahkan animasi perulangan slide ke modul teks yang berisi baris teks sehingga berulang kali bergeser ke dalam garis, seperti persegi panjang.

Inilah cara melakukannya.

Mulailah dengan membuat bagian reguler dengan baris kolom.

Kemudian, sebelum menambahkan modul, perbarui baris dengan lebar tetap, kotak bayangan, dan radius, seperti:

• Lebar maksimum: 200px
• Pelapis: 10px di bagian atas, 10px di bagian bawah
• Sudut bundar: 10px
• Box Shadow: lihat tangkapan layar
• Overflow horisontal: disembunyikan
• Overflow vertikal: disembunyikan

Tambahkan modul teks

Ketika baris selesai, tambahkan modul teks baru ke baris.

Kemudian perbarui isi tubuh dengan satu baris teks. Untuk saat ini, pastikan baris teks tidak terpecah menjadi baris lain.

• Tubuh: "Ini sebuah kalimat"

Desain modul teks

Perbarui parameter desain modul teks sebagai berikut:

• Margin: -100% di sebelah kiri, 100% di sebelah kanan

Ini memposisikan modul teks di luar kiri baris. Karena garis visibilitas tersembunyi disembunyikan, modul akan disembunyikan sampai kita menambahkan animasi untuk membuatnya terlihat.

• Gaya Animasi: Slide
• Arah animasi: Benar
• Durasi animasi: 5000ms
• Intensitas animasi: 100%
• Animasi Mulai opacity: 100%
• Animasi kurva kecepatan: linier
• Animasi ulangi: Loop

Hasil

Mari kita lihat hasilnya sekarang.

Membuat garis teks lebih panjang

Dalam desain teks pilihan sederhana di atas, kami membatasi lebar garis teks dengan lebar yang sama dengan garis. Namun, jika kita ingin membuat baris teks yang lebih panjang dengan lebar yang sama, kita perlu sedikit mengubah pengaturannya.

Pertama, pada modul teks dan ganti badan teks dengan yang berikut:

Ini adalah fase dengan tautan

Tambahkan lebih banyak lebar dan margin agar pas dengan baris teks terpanjang

Seperti yang mungkin Anda perhatikan, teks dibagi menjadi tiga baris, bukan satu.

Oleh karena itu, kita perlu menyesuaikan margin dan intensitas animasi.

• Lebar: 207%
• Margin: -207% di sebelah kiri, 207% di sebelah kanan
• Intensitas animasi: 75%

Triknya di sini adalah dengan meningkatkan lebar dan memperbarui nilai margin sehingga hanya cukup ruang yang tersisa untuk satu baris teks. Kemudian sesuaikan intensitas animasi tersebut agar tidak ada jeda yang besar antar animasi perulangan.

Hasil

Inilah hasil akhirnya.

Jeda animasi teks pilihan saat mengarahkan kursor

Karena kotak pilihan ini menyertakan tautan, akan sulit bagi pengguna untuk mengeklik tautan saat bergerak. Namun, kita dapat menambahkan sedikit potongan css ke modul teks yang akan menjeda animasi saat hover.

Tambahkan cuplikan CSS untuk menjeda animasi saat mengarahkan kursor

Untuk menambahkan cuplikan css, buka pengaturan modul teks dan tambahkan kode CSS khusus berikut ke elemen utama di bawah tab hover :

state-animasi-main: dijeda;

Hasil akhir

Sekarang lihat hasil akhirnya. Perhatikan bahwa animasi teks berhenti saat kursor mengarahkan kursor ke teks, memungkinkan pengguna untuk mengklik link.

Itu saja untuk tutorial ini, saya harap ini telah mengajari Anda cara menambahkan teks bergulir di Divi.