Cum se creează suprapuneri unice cu hover pentru mărturii cu Divi

Mărturiile sunt o afacere imensă pentru multe site-uri web. Acestea prezintă expertiză, iar vizitatorii de obicei le caută dacă doresc să-și dea seama cât de credibilă este o companie sau o persoană. De aceea, este important să vă gândiți la modul în care prezentați vizual mărturii pe site-ul dvs. web.

Cu Divi, puteți afișa mărturiile dvs. exact așa cum doriți. Pentru a vă inspira, vă vom arăta cum să creați un mod uimitor și unic de a afișa mărturii folosind suprapuneri cu mouse-ul.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului final.

Adăugați o secțiune nouă

Să începem! Adăugați o pagină nouă sau deschideți una existentă și adăugați o nouă secțiune obișnuită.

Adăugați rândul nou 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați și câteva valori de spațiere personalizate.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 2 Căptușeala din stânga: 2vw (desktop), 3vw (tabletă și telefon)
• Coloana 2 Căptușeala dreaptă: 11vw (desktop), 3vw (tabletă și telefon)

Adăugați modulul de imagine în coloana 1

Incarca imaginea

Este timpul să începeți adăugarea diferitelor module! Începeți cu un modul de imagine în prima coloană. Încărcați o imagine portretă la alegere.

Alinierea imaginii

Deschideți setările imaginii și modificați alinierea imaginii.

• Aliniere imagine: Stânga

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățime: 78% (desktop), 70% (tabletă și telefon)
• Alinierea modulului: stânga

Adăugați Hover Overlap Text Module în coloana 1

Adauga continut

Chiar sub modulul de imagine, adăugați un modul de text. Plasați detaliile persoanei în caseta de conținut.

Fundal implicit

Continuați adăugând o culoare de fundal.

• Culoare fundal: rgba (255,255,255,0)

Plasați cursorul pe fundal

Adăugați o altă culoare de fundal la cursor.

• Culoare fundal: # 0f1bff

Setări implicite pentru text

Apoi, modificați setările de text.

• Culoarea textului: #ffffff
• Dimensiune text: 0 px
• Înălțimea liniei de text: 0 px

Plasați cursorul pe Setări text

Efectuați câteva ajustări pentru setările de text la cursor.

• Dimensiune text: 19 px
• Înălțimea liniei de text: 2em

Setări implicite pentru textul antetului

Setările pentru textul antetului trebuie modificate, de asemenea.

• Titlul 3 Greutate font: Ultra Bold
• Titlul 3 Stilul fontului: majuscule
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 0 px
• Rubrica 3 Înălțimea liniei: 0em

Plasați cursorul pe setările textului antet

Adăugați valori diferite la cursor.

• Rubrica 3 Dimensiune text: 35 px
• Rubrica 3 Înălțimea liniei: 1.1em

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori.

• Marja superioară: -100px
• Marja stângă: 50 px
• Marja dreaptă: 50 px
• Căptușeală superioară: 40 px
• Căptușeală inferioară: 60 px

Modificați orientarea textului

Reveniți la setările pentru text și modificați orientarea textului.

• Orientare text: centru

Default Box Shadow

Apoi, adăugați o umbră de casetă implicită la modulul text. Această umbră de cutie va face parte din designul general.

• Poziție orizontală a umbrei cutiei: 1000 px
• Box Shadow Vertical Position: -400px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 250 px
• Culoare umbră: rgba (175.175.175,0.13)

Hover Box Shadow

Pentru a crea efectul special de suprapunere a hover-ului, adăugați și o umbră de hover box.

• Poziție orizontală a umbrei cutiei: -73px
• Box Shadow Vertical Position: -49px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 10 px
• Culoare umbră: rgba (255,182,12,0,53)

Tranziții

Pentru a crea o tranziție lină, modificați durata tranziției în fila avansată.

• Durata tranziției: 1000 ms

Adăugați un modul text pentru mărturii în coloana 2

Adauga continut

În a doua coloană, primul lucru de care avem nevoie este un titlu Modul text. Continuați și adăugați un rezumat al mărturiei.

Setări text antet

Apoi, modificați setările pentru textul antetului.

• Rubrica 3 Font: Goudy Bookletter 1911
• Titlul 3 Alinierea textului: stânga
• Titlul 3 Dimensiune text: 3,5vw (desktop), 40px (tabletă), 30px (telefon)
• Rubrica 3 Înălțimea liniei: 1.1em

Spațiere

Continuați adăugând câteva valori de spațiere personalizate.

• Marja superioară: 7vw (desktop), 100 px (tabletă), 50 px (telefon)

Adăugați modulul de descriere a textului în coloana 2

Adauga continut

Adăugați un alt modul de text cu întreaga mărturie chiar sub titlul Modul de text.

Setări text

După ce ați adăugat mărturia, continuați și modificați setările de text.

• Înălțimea liniei textului: 2.2em
• Orientare text: stânga

Spațiere

Adăugați și o marjă de sus personalizată.

• Marja superioară: 4vw (desktop), 50 px (tabletă și telefon)

Adăugați un rând nou

Structura coloanei

Acum că am terminat primul rând, să îl adăugăm pe cel de-al doilea folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați câteva valori de spațiere personalizate în continuare.

• Marja superioară: 100 px
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală stângă: 11vw (Desktop), 3vw (Tabletă și telefon)
• Coloana 1 Căptușeala dreaptă: 2vw (desktop), 3vw (tabletă și telefon)

Clonați modulele de text ale rândului și locației anterioare în coloana 1

Reveniți la rândul anterior și clonați ambele module în coloana 2. Odată ce ați făcut-o, plasați duplicatele în prima coloană a noului rând.

Modificați orientarea textului

Modificați orientarea textului ambelor module.

• Orientarea textului: dreapta

Adăugați modulul de imagine în coloana 2

Incarca imaginea

Apoi, adăugați un modul de imagine în a doua coloană și încărcați o nouă imagine portret.

Alinierea imaginii

Schimbați alinierea imaginii modulului.

• Alinierea imaginii: dreapta

Dimensionare

Continuați modificând setările de dimensionare.

• Lățime: 78% (desktop), 70% (tabletă și telefon)
• Alinierea modulului: dreapta

Spațiere

Adăugați și câteva valori de spațiere personalizate.

• Marja superioară: 50 px (tabletă și telefon)

Adăugați Hover Overlap Text Module în coloana 2

Adauga continut

Ultimul modul de care avem nevoie pentru a finaliza acest design este un modul de text sub modulul de imagine. Adăugați detaliile persoanei în caseta de conținut.

Fundal implicit

Apoi, adăugați o imagine de fundal la modul.

• Culoare fundal: rgba (255,255,255,0)

Plasați cursorul pe fundal

Schimbați culoarea de fundal la cursor.

• Culoare fundal: # 690cff

Setări implicite pentru text

Schimbați apoi setările de text.

• Culoarea textului: #ffffff
• Dimensiune text: 0 px
• Înălțimea liniei de text: 0 px
• Orientare text: centru

Plasați cursorul pe Setări text

Efectuați câteva ajustări la cursor.

• Dimensiune text: 19 px
• Înălțimea liniei de text: 2em

Setări implicite pentru textul antetului

Modificați și setările pentru textul antetului.

• Titlul 3 Greutate font: Ultra Bold
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 0 px
• Rubrica 3 Înălțimea liniei: 0em

Plasați cursorul pe setările textului antet

Cu câteva mici modificări în plan.

• Rubrica 3 Dimensiune text: 35 px
• Rubrica 3 Înălțimea liniei: 1.1em

Spațiere

Continuați accesând setările de spațiere și adăugați câteva valori personalizate.

• Marja superioară: -80 px
• Marja stângă: 50 px
• Marja dreaptă: 50 px
• Căptușeală superioară: 40 px
• Căptușeală inferioară: 60 px

Default Box Shadow

Adăugați o umbră de casetă implicită la modulul de text.

• Poziție orizontală a umbrei cutiei: -1000px
• Box Shadow Vertical Position: -420px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 250 px
• Culoare umbră: rgba (175.175.175,0.13)

Hover Box Shadow

Și schimbați umbra casetei pe hover.

• Poziție orizontală a umbrei cutiei: -73px
• Box Shadow Vertical Position: -49px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 10 px
• Culoare umbră: rgba (12.255.238,0.53)

Tranziții

Nu în ultimul rând, creați o tranziție lină modificând durata tranziției.

• Durata tranziției: 1000 ms

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului final!

Gânduri finale

Sperăm că această postare v-a inspirat să creați secțiuni uimitoare de mărturii folosind suprapuneri cu mouse-ul! Acestea vă ajută cu adevărat să adăugați o altă dimensiune site-ului dvs. web fără a fi nevoie să petreceți mult timp codificând sau descoperind lucrurile. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!