Det är ingen hemlighet att "Om oss"-sidor är väldigt bra på att få klick till din webbplats. Det är också denna typ av sida som kommer att betona den mänskliga delen av verksamheten bakom webbplats. När vi vet detta inser vi att det är viktigt att vara uppmärksam på hur vi strukturerar sidor, vilken typ av information vi delar och hur vi skapar interaktioner.

En av de saker du kan göra för att förbättra sidupplevelsen är att tillhandahålla ett teammedlemsavsnitt som sätter dina anställda i rampljuset. Utöver det kan du lägga till en biologisk svävareffekt på foton av teammedlemmar med endast Divis inbyggda alternativ.

Detta gör att du kan spara utrymme på sidan du arbetar på och skapa en svävande interaktion mellan dig och din besökare.

I den här handledningen visar vi steg för steg hur du kommer dit. När du väl har kommit tillvägagångssättet kommer du att kunna anpassa designstilen efter 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.

office

divi-bio-hover-effekt-desktop-gif.gif

Mobil

divi-bio-hover-effekt-mobile-gif.gif

Låt oss börja återskapa

Lägg till en ny sektion

avstånd

Skapa en ny sida eller öppna en befintlig sida och lägg till ett nytt avsnitt med följande anpassade fyllningsvärden:

  • Bästa vaddering: 100px
  • Botten stoppning: 100px

biohuver effekt

Lägg till rad 1

Kolumnstruktur

När du är klar med att lägga till den anpassade fyllningen i ditt avsnitt kan du stänga sektionsinställningarna och lägga till en ny rad med en enda kolumn.

biohuver effekt

Lägg till en textmodul

Lägg till H2-innehåll

Lägg till en textmodultitel i kolumnen med en valfri H2-storlek.

biohuver effekt

H2 textinställningar

Gå sedan till H2-textinställningarna och gör några ändringar i utseendet på kopian.

  • Rubrik 2 Teckensnitt: Cinzel
  • Titel 2 Teckensnittstyp: Små kepsar
  • Titel 2 Textjustering: Center
  • Titel 2 Textstorlek: 70px

biohuver effekt

Lägg till en divisionsmodul

synlighet

Fortsätt att lägga till en ny separationsmodul precis under textmodulens titel.

  • Visa Divider: Ja

biohuver effekt

Separatorns färg

Gå till fliken Design, öppna färginställningarna och ändra avdelningsfärgen därefter:

  • Separatorns färg: # 333333

biohuver effekt

dimensionering

Då kommer vi att minska storleken på delaren och centrera den.

  • Bredd: 26%
  • Justering av modulen: centrum

biohuver effekt

Lägg till 2-raden

Kolumnstruktur

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.

biohuver effekt

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och gör några ändringar i måttparametrarna.

  • Använd en anpassad bredd: Ja
  • Enhet: PX
  • Anpassad bredd: 2000px
  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja

biohuver effekt

avstånd

Gå sedan till avståndsinställningarna och lägg till anpassade marginal- och stoppningsvärden.

  • Övre marginal: 50px
  • Nedre marginal: 50px
  • Toppad padding: 10px
  • Botten stoppning: 10px
  • Vänster Padding: 5px
  • Möjningstryck: 5px
  • Kolumn 1, 2 och 3 Polstring till vänster: 5px
  • Kolumn 1, 2 och 3 Polstring till höger: 5px

biohuver effekt

Skugga låda

Vi ger också vår linje ett lite djup genom att lägga till en ruta skugga med följande parametrar:

  • Box Shadow Blur Force: 80px
  • Boxskuggans utbredningskraft: -14px
  • Skuggfärg: rgba (0,0,0,0,3)

biohuver effekt

Lägg till en bildmodul i kolumn 1

Ladda en bild i en bildmodul

Det är dags att börja lägga till moduler! För att uppnå den biologiska svävareffekten behöver vi totalt två moduler. en bildmodul och en blurb-modul. Bildmodulen innehåller bilden av den lagmedlem du vill presentera.

Blurb-moden kommer under tiden att användas för att lägga till ikonen i det nedre vänstra hörnet och sväva biografin. Lägg till en bildmodul i den första kolumnen med en kvadratisk bild.

biohuver effekt

filter

Designen vi skapar är helt i gråskala. För att lägga till denna gråton i vår bild, gå till filterinställningarna och ta bort all mättnad.

  • Mättnad: 0%

biohuver effekt

Lägg till Blurb-modulen i 1-kolumnen

Lägg till innehåll

Fortsätt genom att lägga till en ny Blurb-modul precis under bildmodulen i kolumn 1. Lägg till teammedlemmens namn i titelfältet och ange ytterligare information om teammedlemmen i rutan. innehåll.

biohuver effekt

Välj en 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 ett foto.

biohuver effekt

Standardbakgrundsfärg

Därefter väljer vi en fullständig transparent bakgrundsfärg.

  • Bakgrundsfärg: rgba (255,255,255,0)

biohuver effekt

Bakgrundsfärg på flyover

Och vi kommer att ändra den här färgen svävar.

  • Bakgrundsfärg: rgba (255,255,255,0.88)

biohuver effekt

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 sådan ikon.

  • Ikonfärg: #ffffff
  • Cirkelikon: ja
  • Cirkelfärg: # 000000
  • Ikonplats: vänster
  • Använd ikonstorlek: Ja
  • Ikonstorlek: 50 pixlar

biohuver effekt

Håll muspekaren inställning

Vi vill dock inte att ikonen ska visas på svävaren. Därför använder vi istället en helt transparent färg.

  • Ikonfärg: rgba (255,255,255,0)
  • Färg på cirkel: rgba (255,255,255,0)

biohuver effekt

Standard titelinställningar

Gå sedan till titelens textinställningar och gör några ändringar.

  • Titel Polis: Cinzel
  • Titel Polis: Bold
  • Titel Typsnitt: Små kepsar
  • Färgtexttitel: # 000000
  • Textstitelstorlek: 0px

biohuver effekt

Håll muspekaren över textinställningarna för titeln

Ändra textens storlek genom att sväva.

  • Textstitelstorlek: 30px

biohuver effekt

Standardinställningar för huvudtext

Ändra också inställningarna för kroppstext.

  • Kroppspolis: Open Sans
  • Kroppsfärgad text: # 000000
  • Kroppstextstorlek: 0px
  • Kroppshöjd: 1.8em

biohuver effekt

Parameter för kroppen på överflöd

Och, ändra på textstorlekens kroppsstorlek.

  • Kroppstextstorlek: 14px

biohuver effekt

Standardavstånd

Sist men inte minst måste vi skapa en överlappning mellan Blurb-modulen och bildmodulen med en negativ övre marginal.

  • Övre marginal: -3.7vw (skrivbord), -9vw (surfplatta och telefon)
  • Nedre marginal: 1.5vw (surfplatta), 2vw (telefon)

biohuver effekt

Stationärt avstånd

Ändra den anpassade marginalen och fylla värdena i rollover.

  • Övre marginal: -11,38vw
  • Toppad padding: 20px
  • Botten stoppning: 20px
  • Möjningstryck: 50px

biohuver effekt

Klona de två modulerna två gånger och placera dubbletterna i de återstående kolumnerna.

Vi har skapat vår första biologiska svävareffekt. För att spara tid kan vi bara dubbelklona de två modulerna i kolumn 1 två gånger och placera dubbletterna i de återstående två kolumnerna.

biohuver effekt

Redigera bilden och innehållet i Blurb-modulen

Glöm inte att ändra bilden i Bildmodulen och kopiera den till Blurb-modulen för att slutföra teammedlemmarsektionen!

biohuver effekt

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur vi såg på olika skärmstorlekar.

office

biohuver effekt

Mobil

biohuver effekt

Avslutande tankar

I den här artikeln har vi visat dig hur du skapar en biologisk svävareffekt för foton av lagmedlemmar som endast använder Divis inbyggda alternativ. Vi har betonat hur viktigt det är att skapa bra sidor eftersom de är en av de mest besökta webbplatserna.

Att använda bio-svävareffekter för foton av teammedlemmar kommer inte bara att förbättra kvaliteten på din sida utan också skapa interaktion med dina besökare. Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarfältet nedan!