Vill du skapa en biografi med DIVI över dina teammedlemmar med en svävningseffekt?
Det är ingen hemlighet att sidorna om är idealiska för att skapa interaktioner på din webbplats. Det är också denna typ av sida som kommer att betona den mänskliga delen av verksamheten bakom webbplats.
En av sakerna du kan göra för att förbättra erfarenhet av sidan Om Oss är att tillhandahålla en gruppmedlemssektion som sätter dina anställda i rampljuset.
Läs också: Divi: Hur man skapar en transparent och klibbig global rubrik
I den här handledningen kommer vi att visa dig steg för steg hur du uppnår detta. När du väl förstår tillvägagångssättet kan du anpassa det för att passa dina egna behov.
Låt oss gå!
undersökningen
Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.
Stationär dator
Mobil
Lägg till en ny sektion
avstånd
Skapa en ny sida eller öppna en befintlig och lägg till ett nytt avsnitt med hjälp av följande anpassade utfyllnadsvärden:
- Intern marginal (topp och botten): 100px
Lägg till rad #1
Strukturen av kolonnen
När du är klar med att lägga till de anpassade stoppningarna till din sektion kan du stänga sektionsinställningarna och lägga till en ny rad med en enda kolumn.
Lägg till en textmodul
Lägg till en textmodul i kolumnen med en titel i H2-storlek som du väljer.
H2 textinställningar
Gå sedan till H2 textinställningar och gör några ändringar.
- Header Font: Cinzel
- Header Copy Style: Tt (Se Capture)
- Textjustering: Centrerad
- Rubrik Textstorlek: 70px
Lägg till en separatormodul
synlighet
Fortsätt genom att lägga till en ny separatormodul precis under textmodulen.
- Visa avdelare: Ja
Avdelare färg
Gå till fliken Stil, öppna färginställningarna och ändra din separatorfärg därefter:
- Etikettfärg: #333333
dimensionering
Då kommer vi att minska storleken på delaren och centrera den.
- Maximal bredd: 26%
- Textjustering: Center
Lägg till rad 2
Strukturen av kolonnen
Strax under den föregående raden som du har lagt till, fortsätt och lägg till en ny rad med tre kolumner av samma storlek.
dimensionering
Utan att lägga till några moduler, öppna linjeinställningarna och gör några ändringar i storleksinställningarna.
- Använd anpassad rännbredd: Ja
- Kolumnavstånd: 1
- Maximal bredd: 2 pixlar
- harmonisera kolumnhöjder: Ja
avstånd
Gå sedan till avståndsinställningar och lägg till anpassade marginalvärden.
- Marginal (överst och nedre): 50 px
- Intern marginal: (Över och botten: 10px), (vänster och höger: 5px)
Ange parametrarna för var och en av kolumnerna och ändra även värdena för de interna marginalerna enligt följande:
- Intern marginal (vänster och höger): 5 px
Skugga låda
Vi ger också vår linje lite djup genom att lägga till en boxskugga till den med följande inställningar:
- Box Shadow Blur Styrka: 80px
- Box Shadow Spridningsstyrka: -14px
- Textningstypsnittsfärg: rgba(0,0,0,0.3)
Lägg till en bildmodul i kolumn 1
Ladda en bild i bildmodulen
Det är dags att börja lägga till moduler!
För att uppnå biosvävningseffekten kommer vi att behöva två moduler totalt; en bildmodul och en sammanfattningsmodul.
Se även: Divi: Hur man skapar ett responsivt bildrutnät med länkar och svävningseffekter
Bildmodulen kommer att innehålla bilden av teammedlemmen du vill visa. Sammanfattningsmodulen, å andra sidan, kommer att användas för att lägga till ikonen i det nedre vänstra hörnet och biografin när du svävar.
Lägg till en bildmodul i den första kolumnen med en kvadratisk bild.
filter
Designen vi skapar är helt gråskala. För att lägga till denna gråskala till vår bild, gå till filterinställningarna och ta bort all mättnad.
- Mättnad: 0 %
Lägg till modulen Sammanfattning i kolumn 1
Fortsätt genom att lägga till en ny Sammanfattningsmodul precis under bildmodulen i kolumn 1. Lägg till teammedlemmens namn i rubrikfältet och ange ytterligare information om teammedlemmen i rutan. innehåll.
Välj ikon
Nästa sak vi ska göra är att välja en valikon som kommer att visas besökare att det finns mer än bara en bild.
Standard bakgrundsfärg
Därefter väljer vi en helt transparent bakgrundsfärg.
- Bakgrund: rgba (255,255,255,0 XNUMX XNUMX)
Bakgrundsfärg på svävaren
Och vi kommer att ändra den färgen när vi svävar.
- Bakgrundsfärg: rgba (255,255,255,0.88)
Standardikoninställningar
Vi vill ha en synlig ikon som hjälper besökare att förstå att de kan flyga över den. Ändra ikoninställningarna för att få en ikon som denna.
- Ikonfärg: #ffffff
- Bild/ikon Bakgrundsfärg: #000000
- Bild/ikonplacering: Vänster
- Bild/ikonbredd: 50px
- Bild/ikon rundad rektangel: 100px
Inställningar för muspekaren
Vi vill dock inte att ikonen ska visas när du håller muspekaren. Därför kommer vi att använda en helt transparent färg istället.
- Ikonfärg: rgba (255,255,255,0 XNUMX XNUMX)
- Bild/ikon Bakgrundsfärg: rgba(255,255,255,0)
Standardinställningar för titeltext
Gå sedan till titeltextinställningarna och gör några ändringar.
- Typsnittstitel: Cinzel
- Mjuk ljus text: fet text
- Titel Kopieringsstil: Tt
- Rubrikens textfärg: #000000
- Titel Textstorlek: 0px
Håll muspekaren för titelinställningar
Ändra storleken på texten när du håller muspekaren.
- Titeltextstorlek: 30px
Standardinställning för presentationstext
Ändra även blurb-inställningarna.
- Teckensnitt: Öppna Sans
- Brödtextfärg: #000000
- Brödtextstorlek: 0px
Inställningar för att hålla muspekaren för brödtext
Och, återigen, ändra storleken på brödtexten när du håller muspekaren.
- Brödtextstorlek: 14px
Standardavstånd
Slutligen måste vi skapa en överlappning mellan sammanfattningsmodulen och bildmodulen med en negativ toppmarginal.
- Toppmarginal: -3,7 vw (dator), -9 vw (surfplatta och telefon)
- Nedre marginal: 1,5 vw (surfplatta), 2 vw (telefon)
Avstånd när du svävar
Ändra marginalvärden vid hovring.
- Marginal (Överst): -11,38 vw
- Intern marginal: (Över och botten: 20 px), (höger: 50 px)
Klona kolumn 1 två gånger
Vi har skapat vår första bio-hovereffekt. För att spara tid kan vi helt enkelt klona kolumn 1 två gånger från radparametrarna. Ta bort de andra två kolumnerna först och dubbelklicka sedan för att klona kolumn 1
Ändra bild och innehåll i Sammanfattningsmodulen i klonade kolumner
Glöm inte att ändra bilden i Bildmodulen och beskrivningen i Sammanfattningsmodulen för att avsluta!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Stationär dator
Mobil
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi dig hur du skapar en svävningseffekt på bilder från teammedlemmar med endast Divis inbyggda alternativ. Vi nämnde hur viktigt det är att skapa bra "Om"-sidor, eftersom det är en av de mest besökta webbsidorna.
Att använda svävningseffekter för bilder från teammedlemmar tar inte bara din Om-sida till nästa nivå, utan skapar också engagemang med din besökare. Om du har några funderingar eller förslag, låt oss hitta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
