Cum să creați o rețea de hover fără sudură cu Divi

Dacă vă place să creați site-uri web cu interacțiunea cu utilizatorii în minte, vă va plăcea acest tutorial de proiectare Divi. Astăzi, vă vom arăta cum să creați o grilă de plutire fără sudură. Designul este inițial simplu și curat. De îndată ce cineva trece pe unul dintre elemente, imaginea de fundal este dezvăluită și stilurile modulului se schimbă odată cu aceasta. Acest lucru are ca rezultat o experiență frumoasă de plutire. În acest tutorial, vă vom ghida pas cu pas prin procesul de creare. Veți putea descărca gratuit fișierul JSON al machetei!

Să ajungem la asta.

previzualizare

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

Desktop

Mobil

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

Să începem să recreăm!

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și aplicați o culoare de fundal alb.

• Culoare fundal: #ffffff

Adăugați rândul # 1

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 modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Frontieră

Și includeți o margine de sus și de jos.

• Lățimea marginii de sus și de jos: 1 px
• Culoare margine sus și jos: # d3d3d3

Setări coloana 1

Plasați cursorul pe fundalul gradientului

În continuare, avem setările coloanei 1. Aplicați un fundal de gradient pe hover.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: # 000000
• Tipul gradientului: liniar
• Poziția inițială: 30%

Plasați cursorul pe imaginea de fundal

Încărcați și o imagine de fundal pe hover.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru

Clasa CSS

Și completați setările coloanei atribuind următoarea clasă CSS în fila avansată:

• Clasa CSS: coloană hover

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

Adăugați conținut H3

Este timpul să adăugați module, începând cu un prim modul de text din coloana 1. Folosiți un conținut H3 la alegere.

Setări text H3

Treceți la fila de proiectare a modulului și modificați setările de text H3 după cum urmează:

• Rubrica 3 Font: Oswald
• Rubrica 3 Greutate font: Ultra ușor
• Titlul 3 Stilul fontului: majuscule
• Rubrica 3 Culoarea textului: # 0a0a0a
• Rubrica 3 Dimensiune text:
  • Desktop: 3vw
  • Tabletă: 7vw
  • Telefon: 14vw
• Rubrica 3 Spațierea literelor: -2 px

Dimensionare

Modificați lățimea pe diferite dimensiuni ale ecranului în setările de dimensionare.

• Lăţime:
  • Desktop: 44%
  • Tabletă: 48%
  • Telefon: 50%

Spațiere

Folosim și niște valori de marjă și umplere personalizate.

• Marja inferioară: 25vh
• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%
• Căptușeală stângă: 7%
• Căptușeală dreaptă: 7%

Frontieră

Apoi, vom adăuga niște margini din dreapta și de jos.

• Lățimea marginii drepte și inferioare: 1 px
• Lățimea marginii drepte și inferioare: 1 px
• Culoare margine dreaptă și inferioară: # d3d3d3

Clasa CSS

Și vom completa setările modulului atribuind următoarea clasă CSS Modulului de text:

• Clasa CSS: hover-title

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

Adauga continut

Adăugați un alt modul de text chiar sub cel anterior, cu un conținut de descriere la alegere.

Setări text

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

• Font text: Karla
• Culoarea textului: #ffffff
• Mărimea textului:
  • Desktop: 0,8vw
  • Tabletă: 2vw
  • Telefon: 3.6vw
• Înălțimea liniei textului: 2.2em

Spațiere

Aplicați și câteva valori de umplere personalizate.

• Căptușeală inferioară: 10%
• Căptușeală stângă: 9%
• Căptușeală dreaptă: 9%

Clasa CSS

Și completați setările modulului utilizând următoarea clasă CSS pentru modul:

• Clasa CSS: hover-text

Adăugați un modul buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Setări buton

Modificați setările butonului modulului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton:
  • Desktop: 1vw
  • Tabletă: 2,5vw
  • Telefon: 4vw
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px

• Buton Font: Karla
• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe cursor pentru buton: Nu

Spațiere

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

• Marja inferioară: 8%
• Marja stângă: 9%
• Marja dreapta: 9%
• Căptușeală inferioară: 5%
• Garnitura dreapta: 20%

Box Shadow

Apoi, aplicați o umbră de cutie.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 2 px
• Culoare umbră: # 000000

Clasa CSS

Și completați setările modulului atribuind butonului următoarea clasă CSS:

• Clasa CSS: buton hover

Reutilizați coloana 1

Ștergeți coloanele 2, 3 și 4

Acum că am construit prima coloană, o putem refolosi. Primul lucru pe care îl vom face este să eliminăm coloanele goale din rândul nostru.

Clonați coloana 1 de trei ori

Vom refolosi coloana 1 clonând-o de trei ori.

Schimbați imaginile de fundal în coloana dublă

Modificați imaginile de fundal ale coloanei duplicate din fiecare coloană duplicată.

Schimbați conținutul duplicat

Împreună cu conținutul modulului din fiecare coloană duplicat.

Borduri de coloană unice

Coloana 1

Va trebui să aplicăm câteva setări unice ale chenarului pentru fiecare coloană, începând cu coloana 1.

• Lățimea marginii drepte:
  • Desktop: 1 px
  • Tabletă: 1 px
  • Telefon: 0px
• Culoare margine dreaptă: # d3d3d3
• Lățimea marginii inferioare:
  • Desktop: 0 px
  • Tabletă: 1 px
  • Telefon: 1 px
• Culoarea chenarului inferior: # d3d3d3

Coloana 2

Apoi, avem coloana 2.

• Lățimea marginii drepte:
  • Desktop: 1 px
  • Tabletă: 0 px
  • Telefon: 0px
• Culoare margine dreaptă: # d3d3d3
• Lățimea marginii inferioare:
  • Desktop: 0 px
  • Tabletă: 1 px
  • Telefon: 1 px
• Culoarea chenarului inferior: # d3d3d3

Coloana 3

Și vom folosi următoarele setări de margine pentru coloana 3:

• Lățimea marginii drepte:
  • Desktop: 1 px
  • Tabletă: 1 px
  • Telefon: 0px
• Culoare margine dreaptă: # d3d3d3
• Lățimea marginii inferioare:
  • Desktop: 0 px
  • Tabletă: 0 px
  • Telefon: 1 px
• Culoarea chenarului inferior: # d3d3d3

Adăugați cod CSS personalizat la Setările paginii

Deschideți Setări pagină

Acum, că avem întregul design în poziție, singurul lucru care rămâne de făcut este să adăugăm un cod CSS personalizat pentru a ajuta la declanșarea efectelor de plutire asupra elementelor copil (modulele). Pentru aceasta, deschideți setările paginii.

Adăugați cod CSS

Și copiați lipiți următoarele linii de cod CSS:

.hover-column:hover .hover-title {
background-color: #000000;
}

.hover-column:hover .hover-title h3 {
color: white !important;
}

.hover-button {
color: black;
}

.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}

.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}

.hover-column:hover::before {
opacity: 0;
}

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un design frumos. Mai exact, am creat o grilă de coloane care începe de la simplu și curat. De îndată ce vizitatorii trec pe un anumit element din grilă, imaginea de fundal este dezvăluită și stilurile modulului se schimbă. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, nu ezitați să 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.