Cum să creați 3 modele uimitoare de fonturi monospazate în Divi

Fonturile monospațiate reprezintă un atu încântător pentru designul web. Sunt utile în special pentru a crea modele care au o simetrie și un echilibru frumos. Un font monospațiat este format din litere și caractere care au fiecare aceeași lățime (sau spațiu orizontal). Ca atare, ele oferă o structură consistentă și elegantă pentru afișarea textului. Din acest motiv, fonturile monospațiate sunt utilizate pe scară largă în codificare.

În acest tutorial, vom crea trei modele uimitoare de fonturi monospazate în Divi. Vom analiza modul de personalizare corectă a modulelor de text pentru a poziționa și proiecta fonturi monospazate în unele moduri destul de unice și multe altele.

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra proiectelor pe care le vom construi în acest tutorial.

Monospaced Font Design # 1: Logo Style

Începeți proiectarea clădirii # 1

Monospaced Font Design # 2: Blocuri mari de litere

Începeți proiectarea clădirii # 2

Monospaced Font Design # 3: CrossWord Puzzle

Începeți proiectarea clădirii # 3

Descărcați GRATUIT aspectul designului fonturilor Monospaced

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ă faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi instalată (sau pluginul Divi Builder dacă nu utilizați tema Divi).
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Încărcați câteva imagini simulate în biblioteca media pentru a fi utilizate pentru tutorial. Vom folosi o siglă de imagine 200px 200px din pachetul de aspect HVAC și două imagini de fundal (cu o lățime de cel puțin 1920px) preluate de la Cake Maker Layout Pack și Home Improvement Layout Pack.

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

Monospaced Font Design # 1: Logo Style

Să începem cu un design simplu al fontului monospațiat, care evidențiază echilibrul simetric al literelor. Deoarece literele sunt spațiate uniform, fonturile monospazate sunt excelente pentru grafică și sigle. Iată un exemplu rapid despre modul în care puteți încorpora fontul monospațiat cu o pictogramă simplă de imagine pentru a crea un grafic frumos.

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

Înainte de a adăuga modulul text, vom adăuga un fundal la secțiune. Fundalul va consta dintr-o imagine a pictogramei centrată cu un fundal gri închis. Imaginea pictogramei pe care o vom folosi este preluată din pachetul de aspect HVAC. Asigurați-vă că pictograma imaginii are aproximativ 200 px cu 200 px, deoarece vom folosi dimensiunea reală ca imagine de fundal.

Deschideți setările secțiunii și actualizați următoarele:

• Culoare fundal: # 121212
• Imagine de fundal: [inserați pictograma imaginii de 200 px cu 200 px]
• Dimensiunea imaginii de fundal: dimensiunea reală
• Poziția imaginii de fundal: Centru

Adăugați modulul de text

După terminarea secțiunii, adăugați un modul text la rândul cu o coloană.

Aici adăugăm textul cu un font monospațiat. Aspectul convenabil al literelor monospațiate este că, deoarece fiecare literă are aceeași lățime, puteți centra cu ușurință litera de mijloc a textului de pe pagină. Acest lucru va facilita alinierea cu pictograma imaginii de fundal pe care am adăugat-o în secțiune.

Deschideți setările modulului text și actualizați conținutul corpului cu cuvântul „elegant”. De fapt, puteți utiliza aproape orice cuvânt care are un număr impar de litere, astfel încât să avem o literă centrală pentru a suprapune frumos pictograma imaginii de fundal.

Adăugarea designului fontului Monospaced

Divi are aproximativ 12 fonturi monospazate diferite incluse în generatorul Divi din care putem alege. Pentru a le vedea, putem face clic pentru a selecta un font text și a introduce „mono” în bara de căutare. Aceasta va afișa lista fonturilor monospațiate disponibile.

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

• Font text: Droid Sans Mono
• Dimensiune text text: 5vw
• Spațiere scrisoare text: 1.3em
• Înălțimea liniei de text: 1em

Această combinație dintre unitatea de lungime vw pentru dimensiunea textului și unitatea de lungime em pentru spațierea literelor și înălțimea liniei va face ca textul să răspundă perfect la toate dimensiunile browserului.

Spațiere

După ce fontul este gata, adăugați spațiu la modulul text pentru a vă asigura că textul este perfect centrat. Putem vedea că textul este puțin centrat din cauza spațierii literelor. Putem rezolva cu ușurință acest lucru adăugând o umplutură la stânga egală cu valoarea pe care am adăugat-o pentru spațierea literelor.

Actualizați următoarele:

• Marja: 0 px de jos
• Căptușeală: 2em sus, 2em jos, 1,3em stânga

Schimbați culoarea literei centrale

O modalitate simplă de a schimba culoarea unei singure litere în Divi este de a utiliza opțiunile de stil în linie atunci când utilizați constructorul de pe partea frontală.

Evidențiați pur și simplu litera pe care doriți să o modificați și faceți clic pe pictograma de culoare a textului din bara de meniu.

Apoi adăugați următorul cod de culoare: rgba (248, 142, 96, 0,54)

Asta e!

Faceți rândul lățime completă

Trebuie să facem loc pentru ca textul să fie adăugat, așa că mergeți mai departe și faceți lățimea completă a rândului deschizând setările rândului și actualizând următoarele:

• Lățime: 100%
• Lățime maximă: 100%

Rezultat final

Iată rezultatul final.

Și dacă doriți, puteți adăuga un spațiu pentru caracterul central din text pentru a utiliza pictograma imagine de fundal pentru spațiul gol. Iată cum ar arăta asta.

Monospaced Font Design # 2: Blocuri mari de litere

Următorul design prezintă structura fontului în formă de bloc, care este posibilă cu fonturile monospațiate. Spre deosebire de fonturile obișnuite (cu lățime variabilă), fonturile monospațiate se stivuiesc una peste alta pentru un design echilibrat, modern și plăcut ochiului.

Iată cum să o faci.

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

Înainte de a adăuga orice modul, actualizați secțiunea cu un design de fundal după cum urmează:

• Culoarea din stânga a gradientului de fundal: # fcd1e5
• Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
• Direcția gradientului: 135 grade
• Poziția inițială: 50%
• Poziție finală: 76%

Apoi adăugați o imagine de fundal. Folosesc unul din pachetul de aspect Cake Maker.

Adăugați lățimea rândului

Apoi, actualizați lățimea rândului după cum urmează:

• Lățime: 100%
• Lățime maximă: 100%

Adăugați modulul de text

După ce aveți un rând cu lățime completă, adăugați un modul de text la rând.

Apoi actualizați conținutul corpului cu următoarele:

<p>dividesign<a href="#">learnmore</a></p>

Apoi stilizați textul paragrafului după cum urmează:

• Font text: Overpass Mono
• Stil de text text: TT
• Culoarea textului textului: # 2e298f
• Dimensiune text text: 15vw
• Spațiere scrisoare text: 0,16em
• Înălțimea liniei de text: 1em

Vom adăuga un stil diferit textului linkului după cum urmează:

• Stil Font Link: Subliniat
• Culoare text link: # 2e298f
• Dimensiune text link: 3,5vw
• Spațiere scrisoare link: 0em

Spațiere

După stilizarea textului, actualizați spațiul după cum urmează:

• Marja: 0 px de jos
• Căptușeală: 0,16em stânga, 3em dreapta

După aceea, salvați setările. Apoi utilizați opțiunile de stil în linie pentru a schimba culoarea literelor așa cum am făcut în primul exemplu de proiectare mai devreme în postare.

Pentru a face acest lucru, evidențiați primele patru litere și schimbați culoarea în alb.

Schimbați culoarea celei de-a doua litere cu următoarea: # f34a43

În cele din urmă, evidențiați primele cinci litere din textul linkului („învățați”) și actualizați culoarea la următoarele: # f34a43.

Design final

Acum, să verificăm rezultatul final pe o pagină live.

Monospaced Font Design # 3: CrossWord Puzzle

Acest ultim design profită de fonturile monospazate pentru a crea un aspect de tip cuvinte încrucișate pentru textul dvs. Iată cum să o faci.

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

Înainte de a adăuga module, deschideți setările secțiunii și adăugați o imagine de fundal cu un gradient după cum urmează:

• Imagine de fundal: [inserați imaginea]
• Culoarea din stânga a gradientului de fundal:
• Culoarea dreaptă a gradientului de fundal:
• Direcția gradientului: 90 grade
• Poziția inițială: 25%
• Poziție finală: 0%
• Plasați gradientul deasupra imaginii de fundal: DA

Setări rând

Odată ce fundalul secțiunii este finalizat, deschideți setările rândurilor cu o lățime nouă și o anumită distanță.

• Lățime: 100%
• Lățime maximă: 100%
• Garnitura: 22vw sus, 5vw stânga

Adăugați un modul text

După actualizarea rândului, adăugați un nou modul de text pe rând cu cuvântul „mono” ca conținut al corpului.

Apoi actualizați designul modulului text după cum urmează:

• Font text: Rubik Mono One
• Culoarea textului textului: # faac00
• Dimensiune text text: 8vw
• Spațiere scrisoare text: 0,15em
• Înălțimea liniei de text: 1em

Duplicați modulul text

Pentru a accelera proiectarea următoarelor noastre două blocuri de text, să duplicăm modulul text pe care tocmai l-am proiectat de două ori, astfel încât să aveți un total de trei module text stivuite unul peste altul.

Actualizați modulul text nr. 2

După ce am duplicat modulul de text, deschideți setările pentru al doilea modul de text (din mijloc) și schimbați textul corpului cu cuvântul „fonturi”.

Apoi actualizați următoarele:

• Corp: „fonturi”
• Culoare fundal: #dddddd
• Culoare text text: # 930565
• Lățime: 0.86em
• Marja: -3em sus, 2em stânga

Observați cum modificarea lățimii modulului text determină afișarea textului pe verticală. Și pentru că este un font monospațiat, acestea se acumulează uniform. Și cu o lățime egală cu dimensiunea fiecărui bloc de litere, putem deplasa modulul de text în jurul valorii de câte 1em. Deci, marja de sus -3em va aduce textul cu exact 3 blocuri de litere. Și marja stângă 2em va muta modulul text peste exact 2 blocuri de litere spre dreapta. Acest lucru facilitează poziționarea articolelor într-un aspect de cuvinte încrucișate ca acesta.

Box Shadow

Să adăugăm o umbră de casetă pentru a mări dimensiunea fundalului din spatele modulului de text.

• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 0,08em
• Culoare umbră: #dddddd (la fel ca și culoarea de fundal)

Indicele Z

Pentru a vă asigura că acest bloc de text rămâne deasupra celorlalte module de text, actualizați indexul z după cum urmează:

• Indicele Z: 11

Actualizați modulul text nr. 3

Odată ce modulul de text nr. 2 este complet, deschideți setările pentru al treilea modul de text și schimbați textul corpului cu cuvântul „spațiat”.

Apoi mutați modulul în loc folosind valorile noastre magice de marjă em:

• Marja: -1em sus, 2em stânga

Design final

Mobil

Deoarece aceste modele sunt construite folosind unități de lungime vw și em, designul va rămâne consecvent pe toate dimensiunile browserului. Iată cum arată designul pe ecranul tabletei și al telefonului.

Notă: Singurul element care nu răspunde este pictograma imaginii de fundal din primul design. Cu toate acestea, puteți adăuga cu ușurință o imagine de fundal mai mică pe tabletă și telefon pentru a remedia problema.

Gânduri finale

Poate că cel mai bun lucru despre crearea de designuri de fonturi monospazate în Divi este versatilitatea stilurilor de fonturi. Doar câteva atingeri minore pot face o mare diferență. În plus, aplicațiile sunt destul de practice pentru orice site web.

Care dintre aceste trei exemple vi s-a părut cel mai promițător?

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

Noroc!