Cum să dezvăluie conținut pe Hover cu filele de colț extinse în Divi (descărcare GRATUITĂ)

Este întotdeauna distractiv să descoperiți modalități noi și creative de a interacționa utilizatorii cu conținutul dvs. utilizând efecte unice de plasare. O modalitate excelentă de a face acest lucru este să dezvăluie conținut pe hover folosind filele de colț în expansiune. Aceasta permite utilizatorului să treacă peste o filă din colțul unei coloane sau al unei imagini pentru a extinde o suprapunere cu conținut suplimentar util pentru utilizator.

Pentru acest tutorial, vom crea un aspect Divi complet unic, care va dezvălui conținut pe hover folosind filele de colț în expansiune. De fapt, vă vom arăta cum să proiectați o filă de colț în expansiune pentru toate cele patru colțuri ale unei coloane din Divi.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra aspectului de filă de colț în expansiune pe care îl vom construi împreună. Observați cum efectele și conținutul hover sunt frumos simetrice.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să ajungem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

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

Crearea aspectului de extindere a suprapunerilor de conținut de la zero

Partea 1: Crearea unei file de colț extins din poziția din dreapta jos

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

Înainte de a adăuga un modul, actualizați setările rândurilor cu o lățime personalizată a jgheabului după cum urmează:

• Lățimea jgheabului: 4

Pentru acest prim articol prezentat, vom crea o imagine de fundal a coloanei care va avea o filă de colț (folosind un modul de blurb) în partea dreaptă jos a coloanei, care se extinde și suprapune întreaga coloană / imagine pe hover.

Să începem cu adăugarea unui modul blurb.

Adăugați modul Blurb

Adăugați un modul blurb în coloana 1.

Nu o să-l coafăm încă. În principiu, aveam nevoie de conținut, astfel încât să putem stiliza coloana care conține textul.

Setări coloana 1

Cu blurb-ul în poziție, deschideți setările rândului, apoi faceți clic pentru a edita setările coloanei 1. Apoi actualizați următoarele:

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

NOTĂ: pentru exemplul meu, folosesc imagini de bere de fundal transparente luate din pachetul de amenajare a fabricii de bere. Acestea au 128 px cu 359 px, motiv pentru care folosesc dimensiunea reală a imaginii.

Coloana 1 Border

• Colțuri rotunjite: 10 px în dreapta jos
• Lățimea marginii drepte: 2 px
• Culoare margine dreaptă: # e94558
• Lățimea marginii inferioare: 2 px
• Culoarea chenarului inferior: # e94558

CSS personalizat și Overflow

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

height: 400px;

Actualizați următoarele:

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Această înălțime personalizată este necesară pentru ca modulul nostru de blurb (fila de colț) să extindă întreaga înălțime a coloanei. Și deversarea ascunsă este necesară, astfel încât să putem ascunde cea mai mare parte a modulului de blurb în afara coloanei până la starea de plutire.

Adăugarea conținutului modulului Blurb

Acum suntem gata să începem să personalizăm modulul blurb din coloana 1. Deschideți setările blurb ș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 utilizată pentru fundalul coloanei

Proiectarea modulului Blurb

Acordați blurbului o culoare de fundal pe hover după cum urmează:

• Culoare fundal (desktop): transparent
• Culoarea fundalului (hover): rgba (255.255.255,0.9)

Sub fila Proiectare, actualizați următoarele:

• Plasare imagine / pictogramă: stânga
• Titlu Font: Oswald
• Titlu Stil Font: TT
• Dimensiune text titlu: 40 px
• Greutatea fontului corpului: Semi îndrăznețe
• Culoarea textului corpului (desktop): transparent
• Culoarea textului corpului (plutitor): # 121212

• Lățimea imaginii: 100 px (desktop), 64 px (telefon)
• Lățimea conținutului: 100%
• Înălțime: 100%
• Căptușire (desktop): 15% sus, 15% jos, 8% stânga, 8% dreapta
• Căptușeală (hover): 8% sus, 8% jos, 8% stânga, 8% dreapta

• Colțuri rotunjite (implicit): 20 px în stânga sus
• Colțuri rotunjite (plutesc): 10 px în stânga sus
• Lățimea marginii superioare: 4 px (desktop), 2 px (trecător)
• Culoarea chenarului superior: # e94558
• Lățimea marginii stângi: 4 px (desktop), 2 px (trecere)
• Culoare margine stânga: # e94558

Opțiunea de transformare (desktop)

• Scala de transformare axa Y: 50%
• Scala de transformare axa X: 50%
• Transformă axa Y tradusă: 50%
• Transformă axa X tradusă: 30%
• Transformă originea: jos dreapta

Opțiuni de transformare (plasați cursorul)

• Scala de transformare axa Y (plimbare): 100%
• Scala de transformare axa X (plimbare): 100%
• Transformă axa Y tradusă (plasați cu mouse-ul): 0%
• Transformă axa X tradusă (plasați cu mouse-ul): 0%

Pentru a răsfoi imaginea blurb în partea dreaptă, adăugați următorul CSS personalizat în caseta Blurb Content:

direction: rtl

NOTĂ: Direcția „rtl” înseamnă „de la dreapta la stânga”, care comută ordinea implicită a conținutului (de la stânga la dreapta).

Rezultat

Să verificăm rezultatul final al filei de colț în expansiune din poziția din dreapta jos. Observați modul în care se extinde pentru a umple întreaga coloană la cursor.

Partea 2: Crearea unei file de colț extins din poziția din stânga jos

Duplicați coloana

Pentru a crea fila de colț care se extinde din poziția din stânga jos, putem lansa proiectul prin duplicarea întregii coloane. Deschideți setările rândului ș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 pentru coloana 2 și actualizați următoarele:

• Colțuri rotunjite: 10 px în stânga jos
• Lățimea marginii drepte: 0 px
• Lățimea marginii stânga: 2 px
• Culoare margine stânga: # e94558

Actualizați setările Blurb

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

• Alinierea textului: corect
• Colțuri rotunjite (desktop): 20 px în dreapta sus
• Colțuri rotunjite (plutesc): 10 px în dreapta sus
• Lățimea marginii stânga: 0 px
• Lățimea marginii drepte: 4 px (desktop), 2 px (trecător)
• Culoare margine dreaptă: # e94558

• Transformă axa X X (desktop): -30%
• Transform Origin (desktop): stânga jos

Apoi asigurați-vă că ștergeți CSS-ul personalizat în caseta Blurb Content.

Rezultat

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

Partea 3: Crearea unei file de colț extins din poziția din dreapta sus

Acum suntem gata să începem ultimele două modele de filă de colț în expansiune. Pentru a începe, să duplicăm întregul rând care conține blurb-ul pe care l-am proiectat deja.

Actualizați setările coloanei 1

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

• Colțuri rotunjite 10 px în dreapta sus
• Lățimea marginii inferioare: 0 px
• Lățimea marginii superioare: 2 px
• Culoarea chenarului superior: # e94558

Actualizați setările modulului Blurb

Apoi, deschideți setarea pentru modulul blurb și actualizați următoarele:

• Colțuri rotunjite (desktop): 20 px în stânga jos
• Colțuri rotunjite (plutesc): 10 px în stânga jos
• Lățimea marginii superioare: 0 px
• Lățimea marginii inferioare: 4 px (desktop), 2 px (trecător)
• Culoarea chenarului inferior: # e94558
• Transformă axa Y tradusă (desktop): -50%
• Transformă Originea: dreapta sus

Blurb CSS personalizat

În acest moment putem vedea doar porțiunea din stânga jos a modulului blurb care nu arată titlul nostru ca celelalte două blurbs din rândul de mai sus. Pentru a afișa Titlul în interiorul filei, trebuie să repoziționăm titlul în partea din stânga jos a textului cu câteva CSS personalizate.

Adăugați următorul CSS personalizat în caseta Titlu Blurb:

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

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

direction: rtl;
height: 100%;

Partea 4: Crearea unei file de colț extins din poziția din stânga sus

Pentru al patrulea și ultimul nostru efect de deplasare a filei de colț, î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ările rândului, deschideți setările pentru coloana 2 și actualizați următoarele:

• Colțuri rotunjite: 10 px sus în stânga
• Lățimea marginii inferioare: 0 px
• Lățimea marginii superioare: 2 px
• Culoarea chenarului superior: # e94558

Actualizați setările Blurb

Apoi, deschideți setările pentru blurb în coloana 2 și actualizați următoarele:

• Colțuri rotunjite (desktop): 20 px în dreapta jos
• Colțuri rotunjite (plutesc): 10 px în dreapta jos
• Lățimea marginii superioare: 0 px
• Lățimea marginii inferioare: 4 px (desktop), 2 px (trecător)
• Culoarea chenarului inferior: # e94558

Apoi actualizați opțiunile de transformare:

• Transformă axa X tradusă (desktop): -30%
• Transformă originea: stânga sus

Blurb CSS personalizat

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

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

Apoi adăugați următorul CSS în caseta Blurb Content:

height: 100%;

Partea 4: Finalizarea proiectării machetei

Culoarea fundalului secțiunii

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

• Culoare fundal: #efefef

Adăugarea titlului

Pentru a crea titlul, adăugați un rând în mijlocul celor două rânduri și adăugați un modul text la rândul cu o coloană.

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

Apoi actualizați următoarele setări:

• Fontul titlului 2: Merriweather
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Stil font: TT
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 999999
• Titlul 2 Dimensiune text: 50 px (desktop), 30 px (tabletă), 24 px (telefon)
• Rubrica 2 Spațierea literelor: 1em
• Căptușeală: 50 px stânga (desktop), 30 px stânga (tabletă), 24 px stânga (telefon)

Rezultat final

Verificați rezultatul final al aspectului cu filele de colț în expansiune.

Și iată designul pe mobil.

Gânduri finale

Filele de colț în expansiune prezentate în acest design de aspect vor funcționa cu siguranță pentru toate tipurile de conținut pe care doriți să îl prezentați pe site-ul dvs. Divi. Nici nu trebuie să utilizați toate cele patru colțuri. De exemplu, puteți crea un aspect de grilă pentru imagini utilizând numai filele din colțul din dreapta sus pentru a dezvălui conținutul pe hover. Capacitățile de proiectare sunt abundente cu aceasta. A se distra.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!