När du skapar din Om-sida vill du förmodligen också presentera dina teammedlemmar där. Genom att göra det tillåter du besökare interagera med människorna bakom ditt företag. Om du letar efter ett sätt att animera dina teammedlemmars sektion på rullning, kanske du tycker att den här handledningen är användbar. Vi kommer att skapa en teammedlemskarusell med automatisk rullning som rör sig när din besökare scrolla sidan.
Demonstration
Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.
Början av befruktningen
Lägg till en ny sektion
avstånd
Börja med att lägga till ett nytt vanligt avsnitt på sidan du arbetar med. Öppna sektionsinställningar och lägg till anpassad stoppning på olika skärmstorlekar.
- Övre stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
- Botten stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
överflöden
För att se till att inget horisontellt rullningsfält visas i vår design kommer vi att dölja sektionsöverflöden i den avancerade fliken.
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
Lägg till rad 1
Kolumnstruktur
Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna, växla till designfliken och ändra bredden och den maximala bredden i storleksinställningarna.
- Bredd: 90%
- Max bredd: 1580px
avstånd
Vi lägger också till anpassad övre och undre stoppning.
- Övre stoppning: 100px
- Botten stoppning: 100px
Lägg till en textmodul i kolumnen
Lägg till H2-innehåll
Det är dags att lägga till moduler, börja med en första textmodul. Ange den innehåll H2 efter eget val.
H2 textinställningar
Gå till fliken moduldesign och ändra H2-textinställningarna enligt följande:
- Teckensnitt titel 2: Quicksand
- Teckensnitt titel 2: halvfet
- Textfärg på artikel 2: # 000000
- Rubrik 2 Textstorlek: 70 px (skrivbord), 50 px (surfplatta), 40 px (telefon)
Lägg till en separationsmodul i kolumnen
synlighet
Lägg sedan till en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.
- Visa separator: Ja
Linje
Gör sedan några ändringar i radinställningarna.
- Linjefärg: # edf000
- Linjestil: solid
- Linjeposition: överst
dimensionering
Och slutföra modulparametrarna genom att ändra dimensioneringsparametrarna i enlighet därmed:
- Divider vikt: 20px
- Bredd: 11%
- Justering av modulen: vänster
- Höjd: 20px
Lägg till en rad # 2
Kolumnstruktur
Till nästa rad! Använd följande kolumnstruktur:
dimensionering
Utan att lägga till fler moduler öppnar du linjeparametrarna och modifierar dimensioneringsparametrarna enligt följande:
- Använd en anpassad rännbredd: Ja
- Rännbredd: 2
- Bredd: 100%
- Max bredd: 100%
avstånd
Lägg sedan till vänster och höger polstring på endast de mindre skärmarna.
- Vänster stoppning: 5% (endast surfplatta och telefon)
- Höger stoppning: 5% (endast surfplatta och telefon)
Kolumnparametrar (5x)
Nu, i de närmaste tre stegen i denna handledning, kommer vi att göra några ändringar i kolumnerna. Tillämpa de tre stegen på var och en av kolumnerna i din rad.
Lutningbakgrund
Lägg först till en lutningsbakgrund i varje kolumn.
- 1-färg: rgba (255,255,255,0)
- 2-färg: rgba (0,0,0,0,84)
- Lutningstyp: linjär
- Startposition: 25%
- Slutposition: 86%
- Placera övertoningen ovanpå bakgrundsbilden: Ja
Bakgrundsbild
Ladda sedan upp en bakgrundsbild efter eget val. Den här bakgrundsbilden representerar varje lagmedlem, så använd en annan bild för varje kolumn.
- Bakgrundsstorlek: Omslag
- Bakgrundsbildens position: Mitt
Huvudelementet
Fyll i kolumninställningarna genom att lägga till anpassad CSS till huvudplattelementet i varje kolumn. Dessa rader med CSS-kod hjälper oss att placera kolumnerna under varandra på surfplattan istället för att ha två sida vid sida.
bredd: 100%! viktigt; marginal: 50px 0px 50px 0px! viktigt;
Lägg till en personmodul i kolumnen
Lägg till innehåll
För att dela information om teammedlemmar kommer vi att använda en personmodul. Lägg till den första personmodulen i kolumn 1 och använd innehåll som du väljer.
Radera bild
Radera sedan bilden. Vi använder istället kolumnens bakgrundsbild.
Bakgrundsbild
Vi lägger sedan till ett bildöverlägg som modulens bakgrundsbild. Du hittar den vi använder genom att ladda ner mappen i början av denna handledning.
- Bakgrundsstorlek: Omslag
- Bakgrundsbildens position: Mitt
Titeltextinställningar
Gå till fliken moduldesign och ändra titeltextinställningarna enligt följande:
- Titelnivå: H3
- Titel typsnitt: Quicksand
- Titel typsnitt vikt: fetstil
- Titelfärg: #ffffff
- Titeltextstorlek: 230%
Inställningar för kroppstext
Ändra också inställningarna för kroppstext.
- Kroppstypsnitt: Open Sans
- Kroppstextfärg: #ffffff
- Kroppslinjens höjd: 2,2 em
Position textinställningar
Gör sedan några ändringar i positionstextinställningarna.
- Font Position: Open Sans
- Position i textfärg: # edf000
avstånd
Och slutför modulinställningarna genom att lägga till anpassade utfyllnadsvärden i avståndsinställningarna.
- Övre stoppning: 70%
- Nedre stoppning: 10%
- Vänster stoppning: 10%
- Höger stoppning: 10%
Duplicera Person-modulen 4 gånger
När du har slutfört Personmodulen kan du klona hela modulen fyra gånger.
Placera dubbletter i de återstående kolumnerna
Placera dubbletter av moduler i de återstående fyra kolumnerna i raden. Se till att också ändra innehåll.
Vänd rad till en automatisk rullkarusell
Ändra storleken på rad nr 2
För att göra denna rad till en automatisk rullning av teammedlemskarusell måste vi öppna radinställningarna igen och ändra bredden och den maximala bredden i storleksinställningarna.
- Bredd: 180%
- Maximal bredd: 220% (skrivbord), 100% (surfplatta och telefon)
Lägg till horisontell rörelse av linje # 2
Slutför radinställningarna genom att lägga till horisontell rörelse till inställningarna för bläddringseffekten på fliken avancerat så är du klar!
- Aktivera horisontell rörelse: Ja
- Starta offset:
- Kontor: 2,5
- Tablet och telefon: 0
- Genomsnittlig offset: 0 (vid 40%)
- Slutförskjutning:
- Kontor: -25 (62%)
- Tablet och telefon: 0
- Trigger motion-effekt: mitt i elementet
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.
office
Avslutande tankar
I den här handledningen har vi visat dig hur du blir kreativ med de inbyggda rullningseffekterna av Divi. Närmare bestämt återskapade vi en vacker karusell för teammedlemmar med automatisk rullning. När besökare scrolla sidan, en annan del av karusellen dyker upp.
