Cum să proiectați reflecții pentru imagini și text în Divi

Proiectarea reflexiilor pentru imagini și text este o tehnică clasică de proiectare care poate fi utilizată pentru a condimenta conținutul unei pagini web. Și, Divi facilitează crearea acestor reflexii chiar de la Divi Builder fără a fi nevoie să utilizați un editor foto.

În acest tutorial, vă voi arăta cum să proiectați reflexii pentru imagini și text în Divi. Cheia pentru a face reflecții este de a utiliza opțiunea de transformare Divi pentru a crea o versiune în oglindă a elementului. După aceea, puteți adăuga o suprapunere personalizată pe care vă voi arăta cum să o faceți cu un modul text.

Să începem!

Trage cu ochiul

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

Descărcați GRATUIT aspectul de reflecții pentru text și imagine

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!

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?

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, nu aveți nevoie decât de Divi. Asigurați-vă că tema Divi este instalată și activă. Vom crea proiectele noastre de la zero folosind Divi Builder de pe partea frontală (constructor vizual). De asemenea, veți avea nevoie de câteva imagini simulate pentru acest tutorial (o imagine de fundal în jur de 1920px x 600px și o altă imagine în jur de 500px x 350px).

Când sunteți gata, accesați tabloul de bord WordPress și navigați la Pagini> Adăugați un nou. Acordați titlului noii pagini și implementați Divi Builder în partea frontală. Selectați opțiunea „Construiți de la zero”. Acum ești gata să pleci!

Ideea de bază din spatele creării reflecției de imagine și text în Divi

Ideea de bază din spatele creării de modele de reflecție în Divi implică trei pași:

1. Creați un modul cu imaginea sau textul dvs.
2. Duplicați modulul și utilizați scala de transformare pentru a crea imaginea oglindită sau textul
3. Adăugați o Suprapunere de gradient la elementul oglindit Utilizând un separator poziționat absolut sau un modul text.

Această tehnică de proiectare nu se limitează la module individuale. Puteți adăuga de fapt reflecții la rânduri întregi din cadrul Divi folosind această metodă care este utilă pentru crearea de designuri de antet unice. Vom adăuga reflecție la un rând în proiectarea noastră de reflecție a textului puțin mai târziu în acest tutorial. Dar, deocamdată, să începem cu modul de creare a reflexiei imaginii.

Cum se creează reflecția imaginii

Pentru a crea o reflecție a imaginii, să începem cu crearea unei noi secțiuni obișnuite cu un rând cu o coloană.

Apoi adăugați un modul de imagine pe rând.

Încărcați imaginea dorită din galeria media în modulul imagine. Apoi actualizați următoarele setări de imagine:

Lățime maximă: 600 px
Alinierea modulului: centru
Marja personalizată: 0 px de jos

Creați imaginea în oglindă

Pentru a crea efectul de reflexie, trebuie mai întâi să creăm un duplicat în oglindă al imaginii chiar sub imagine.

Pentru a face acest lucru, copiați modulul de imagine. Apoi actualizați setările imaginii duplicate după cum urmează:

Opacitate: 40%
Axa X a scalei de transformare: -100%

Proprietatea scalei de transformare este cea care întoarce imaginea în mod magic pe verticală și orizontală pentru a crea o versiune în oglindă a imaginii.

Aceasta se ocupă de proiectarea de bază a reflexiei. Cu toate acestea, putem adăuga o suprapunere de gradient suplimentară imaginii noastre de jos pentru un design de reflecție mai realist.

Adăugați o suprapunere de gradient utilizând un modul de text

Pentru a adăuga o suprapunere de gradient la imaginea noastră de jos, putem folosi un modul text. Putem da modulului text o poziție absolută, astfel încât să stea deasupra imaginii de jos. Apoi, putem adăuga un fundal de gradient la modulul text. Utilizarea unui modul text (în locul unui divizor) vă va oferi opțiunea bonus de a adăuga mai mult conținut pe partea de sus a imaginii de reflexie mai târziu, dacă doriți.

Continuați și creați un modul text sub imaginea de jos.

Ștergeți conținutul implicit, astfel încât modulul text să fie gol.

Apoi actualizați setările modulului text după cum urmează:

Culoarea stânga a gradientului de fundal: rgba (255,255,255,0)
Culoare dreaptă a gradientului de fundal: #ffffff

Lățime: 100%
Înălțime: 50%

Apoi adăugați următorul CSS personalizat la elementul principal:

position: absolute !important;
top: 50%;

Această poziționare absolută a modulului de text suprapune modulul de text în jumătatea de jos a rândului.

Să verificăm cum arată designul până acum.

Adăugarea unei culori de fundal

Dacă nu doriți un fundal alb, puteți experimenta cu alte culori de fundal, ceea ce creează un design unic de reflexie cu lățime completă.

Pentru aceasta, deschideți setările rândului și actualizați următoarele:

Culoare fundal: # 000000
Lățime: 100%:
Lățime maximă: 100%;
Împletire personalizată: 0 px sus, 0 px jos

Acum, să verificăm rezultatul.

Adăugarea de text la suprapunerea modulului de text

Amintiți-vă, deoarece folosim modulul text ca suprapunere pe imaginea de jos, putem adăuga un conținut dacă dorim.

Pentru aceasta, deschideți setările modulului text și actualizați următoarele:

Conținut: „Reflecția imaginii”
Culoarea textului textului: #ffffff
Dimensiune text text: 30 px
Orientare text: centru

Design final

Iată designul final al reflecției imaginii.

Crearea reflecției textului în Divi

Pentru următorul exemplu, vom crea un design de reflecție a textului. Procesul este foarte asemănător cu modul în care ați crea o reflecție a imaginii. Cu toate acestea, pentru acest exemplu, voi crea o reflecție pentru un rând întreg. Acest lucru va permite utilizarea să reflecte atât textul, cât și imaginea de fundal pentru un design frumos al antetului.

Iată cum să o faceți.

Mai întâi creați o nouă secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul text la rând.

Actualizați conținutul cu cuvântul „Reflecție”.

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

Font text: Oswald
Stil de text text: TT
Culoarea textului textului: # 333333
Dimensiune text text: 10vw
Înălțimea liniei textului: .9em
Orientare text: centru
Marja personalizată: 0 px de jos
Căptușeală personalizată: partea de sus 4vw

Actualizați setările rândului

Acum că modulul nostru text este personalizat, este timpul să actualizăm setările rândului.

Deschideți setările rândului și actualizați următoarele:

Imagine de fundal: introduceți imaginea de fundal
Lățimea jgheabului: 1
Lățime: 100%
Lățime maximă: 100%
Împletire personalizată: 0 px sus, 0 px jos

Iată cum arată designul până acum.

Crearea rândului de text de reflecție

Pentru a crea textul de reflecție pentru acest design, vom reflecta întregul rând, astfel încât să putem include imaginea de fundal în reflexie.

Duplicați rândul și actualizați următoarele:

Axa Y a scalei de transformare: -100%

Acum rândul de mai jos este o imagine oglindită a rândului de mai sus. Acum tot ce trebuie să facem este să adăugăm o suprapunere.

Adăugați o suprapunere de gradient utilizând un modul de text

Pentru a adăuga o suprapunere în gradient la reflecția textului de pe rândul de jos, putem folosi un modul de text așa cum am făcut-o în primul design de reflecție a imaginii de mai sus. La fel ca înainte, putem da modulului de text o poziție absolută astfel încât să umple întregul rând și să stea deasupra celuilalt modul de text cu textul nostru de reflecție. Apoi putem adăuga un fundal de gradient la suprapunerea modulului text.

Continuați și creați un nou modul de text sub modulul de text din rândul de jos.

Deschideți noile setări ale modulului text și ștergeți conținutul, astfel încât modulul text să fie gol.

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

Culoarea din stânga a gradientului de fundal: #ffffff
Culoarea dreaptă a gradientului de fundal: rgba (255.255.255,0.13)
Poziția inițială: 38%

Lățime: 100%
Înălțime: 100%

Apoi adăugați următorul CSS personalizat la elementul principal:

position: absolute !important;
top: 0;

Asta e!

Rezultat final

Verificați rezultatul final.

Iată același design fără imagini de fundal.

Gânduri finale

Reflecțiile pot arăta foarte cool dacă vă faceți timp pentru a le proiecta în mod corect. Din fericire, Divi are instrumentele necesare pentru ca acest lucru să se întâmple. Există și alte metode pentru a face reflecții CSS, dar, din păcate, acestea tind să nu aibă suport de browser încrucișat. Proiectele din acest tutorial vor arăta bine pe toate browserele.

Am constatat că reflexiile arată excelent pe anteturile paginilor și pe prezentarea imaginilor pentru o piesă de portofoliu. Și sunt sigur că există și multe alte implementări.

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

Noroc!