5 exemple de design cool care demonstrează puterea noilor opțiuni de font ale lui Divi

Modul în care reprezentați conținutul scris pe site-ul dvs. web reprezintă o mare parte din modul în care mesajul va fi primit de vizitatorii dvs. Acordarea unei atenții speciale și încercarea de a elabora ceva unic este unul dintre lucrurile care vă pot ajuta să comunicați într-un mod memorabil. De aceea, vă vom arăta câteva dintre rezultatele interesante pe care le puteți crea cu noile opțiuni de font Divi pe orice fel de site web creați. Desigur, există multe altele posibile cu aceste noi setări de proiectare decât vă vom arăta în această postare, dar pentru a porni propriul proces de descoperire și proiectare, am pus împreună cinci exemple de design interesante care demonstrează puterea dintre noile opțiuni de font ale lui Divi. Bucurați-vă!

Rezultat Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra exemplelor pe care vi le vom arăta cum să le recreați, pas cu pas. Fiecare dintre aceste exemple este realizat utilizând doar un modul de text (cu setările potrivite) pe care îl puteți plasa oriunde doriți pe site-ul dvs. web. Exemplul nr. 1 Exemplul nr. 2 Exemplul nr. 3 Exemplul # 4 Exemplul nr. 5 5 combinații minunate de noile opțiuni de font ale lui Divi Abonați-vă la canalul nostru Youtube Recreați exemplul nr. 1 Pentru primul exemplu, folosim o combinație dintr-un fundal degradat, o familie de fonturi inversate și o umbră de text care va da o margine textului pe care îl folosim în modulul de text.

Fundal de gradient După ce ați adăugat un modul de text, primul va trebui să faceți este să adăugați un fundal de gradient. Deși puteți alege oricare fundal de gradient doriți să apară, pentru acest exemplu, am folosit următoarele setări:

• Prima culoare: rgba (255,255,255,0)
• A doua culoare: # eeef8b
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 60%
• Poziție finală: 0%

Setări text Apoi, treceți la fila Proiectare și efectuați următoarele modificări la subcategoria Text:

• Font text: Zilla Slab Highlight
• Greutatea fontului textului: Bold
• Dimensiune text: 100 px (desktop), 62 px (tabletă), 38 px (telefon)
• Culoarea textului: #FFFFFF
• Înălțimea liniei de text: 1em

În subcategoria Text, adăugați și următoarea umbră de text:

• Lungime orizontală a umbrei textului: 0em
• Text Shadow Vertical Lungime: 0em
• Text Forța de estompare a umbrei: 0,06em
• Culoare umbră text: # 000000
• Orientare text: centru

Recreați exemplul nr. 2 Cel mai special lucru din acest al doilea exemplu este utilizarea sublinierii ondulate în combinație cu o umbră de text care va face să pară că există un subliniat dublu ondulat la text. În plus, folosim și o margine dublă pentru partea stângă și dreapta a modulului text. Setări text După adăugarea unui modul de text, puteți începe prin efectuarea următoarelor modificări la subcategoria Text din fila Proiectare:

• Font text: Sofia
• Greutatea fontului textului: regulat
• Stil Font text: Subliniat
• Culoare subliniere text: rgba (131,0,233,0,15)
• Stil de subliniere a textului: ondulat
• Dimensiune text: 78 px (desktop), 36 px (tabletă), 25 px (telefon)
• Culoarea textului: # 606060
• Spațiere text: 12 px
• Înălțimea liniei de text: 1em

Adăugați și următoarea umbră text la subcategoria text:

• Lungime orizontală a umbrei textului: 0em
• Lungime verticală a umbrelor textului: 0,17em
• Text Forța de estompare a umbrelor: 0,05em
• Culoare umbră text: rgba (162,181,0,0,13)
• Orientare text: centru

Frontieră Continuați deschizând subcategoria Border și utilizați următoarele setări pentru stilurile de margine stânga și dreapta:

• Lățimea chenarului: 11 px
• Culoare margine: rgba (162,181,0,0,18)
• Stilul chenarului: dublu

Recreați exemplul nr. 3 Pentru al treilea exemplu, potrivim culoarea fontului nostru cu culoarea de fundal a secțiunii. Dacă utilizați o altă culoare de fundal, asigurați-vă că modificați și culoarea textului. De asemenea, vom adăuga o umbră de text pentru a crea chenarele textului. Mai mult decât atât, folosim, de asemenea, o subliniere a textului pentru a-l sublinia. Setări text Pentru acest exemplu, veți avea nevoie de următoarele setări pentru subcategoria Text a modulului Text:

• Font text: Bungee Inline
• Greutatea fontului textului: regulat
• Stil Font text: Subliniat
• Culoare subliniere text: #FFFFFF
• Stil de subliniere a textului: solid
• Dimensiune text: 69 px (desktop), 45 px (tabletă), 29 px (telefon)
• Culoarea textului: #ededed
• Înălțimea liniei de text: 1em

În cele din urmă, utilizați și următoarea umbră de text:

• Lungime orizontală a umbrei textului: 0em
• Text Shadow Vertical Lungime: 0em
• Text Forța de estompare a umbrelor: 0,05em
• Culoare umbră text: # 000000
• Orientare text: centru

Recreați exemplul # 4 Pentru exemplul următor, combinăm o culoare de fundal cu colțuri rotunjite și un stil de margine. Culoarea pe care o folosim pentru stilul de margine este aceeași cu cea pe care o folosim pentru stilul de font strikethrough. Pentru a ne asigura că textul nostru este încă lizibil, folosim o culoare ușor transparentă. Culoare de fundal Începeți adăugând „# f2f2f2” ca culoare de fundal a modulului dvs. de text.

Setări text Apoi, treceți la subcategoria Proiectare și efectuați următoarele modificări la subcategoria Text:

• Font text: Ribeye Marrow
• Greutatea fontului textului: regulat
• Stil de text text: eliminat
• Culoare text eliminat: rgba (224,43,32,0.18)
• Text Strikethrough Style: Double
• Dimensiune text: 78 px (desktop), 46 px (tabletă), 31 px (telefon)
• Culoarea textului: # 000000
• Înălțimea liniei textului: 1.1em
• Orientare text: centru

Spațiere Apoi, aplicați următoarea padding personalizat la subcategoria Spacing:

• Sus: 15 px
• Partea de jos: 15 px

Frontieră În cele din urmă, faceți următoarele modificări la subcategoria Border:

• Colțuri rotunjite (toate): 100 px
• Stilul frontierei: toate laturile
• Lățimea chenarului: 4 px
• Culoare margine: rgba (224,43,32,0.18)
• Stilul chenarului: dublu

Recreați exemplul nr. 5 În ultimul exemplu, combinăm un fundal degradat cu colțuri rotunjite, un stil de margine de sus și o umbră de casetă pentru a adăuga atingerea finală la modulul nostru de text. Fundal de gradient Începeți prin adăugarea unui fundal de gradient în modulul dvs. de text:

• Prima culoare: rgba (155.175.193,0.2)
• A doua culoare: rgba (244.244.244,0)
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 48%
• Poziție finală: 0%

Setări text Apoi, treceți la fila Design și aplicați următoarele modificări subcategoriei Text:

• Font text: Codystar
• Greutatea fontului textului: Bold
• Dimensiune text: 60 px (desktop), 35 px (tabletă), 22 px (telefon)
• Culoarea textului: # 494949
• Înălțimea liniei textului: 1.1em
• Orientare text: centru

Dimensionare Apoi, accesați subcategoria Dimensionare și efectuați următoarele modificări:

• Lățime: 78% (desktop), 76% (tabletă), 86% (telefon)
• Alinierea modulului: centru

Spațiere Va trebui, de asemenea, să adăugăm următoarea umplere la subcategoria Spacing:

• Sus: 15 px
• Partea de jos: 15 px

Frontieră Apoi, deschideți subcategoria Border și aplicați următoarele modificări:

• Colțurile din stânga sus și din dreapta jos: 500 px
• Colțurile din stânga jos și din dreapta sus: 20 px
• Lățimea marginii superioare: 2 px
• Culoare margine superioară: rgba (0,0,0,0,44)
• Stilul frontierei superioare: dublu

Box Shadow Nu în ultimul rând, vom adăuga și o umbră de casetă subtilă la modulul nostru text:

• Poziție orizontală a umbrei cutiei: 5 px
• Box Shadow Vertical Position: -10px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 2 px
• Culoare umbră: rgba (155.175.193,0.66)
• Box Shadow Position: Outer Shadow

Gânduri finale În această postare, v-am arătat câteva modalități interesante de a stiliza modulele de text de pe site-ul dvs. web. Desigur, există mult mai multe posibilități, dar cu aceste exemple, aveți un început. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos! Imagine prezentată de vladwel / shutterstock.com