Doriți să creați o grilă cu Divi a fi fluid la hover?
Dacă vă place să construiți site-uri web având în vedere interacțiunea cu utilizatorul, vă va plăcea acest tutorial.
Astăzi vă vom arăta cum să creați o grilă transparentă a cărei imagine de fundal este dezvăluită de îndată ce cineva trece peste unul dintre elemente. Designul este inițial simplu și curat. Acest lucru are ca rezultat o experiență plăcută de plutire.
În acest tutorial, vă vom ghida prin procesul de creare pas cu pas.
Să mergem.
studiu
Înainte de a vă scufunda în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Birou
Mobil
Să începem procesul de creare în Divi
Adăugați o nouă secțiune
Culoare de fundal
Adăugați o nouă secțiune la pagina la care lucrați.
Mai întâi deschideți setările secțiunii și aplicați o culoare de fundal albă.
- Fundal: #ffffff
Adăugați linia #1
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările liniei, accesați fila Amenajări, trageți în jos opțiunea dimensionarea și modificați parametrii de dimensionare după cum urmează:
- Utilizați lățimea jgheab personalizată: DA
- Jgheab cu: 1
- Latime: 100%
- Latime maxima: 100%
spaţierea
Apoi trageți în jos opțiunea spațiere și modificați următoarele setări:
- Umplutură (sus și jos): 0px
frontieră
În opțiunea Border, faceți și următoarele modificări:
- Stiluri de chenar (sus și jos): 1px
- Culoarea chenarului (sus și jos): #d3d3d3
Setări pentru coloana 1
Plasați pe fundal
Apoi, haideți să personalizăm setările pentru coloana 1. Aplicați o umplere cu gradient la hover.
- Culoare 1: rgba(255,255,255,0)
- Culoare 2: #000000
- Tip de gradient: Linear
- Culoare poziție 1: 30%
- Plasați gradient deasupra imaginii cu gradient: DA
Imagine de fundal la trecerea cursorului
De asemenea, încărcați o imagine de fundal care va apărea la trecerea cursorului.
- Dimensiunea imaginii de fundal: Coperta
- Poziția imaginii de fundal: Centru
CSS
Și completați setările coloanei atribuind următoarea clasă CSS în filă Avansat :
- Clasa CSS: hover-coloană
Adăugați modulul Text #1 la coloana 1
Adăugați text cu dimensiunea H3 (titlu 3)
Este timpul să adăugați module, începând cu un prim modul Text în coloana 1. Introduceți un text la alegere.
Setări text H3
Apoi treceți la fila Amenajări a modulului și modificați parametrii textului H3 după cum urmează:
- Font: Oswald
- Greutatea fontului Greutatea fontului: ultra ușoară
- Titlul 3 Stil font: TT
- Culoare text: #0a0a0a
- Titlul 3 Dimensiunea textului:
- Desktop: 3vw
- Tabletă: 7vw
- Telefon: 14vw
- Titlul 3 Spațiere dintre litere: -2px
dimensionarea
Modificați lățimea pe diferite dimensiuni de ecran în setările de dimensionare.
- Lățime:
- Desktop: 44%
- Tablete: 48%
- Telefon: 50%
spaţierea
Să modificăm și următorii parametri în opțiune spațiere.
- Marja (jos): 25vh
- Umplutură (sus și jos): 5%
- Umplutură (stânga și dreapta): 4%
frontieră
În continuare, vom adăuga chenare în dreapta și dedesubt.
- Lățimea chenarului (dreapta și jos): 1px
- Culoarea chenarului (dreapta și jos): #d3d3d3
CSS
Și vom completa, de asemenea, setările modulului prin alocarea următoarei clase CSS la modulul Text:
- Clasa CSS: hover-title
Adăugați modulul Text #2 la coloana 1
Adăugați conținut
Adăugați un alt modul Text chiar sub cel anterior cu ajutorul cuprins descrierea la alegere.
Setări text
Comutați la filă Amenajări a modulului și modificați parametrii textului în consecință:
- Font text: Karla
- Culoare text: #ffffff
- Mărimea :
- Desktop: 0,8 vw
- Tabletă: 2vw
- Telefon: 3.6vw
- Înălțimea liniei: 2,2 em
spaţierea
Aplicați, de asemenea, valori personalizate ale marjelor.
- Captuseala (partea de jos): 10%
- Umplutură (stânga și dreapta): 9%
CSS
Și completați parametrii modulului folosind următoarea clasă CSS pentru modul:
- Clasa CSS: hover-text
Adăugați un modul „Button” la coloana 1
Adăugați o descriere
Următorul și ultimul modul de care avem nevoie este un modul Buton. Introduceți o descriere la alegere.
Setări buton
Modificați parametrii modulului după cum urmează:
- Utilizați stiluri personalizate pentru buton: DA
- Dimensiunea textului butonului:
- Desktop: 1vw
- Tabletă: 2,5 vw
- Telefon: 4vw
- Lățimea chenarului butonului: 0px
- Raza chenarului: 0px
- Font pentru buton: Karla
- Afișați pictograma butonului: DA
- Plasarea pictogramei butonului: dreapta
- Afișați doar pictograma activată pentru buton: NU
spaţierea
Adăugați, de asemenea, valori de spațiere personalizate.
- Marja (de jos): 8%
- Marja (stânga și dreapta): 9%
- Captuseala (partea de jos): 5%
- Captuseala (dreapta): 20%
umbra cutie
Apoi, aplicați o umbră de casetă.
- Umbră casetă Poziție orizontală: 0px
- Poziție verticală a umbrei casetei: 2px
- Culoare umbră: #000000
CSS
Și completați setările modulului atribuind următoarea clasă CSS butonului:
- Clasa CSS: hover-buton
Reutilizați coloana 1
Ștergeți coloanele 2, 3 și 4
Acum că am construit prima coloană, o putem reutiliza. Primul lucru pe care îl vom face este să eliminați coloanele goale din rândul nostru.
Clonează coloana 1 de trei ori
Vom reutiliza coloana 1 clonând-o de trei ori.
Schimbați imaginile de fundal la trecerea cursorului pe coloanele duplicat
Apoi modificați imaginile de fundal ale coloanei duplicate în fiecare coloană duplicată.
Editați conținutul duplicat
De asemenea, schimbați cuprins a modulului în fiecare coloană duplicat.
Chenarele unice ale coloanei
Coloana 1
Va trebui să aplicăm setări unice de chenar pentru fiecare coloană, începând cu coloana 1.
- Lățimea chenarului (dreapta):
- Desktop: 1px
- Tabletă: 1px
- Telefon: 0px
- Culoare (dreapta): #d3d3d3
- Lățimea chenarului (jos):
- Desktop: 0px
- Tabletă: 1px
- Telefon: 1px
- Culoare chenar (jos): #d3d3d3
Coloana 2
În continuare avem coloana 2.
Lățimea chenarului (dreapta):
- Desktop: 1px
- Tabletă: 1px
- Telefon: 0px
Culoare (dreapta): #d3d3d3Lățimea chenarului (jos):
- Desktop: 0px
- Tabletă: 1px
- Telefon: 1px
Culoare chenar (jos): #d3d3d3
Coloana 3
Și vom folosi următoarele setări de chenar pentru coloana 3:
- Lățimea chenarului (dreapta):
- Desktop: 1px
- Tabletă: 1px
- Telefon: 0px
- Culoare (dreapta): #d3d3d3
- Lățimea chenarului (jos):
- Desktop: 0px
- Tabletă: 1px
- Telefon: 1px
- Culoare chenar (jos): #d3d3d3
Adăugați CSS personalizat la setările paginii
Deschideți setările paginii
Acum că întregul design este la locul său, tot ce rămâne este să adăugați un cod CSS personalizat pentru a ajuta la declanșarea efectelor de hover asupra modulelor. Pentru a face acest lucru, deschideți setările paginii.
Citiți și ghidul nostru despre: Divi: Cum se creează un subsol lipicios cu efect „Reveal”.
Adăugați codul CSS
Și copiați și lipiți următoarele rânduri 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;
}
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Birou
Mobil
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să creați un design de hover frumos.
Mai exact, am creat o grilă de coloane care începe simplu și curat. De îndată ce vizitatori plasați cursorul peste un anumit element de grilă, imaginea de fundal este dezvăluită și stilurile modulelor se schimbă.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
