Cum să creați un efect Hover extins pentru aspectele dvs. de rețea în Divi

Adăugarea unui efect de deplasare în expansiune la aspectul grilei este un mod unic de a atrage publicul să interacționeze cu conținutul paginii. Ideea este să începeți cu un afișaj compact al grilei dvs. și apoi să extindeți grila respectivă pentru a aduce conținutul grilei în prim plan atunci când un utilizator trece peste elementul din Divi. Acest lucru este excelent pentru extinderea unei galerii de imagini pentru a afișa o galerie mai mare (cu imagini mai mari) pe hover. Și ați putea extinde, de asemenea, un grup de blurbs pentru a atrage vizitatorii să vă exploreze serviciile.

Să începem.

Trage cu ochiul

Iată o scurtă prezentare a exemplelor de efecte hover în expansiune pe care le voi acoperi în acest tutorial.

Noțiuni de bază

Pentru acest tutorial, tot ce ai nevoie este Divi. Vom folosi, de asemenea, aspectul premade al agenției de design Despre pagină disponibil în cadrul Divi Builder pentru a începe proiectarea.

Pentru a începe, creați o pagină nouă, dați un titlu paginii dvs. și faceți clic pentru a utiliza Divi Builder. Apoi selectați opțiunea pentru A alege un aspect premade. Din fereastra pop-up de încărcare din bibliotecă, selectați pachetul de aspect pentru agenția de design și apoi faceți clic pentru a utiliza pagina Despre agenția de proiectare.

După ce aspectul a fost încărcat pe pagină, publicați-l. Pentru acest tutorial, voi folosi constructorul Divi din partea frontală. Pentru a face acest lucru, tot ce trebuie să faceți este să faceți clic pe butonul „Build On The Front End” din partea de sus a editorului de pagini backend.

Acum sunteți gata să începeți!

Extinderea Blurbs pe Hover

Pentru acest prim exemplu, vă voi arăta cum să extindeți blurbs în a doua secțiune a acestui aspect care afișează serviciile oferite.

Mutați modulele Blurb pentru a ocupa un singur rând

În prezent, secțiunea este alcătuită din două rânduri cu trei coloane, cu un text în fiecare coloană.

Deoarece vom adăuga efectul nostru de plutire la un singur rând, trebuie să mutăm blur-urile din rândul de jos pe rândul de sus. Asigurați-vă că fiecare coloană din rândul de sus are două blurbs.

Apoi ștergeți rândul de jos gol.

Personalizarea modulelor Blurb

Apoi, vom folosi Multiselect pentru a selecta toate cele șase blurbs, astfel încât să putem aplica același design pentru toate simultan. Pentru a face acest lucru, țineți apăsat ctrl (sau cmd) și faceți clic pe fiecare dintre modulele blurb până când sunt selectate toate. Apoi faceți clic pe pictograma de setări de pe unul dintre blurbs pentru a deschide modul Setări element.

Continuați și scoateți conținutul găsit în caseta de conținut și apoi actualizați setările de proiectare după cum urmează:

Dimensiune text titlu 16 px
Lățime: 150 px
Alinierea modulului: centru
Împletire personalizată: 10 px sus, implicit jos, implicit stânga, implicit dreapta

Dacă acordați modulelor o lățime personalizată de 150 px, textul titlului este blocat atunci când extindem rândul.

Salvați modificările și faceți clic din opțiunea multiselectare.

Faceți Blurbul central mai pronunțat

Apoi, deschideți setările modulului blurb pentru blurbul superior în a doua coloană intitulată „Identitate de marcă”. Apoi actualizați următoarele:

Pictogramă Dimensiune font: 120 px
Dimensiune text titlu: 18 px (implicit)

Acest lucru face pur și simplu blurb-ul central mai pronunțat ca piesă centrală din care celelalte blurbs se vor extinde spre exterior.

Personalizarea rândului pentru a se extinde pe Hover

Pentru a extinde modulele noastre la plecare, vom regla dimensiunea și spațiul rândului. Deschideți setările rândului și actualizați următoarele:

Lățime personalizată: 750 px
Lățimea jgheabului: 4
Împletire personalizată (implicit): 150 px stânga, 150 px dreapta
Împletire personalizată (hover): 0 px stânga, 0 px dreapta
Completare personalizată (tabletă): 0 px stânga, 0 px dreapta

Modificarea valorilor de umplere la hover este cea care creează efectul de hover extins. Rândul se va extinde 150 px la dreapta și 150 px la stânga.

Verificați rezultatul final.

Realizarea unei grile circulare

Dacă doriți să creați un aspect circular al grilei care se extinde, este nevoie doar de câteva ajustări minore.

Mai întâi duplicați unul dintre blurbs-urile exterioare și trageți-l deasupra coloanei mari a doua coloană. Apoi, ștergeți textul titlului în blurb mijloc cu pictograma mare.

Pentru a alinia vertical blurbs, puteți adăuga un mic fragment de CSS personalizat. Deschideți setările de rând și adăugați următorul CSS personalizat la elementul principal:

align-items: center;

Acum verificați rezultatul.

Extinderea grilei spre dreapta

De asemenea, puteți alege să extindeți grila la stânga sau la dreapta. Pur și simplu organizați-vă modulele și apoi actualizați umplutura personalizată a rândului. De exemplu, dacă doriți să extindeți conținutul spre dreapta, setați umplutura personalizată implicită la 0 px la stânga și 300 px la dreapta.

Cum arată pe mobil

Iată la ce va reveni designul pe tabletă și smartphone. Nici efectul de hover extins nu va fi activ pe mobil.

Adăugarea unui efect Hover extins la o galerie de imagini

De asemenea, puteți extinde o galerie de imagini cu mouse-ul folosind modulul galerie pentru a prezenta un aspect mai mare al grilei cu imagini mai mari. Pentru aceasta, găsiți secțiunea din partea de jos a Agenției de proiectare Despre titlul aspectului paginii „Munca noastră”.

Apoi adăugați un rând nou cu o coloană sub rândul cu cele trei imagini. În interiorul rândului, adăugați un modul galerie.

Actualizați setările modulului galerie după cum urmează:

Adăugați 4 imagini în galerie cu aceleași dimensiuni, astfel încât să arate la fel pe rând.

Număr imagini: 4
Afișați titlul și legenda: NU
Show Pagination: Nu

Apoi, treceți la fila de proiectare și actualizați următoarele:

Culoare pictogramă zoom: # 353740
Hover Overlay Color: rgba (252,210,29,0.92)

Lățime (desktop): 40%
Lățime (hover): 100%
Lățime (tabletă): 100%

Schimbarea lățimii modulului galeriei pe hover este ceea ce creează efectul de hover extins. Setarea lățimii tabletei la 100% păstrează, de asemenea, efectul de hover de pe mobil.

Iată cum arată până acum.

În continuare, trebuie să ne actualizăm setările de rând pentru a îmbunătăți puțin funcționalitatea și a se potrivi cu aspectul.

Deschideți setările rândului și actualizați următoarele:

Lățime personalizată: 80%
Lățimea jgheabului: 2
Egalizați înălțimile coloanei: DA

Oprirea efectului Hover extins de la împingerea conținutului pe pagină

Dacă doriți ca galeria de imagini să se extindă fără a împinge conținutul paginii în jos, puteți face acest lucru setând o înălțime minimă pe rândul dvs. acest lucru va face un UX mai bun, mai ales cu un buton direct sub galerie.

Accesați setările de rând și adăugați următoarele CSS personalizate în Elementul principal:

min-height: 350px

Apoi adăugați următorul CSS personalizat în Elementul principal al coloanei:

margin: auto;

Egalizarea înălțimilor coloanei activează proprietatea css „display: flex” pe backend care permite „margin: auto” să alinieze conținutul coloanei care să fie centrat vertical în rândul care are acum o înălțime minimă de 350 px. Aflați mai multe despre acest concept în articolul nostru complet despre cum să aliniați vertical conținutul în Divi.

Verificați rezultatul final.

Adăugarea mai multor imagini în galerie

De asemenea, puteți adăuga încă 4 imagini în galerie și puteți crește înălțimea minimă a rândului dvs. la 475 px pentru următorul rezultat.

Cum arată pe mobil

Iată cum va arăta galeria pe mobil. Efectul de extindere nu este activ.

Gânduri finale

Exemplele date sunt doar câteva moduri în care utilizați Divi pentru a crea un efect de hover extins pentru întregul conținut al grilei. Dar sunt sigur că îl puteți folosi pentru nenumărate alte cazuri de utilizare. Puteți extinde module de portofoliu, module de magazin sau chiar module de blog. Așadar, fii creativ și distrează-te explorând singur posibilitățile.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!