Cum se aplică o culoare de gradient a textului copiei dvs. utilizând numai opțiunile încorporate ale Divi

Indiferent de tipul de site web pe care îl creați, evidențierea copiei și a conținutului rămâne una dintre prioritățile principale. Cu opțiunile integrate Divi, există o mulțime de modalități de a ajunge acolo. Una dintre posibilitățile pe care le aveți este aplicarea unei culori de gradient a textului copiei dvs. Aceasta este o abordare excelentă pentru a adăuga culoare site-ului dvs., mai ales dacă păstrați restul site-ului curat și minimalist. Ajută la echilibrarea spațiului alb și oferă site-ului dvs. o gură de aer proaspăt.

În acest tutorial, vă vom arăta cum să conferiți textului o culoare degradată folosind doar opțiunile încorporate ale Divi.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran. Vă vom arăta cum să faceți acest lucru folosind atât o paletă de culori deschise cât și întunecate. Odată ce veți obține abordarea, puteți crea tot felul de modele cu text degradat.

Abordare

1. Înțelegerea modurilor Divi Blend

Modurile de amestecare funcționează exact așa cum sunteți obișnuiți cu ele în software-ul de editare a imaginilor. Se bazează pe structuri de straturi. Concret, asta înseamnă că un mod de amestecare în Divi va urma o anumită ierarhie:

• Un mod de amestecare aplicat unui modul va combina modulul + coloana de sub acesta
• Un mod de amestecare aplicat unei coloane va amesteca coloana + rândul de sub ea
• Un mod de amestecare aplicat unui rând va amesteca rândul + secțiunea de sub acesta

Pentru acest tutorial, este necesar să înțelegeți că un mod de amestecare aplicat unui modul se va combina cu coloana de sub acesta. Dând coloanei un fundal de gradient și modulului în cauză un mod de amestecare, putem reuși să obținem un text de culoare de gradient.

2. Alegerea între o paletă de culori complet închisă sau deschisă

Pentru ca acest lucru să funcționeze, va trebui fie să utilizați o paletă de culori complet închisă, fie deschisă. Modurile de amestecare pe care le folosim, luminează și întunecă, vor oferi rezultatul dorit numai atunci când folosiți o culoare complet neagră sau albă. Când folosiți alte culori, efectul pe care l-am aplicat se va arăta într-un fel.

3. Îndepărtarea tuturor lățimii jgheabului dintre coloane și module

După cum sa menționat în prima parte a abordării, vom folosi fundaluri de gradient de coloană. Pentru a ne asigura că acest fundal de gradient nu apare oriunde nu vrem, vom elimina toată lățimea jgheabului. Procedând astfel, ne vom asigura că nu există o marjă personalizată implicită aplicată între module. Pentru a compensa spațiul pe care îl pierdem, vom adăuga manual în schimb o căptușire personalizată.

4. Folosirea căptușelii în loc de modificarea lățimii unui element

Și pentru a regla lățimea unui element de design, vom folosi o căptușire personalizată la stânga și la dreapta. Modificarea lățimii în setările de dimensionare ar schimba lățimea întregului modul și ar permite ca fundalul de gradient al coloanei să apară în partea stângă și dreapta, ceea ce nu ne dorim.

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Culoare de fundal

Să începem! Adăugați o secțiune obișnuită la o pagină nouă sau existentă și dați-i culoarea de fundal potrivită (în funcție de dacă doriți să recreați aspectul deschis sau întunecat).

• Culoare fundal: #ffffff (aspect luminos), # 000000 (aspect întunecat)

Spațiere

Continuați adăugând câteva secțiuni de umplere personalizate.

• Căptușeală superioară: 215 px
• Căptușeală inferioară: 215 px

Adăugați rândul # 1

Structura coloanei

Apoi, adăugați un rând nou folosind următoarea structură de coloane:

Coloana 2 Fundal gradient

Adăugați un fundal de gradient la a doua coloană a rândului. Aici vom plasa titlul Modul text în partea următoare a tutorialului.

• Culoare 1: # c700ff
• Culoare 2: # 32f1ff
• Coloana 2 Direcție gradient: 150deg
• Coloana 2 Poziția inițială: 20%
• Coloana 2 Poziție finală: 60%

Dimensionare

Modificați și setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Și modificați setările de spațiere.

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Adăugați un modul de text în coloana 2

Adauga continut

Acum mergeți mai departe și adăugați un modul de text la a doua coloană a rândului pe care l-ați adăugat.

Culoare de fundal

Acordați modulului fundalul corect, în funcție de tipul de aspect pe care doriți să îl recreați.

• Culoare fundal: #ffffff (aspect luminos), # 000000 (aspect întunecat)

Setări text antet

Schimbați apoi setările pentru textul antetului.

• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000 (Aspect luminos), #ffffff (Aspect întunecat)
• Titlul 2 Dimensiune text: 67 px (desktop), 50 px (tabletă), 40 px (telefon)
• Rubrica 2 Spațierea literelor: -2 px

Spațiere

Și adăugați niște umplutură de fund. Amintiți-vă, folosim umplutura inferioară în loc de marjă pentru a ne asigura că fundalul gradientului coloanei nu se afișează.

• Căptușeală inferioară: 50 px

Blend Mode

Pentru ca fundalul de gradient al coloanei să se aplice modulului pe care l-ați adăugat, aplicați un mod de amestecare în setările filtrelor.

• Mod de amestecare: Lighten (Light layout), Darken (Dark layout)

Adăugați modul divizor la rând

Vizibilitate

Al doilea și ultimul modul de care avem nevoie în acest rând este un modul divizor.

• Show Divider: Da

Culoare de fundal

Schimbați culoarea de fundal în funcție de tipul de aspect pe care îl recreați.

• Culoare fundal: #ffffff (aspect luminos), # 000000 (aspect întunecat)

Spațiere

Pentru a reduce lățimea separatorului, vom adăuga câteva umpluturi personalizate în partea stângă și dreapta.

• Garnitura stânga: 250 px
• Căptușeală dreaptă: 250 px

Blend Mode

Din nou, adăugați un mod de amestecare pentru a afișa fundalul gradientului coloanei.

• Mod de amestecare: Lighten (Light layout), Darken (Dark layout)

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Utilizați următoarea structură de coloane:

Coloana 1 Gradient Background

Continuați adăugând un fundal de gradient în prima coloană.

• Culoare 1: # c700ff
• Culoare 2: # 32f1ff
• Coloana 1 Tip de gradient: Liniar
• Coloana 1 Direcție gradient: 105deg
• Coloana 1 Poziție de start: 20%
• Coloana 1 Poziție finală: 50%

Coloana 2 Fundal gradient

Folosim un fundal de gradient și pentru a doua coloană.

• Culoare 1: # 32f1ff
• Culoare 2: # c700ff
• Coloana 2 Tip de gradient: Liniar
• Coloana 2 Direcție gradient: 90 grade
• Coloana 2 Poziție de start: 40%
• Coloana 2 Poziție finală: 60%

Coloana 3 Gradient Background

Același lucru este valabil și pentru a treia coloană.

• Culoare 1: # c700ff
• Culoare 2: # 32f1ff
• Coloana 3 Tip de gradient: Liniar
• Coloana 3 Direcție gradient: 85deg
• Coloana 3 Poziția inițială: 20%
• Coloana 3 Poziție finală: 50%

Dimensionare

Modificați setările de dimensionare în continuare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Și adăugați niște umpluturi personalizate la stânga și la dreapta.

• Căptușire stângă: 100 px (desktop și tabletă), 50 px (telefon)
• Căptușeală dreaptă: 100 px (desktop și tabletă), 50 px (telefon)

Adăugați Blurb Module la coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul Blurb în coloana 1 cu un titlu la alegere. Mai târziu în postare, vom folosi un modul separat pentru a adăuga conținutul corpului.

Alege pictograma

Selectați o pictogramă la alegere.

Culoare de fundal

Și modificați culoarea de fundal a modulului Blurb.

• Culoare fundal: #ffffff (aspect luminos), # 000000 (aspect întunecat)

Setări pictograme

Continuați accesând setările pictogramei și făcând unele modificări acolo.

• Culoare pictogramă: # 000000 (Aspect luminos), #ffffff (Aspect întunecat)
• Plasare imagine / pictogramă: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 51 px

Setări text titlu

Modificați și setările pentru textul titlului.

• Greutatea fontului titlului: Bold
• Alinierea textului titlului: centru
• Culoarea textului titlului: # 000000 (Aspect luminos), #ffffff (Aspect întunecat)
• Spațierea literelor de titlu: -1 px
• Înălțimea liniei de titlu: 1.2em

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori de marjă și umplere personalizate.

• Marja inferioară: 5 px
• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Blend Mode

Nu în ultimul rând, aplicați modul de amestecare corect.

• Mod de amestecare: Lighten (Light layout), Darken (Dark layout)

Adăugați un modul de text în coloana 1

Adauga continut

Separăm titlul și corpul modulului Blurb în două module pentru a face ca modul de amestecare să se aplice numai pictogramei și titlului. Continuați și adăugați un modul de text chiar sub modulul Blurb care conține conținutul corpului.

Culoare de fundal

Apoi, adăugați o culoare de fundal.

• Culoarea fundalului: #ffffff (aspect deschis), # 0c0c0c (aspect întunecat)

Setări text

Și modificați setările de text.

• Spațiere scrisoare text: 0,5 px
• Înălțimea liniei textului: 2.3em
• Orientare text: justificați
• Culoarea textului: Întunecat (aspect deschis), deschis (aspect întunecat)

Spațiere

Pentru a oferi modulului spațiu pentru a respira, adăugați câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px
• Garnitura stânga: 70 px
• Căptușeală dreaptă: 70 px

Box Shadow

În plus, adăugați și o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 56 px
• Puterea răspândirii umbrei cutiei: -12px
• Culoare umbră: rgba (0,0,0,0,3)

Clonați modulul Blurb și modulul de text de două ori + Plasați în coloanele rămase

Nu în ultimul rând, clonați ambele module pe care le puteți găsi în coloana 1 și plasați duplicatele în cele două coloane rămase. Schimbați și conținutul în consecință.

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului final.

Gânduri finale

În această postare, v-am arătat cum să creați text degradat pe site-ul dvs. web utilizând numai opțiunile încorporate ale Divi. Pentru ca acest tutorial să funcționeze și pentru a putea practica abordarea și pe alte modele, este necesar să parcurgeți secțiunea de abordare a acestui post și să o înțelegeți în timp ce recreați designul. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!