Divi: Cum să dezvălui conținut când treci cu mouse-ul peste file

Ți-ar plăcea să ai cuprins care este dezvăluit atunci când treceți cu mouse-ul peste file cu unghi extensibil în Divi ?

Este întotdeauna distractiv să descoperi modalități noi și creative de a interacționa cu utilizatorii folosind efectele de trecere cu mouse-ul. O modalitate excelentă de a face acest lucru este de a dezvălui cuprins la trecerea cu mouse-ul folosind colțuri extensibile. Acest lucru permite utilizatorului să treacă cu mouse-ul peste o filă din colțul unei coloane sau al unei imagini pentru a extinde o suprapunere cu a cuprins utilitate suplimentară pentru utilizator.

În acest tutorial vom crea un aspect Divi complet unic, care va dezvălui conținut la trecerea cu mouse-ul folosind file cu unghi extensibile. De fapt, vă vom arăta cum să proiectați o mitra de colț extensibilă pentru toate cele patru colțuri ale unei coloane în Divi.

Să începem!

studiu

Iată o privire rapidă asupra aspectului extensibil al filei de colț pe care îl vom construi împreună. Observați cât de frumos sunt simetrice efectele de hover și conținutul.

Creați o pagină nouă cu Divi Builder

Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.

Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder

Apoi faceți clic pe Începeți să construiți (Construiește de la zero)

După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.

Crearea aspectului pentru suprapuneri de conținut extensibil în Divi

Proiectarea unei mitre de colț extensibilă din poziția din dreapta jos

Pentru a începe, adăugați un rând cu două coloane la secțiunea obișnuită.

Înainte de a adăuga un modul, actualizați setările rândului după cum urmează:

• Utilizați lățimea jgheab personalizată: DA
• Lățimea jgheabului: 4

Pentru acest prim articol afișat, vom crea o imagine de fundal a coloanei care va avea o filă de colț (folosind un modul blurb) în partea dreaptă jos a coloanei, care se extinde și acoperă întreaga coloană/imagine la trecerea cursorului.

Citiți și ghidul nostru pe Divi: Cum se creează o grilă de coloană fluidă la hover

Să începem prin a adăuga un modul Blurb.

Adăugați un modul Blurb la coloana 1

Setări pentru coloana 1

Odată ce anunțul este la locul lui, deschideți setările rândului, actualizați următoarele:

• Imagine de fundal [inserați imaginea]
• Dimensiunea imaginii de fundal: Dimensiunea curentă

NOTĂ: Pentru acest exemplu, folosim imaginile de bere de fundal transparent luate din pachetul de layout „Berărie„. Sunt 128 pixeli pe 359 pixeli, așa că folosim dimensiunea reală a imaginii.

Chenarul coloanei 1

• Colțuri rotunjite: 10 px, dreapta jos
• Lățimea chenarului (dreapta și jos): 2px
• Culoare chenar (dreapta și jos): #e94558

CSS personalizat și overflow

Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:

height: 400px;

Extinde opțiunea 'Vizibilitate' și faceți următoarele modificări:

• Overflow orizontal: Ascuns
• Overflow vertical: Ascuns

Adăugați conținut la modulul Blurb

Acum suntem gata să începem personalizarea modulului Blurb în coloana 1. Deschideți setările modulului și actualizați următoarele:

• Titlu: Mango IPA
• Corp :

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

• Imagine: Adăugați aceeași imagine folosită pentru fundalul coloanei

Personalizarea modulului Blurb

Acordați o culoare de fundal pentru afișaj, după cum urmează:

• Fundal (desktop): transparent
• Desktop (Hover): rgba(255,255,255,0.9)

Sub filă Amenajări, actualizați următoarele:

• Plasarea imaginii/pictogramei: dreapta
• Font titlu: Oswald
• Greutatea fontului: semi-aldine
• Stil font: TT
• Dimensiunea textului: 40px
• Culoare text al corpului (desktop): transparent
• Culoarea textului corpului (Hover): #121212

• Lățimea imaginii/pictogramei: 100 px (desktop), 64 px (telefon)
• Lățimea conținutului: 100%
• Înălțime: 100%
• Umplutură (desktop): 15% (sus și jos), 8% (stânga și dreapta)
• Umplutură (Hover): 8% (sus, jos, stânga și dreapta)

• Colțuri rotunjite (desktop): 20px, sus, stânga
• Colțuri rotunjite (Hover): 10px, sus, stânga
• Lățimea chenarului (sus și stânga): 4px (desktop), 2px (Hover)
• Culoare chenar (sus și stânga): #e94558

Opțiunea de transformare (desktop)

• Scala de transformare (X și Y): 50%

• Transform Traducere
  • Axa Y: 50%
  • Axa X: 30%

Citiți și ghidul nostru despre: Divi: Cum se creează un subsol lipicios cu efect „Reveal”.

• Transformarea originii: jos și dreapta

Opțiuni de transformare (pasare cu mouse-ul)

• Scala de transformare (Y și X) (Hover): 100%

• Transform Translate (Y și X) (Hover): 0%

Pentru a răsturna imaginea de prezentare în partea dreaptă, adăugați următorul CSS personalizat în casetă Blurb Conținut :

direction: rtl

NOTĂ: „rtl” înseamnă "De la dreapta la stanga", care modifică ordinea implicită a conținutului (de la stânga la dreapta).

rezultat

Să vedem rezultatul final al filei noastre de colț care se extinde din poziția din dreapta jos. Observați cum se extinde pentru a umple întreaga coloană la trecerea cursorului.

Proiectarea unei file de colț extensibilă din poziția din stânga jos

Coloana duplicat

Pentru a crea fila de colț care se extinde din poziția din stânga jos, putem reporni designul prin duplicarea întregii coloane. Deschideți Setări rând și duplicați coloana 1. Apoi ștergeți coloana suplimentară, astfel încât să aveți doar două duplicate exacte.

Actualizați setările coloanei 2

Apoi, deschideți setările coloanei 2 și actualizați următoarele:

• Colțuri rotunjite: 10 px jos stânga
• Lățimea chenarului (dreapta): 0px
• Lățimea chenarului (stânga): 2px
• Culoare: #e94558

Actualizați parametrii modulului Blurb

Apoi, actualizați setările Blurb după cum urmează:

• Alinierea textului: dreapta
• Colțuri rotunjite (desktop): 20px dreapta sus
• Colțuri rotunjite (Hover): 10px, dreapta sus
• Lățimea chenarului din stânga: 0px
• Lățimea marginii din dreapta: 4px (desktop), 2px (hover)
• Culoarea marginii din dreapta: #e94558

• Transform Translate (axa X) (desktop): -30%
• Transformare origine (desktop): stânga jos

Apoi asigurați-vă că eliminați CSS-ul personalizat din zona Conținut Blurb.

rezultat

Iată rezultatul. Observați cum acesta este simetric față de primul și se extinde din poziția din stânga jos a coloanei.

Proiectarea unei mitre de colț extensibilă din poziția din dreapta sus

Acum suntem gata să începem ultimele noastre două modele de unghiuri de colț în expansiune. Pentru a avea un avans, haideți să duplicăm întreaga linie care conține materialul pe care l-am proiectat deja.

Actualizați setările coloanei 1

Apoi deschideți setările pentru rândul duplicat, apoi deschideți setările pentru coloana 1 și actualizați următoarele:

• Colțuri rotunjite: 10px dreapta sus
• Lățimea chenarului de jos: 0px
• Lățimea chenarului superior: 2 px
• Culoare chenar superior: #e94558

Actualizați parametrii modulului Blurb

Apoi, deschideți setarea modulului Blurb și actualizați următoarele:

• Colțuri rotunjite (desktop): 20px jos stânga
• Colțuri rotunjite (Hover): 10px jos, stânga
• Lățimea chenarului superior: 0px
• Lățimea marginii inferioare: 4px (desktop), 2px (Hover)
• Lățimea marginii inferioare: #e94558

• Transform Translate (axa Y) (desktop): -50%
• Transformare origine: dreapta sus

CSS personalizate

În prezent, putem vedea doar partea din stânga jos a modulului de aspect, care nu afișează titlul nostru ca și celelalte două aspecte din rândul de mai sus. Pentru a afișa titlul în filă, trebuie să repoziționăm titlul în partea stângă jos a blurbului cu CSS personalizat.

Adăugați următorul CSS personalizat în casetă Titlul Blurb :

position: absolute;
bottom: 0;
left: 15px;

Apoi adăugați următorul CSS în zona de conținut Blurb Conținut :

direction: rtl;
height: 100%;

Proiectarea unei file de colț extensibilă din poziția din stânga sus

Pentru al patrulea și ultimul efect de trecere a filei de colț de extindere, îl vom poziționa în colțul din stânga sus pentru a finaliza designul simetric al întregului aspect al grilei.

Actualizați setările coloanei 2

Sub Setări rând, deschideți Setările coloanei 2 și actualizați următoarele:

• Chenaruri Colțuri: 10 px, sus stânga
• Lățimea chenarului de jos: 0px
• Lățimea chenarului superior: 2 px
• Culoare chenar superior: #e94558

Actualizați parametrii modulului Blurb

Apoi, deschideți setările de text ale modulului Blurb din coloana 2 și actualizați următoarele:

• Colțuri rotunjite (desktop): 20px dreapta jos
• Colțuri rotunjite (Hover): 10px, dreapta jos
• Lățimea chenarului superior: 0px
• Lățimea marginii inferioare: 4px (desktop), 2px (hover)
• Culoarea marginii inferioare: #e94558

Apoi actualizați opțiunile de transformare:

• Transform Translate (axa Y) (desktop): -50%
• Transformare origine: stânga sus

CSS personalizate

Apoi adăugați următorul CSS personalizat în casetă Titlu Blurb :

position: absolute;
bottom: 0%;
right: 0%;

De asemenea, adăugați următorul CSS în casetă Blurb Conținut :

height: 100%;

Finalizați proiectarea aspectului

Culoarea de fundal a secțiunii

Adăugați o culoare de fundal a secțiunii după cum urmează:

• Context: #efefef

Adauga titlu

Pentru a crea titlul, adăugați un rând cu o singură coloană în mijlocul celor două rânduri

Apoi adăugați un modul Text.

Adăugați conținutul: „Sezoner”.

Apoi actualizați următoarele setări:

• Font: Merriweather
• Greutatea fontului: aldine
• Stil: TT
• Alinierea textului: centrat
• Culoare text: #999999
• Dimensiune: 50px (desktop), 30px (tabletă), 24px (telefon)
• Spațiere între litere: 1 em

• Umplutură (stânga): 50 px (desktop), 30 px (tabletă), 24 px (telefon)

Rezultat final

Vedeți rezultatul final al aspectului cu filele de colț extinse.

Și aici este designul pe mobil.

Descărcați DIVI acum!!!

Concluzie

Filele de colț prezentate în acest tutorial vor funcționa cu siguranță pentru orice tip de conținut pe care doriți să îl prezentați pe dvs site-ul web Divi. 

Nici nu trebuie să folosiți toate cele patru colțuri. De exemplu, puteți crea un aspect al grilei pentru imagini folosind numai filele din colțul din dreapta sus pentru a dezvălui conținutul la trecerea cursorului.

Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

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.

...