Når du opretter din Om-side, vil du sikkert også gerne introducere dine teammedlemmer der. Ved at gøre det tillader du besøgende interagere med folkene bag din virksomhed. Hvis du leder efter en måde at animere dine teammedlemmers sektion på scroll, vil du måske finde denne vejledning nyttig. Vi kommer til at skabe en karrusel med automatisk rulning af teammedlemmer, der bevæger sig, når din besøgende scroll siden.
Demonstration
Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.
Start af design
Tilføj en ny sektion
afstand
Start med at tilføje en ny almindelig sektion til den side, du arbejder på. Åbn sektionsindstillinger og tilføj brugerdefineret polstring på forskellige skærmstørrelser.
- Øvre polstring: 200px (skrivebord), 100px (tablet og telefon)
- Bundpolstring: 200px (skrivebord), 100px (tablet og telefon)
overløb
For at sikre, at der ikke vises nogen vandrette rullebjælker i vores design, skjuler vi sektionsoverløb i den avancerede fane.
- Vandret overløb: skjult
- Lodret overløb: skjult
Tilføj linje 1
Kolonne struktur
Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne linjeindstillingerne, skifte til designfanen og ændre bredden og maks. bredde i størrelsesindstillingerne.
- Bredde: 90%
- Maks bredde: 1580px
afstand
Vi tilføjer også tilpasset top- og bundpolstring.
- Øvre polstring: 100px
- Bundpolstring: 100px
Føj et tekstmodul til kolonnen
Tilføj H2 indhold
Det er tid til at tilføje moduler, begyndende med et første tekstmodul. Indtast den indhold H2 efter eget valg.
H2 tekstindstillinger
Gå til fanen til moduldesign, og skift indstillingerne for H2-tekst som følger:
- Skrifttypetitel 2: Quicksand
- Skrifttitel 2: semi-fed
- Tekstfarve på punkt 2: # 000000
- Header 2 Tekststørrelse: 70px (desktop), 50px (tablet), 40px (telefon)
Føj et separationsmodul til kolonnen
synlighed
Tilføj derefter et skillemodul. Sørg for, at indstillingen "Vis separator" er aktiveret.
- Vis separator: Ja
Linje
Foretag derefter nogle ændringer i linjeindstillingerne.
- Linjefarve: #edf000
- Linjestil: solid
- Linjeposition: Top
dimensionering
Og fuldfør modulindstillingerne ved at ændre størrelsesindstillingerne i overensstemmelse hermed:
- Divider vægt: 20px
- Bredde: 11%
- Justering af modulet: venstre
- Højde: 20px
Tilføj en linje # 2
Kolonne struktur
Til næste række! Brug følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene og ændre størrelsesparametrene som følger:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 2
- Bredde: 100%
- Maks bredde: 100%
afstand
Tilføj derefter venstre og højre polstring kun på mindre skærme.
- Venstre polstring: 5 % (kun tablet og telefon)
- Højre polstring: 5 % (kun tablet og telefon)
Kolonneparametre (5x)
Nu, i de næste tre trin i denne øvelse, vil vi foretage ændringer i kolonnerne. Anvend de tre trin på hver af kolonnerne i din række.
Gradient baggrund
Tilføj først en gradientbaggrund til hver kolonne.
- 1 farve: rgba (255,255,255,0)
- 2 farve: rgba (0,0,0,0,84)
- Gradienttype: lineær
- Startposition: 25%
- Slutposition: 86%
- Placer gradient over baggrundsbillede: Ja
Baggrundsbillede
Upload derefter et baggrundsbillede efter eget valg. Dette baggrundsbillede repræsenterer hvert teammedlem, så brug et andet billede for hver kolonne.
- Baggrundsbilledstørrelse: Cover
- Baggrundsbilledets placering: Center
Hovedelement
Fuldfør kolonneindstillingerne ved at tilføje tilpasset CSS til hovedtablet-elementet i hver kolonne. Disse linjer med CSS-kode hjælper os med at placere kolonnerne under hinanden på tabletten i stedet for at have to side om side.
bredde: 100 % !vigtigt; margen: 50px 0px 50px 0px !vigtigt;
Føj personmodul til kolonne
Tilføj indhold
For at dele oplysninger om teammedlemmer vil vi bruge et Person-modul. Tilføj det første Person-modul til kolonne 1 og brug indhold de votre choix.
Slet billede
Slet derefter billedet. Vi bruger i stedet kolonnens baggrundsbillede.
Baggrundsbillede
Dernæst tilføjer vi en billedoverlejring som baggrundsbillede for modulet. Du kan finde den, vi bruger, ved at downloade mappen i starten af denne vejledning.
- Baggrundsbilledstørrelse: Cover
- Baggrundsbilledets placering: Center
Titeltekstindstillinger
Skift til fanen moduldesign, og skift titeltekstindstillingerne som følger:
- Titleniveau: H3
- Titelskrifttype: Quicksand
- Titel Skrifttypevægt: Fed
- Tekstfarve på titel: #ffffff
- Titeltekststørrelse: 230 %
Indstillinger for kropstekst
Skift også indstillinger for kropstekst.
- Body Font: Open Sans
- Brødtekstfarve: #ffffff
- Kropslinjens højde: 2,2 em
Indstillinger for positionstekst
Foretag derefter nogle ændringer i indstillingerne for positionstekst.
- Positionsskrifttype: Åbn uden
- Positionstekstfarve: #edf000
afstand
Og fuldfør modulparametrene ved at tilføje brugerdefinerede udfyldningsværdier til afstandsparametrene.
- Øvre polstring: 70%
- Nedre polstring: 10%
- Venstre polstring: 10%
- Høj polstring: 10%
Dupliker Person-modulet 4 gange
Når du har gennemført Person-modulet, kan du klone hele modulet fire gange.
Placer dubletter i de resterende kolonner
Placer dublerede moduler i de resterende fire kolonner i rækken. Sørg også for at ændre indhold.
Gør Row til en automatisk rullende karrusel
Skift rækkestørrelse #2
For nu at forvandle denne række til en karrusel med automatisk rullende teammedlemmer, skal vi genåbne rækkeindstillinger og ændre bredden og maks. bredde i størrelsesindstillingerne.
- Bredde: 180%
- Maksimal bredde: 220% (skrivebord), 100% (tablet og telefon)
Tilføj vandret bevægelse af linje #2
Fuldfør linjeindstillingerne ved at tilføje vandret bevægelse til indstillingerne for rulleeffekt i den avancerede fane, og du er færdig!
- Aktivér vandret bevægelse: Ja
- Start offset:
- Kontor: 2,5
- Tablet og telefon: 0
- Gennemsnitlig forskydning: 0 (ved 40%)
- Slut offset:
- Kontor: -25 (62%)
- Tablet og telefon: 0
- Trigger bevægelseseffekt: midten af elementet
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
kontor
endelige tanker
I denne vejledning har vi vist dig, hvordan du bliver kreativ med de indbyggede rulleeffekter Divi. Specifikt genskabte vi en smuk automatisk rullende teammedlemskarrusel. Når besøgende scroll på siden, en anden del af karrusellen dukker op.