Cum să dezvăluie conținut cu un efect Shover Hover în Divi

Dezvăluirea conținutului modulului pe hover poate avea unele beneficii utile. 1) Poate fi o modalitate excelentă de a avea inițial un design mai compact sau elegant al paginii dvs. web. 2) Economisește spațiu. 3) Poate atrage utilizatorii să interacționeze cu pagina dvs. 4) Arată tare :). Ideea de bază este de a afișa doar o parte din conținutul modulului (cum ar fi un teaser), ceea ce îl face atrăgător pentru vizitatori să se deplaseze pentru a vedea mai multe. Odată ce se deplasează deasupra modulului, întregul conținut este dezvăluit cu un efect de plutire netedă care se deschide și se închide ca un obturator.

În acest tutorial, îți voi arăta cum poți dezvălui conținutul modulului cu un efect de plutire în stilul declanșator folosind constructorul Divi.

Trage cu ochiul

Iată o privire rapidă asupra a ceea ce vom construi împreună.

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Pentru a începe, creați o pagină nouă, acordați-vă paginii un titlu și apoi implementați Divi Builder pentru a construi pe front-end. Selectați opțiunea „Alegeți un aspect premade”. Apoi, din fereastra pop-up Divi Library, selectați pachetul Layout Day Spa și faceți clic pentru a utiliza aspectul paginii de destinație.

Odată ce aspectul este încărcat pe pagină, sunteți gata să începeți!

Adăugarea divizoarelor în partea de sus și de jos a Blurb

Derulați pagina în jos până la secțiunea intitulată „Experiențe spa de lux” cu cele patru blurbs. Vom folosi rândul cu cele patru blurbs pentru a iniția designul.

Adăugarea primului divizor

Primul nostru pas este să adăugăm separatoare deasupra și dedesubtul modulului blurb pentru a ascunde conținutul nostru blurb în spate. Vă puteți gândi la aceste separatoare ca la obloane ale unei ferestre care se vor deschide și se vor închide în timpul zborului.

Adăugați un modul divizor deasupra textului din prima coloană și actualizați următoarele:

Culoarea fundalului: #ffffff
Culoare (divizor): #ffffff
Greutatea divizorului: 100 px
Înălțime: 100 px
Marjă personalizată: 0 px de jos

Fundalul alb se potrivește cu fundalul secțiunii noastre, deoarece nu vrem să-l vedem. Asigurați-vă că greutatea și înălțimea separatorului sunt aceleași.

Adăugarea celui de-al doilea divizor (portocaliu)

Apoi, creați un alt divizor direct sub divizorul pe care tocmai l-ați creat și actualizați următoarele:

Culoare: # ff7a6b
Greutatea divizorului: 2 px
Înălțime: 2 px
Marjă personalizată: 0 px de jos

Apoi, treceți la fila conținut și dați divizorului o etichetă de administrator „divizor portocaliu”. Acest lucru va ajuta să distingem divizorul de divizorul anterior (alb) atunci când folosim modul wireframe pentru a copia și lipi divizorul în celelalte coloane.

Salvează-ți pagina.

Copierea și lipirea divizoarelor din jurul blurbs

Acum suntem gata să copiem și să lipim separatoarele noastre deasupra și dedesubtul fiecărei coloane din fiecare dintre coloane. Pentru a face acest proces puțin mai ușor, implementați modul wireframe deschizând meniul de setări din partea de jos a paginii și făcând clic pe pictograma wireframe. (sau utilizați shft + w)

În modul wireframe, găsiți rândul care conține blurbs și separatoarele pe care tocmai le-am creat. Apoi copiați și lipiți divizorul și divizorul portocaliu deasupra și dedesubtul fiecărui blurbs, astfel încât rezultatul final să arate astfel.

Apoi, reveniți la vizualizarea desktop (shft + w) pentru a finaliza designul. Pagina dvs. ar trebui să arate astfel.

Personalizarea modulelor Blurb

Acum că aveți toate separatoarele la locul lor, este timpul să editați modulele noastre de blurb cu câteva ajustări de stil, inclusiv o marjă personalizată pentru a crea efectul de plutire a stilului de declanșare.

În primul rând, utilizați multiselect pentru a selecta toate cele patru module de blurb. Pentru a face acest lucru, țineți apăsat ctrl (sau cmd) și faceți clic pe fiecare modul. Apoi deschideți setările unuia dintre module pentru a implementa setările modale ale elementului.

Sub fila conținut, adăugați câteva linii de conținut simulat.

Apoi dezactivați complet umbra casetei de imagine.

Pentru a crea efectul de deplasare a declanșatorului, trebuie să adăugăm marje negative superioare și inferioare pentru a ascunde în mod implicit conținutul din spatele separatoarelor. Apoi, setăm marjele la 0 px pentru a dezvălui conținutul pe hover. Pentru a face acest lucru, adăugați următoarea distanță.

Marjă personalizată (implicit): -100px sus, -65px jos
Marjă personalizată (trecere): 0 px în partea de sus, 0 px în partea de jos

Căptușeală personalizată (hover): 10 px sus, 10 px jos

Poate fi necesar să ajustați valorile negative ale marjei în funcție de cât de mult conținut aveți. De exemplu, poate fi necesar să aveți o marjă mai negativă pentru un conținut text mai lung.

Acum verificați rezultatul de până acum.

Observați că partea de sus și de jos a fiecărui modul este ascunsă în spatele separatoarelor până când treceți peste ele.

Curățarea efectului de declanșare a declanșatorului

Centrarea verticală a modulelor

În prezent, efectul de declanșare a cursorului împinge restul conținutului în josul paginii cu fiecare deplasare. Acest lucru provoacă o mișcare a paginii care poate distrage atenția. În plus, acțiunea de deplasare merge doar într-o direcție descendentă, care nu este un adevărat efect de declanșare. Vrem ca conținutul să se deschidă atât în ​​sus, cât și în jos din centru. Pentru a realiza acest lucru, trebuie să facem următoarele:

Deschideți setările rândului și egalizați înălțimile coloanei.

Apoi accesați fila avansată și introduceți următorul CSS personalizat sub Elementul principal:

align-items: center;

Acest lucru se va asigura că modulele rămân centrate vertical în coloană, oferindu-ne acel efect de declanșare în sus și în jos.

Acordând rândului o înălțime fixă

Pentru a opri efectul hover de la împingerea în jos a conținutului paginii de mai jos, trebuie să oprim rândul să crească în înălțime cu fiecare hover. Pentru a face acest lucru, trebuie să setăm o înălțime fixă ​​la rândul nostru de pe desktop. Deoarece înălțimea va fi fixată, va trebui să vă asigurați că înălțimea rândului este suficient de mare pentru a se potrivi cu înălțimea conținutului de blurb în starea sa de plutire. Cu toate acestea, nu doriți să o faceți prea mare, deoarece veți lăsa prea mult spațiu gol deasupra și dedesubtul modulelor. În acest exemplu, voi seta înălțimea rândului la 600 px. Dar, din moment ce dorim doar înălțimea fixă ​​setată doar pe desktop, trebuie să adăugăm CSS la setările paginii noastre folosind o interogare media.

Iată ce trebuie să faceți.

În primul rând, în setările de rând, dați rândului dvs. un ID CSS:

ID CSS: înălțime fixă

Apoi deschideți setările paginii (sub fila avansată) și adăugați următoarele CSS personalizate:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Acest lucru conferă rândului tău o înălțime fixă ​​de 600 px pe desktop și oprește efectul hover de a împinge restul conținutului paginii în jos.

Asta e!

Rezultatul final

Verificați designul final.

Și iată efectul de plutire a declanșatorului.

S-ar putea să fie o idee bună să dezactivați efectul hover pe mobil. Pentru aceasta, tot ce trebuie să faceți este să setați marja personalizată pentru fiecare modul de blurb, după cum urmează:

Marjă personalizată (tabletă): 0 px de sus, 0 px de jos

Gânduri finale

Acest efect de plutire a declanșatorului este un mod creativ de a vă tachina publicul să caute mai multe informații despre diferitele dvs. servicii. Și cu magia lui Divi și câteva fragmente de CSS, rezultatul final este destul de elegant. Sunt sigur că există mai multe aplicații la acest efect de declanșare, deoarece puteți utiliza orice modul doriți. Simțiți-vă liber să explorați unele noi modele interesante și nu ezitați să ni le împărtășiți. Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!