3 efecte fără întrerupere de transformare pe care le puteți aplica imaginilor dvs. cu Divi

Căutați o modalitate interesantă de a prezenta imagini pe următorul dvs. site Divi? Continuați să citiți, pentru că în această postare vom gestiona 3 efecte de transformare a imaginii care vă vor ajuta să ridicați aspectul general al paginii dvs. Veți putea urmări procesul de recreere de la A la Z a trei exemple diferite și chiar le puteți descărca pentru utilizare imediată. Scopul principal al acestui tutorial vă inspiră să combinați noile opțiuni de transformare ale Divi cu opțiunile deja existente pentru a crea un design web frumos.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului tuturor celor trei exemple pe diferite dimensiuni de ecran.

Desktop

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Mobil

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Descărcați Efectele de transformare a imaginii gratuit

Abonați-vă la canalul nostru Youtube

Pentru a pune mâinile pe efectele gratuite de transformare a imaginii, va trebui mai întâi să le 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!

Pași generali

Adăugați o secțiune nouă

Spațiere

Înainte de a recrea fiecare dintre exemplele în mod individual, vom parcurge câțiva pași generali. Adăugați o nouă secțiune obișnuită pe pagina dvs. utilizând următoarele marje și valori de umplere:

• Marja superioară: 200 px
• Marja inferioară: 200 px
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Coloana 2 Culoare fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal la a doua coloană.

• Coloana 2 Culoare fundal: #efefef

Dimensionare

Accesați setările de dimensionare următoare și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Adăugați următoarele valori de umplere personalizate în continuare:

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 2 Căptușeală superioară: 10vw
• Coloana 2 Căptușeală inferioară: 10vw
• Coloana 2 Căptușeala stângă: 5vw
• Coloana 2 Căptușeala dreaptă: 5vw

Adăugați modulul de text nr. 1 în coloana 2

Adăugați conținut H2

Este timpul să începeți adăugarea diferitelor module în coloana 2, începând cu un modul de text. Introduceți un conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2.

• Titlul 2 Font: Times New Roman
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Culoarea textului: # 0f47ff
• Rubrica 2 Dimensiune text: 3,5vw

Adăugați modulul divizor în coloana 2

Vizibilitate

Următorul modul de care avem nevoie în a doua coloană este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, accesați fila de proiectare și schimbați culoarea separatorului.

• Culoare: # ff961e

Dimensionare

Modificați și valorile de dimensionare.

• Greutatea divizorului: 1 px
• Lățime: 20%
• Alinierea modulului: stânga
• Înălțime: 0px

Spațiere

Și creați un spațiu pentru modul folosind următoarele valori ale marginilor de sus și de jos:

• Marja superioară: 1vw
• Marja inferioară: 1vw

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Treceți la modulul următor, care este un alt modul de text. Introduceți un conținut de paragraf la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Dimensiune text: 0,7vw (Desktop), 1,7vw (tabletă), 2,5vw (telefon)
• Înălțimea liniei de text: 1,5vw (desktop), 2,5vw (tabletă), 3,5vw (telefon)
• Orientare text: justificați

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 61% (desktop), 80% (tabletă și telefon)

Spațiere

Și adăugați niște margini personalizate de sus și de jos.

• Marja superioară: 2vw
• Marja inferioară: 2vw

Adăugați modulul de text nr. 3 în coloana 3

Adauga continut

La următorul și ultimul modul avem nevoie în a doua coloană, care este un alt modul de text. Vom folosi acest modul ca buton adăugând conținut de paragraf.

Adăugați un link

Continuați adăugând un link către CTA.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Times New Roman
• Culoarea textului: # ff961e
• Dimensiune text: 1,5vw (desktop), 2,5vw (tabletă), 3,5vw (telefon)

Dimensionare

Modificați lățimea modulului și în setările de dimensionare.

• Lățime: 48%

Spațiere

Apoi, accesați setările de spațiere și adăugați o umplutură personalizată.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw

Frontieră

Finalizați modulul de text adăugând o margine de jos cu următoarele setări:

• Lățimea marginii inferioare: 1 px
• Culoarea chenarului inferior: # 0f47ff

Clonați secțiunea de două ori

După ce ați terminat de personalizat secțiunea și toate elementele din ea, puteți continua și clona de două ori. Vom folosi fiecare dintre secțiunile de pe pagina noastră pentru a recrea cele trei exemple care au fost distribuite la începutul acestei postări.

Recreați exemplul nr. 1

Adăugați modulul de imagine în coloana 1

Lăsați caseta de imagine goală

Să începem cu primul exemplu! Adăugați un nou modul de imagine în prima coloană și asigurați-vă că lăsați caseta de imagine goală.

Culoare de fundal implicită

Schimbați culoarea de fundal a modulului de imagine:

• Culoare fundal: # 0f47ff

Plasați cursorul pe culoarea de fundal

Modificați culoarea de fundal la cursor.

• Culoare fundal: rgba (255,150,30,0,65)

Imagine de fundal

În loc să încărcați o imagine, vom adăuga una în fundal, însoțită de următoarele setări:

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: lumină moale

Spațiere

Treceți la setările de spațiere ale modulului și adăugați câteva valori de umplere personalizate:

• Arată spațiul sub imagine: Nu
• Căptușeală superioară: 22vw
• Căptușeală inferioară: 22vw

Rotire implicită a traducerii

De asemenea, vom roti imaginea la plecare. Asigurați-vă că imaginea apare în starea inițială înainte de a plasa cu mouse-ul adăugând „0deg” la opțiunea corectă.

• Dreapta: 0 grade

Plasați cursorul pe Rotire

Schimbați această valoare la cursor:

• Dreapta: 180 grade

Tranziții

Pentru a crea un efect imediat, vom elimina durata tranziției:

• Durata tranziției: 0 ms

Recreați exemplul nr. 2

Adăugați modulul de imagine în coloana 1

Lăsați caseta de imagine goală

Trecem la al doilea exemplu! Din nou, asigurați-vă că lăsați caseta de imagine goală.

Culoare de fundal implicită

Accesați setările de fundal și adăugați următoarea culoare de fundal (complet transparentă):

• Culoare fundal: rgba (255,255,255,0)

Plasați cursorul pe culoarea de fundal

Modificați această culoare la plecare:

• Culoare fundal: rgba (0,0,0,0.65)

Imagine de fundal

Din nou, folosim o imagine de fundal în loc să o încărcăm pe modul în sine. Combinați imaginea de fundal cu următoarele setări:

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: lumină moale

Spațiere

Apoi, accesați setările de spațiere și modificați umplutura de sus și de jos:

• Arată spațiul sub imagine: Nu
• Căptușeală superioară: 22vw
• Căptușeală inferioară: 22vw

Scala de transformare implicită

Asigurați-vă că valorile implicite ale scalei de transformare rămân „100%”.

• Dreapta: 100%
• Partea de jos: 100%

Scala de transformare a cursorului

Și schimbați aceste valori la plecare pentru a crea un efect de scalare.

• Dreapta: 120%
• Jos: 120%

Traducere implicită Transform

În mod implicit, păstrăm „0px” pentru opțiunea de jos din setările de traducere a transformării.

• Partea de jos: 0 px

Treceți cu mouse-ul pe Transformă Traducere

Modificați această valoare la plecare pentru a repoziționa elementul.

• Jos: 9vw

Tranziții

De asemenea, creăm o tranziție puțin mai rapidă modificând durata tranziției în fila avansată:

• Durata tranziției: 200ms

Recreați exemplul nr. 3

Schimbați structura coloanei

Trecem la următorul și ultimul exemplu! Începeți prin modificarea structurii coloanei rândului.

Adăugați modulul de imagine în coloana 1

Încărcați imaginea 1: 1

Apoi, adăugați un modul de imagine în prima coloană. Spre deosebire de primele două exemple, vom încărca o imagine cu un raport 1: 1 (aceeași lățime și înălțime).

Dimensionare

Treceți la fila de proiectare și forțați imaginea să fie lățime completă în setările de dimensionare.

• Forțează lățimea completă: Da

Spațiere

Eliminați spațiul de sub imagine din setările de spațiu de mai jos.

• Arată spațiul sub imagine: Nu

Bordură implicită

Apoi, accesați setările de margine și adăugați „500vw” la fiecare colț. Ne asigurăm că această valoare este suficient de mare pentru a acoperi toate dimensiunile ecranului.

Plasați mouse-ul peste frontieră

Eliminați colțurile rotunjite pe care le-ați adăugat în cursa plutirii.

Filtre implicite

Apoi, accesați setările filtrelor și asigurați-vă că aceste valori implicite sunt adăugate:

• Saturație: 100%
• Luminozitate: 46%
• Opacitate: 3%

Treceți cu mouse-ul peste filtre

Activați opțiunea de deplasare pe fiecare dintre setările modificate și utilizați următoarele valori:

• Saturație: 300%
• Luminozitate: 46%
• Opacitate: 100%

Scala de transformare implicită

Apoi, accesați opțiunile de transformare și modificați opțiunile implicite ale scalei de transformare:

• Dreapta: 68%
• Partea de jos: 68%

Scala de transformare a cursorului

Schimbați aceste valori la plecare.

• Dreapta: 130%
• Partea de jos: 130%

Traducere implicită Transform

Treceți la valorile de traducere de transformare și asigurați-vă că valorile implicite de traducere de transformare rămân aceleași:

• Dreapta: 0 px
• Partea de jos: 0 px

Treceți cu mouse-ul pe Transformă Traducere

Modificați valorile la cursor.

• Dreapta: 1vw
• Partea de jos: 8vw

Tranziții

Nu în ultimul rând, măriți durata tranziției în fila avansată pentru a crea o tranziție lină și ați terminat!

• Durata tranziției: 600 ms

previzualizare

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

Desktop

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Mobil

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Gânduri finale

În această postare, v-am arătat cum să deveniți creativi cu modulul de imagine și opțiunile de deplasare și transformare ale lui Divi. Efectele pe care le-am recreat sunt doar câteva dintre multele posibilități frumoase de acolo. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.