Decorarea paginii dvs. cu forme transformante pe Hover cu Divi

Crearea designului interactiv este ceva care ajută imediat să ridice aspectul oricărui site web. Cu opțiunile încorporate ale Divi, puteți lua multe rânduri și puteți crea efecte care sunt cu adevărat unice pentru site-ul dvs. web.

În această postare, vă vom arăta cum să vă decorați pagina cu forme transformante pe hover. Rezultatul pe care îl vom obține se concentrează pe experiența desktop, dar păstrează un design îngrijit și ușor de utilizat și pe dimensiuni mai mici de ecran.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra celor două exemple pe care le vom recrea de la zero.

Exemplul nr. 1

Exemplul nr. 2

Descărcați suprapunerile de imagine în formă

Pentru a vă pune mâinile pe suprapunerile de imagini în formă care sunt utilizate în acest tutorial, va trebui 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!

Să începem să creăm!

Adăugați o secțiune nouă

Culoare de fundal

Stary prin crearea unei pagini noi sau deschiderea unei pagini existente. Adăugați o secțiune obișnuită, deschideți setările secțiunii și adăugați o culoare de fundal complet neagră.

• Culoare fundal: # 000000

Revărsare

Pentru a tăia suprapunerea imaginii în formă mai târziu în acest tutorial, ne vom asigura că nimic nu depășește containerul secțiunii adăugând o singură linie de cod CSS la elementul principal al secțiunii.

overflow: hidden;

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

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

Adăugați modulul imagine la rând

Încărcați suprapunerea imaginilor în formă

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul de imagine. Încărcați prima imagine suprapusă pe care o puteți găsi în folderul pe care l-ați descărcat. Puteți găsi mai multe suprapuneri de imagini în formă accesând acest post, descărcând fișierele, deschizând fișierul Illustrator și personalizându-le în funcție de nevoile dvs. Cu toate acestea, dacă doriți doar să recreați exemplele care au fost partajate în previzualizarea acestei postări, va face folderul pe care l-ați descărcat la începutul acestei postări.

Culoare de fundal implicită

Accesați setările de fundal ale modulului de imagine și adăugați următoarea culoare implicită de fundal:

• Culoare fundal: # 6a00ff

Plasați cursorul pe culoarea de fundal

Schimbați culoarea de fundal la trecerea cu mouse-ul folosind următorul cod de culoare:

• Culoare fundal: # ffa216

Fundal de gradient

Continuați adăugând un fundal de gradient și la modulul de imagine.

• Culoare 1: # ff2841
• Culoare 2: rgba (255,255,255,0)
• Direcția gradientului: 168 grade
• Poziție finală: 68%

Dimensionare

Treceți la fila de proiectare și activați opțiunea „Forțează lățimea completă”.

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

Spațiere

De asemenea, ascundem o parte din suprapunerea imaginii în formă prin adăugarea unor margini superioare negative la setările de spațiere. Veți observa că modulul nu va depăși containerul secțiunii datorită acelei linii de cod CSS pe care le-am adăugat la secțiune la începutul tutorialului.

• Marja superioară: -22vw (desktop și tabletă), 0vw (telefon)

Rotire implicită a transformării

Acum putem începe să transformăm modulul! Adăugați următoarele setări implicite de rotire a transformării la modulul imagine:

• Centru: 359 grade

Plasați cursorul pe rotire

Și schimbați aceste valori la plecare pentru a crea o formă transformatoare.

• Stânga: 250 grade
• Centru: 320 grade

ID CSS

Când deplasați modulul de imagine, suprapunerea imaginii în formă va suprapune toate celelalte module care sunt deasupra acestuia. Pentru a evita acest lucru, va trebui să modificăm indexul z al modulului la trecerea cu mouse-ul mai târziu la postare. Pentru a realiza acest lucru, va trebui să adăugați o clasă CSS personalizată la modulul de imagine.

Tranziții

Nu în ultimul rând, creăm o tranziție lină prin creșterea duratei tranziției în fila avansată.

• Durata tranziției: 950 ms

Adăugați modulul text # 1 la rând

Adăugați conținut H2

Următorul modul de care avem nevoie este un modul de text. Adăugați conținut H2 la alegere.

Setări text H2

Apoi, accesați fila de proiectare și modificați setările de text H2.

• Rubrica 2 Font: Didact Gothic
• Titlul 2 Greutate font: îndrăzneț
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: #ffffff
• Rubrica 2 Dimensiune text: 7vw
• Titlul 2 Înălțimea liniei: 0,9em

Spațiere

Creați o suprapunere între acest modul și modulul de imagine utilizând câteva valori de marjă personalizate.

• Marja superioară: -68vw
• Marja inferioară: 8vw
• Marja stângă: 29vw
• Marja dreaptă: 29vw

Adăugați modulul de text nr. 2 la rând

Adauga continut

Adăugați un alt modul de text chiar sub cel anterior și introduceți un conținut de paragraf la alegere.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Culoarea textului: #ffffff
• Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Înălțimea liniei textului: 1,8em
• Orientare text: centru

Spațiere

Adăugați și câteva valori de marjă personalizate.

• Marja inferioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Marja stângă: 30vw (desktop), 10vw (tabletă și telefon)
• Marja dreaptă: 30vw (desktop), 10vw (tabletă și telefon)

Adăugați modul divizor la rând

Vizibilitate

Următorul și ultimul modul de care avem nevoie 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: #ffffff

Dimensionare

Modificați și valorile de dimensionare.

• Greutatea divizorului: 7 px
• Lățime: 15%
• Alinierea modulului: centru

Spațiere

Și adăugați niște umpluturi personalizate de fund.

• Marja inferioară: 5vw

Clonați întreaga secțiune

Trecem la al doilea exemplu! Clonați secțiunea pe care tocmai ați finalizat-o.

Schimbați modulul de imagine

Încărcați o nouă suprapunere de imagine în formă

Trebuie să facem câteva modificări, începând cu suprapunerea imaginii în formă. Continuați și încărcați cea de-a doua imagine suprapusă pe care o puteți găsi în folderul pe care l-ați descărcat la începutul acestei postări.

Schimbați culoarea de fundal implicită

Apoi, accesați setările de fundal ale modulului de imagine și modificați culoarea de fundal implicită.

• Culoare fundal: # 2d007c

Schimbați culoarea de fundal a cursorului

Schimbați și culoarea de fundal a cursorului.

• Culoare fundal: # 008089

Schimbați fundalul de gradient

Împreună cu fundalul de gradient.

• Culoare 1: # 0c0c0c
• Culoare 2: rgba (255,255,255,0)
• Direcția gradientului: 168 grade
• Poziție finală: 68%

Modificați setările implicite de rotire a transformării

De asemenea, schimbăm efectul de transformare. Accesați setările de transformare și modificați valorile implicite de rotire a transformării.

• Stânga: 270 grade
• Centru: 359 grade

Modificați setările de rotire a transformării cu mouse-ul

Modificați aceleași valori la cursor.

• Stânga: 192 grade
• Centru: 280 grade
• Dreapta: 15 grade

Adăugați cod personalizat în pagină

Deschideți Setări pagină

Acum, ultima parte a acestui post se asigură că forma de transformare rămâne sub toate celelalte module atunci când este planată. Deschideți setările paginii.

Adăugați cod CSS

Apoi accesați fila avansată și adăugați următorul cod CSS.

.hover-state:hover {
z-index: -99; }

Folosim clasa CSS pe care am atribuit-o secțiunilor de-a lungul tutorialului.

previzualizare

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

Exemplul nr. 1

Exemplul nr. 2

Gânduri finale

În această postare, v-am arătat cum să deveniți creativi cu opțiunile de transformare ale lui Divi. Mai exact, am folosit module de imagine cu suprapuneri de imagine în formă pentru a crea o formă de fundal transformantă. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!