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
Mobil
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
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.
Lägg till en textmodul
Lägg till H2-innehåll
Lägg till en textmodultitel i kolumnen med en valfri H2-storlek.
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
Lägg till en divisionsmodul
synlighet
Fortsätt att lägga till en ny separationsmodul precis under textmodulens titel.
- Visa Divider: Ja
Separatorns färg
Gå till fliken Design, öppna färginställningarna och ändra avdelningsfärgen därefter:
- Separatorns färg: # 333333
dimensionering
Då kommer vi att minska storleken på delaren och centrera den.
- Bredd: 26%
- Justering av modulen: centrum
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.
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
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
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)
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.
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%
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.
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.
Standardbakgrundsfärg
Därefter väljer vi en fullständig transparent bakgrundsfärg.
- Bakgrundsfärg: rgba (255,255,255,0)
Bakgrundsfärg på flyover
Och vi kommer att ändra den här färgen 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 sådan ikon.
- Ikonfärg: #ffffff
- Cirkelikon: ja
- Cirkelfärg: # 000000
- Ikonplats: vänster
- Använd ikonstorlek: Ja
- Ikonstorlek: 50 pixlar
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)
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
Håll muspekaren över textinställningarna för titeln
Ändra textens storlek genom att sväva.
- Textstitelstorlek: 30px
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
Parameter för kroppen på överflöd
Och, ändra på textstorlekens kroppsstorlek.
- Kroppstextstorlek: 14px
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)
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
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.
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!
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
Mobil
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!
Hej!
Tack för den här handledningen, den var väldigt användbar för mig.
Men jag stöter på två små problem:
- svävarbakgrunden gäller inte (jag har intrycket att den ligger bakom bilden ...)
- Flyover öppnas inte på samma sätt som i exemplet (min text förblir i samma höjd som ikonen och öppnas inte uppåt) vilket ger ett snyggt utseende.
Har du en lösning? Tack.
Ha en trevlig kväll
Hej!
Kan du dela en skärmdump?
Hej!
Tack för denna handledning, det är mycket väl förklarat.
Men jag har problem när jag svävar över musen och skakar och inte flyter. Vet du vad det beror på?
tack
Hej Sal,
Ingen aning förlåt.