Deoarece noile opțiuni de dimensionare ale Divi au fost lansate, există câteva tutoriale care vă arată cum să creați dezvăluiri de tip hover. În aceste tutoriale, cuprins mascat a fost plasat vertical. Cu toate acestea, în unele cazuri, este posibil să doriți să creați o dezvăluire orizontală. În acest tutorial, vă vom arăta cum să dezvăluiți imagini folosind grilele de trecere și opțiunile de overflow. Divi. Efectuarea acestei lucrări necesită o abordare puțin diferită. Vom folosi un rând cu o singură coloană și vom plasa toate modulele unul sub celălalt. La hover, vom transforma coloana într-o grilă orizontală. De asemenea, puteți descărca fișierul JSON gratuit!
Să mergem.
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra modului în care arată pe diferite dimensiuni de ecran.
Să începem să recreăm!
Adăugați o secțiune nouă
Începeți prin a adăuga o nouă secțiune regulată la pagina pe care lucrați.
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un rând nou folosind următoarea structură a coloanelor:
Fundal gradient implicit
Fără a adăuga încă module, deschideți setările rândului și adăugați următorul fundal cu gradient:
- Culoare 1: #b1ffc4
- Culoarea 2: #ffffff
- Tipul gradientului: Radial
- Direcția radială: Centru
- Poziția de pornire: 28%
- Poziția finală: 28%
Plasați cursorul peste fundal degradat
Schimbați fundalul gradient la trecerea cursorului.
- Culoare 1: #b1ffc4
- Culoarea 2: #ffffff
- Tipul gradientului: Radial
- Direcția radială: stânga
- Poziția de pornire: 5%
- Poziția finală: 5%
spaţierea
Comutați la setările de spațiere și apoi modificați valorile de umplutură și margine.
- Top placă: 0px
- Garnitura de jos: 0px
- Marja superioară: 50px
- Marja de jos: 50px
Chenar implicit
Adăugați o rază a marginii de 50 de pixeli în colțurile din dreapta sus și din dreapta jos.
Hover Border
Aduceți colțurile înapoi la „0px” în timp ce treceți cu mouse-ul.
Umbra implicită
Apoi adăugați o umbră subtilă de casetă folosind următoarele setări:
- Cutie Blur Force Blur: 50px
- Culoare umbră: rgba (0,0,0,0.09)
Hover Box Shadow
Îndepărtați umbra casetei la hover schimbând culoarea umbrei într-o culoare complet transparentă.
- Culoare umbră: rgba (0,0,0,0)
Adăugați un modul text într-o coloană
Adăugați conținut H2
Este timpul să începeți să adăugați module, începând cu un modul text. Introduceți cuprins H2 la alegere.
Setări text H2
Comutați la fila Design și modificați setările de text H2 în consecință:
- Titlul 2 Font: Acme
- Titlul 2 Stilul fontului: subliniat
- Titlul 2 Culoare subliniere: #00ff3f
- Titlul 2 Culoarea textului: #000000
- Titlul 2 Dimensiunea textului: 3vw
spaţierea
Apoi adăugați valori de umplere personalizate.
- Cea mai bună umplutură: 6vw
- Garnitura de jos: 7vw
- Stingerea stânga: 2vw
Adăugați modulul de imagine în coloană
Incarca imaginea
Al doilea modul de care avem nevoie în această coloană este un modul de imagine. Încărcați o imagine peisaj la alegere.
Caseta de lumina
Activați opțiunea lightbox în setările linkului de mai jos.
- Deschide în vizualizator: da
dimensionarea
Și forțați lățimea completă a imaginii în setările de dimensionare. Acest lucru va asigura că imaginea rămâne receptivă la toate dimensiunile ecranului.
- Lățime completă de forță: Da
Clonează modulul de imagine de două ori
După ce ați finalizat primul modul de imagine, îl puteți copia de două ori.
Schimbă imagini
Schimbați imaginile în ambele duplicate. Asigurați-vă că imaginile pe care le încărcați au aceeași dimensiune ca prima imagine.
Adăugați efect de trecere la rând
dimensionarea
Acum că am finalizat setările de bază pentru rând și modul, este timpul să creăm efectul de hover! Vom începe prin a schimba înălțimea și lățimea liniei și a ascunde debordările. Deschideți setările Dimensiunea liniilor și efectuați următoarele modificări:
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Lățime: 20%
- Lățimea maximă: 100%
- Înălțime: 15.9vw
situându-se
Reduceți lățimea la „100%” în timp ce treceți cu mouse-ul. Acest lucru va permite imaginilor să se afișeze odată ce rândul este trecut cu mouse-ul.
- Lățime: 100%
vizibilitate
Treceți la următoarea filă avansată și ascundeți depășirile. Acest lucru va asigura că imaginile sunt ascunse înainte de vizitatori nu treceți cu mouse-ul (desktop) și nu faceți clic (tabletă/mobil) pe modulul de text.
- Debord de orizontală: ascuns
- Debord vertical: ascuns
tranziţii
De asemenea, modificăm durata tranziției în setările de tranziție.
- Durata tranziției: 0ms
Element de hover pentru coloana principală
Pentru a crea o grilă la trecerea cu mouse-ul, vom deschide setările coloanei, vom merge la fila Opțiuni avansate și vom plasa următoarele linii de cod CSS în elementul principal de hover:
display:grilă; grid-template-coloane: 20% 25% 25% 25%; grid-gap: 10px;
Clonați linia de două ori
După ce ați completat prima linie, o puteți clona de câte ori doriți. Pentru acest exemplu de design particular, clonăm linia de două ori.
Schimbați fundalul gradient al rândului #1
Schimbați culoarea primului gradient la fundalul gradientului celui de-al doilea rând.
- Culoare 1: #ffdc96
Schimbați fundalul gradient al rândului #2
Faceți același lucru pentru al treilea rând.
- Culoare 1: #b7c7ff
Schimbați copia modulului de text și culoarea sublinierii celor două duplicate
Continuați prin schimbarea culorii de subliniere a duplicatelor modulului de text cu copia și ați terminat!
- Culoarea sublinierii #1: #ffaa00
- Culoarea sublinierii #2: #0037ff
Ultimele gânduri
În acest tutorial, v-am arătat cum să afișați imagini în grile de trecere orizontală folosind opțiunile de overflow. Divi. Imaginile au fost dezvăluite când au trecut cu mouse-ul pe desktop și au făcut clic pe tabletă/telefon. Deși am dezvăluit imagini, puteți dezvălui cuprins la alegere prin modificarea parametrilor din generator. Sperăm că acest tutorial vă va inspira să vă creați propriile modele alternative de grilă de hover! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!
