Cum se rotește textul pentru modele de aspect unic în Divi (Tutorial + Descărcare GRATUITĂ a aspectului)

Majoritatea dintre noi suntem obișnuiți să citim textul de la dreapta la stânga și de sus în jos. Dar când vine vorba de design web, ar putea fi o idee bună să te eliberezi de normă. O modalitate de a face acest lucru este prin rotirea textului. Rotirea textului pe site-ul dvs. web poate părea impracticabilă, dar pare să aibă un loc. De fapt, orientarea verticală a textului pare să fie comună în designul web modern. Și, deși majoritatea rotesc textul doar în scopuri de proiectare, se poate argumenta că textul rotit (sau vertical) (deși mai greu de citit) poate fi o tehnică eficientă de atragere a atenției.

Cu Divi puteți roti orice element de pe pagina dvs. utilizând opțiunile de transformare încorporate. Deci, în acest tutorial, vă voi arăta cum să rotiți cu succes textul pentru a crea modele de aspect unice în Divi. Pentru a face acest lucru, voi proiecta un aspect format din trei părți, care încorporează exemple de text rotit.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra întregului aspect pe care îl vom construi în tutorial. Observați că există exemple de text rotit în trei secțiuni diferite ale aspectului.

Descărcați GRATUIT aspectul complet din acest tutorial

Pentru a pune mâna pe aspectul gratuit al modelelor de text rotat, 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 aspectul

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.

Acum să revenim la tutorial.

Lucruri de reținut când rotiți textul

Ce direcție ar trebui să rotiți textul?

Dacă doriți să rotiți textul pentru un afișaj vertical, este posibil să nu fiți sigur în ce direcție să rotiți textul. Puteți roti textul în sens invers acelor de ceasornic, astfel încât textul să citească de jos în sus. Sau, puteți roti textul în sensul acelor de ceasornic, astfel încât textul să citească de sus în jos. Dacă vă întrebați care dintre ele este mai ușor de citit, nu sunt sigur că există un răspuns. Ați putea încerca să obțineți un indiciu din orientarea titlurilor cărților pe un raft. Dar diferite țări fac acest lucru diferit (standardul în SUA este în sensul acelor de ceasornic, de sus în jos).

În acest tutorial, voi roti textul în sens invers acelor de ceasornic în majoritatea cazurilor, în principal pentru că îmi place modul în care arată în partea stângă a paginii (poate prefer să înclin capul spre stânga). Dar nu ezitați să încercați diferite direcții.

Problema Blur

În unele browsere (cum ar fi Chrome și Safari), textul devine puțin neclar atunci când se utilizează proprietatea de rotire a transformării. Pentru a remedia problema, puteți adăuga o valoare a originii transformării de 51% sau 52% de-a lungul axei X. Acest lucru ar trebui să rezolve problema.

Partea 1: Construirea antetului cu text vertical

Pentru această primă parte a aspectului, vom crea un antet cu text vertical. Pentru a face acest lucru, vom roti un modul blurb folosind opțiunile de transformare.

Pentru a începe, creați o secțiune obișnuită cu un rând cu două coloane.

Înainte de a adăuga un modul, scoateți umplutura de sus și de jos a secțiunii actualizând următoarele setări ale secțiunii:

Împletire personalizată: 0 px sus, 0 px jos

Apoi, actualizați setările Row după cum urmează:

• Imagine de fundal: [adăugați o imagine cu lățimea de cel puțin 1920px]
• Coloana 1 Culoare fundal: # 121212

• Lățime personalizată: 100%
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: DA
• Împletire personalizată (desktop): 0 px sus, 0 px jos
• Împletire personalizată (tabletă): 40% corect
• Împletire personalizată (telefon): 30% corect
• Coloana 1 Împletire personalizată (desktop): 200 px sus, 200 px jos
• Coloana 1 Căptușeală personalizată (tabletă): 150 px sus, 150 px jos

• Box Shadow: vezi captura de ecran
• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: -100px
• Culoare umbră: # f6454e

Crearea modulului Blurb

Acum suntem gata să adăugăm conținutul antetului. Pentru a face acest lucru, adăugați un modul blurb în coloana din stânga a rândului.

Actualizați următorul conținut:

• Titlu: Divi Design
• Conținut: conținutul dvs. merge aici.
• Utilizați pictograma: DA
• Pictogramă: bec

• Culoare pictogramă: # f6454e
• Pictogramă Dimensiune font: 32 px
• Orientare text: centru
• Nivelul titlului titlului: H1 (deoarece este titlul principal al paginii)
• Titlu Font: Muli
• Titlu Stil Font: TT
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 70 px (desktop), 50 px (tabletă), 36 px (telefon)
• Culoarea textului corpului: #cccccc
• Spațierea literelor corporale: 4 px
• Lățime: 500 px
• Alinierea modulului: centru

Notă importantă: Deoarece vom roti modulul blurb astfel încât să stea pe verticală, lățimea personalizată de 500 px va deveni înălțimea modulului vertical blurb. Deci, este important ca conținutul să se potrivească în acest modul. Pentru acest exemplu, folosesc o cantitate mică de text și redimensionez fontul de titlu pe diferite dispozitive, astfel încât textul să nu se rupă într-o linie nouă și să încurce designul.

Rotirea modulului Blurb folosind Opțiuni de transformare

Pentru a roti modulul blurb (și tot conținutul acestuia), actualizați următoarele opțiuni de transformare:

• Transformare Rotire axa X: -90 grade

Va trebui să introduceți manual valoarea -90deg. Acest lucru vă va oferi o aliniere verticală de jos în sus a conținutului.

Este posibil să observați că textul este puțin neclar dacă utilizați Chrome sau Safari. Acest lucru se poate întâmpla uneori când se utilizează proprietatea transform: rotate. Pentru a remedia acest lucru, puteți ajusta ușor Transform Origin după cum urmează:

• Transformă axa Y a originii: 51%

Este posibil să trebuiască să ajustați această valoare puțin până când textul este clar. De exemplu, 52% pot arăta clar în unele modele.

Crearea unui buton vertical

Apoi, vom adăuga un buton în partea de jos a antetului nostru pentru a reaminti utilizatorului să deruleze pagina în jos. Apoi putem roti butonul folosind opțiuni de transformare la fel cum am făcut la modulul de blurb.

Creați un rând nou cu o structură de o coloană.

Înainte de a adăuga modulul nostru de butoane, actualizați setările rândului după cum urmează:

• Culoare fundal: # f6454e
• Lățime personalizată: 100%
• Lățimea jgheabului: 1

Apoi, adăugați un modul de buton pe rând și actualizați următoarele opțiuni de buton:

• Aliniere buton: centru
• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 16 px
• Culoarea textului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 9 px
• Greutatea fontului: ușoară
• Stilul fontului: TT
• Pictogramă buton: săgeată dreapta

Rotirea și poziționarea butonului

Pentru a roti și poziționa butonul, vom folosi o combinație de margini și vom transforma rotirea după cum urmează:

• Marjă personalizată (desktop): -50 px în partea de sus, 50 px în partea de jos, -50 px în stânga
• Marjă personalizată (tabletă): stânga 0 px
• Transformare Rotire axa X: 90 grade

De această dată butonul este rotit cu 90 de grade (în sensul acelor de ceasornic) pentru a obține un afișaj vertical de sus în jos pentru text. Acest lucru pare a fi potrivit, deoarece vrem ca utilizatorul să deruleze în jos.

Partea 2: Rotirea modulelor de text pentru a crea etichete diagonale

În următoarea secțiune a aspectului, vom crea trei blurbs cu module de text rotite utilizate ca etichete. Acesta este un mod excelent de a afișa articole recomandate pe pagina dvs.

Iată cum să o faci.

Creați o nouă secțiune obișnuită cu un rând cu trei coloane. Apoi adăugați un modul de blurb în prima coloană.

Alegeți să utilizați pictograma becului în locul imaginii implicite.

Apoi actualizați modulul blurb după cum urmează:

• Culoare pictogramă: # f6454e
• Pictogramă Dimensiune font: 32 px
• Căptușeală personalizată: 3vw jos, 3vw stânga, 3vw dreapta

Apoi, actualizați setările rândului după cum urmează:

• Coloana 1 Culoare fundal: #eeeeee
• Coloana 2 Culoare fundal: #eeeeee
• Coloana 3 Culoare fundal: #eeeeee
• Egalizați înălțimile coloanei: DA

Următorul pas este crucial pentru când adăugăm designul rotativ al etichetei modulului nostru de text. Vrem ca depășirea modulului de text să fie ascunsă în afara coloanei. Pentru a ne asigura că acest lucru se întâmplă, trebuie să adăugăm proprietatea „overflow: hidden” la fiecare dintre coloane ca CSS personalizat.

Sub fila avansată, adăugați următoarele CSS personalizate:

Coloana 1 Element principal CSS:

overflow: hidden;

Coloana 2 Element principal CSS:

overflow: hidden;

Coloana 3 Element principal CSS:

overflow: hidden;

Adăugarea și rotirea modulului de text ca etichetă

Apoi, adăugați un modul text chiar deasupra modulului de blurb din coloana 1.

Actualizați conținutul textului cu cuvântul „Recomandat”.

Apoi stilizați modulul text după cum urmează:

• Culoarea fundalului: # f6454e
• Font text: Muli
• Greutatea fontului textului: Semi Bold
• Culoarea textului textului: #ffffff
• Spațiere scrisoare text: 3 px
• Înălțimea liniei de text: 2,5em
• Orientare text: centru

Acum, dați modulului text o lățime personalizată după cum urmează:

• Lățime: 180 px
• Alinierea modulului: stânga

Apoi, poziționați modulul text în colțul din stânga sus al coloanei folosind următoarele opțiuni de transformare:

• Transformă axa X tradusă: -25%
• Transformă axa Y tradusă: 70%

Este important să utilizați valori procentuale aici pentru a face designul mai receptiv, astfel încât va trebui să le introduceți manual.

Transformare Rotire axa X: -45 grade

Observați că depășirea modulului de text este ascunsă în afara coloanei pentru a finaliza proiectarea.

Nu ne rămâne decât să copiem modulele din coloana unu și să le lipim în coloana 2 și coloana 3.

Iată rezultatul final.

Partea 3: Crearea de titluri verticale pentru conținutul dvs.

Următoarea parte a aspectului folosește tehnici similare pentru a roti și poziționa un modul de text ca o poziție verticală pentru conținutul dvs. Acesta este un aspect util pentru prezentarea unor lucruri precum servicii. Voi demonstra, de asemenea, un mod creativ de a utiliza listele pentru a crea un titlu vertical foarte unic.

Iată cum să o faci.

Creați o nouă secțiune obișnuită cu un rând de o coloană.

Apoi copiați unul dintre modulele blurb din rândul de trei coloane din aspectul de mai sus. Acest lucru ne va oferi un avans în ceea ce privește designul.

Apoi actualizați setările de blurb după cum urmează:

• Amplasare imagine / imagine: stânga
• Marjă personalizată (desktop): 200 px stânga
• Marjă personalizată (telefon): stânga 0 px
• Căptușeală personalizată: 100 px sus, 100 px jos

Marja stângă creează spațiul de care vom avea nevoie pentru modulul de text vertical pe care îl vom adăuga.

Apoi, adăugați o margine la modulul blurb după cum urmează:

• Lățimea chenarului: 2 px
• Culoare margine: #eeeeee

Crearea modulului de text

Cu conținutul blurb la locul său, putem adăuga acum modulul nostru de text. Creați un nou modul de text și apoi plasați-l direct deasupra modulului de blurb.

După aceea, adăugați următorul html în caseta de conținut (asigurați-vă că este selectată fila text):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

Acesta este html utilizează o listă ordonată (ol), o etichetă h5 și o listă neordonată (ul). Acest lucru ne permite să personalizăm fiecare dintre elementele listei și h5 separat folosind opțiunile de proiectare încorporate ale Divi din modulul text.

Această tehnică poate fi utilizată pentru a crea câteva modele uimitoare de liste.

Apoi, treceți la fila de proiectare și actualizați următoarele:

• Font Lista neordonată: Muli
• Lista neordonată Greutate font: ușor
• Dimensiunea textului listei neordonate: 15 px
• Tip de stil de listă neordonat: Nici unul
• Indentare de listă neordonată: 0,01 px

• Listă comandată Font: Abril Fatface
• Culoarea textului listei comandate:
• Dimensiune text listă comandată: 40 px
• Lista ordonată Spațierea literelor: 4 px
• Înălțime linie listă ordonată: 1.3em
• Tipul stilului listei ordonate: Zero principal zecimal

• Titlul 5 font: Muli
• Titlul 5 Greutate font: ultra ușor
• Titlul 5 Stilul fontului: TT
• Titlul 5 Dimensiune text: 62 px

Dimensionarea, rotirea și poziționarea modulului de text

Acum că avem designul textului la locul său, să-i dăm o lățime personalizată. Amintiți-vă că lățimea modulului va deveni înălțimea modulului odată ce îl rotim pentru a fi afișat vertical.

• Lățime personalizată: 300 px
• Alinierea modulului: stânga

Pentru a roti textul, actualizați următoarele:

• Transformare Rotire axa X: -90deg (desktop), 0deg (telefon)

Trebuie să resetăm rotația înapoi la 0deg pentru afișarea telefonului.

Actualizați următoarea opțiune Transformare:

• Transformă axa X Traducere: -10% (desktop), 0% (telefon)
• Transformă axa Y tradusă: 50% (desktop), 0% (telefon)

Setările de transformare ajustează ușor poziția modulului text. Dar, pentru a ne îndrepta spațiul, trebuie să înlocuim spațiul negativ lăsat de modulul text deasupra modulului blurb. Pentru a face acest lucru, trebuie să adăugăm o marjă de jos negativă la modulul text, după cum urmează:

• Marjă personalizată (desktop): -150 px în partea de jos
• Marja personalizată (telefon): 0 px de jos

Duplicați secțiunea și actualizați numărul de început al listei comandate

Pentru a crea mai multe secțiuni ale acestui aspect, puteți duplica secțiunea. Numărul listei comandate va fi în continuare „1”. Pentru a schimba acest lucru, trebuie să înlocuiți eticheta listă ordonată de deschidere (ol) cu următoarele:

<ol start="2">

Aceasta va permite listei să înceapă cu numărul 2 în loc de 1.

Asta e. Am terminat cu toții!

Proiectarea finală a machetei cu modele de text rotite

Desktop

Tabletă și telefon

Gânduri finale

Știind cum să rotiți textul (sau orice conținut cu adevărat) în Divi este o modalitate excelentă de a atrage atenția asupra conținutului dvs. În plus, dacă o faci corect, poate face designul să iasă în evidență. Sper că acest tutorial va izbucni o sursă de inspirație pentru modul în care puteți implementa rotația textului pentru modele și mai frumoase.

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

Noroc!