Majusculele de text oferă o casetă de text cu derulare site-ul web care implică cititorii cu fragmente utile din cuprins. Ele sunt, de asemenea, numite tickere (sau ticker-uri de știri) și sunt adesea folosite pentru a afișa un flux constant de actualizări de știri în partea de sus sau de jos a paginii. . De obicei, animația de defilare se face cu o singură linie de cuprins într-o buclă, astfel încât informațiile să fie afișate în mod repetat. Din păcate, <marquee>Deoarece eticheta html este învechită, ne bazăm pe CSS și JavaScript pentru a crea marcaje în aceste zile. Cu toate acestea, cu Divi, puteți crea un dreptunghi simplu de selecție fără să vă faceți griji cu privire la codul personalizat.

În acest tutorial, vă vom explica cât de ușor este să creați un text simplu de selecție cu Divi. Vom vedea chiar și cum să întrerupeți animația de text cu defilare pe hover și cum să adăugați text de defilare mare ca element de design unic pentru antetele dvs.

Să începem.

studiu

Ce ai nevoie pentru a începe

Pentru a începe, aveți nevoie de următoarele:

1. Le Divi tema instalat și activ
2. O nouă pagină creată de la zero pe front-end (constructor vizual)

După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.

Începutul concepției

Pentru acest prim exemplu, vom crea un dreptunghi simplu de text pentru o linie de text. Pentru a face acest lucru, vom da unui rând o lățime maximă cu preaplinul ascuns. Apoi, vom adăuga animație de diapozitive în buclă la un modul de text care conține linia de text, astfel încât să alunece în mod repetat în linie, ca un dreptunghi.

Iată cum să faceți acest lucru.

Începeți prin crearea unei secțiuni obișnuite cu un rând al unei coloane.

Apoi, înainte de a adăuga un modul, actualizați rândul cu o lățime fixă, o casetă de umbră și o rază, astfel:

• Lățimea maximă: 200px
• Tapițerie: 10px în partea de sus, 10px în partea de jos
• Colțuri rotunde: 10px
• Box Shadow: vezi captura de ecran
• Debord de orizontală: ascuns
• Debord vertical: ascuns

Adăugați modulul de text

Când linia este completă, adăugați un nou modul text la linie.

Apoi actualizați cuprins a corpului cu o singură linie de text. Pentru moment, asigurați-vă că linia de text nu se împarte într-o altă linie.

• Corp: "Aceasta este o propoziție"

Proiectarea modulului text

Actualizați parametrii de proiectare a modulului text după cum urmează:

• Marja: -100% la stânga, 100% la dreapta

Aceasta poziționează modulul text în afara stânga liniei. Deoarece vizibilitatea ascunsă a liniei este ascunsă, modulul va fi ascuns până când adăugăm animație pentru ao face vizibilă.

• Stil de animație: Slide
• Direcția animației: dreapta
• Durata animației: 5000ms
• Intensitatea animației: 100%
• Animatie Opacitatea de pornire: 100%
• Animarea curbei de viteză: liniară
• Repetați animația: Buclă

rezultat

Să vedem acum rezultatul.

Crearea de linii de text mai lungi

În designul simplu de text de selecție de mai sus, am limitat lățimea liniei de text la aceeași lățime ca linia. Cu toate acestea, dacă dorim să facem o linie mai lungă de text cu aceeași lățime, va trebui să modificăm puțin setările.

În primul rând, în modulul text și înlocuiți corpul textului cu următoarele:

Aceasta este o fază cu un link

Adăugați mai multă lățime și margine pentru a se potrivi cu cea mai lungă linie de text

După cum ați putea observa, textul este împărțit în trei rânduri în loc de unul.

Prin urmare, trebuie să ajustăm marja și intensitatea animației.

• Lățime: 207%
• Marja: -207% la stânga, 207% la dreapta
• Intensitatea animației: 75%

Trucul aici este să măriți lățimea și să actualizați valorile marginilor, astfel încât să rămână doar suficient spațiu pentru o singură linie de text. Apoi reglați intensitatea animației astfel încât să nu existe o pauză mare între animația în buclă.

rezultat

Iată rezultatul final.

Întrerupeți animația textului de selecție la cursor

Întrucât această selecție de marcaj include un link, va fi dificil pentru utilizatori să facă clic pe link în timp ce se mută. Cu toate acestea, putem adăuga un mic fragment CSS la modulul de text, care va întrerupe animația la plimbare.

Adăugați un fragment CSS pentru a întrerupe animația în cursă

Pentru a adăuga fragmentul CSS, deschideți setările modulului text și adăugați următorul cod CSS personalizat la elementul principal sub fila hover :

animație-joc-stare: în pauză;

Rezultat final

Acum verificați rezultatul final. Rețineți că animația textului se oprește când cursorul se deplasează deasupra textului, permițând utilizatorului să facă clic pe link.

Asta este tot pentru acest tutorial, sper că v-a învățat cum să adăugați un text scrolling pe Divi.