Cum să creați modele de text curbate în Divi

Dacă sunteți în căutarea unui mod unic de a prezenta text pe o pagină web, știind cum să creați modele de text curbat în Divi poate fi util. Acest tip de design ar funcționa pentru a construi grafică personalizată sau modele creative de antet în Divi fără a fi nevoie să utilizați un editor foto. De obicei, aceasta implică html și CSS mai complete de realizat, dar cu Divi, CSS personalizat în minim și aveți atât de multe opțiuni încorporate pentru a vă proiecta cu ușurință textul în moduri unice.

În acest tutorial, vă vom arăta cum să creați câteva modele de litere curbate pe care să le puteți utiliza ca șablon util pentru propriile scopuri. Dacă este ceva, puteți adăuga ceva nou în setul de instrumente de proiectare pentru viitor.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra proiectelor de text curbat pe care le vom construi în acest tutorial.

Descărcați GRATUIT schema de exemple de design de animație pentru scrisori

Pentru a pune mâinile pe desenele de text curbate 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!

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?

Ideea de bază din spatele creării textului curbat în Divi

Pentru a crea text curbat folosind metoda din acest tutorial, trebuie să adăugați fiecare literă a textului într-un modul de text separat (va trebui să utilizați un font monospațiat pentru cele mai bune rezultate). Acordați modulului text o înălțime stabilită. Apoi, trebuie să acordați fiecărui modul de text o poziție absolută centrată, astfel încât să se stivuiască una peste alta.

Acest lucru este important deoarece vrem ca fiecare literă să se rotească din același punct central. După aceea, puteți utiliza opțiunile de transformare ale lui Divi pentru a roti fiecare literă de-a lungul axei Z pentru a crea textul curbat (gândiți-vă să folosiți o busolă în clasa de matematică pentru a desena un cerc). De asemenea, observați că înălțimea fiecărui modul de text determină raza cercului, care va crește, de asemenea, circumferința cercului și, ca rezultat, mai mult spațiu între litere.

Iată un exemplu de 8 module de text rotite cu trepte de 45 de grade pentru a crea un aspect perfect al cercului pentru text. Am adăugat o margine albă în jurul fiecărui modul, astfel încât să puteți vedea cu ușurință rotația.

Și, iată un exemplu al acelorași module text care sunt rotite în trepte de 20 de grade.

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Pentru a începe, creați o nouă pagină în Divi. Apoi acordați-vă paginii un titlu și implementați constructorul Divi pe partea frontală. Selectați opțiunea „construiți de la zero”. Acum ești gata să pleci!

Crearea designului textului curbat

Crearea secțiunii și rândului

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

Înainte de a adăuga modulele noastre, continuați și actualizați setările secțiunii după cum urmează:

• Culoarea din stânga a gradientului de fundal: # 1e003d
• Culoarea dreaptă a gradientului de fundal: # 121212
• Tipul gradientului: radial

• Imagine de fundal: [inserați imaginea logo-ului în jur de 100 px cu 100 px]
• Dimensiunea imaginii de fundal: dimensiunea reală

Salvați setările, apoi treceți la setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Înălțime minimă: 400 px
• Înălțime: 40vw
• Înălțime maximă: 600 px
• Împletire personalizată: 0 px sus, 0 px jos

Apoi adăugați următorul CSS personalizat în Elementul principal al coloanei pentru a vă asigura că toate modulele de text vor rămâne centrat orizontal:

CSS Element principal al coloanei:

display:flex;
justify-content:center;

Crearea modulelor de text pentru fiecare scrisoare

Acum suntem gata să adăugăm primul nostru modul de text cu prima noastră literă. Pentru aceasta, adăugați un nou modul de text în coloana rând și actualizați următoarele:

• Conținut: d (doar singura literă)
• Text Font: Ubuntu Mono (orice font monospațiat va face)
• Culoarea textului textului: #ffffff
• Dimensiune text text: 5vw (desktop), 40 px (telefon)
• Orientare text: centru
• Înălțime minimă: 200 px
• Înălțime: 20vw
• Înălțime maximă: 300 px

Apoi actualizați originea transformării în partea de jos. Acest lucru va fi important pentru a determina unde se întâmplă rotația textului. Vrem ca modulul text să se rotească în partea de jos a modulului. Chiar dacă acest prim modul de text nu va trebui rotit, este important să-l adăugăm aici, astfel încât să putem transporta această opțiune ori de câte ori duplicăm modulul de text pentru literele suplimentare.

• Transformarea originii: 100% (sau de jos)

Apoi adăugați următorul CSS personalizat la Elementul principal pentru a da modulului text o poziție absolută.

position: absolute !important;

Crearea și rotirea celorlalte module de text

Pentru a crea restul literelor, vom copia modulul text. Odată ce duplicăm modulul text, tot ce trebuie să facem este să actualizăm litera și apoi să creștem rotația cu 45 de grade cu fiecare nou modul.

Deoarece modulele de text vor fi stivuite deasupra fiecăruia pe partea frontală, este mai bine să utilizați modul de vizualizare wireframe pentru a face aceste actualizări.

Continuați și copiați modulul text și apoi actualizați următoarele:

• Conținut: i
• Transformarea rotației axa z: 45 de grade

Continuați procesul de duplicare a modulului text și apoi actualizarea modulului text cu o nouă literă și creșterea rotației transformării cu 45 de grade. Iată o defalcare a celor șase actualizări ale modulelor de text rămase:

Modulul text 3

• conținut: v
• Transformarea rotației axa z: 90 grade

Modulul text 4

• conținut: i
• Transformarea rotației axa z: 135deg

Modulul text 5

• conținut: d
• Transformarea rotației axa z: 180 grade

Modulul text 6

• conținut: i
• Transformarea rotației axa z: 225 grade

Modulul text 7

• conținut: v
• Transformarea rotației axa z: 270deg

Modulul de text 8

• conținut: i
• Transformarea rotației axa z: 315 grade

Asta e! Acum verificați rezultatul final.

Rezultat final

Reglarea dimensiunii textului și a gradului de rotație pentru textul mai lung

Dacă doriți să reglați textul curbat pentru opțiuni mai mari de proiectare a textului, puteți modifica dimensiunea textului și transforma rotația fiecărui modul de text.

Implementați modul de vizualizare wireframe și apoi utilizați caracteristica multiselectare Divi pentru a selecta toate modulele de text care conțin literele curbate. Apoi faceți clic pentru a deschide setările unuia dintre modulele de text selectate pentru a deschide modul de setare a elementelor care va actualiza toate modulele selectate simultan.

Sub setările elementului, modificați dimensiunea textului textului la 40 px pe desktop.

Salvați setările și apoi deschideți setările pentru fiecare dintre modulele de text și actualizați literele și rotația pentru fiecare. Lăsați primul modul de text cu o rotație de 0 grade și apoi măriți rotația axei Z cu 10 grade pentru fiecare modul de text care urmează. Apoi copiați modulul text pentru chiar mai multe litere, după cum este necesar. În acest exemplu, voi expune „elegant.themes”.

Iată defalcarea literei de conținut și a rotației necesare pentru fiecare modul de text.

• Modulul text 1
  • conținut: e
  • Transformarea rotației axa z: 0deg
• Modulul text 2
  • conținut: l
  • Transformarea rotației axa z: 10 grade
• Modulul text 3
  • conținut: e
  • Transformarea rotației axa z: 20 grade
• Modulul text 4
  • conținut: g
  • Transformarea rotației axa z: 30 grade
• Modulul text 5
  • conținut: a
  • Transformarea rotației axa z: 40deg
• Modulul text 6
  • conținut: n
  • Transformarea rotației axa z: 50 grade
• Modulul text 7
  • conținut: t
  • Transformarea rotației axa z: 60 grade
• Modulul de text 8
  • conținut:.
  • Transformarea rotației axa z: 70 grade
• Modulul text 9
  • conținut: t
  • Transformarea rotației axa z: 80deg
• Modulul text 10
  • conținut: h
  • Transformarea rotației axa z: 90 grade
• Modulul text 10
  • conținut: e
  • Transformarea rotației axa z: 100deg
• Modulul de text 11
  • conținut: m
  • Transformarea rotației axa z: 110deg
• Modulul de text 12
  • conținut: e
  • Transformarea rotației axa z: 120 grade
• Modulul de text 13
  • conținut: s
  • Transformarea rotației axa z: 130deg

Iată rezultatul de până acum.

O modalitate ușoară de a regla rotația întregului text este de a aplica o transformare rotită pe rând. Deschideți setările de rând și utilizați discul de control al indexului z pentru a poziționa textul curbat oriunde doriți.

Iată designul final.

Simțiți-vă liber să explorați adăugând mai mult text și modificând gradul de rotație pentru a obține spațiul corect între litere. De asemenea, puteți regla înălțimea modulelor de text pentru a micșora sau a mări raza.

Gânduri finale

Crearea proiectelor de text curbat în Divi este un proces destul de simplu odată ce ați înțeles cum funcționează. Acest articol ar trebui să vă ajute să înțelegeți geometria implicată în configurarea modulelor de text, astfel încât acestea să se rotească pe o curbă. Și odată ce ați reușit configurarea, pe lângă câteva fragmente de css personalizate, puteți utiliza setările de proiectare încorporate ale Divi pentru a deveni destul de creativi. Sperăm că acest lucru vă va oferi puțină inspirație pentru a crea propriile modele unice de text curbat.

Și, dacă doriți să adăugați o animație literelor curbate, consultați articolul nostru despre cum să animați literele.

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

Noroc!