Cum se creează o carcasă de text simplă cu Divi

Marcajele de text oferă site-ului dvs. o zonă de defilare a textului, care atrage cititorii cu fragmente utile de conținut. Sunt numite și bifere (sau bifere 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 unei pagini . De obicei, animația de defilare se face cu o singură linie de conținut într-o buclă, astfel încât informațiile să fie afișate în mod repetat. Din păcate, eticheta html <marquee> este învechită, așa că ne bazăm pe CSS și JavaScript pentru a crea marcaje în aceste zile. Cu toate acestea, cu Divi, puteți crea o marcă simplă fără să vă faceți griji cu privire la codul personalizat.

În acest tutorial, vă vom prezenta cât de ușor este să creați un cadru de text simplu cu Divi. Vom acoperi chiar și modul de întrerupere a animației textului care se deplasează pe hover și modul de adăugare a unui marcaj mare de text ca element unic de design pentru anteturile dvs.

Să începem.

Trage cu ochiul

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abonați-vă la canalul nostru Youtube

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să aveți următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)

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

Partea 1: Crearea unei carcase de text simple în Divi

Pentru acest prim exemplu, vom crea un cadru de text simplu 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 o animație de diapozitive în buclă la un modul de text care conține linia de text, astfel încât să alunece de-a lungul rândului în mod repetat, devenind vizibil ca un marker.

Iată cum să o faci.

Mai întâi, creați o secțiune obișnuită cu un rând de o coloană.

Apoi, înainte de a adăuga un modul, actualizați rândul cu o lățime fixă, o umbră de cutie și o rază de margine după cum urmează:

• Lățime maximă: 200 px
• Căptușeală: 10 px sus, 10 px jos
• Colțuri rotunde: 10 px
• Box Shadow: vezi captura de ecran
• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați modulul de text

După terminarea rândului, adăugați un nou modul de text pe rând.

Apoi actualizați conținutul corpului cu o singură linie de text. Deocamdată asigurați-vă că linia de text nu se rupe în altă linie.

• Corp: „Aceasta este o propoziție”

Proiectarea modulului de text

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

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

Aceasta poziționează modulul text în afara stânga rândului. Deoarece rândul are vizibilitate de revărsare ascunsă, modulul va fi ascuns până când adăugăm animație pentru a o aduce în vizualizare.

• Stil de animație: Slide
• Direcția animației: Corect
• Durata animației: 5000 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: liniară
• Repetați animația: buclă

Rezultat

Acum, să verificăm rezultatul.

Crearea de linii mai lungi de text

În designul simplu al marcajului de text de mai sus, am limitat lățimea liniei de text la aceeași lățime a rândului. Cu toate acestea, dacă dorim să creăm o linie mai lungă de text cu aceeași lățime de rând, va trebui să modificăm puțin setările.

În primul rând, pe modulul text și înlocuiți textul corpului cu următoarele:

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

Adăugați mai multă lățime și marjă pentru a se potrivi pentru linia mai lungă de text

După cum ați putea observa, textul se rupe acum î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ă oferiți suficient spațiu pentru linia unică de text. Apoi reglați intensitatea animației astfel încât să nu existe o pauză mare între animația de buclă.

Rezultat

Iată rezultatul final.

Întreruperea animației pentru textul marcajului pe Hover

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

Adăugați un fragment CSS pentru a întrerupe animația pe Hover

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

animation-play-state: paused;

Rezultat final

Acum verificați rezultatul final. Observați modul în care animația textului se va întrerupe atunci când cursorul se deplasează peste text, permițând utilizatorului să facă clic pe link.

Partea 2: Crearea unui Text Text ca element de proiectare receptiv în Divi

Acum, că înțelegem cum să creăm un cadru de text simplu în Divi, putem lua același concept pentru a crea un element de proiectare a cadrului de text responsiv. Acest lucru ar funcționa bine pentru a crea modele de animație unice pentru anteturi sau titluri de secțiuni.

Pentru a face acest lucru, vom folosi aspectul premade al Paginii de pornire Job Recruiter a lui Divi.

Adăugați aspectul premade

Pentru a adăuga aspectul la pagina dvs., deschideți meniul de setări din partea de jos a constructorului Divi și faceți clic pe simbolul plus. Din fereastra pop-up de încărcare din bibliotecă, selectați pachetul de aspect al recrutorului de joburi. Apoi faceți clic pentru a utiliza aspectul paginii de pornire.

Ștergeți conținutul suplimentar cu aspectul

Odată ce aspectul a fost încărcat în pagină, implementați modul de vizualizare wireframe și ștergeți tot conținutul aspectului, cu excepția antetului cu lățime completă și a secțiunii direct sub acesta.

Crearea animației Text Marquee

După cum puteți vedea, cuvântul „angajat” este deja folosit ca element de proiectare text mare într-un modul de text din a doua secțiune. Vom transforma acel modul de text într-un element de proiectare a textului responsive. Cheia pentru a face textul sensibil al textului este să vă asigurați că rândul și modulul text se întind pe întreaga lățime a ferestrei browserului. Putem face acest lucru folosind o lățime de 100%. Apoi putem folosi unitatea de lungime vw pentru dimensiunea textului. Acest lucru va face ca textul să se potrivească frumos cu lățimile browserului. După aceea, vom aplica aceleași principii pe care le-am folosit pentru a crea exemplul nostru simplu de marcaj de text mai devreme.

Iată cum să o faci.

Actualizați setările rândului

Așa cum am menționat anterior, rândul trebuie să fie de 100% pentru ca acest design sensibil al marcajului de text să funcționeze. Acest lucru permite modulului nostru text să utilizeze unități de lungime vw care sunt relative la lățimea browserului. Deoarece aspectul nostru premade are deja un rând cu lățimea de 100%, nu trebuie să facem nimic.

Cu toate acestea, trebuie să ajustăm restul setărilor după cum urmează.

• Marja: -24vw fund
• Transformă axa Y tradusă: -24vw
• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Marja inferioară negativă este de a scăpa de spațiul negativ rămas de fiecare dată când mutăm rândul în sus folosind transformarea transformată. Și trebuie să ascundem deversarea rândului pentru efectul nostru de marcaj text.

Actualizați proiectarea textului modulului text

Acum tot ce trebuie să faceți, actualizați modulul text pentru al converti într-un element de design mare pentru marcaj text.

Deschideți modulul text și actualizați următoarele:

• Culoarea textului textului: rgba (255,255,255,0,16)
• Dimensiune text text: 36vw
• Marja: -100% stânga, 100% dreapta

Dimensiunea textului utilizează o unitate de lungime vw, astfel încât textul să se scale frumos cu lățimea browserului.

Adăugați animație la modulul text

• Stil de animație: Slide
• Direcția animației: Stânga
• Durata animației: 10000ms
• Intensitate animație: 100%
• Curba de viteză a animației: liniară
• Repetați animația: buclă

Design final

Acum verificați designul final.

Gânduri finale

Marcajele text pot fi un instrument convenabil de a avea în designul web. Nici ele nu se limitează să funcționeze strict ca bifere de știri. De asemenea, pot adăuga un element de animație frumos la designul dvs. web. Și cea mai bună parte este că Divi facilitează crearea și proiectarea lor în tot felul de moduri frumoase. Sper că acest tutorial vă va ajuta să creați niște marcaje simple de text ori de câte ori va veni momentul în care aveți nevoie de unul.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!