Når du oppretter Om-siden din, vil du sannsynligvis også introdusere teammedlemmene dine der. Ved å gjøre det tillater du Besøkende samhandle med menneskene bak virksomheten din. Hvis du leter etter en måte å animere teammedlemmenes seksjon på scroll, kan du finne denne opplæringen nyttig. Vi kommer til å lage en karusell med automatisk rulling av teammedlem som beveger seg når din Besøkende bla gjennom siden.
Demonstrasjon
Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.
Begynnelsen av unnfangelsen
Legg til en ny seksjon
avstanden
Start med å legge til en ny vanlig seksjon på siden du jobber med. Åpne seksjonsinnstillinger og legg til tilpasset polstring på forskjellige skjermstørrelser.
- Øvre polstring: 200px (skrivebord), 100px (nettbrett og telefon)
- Bunn polstring: 200 px (skrivebord), 100 px (nettbrett og telefon)
overløp
For å sikre at ingen horisontale rullefelt vises i vårt design, vil vi skjule seksjonsoverløp i den avanserte fanen.
- Horisontalt overløp: skjult
- Vertikal overløp: skjult
Legg til linje 1
Kolonne struktur
Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpne radinnstillingene, bytt til designfanen og endre bredden og maksimal bredde i størrelsesinnstillingene.
- Bredde: 90%
- Maks bredde: 1580px
avstanden
Vi legger også til tilpasset øvre og nedre polstring.
- Øvre polstring: 100px
- Bunnpolstring: 100px
Legg til en tekstmodul i kolonnen
Legg til H2-innhold
Det er på tide å legge til moduler, og starter med en første tekstmodul. Skriv den inn innhold H2 etter eget valg.
H2 tekstinnstillinger
Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:
- Fonttittel 2: Quicksand
- Skrifttittel 2: halvfet
- Tekstfarge på element 2: # 000000
- Header 2 Tekststørrelse: 70px (stasjonær), 50px (nettbrett), 40px (telefon)
Legg til en skillemodul i kolonnen
synlighet
Deretter legger du til en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.
- Vis separator: Ja
Ligne
Gjør deretter noen endringer i linjeinnstillingene.
- Linjefarge: # edf000
- Linestil: solid
- Linjeposisjon: Topp
dimensjonering
Og fullfør modulparametrene ved å endre dimensjoneringsparametrene tilsvarende:
- Divider vekt: 20px
- Bredde: 11%
- Justering av modulen: venstre
- Høyde: 20px
Legg til en linje nr. 2
Kolonne struktur
Til neste rad! Bruk følgende kolonnestruktur:
dimensjonering
Uten å legge til flere moduler, åpne linjeparametrene og endre dimensjoneringsparametrene som følger:
- Bruk en tilpasset rennebredde: Ja
- Rennesteinsbredde: 2
- Bredde: 100%
- Maks bredde: 100%
avstanden
Legg deretter til venstre og høyre polstring på de mindre skjermene.
- Venstre polstring: 5% (bare nettbrett og telefon)
- Høyre polstring: 5% (bare nettbrett og telefon)
Kolonneparametere (5x)
Nå, i de neste tre trinnene i denne opplæringen, skal vi gjøre noen endringer i kolonnene. Bruk de tre trinnene på hver av kolonnene i raden din.
Gradient bakgrunn
Først legger du til en gradientbakgrunn i hver kolonne.
- 1-farge: rgba (255,255,255,0)
- 2-farge: rgba (0,0,0,0,84)
- Gradienttype: lineær
- Startposisjon: 25%
- Sluttposisjon: 86%
- Plasser stigning på bakgrunnen: Ja
Bakgrunnsbilde
Last deretter opp et bakgrunnsbilde du ønsker. Dette bakgrunnsbildet representerer hvert teammedlem, så bruk et annet bilde for hver kolonne.
- Bakgrunnsbildestørrelse: Omslag
- Bakgrunnsbildets plassering: Senter
Hovedelement
Fullfør kolonneinnstillingene ved å legge til tilpasset CSS til hovedtavleelementet i hver kolonne. Disse linjene med CSS-kode hjelper oss å plassere kolonnene under hverandre på nettbrettet, i stedet for å ha to side om side.
bredde: 100%! viktig; margin: 50px 0px 50px 0px! viktig;
Legg til en personmodul i kolonnen
Legg til innhold
For å dele informasjon om teammedlemmer, vil vi bruke en Person-modul. Legg til den første Person-modulen i kolonne 1 og bruk innhold de votre choix.
Slett bildet
Slett deretter bildet. Vi bruker i stedet bakgrunnsbildet til kolonnen.
Bakgrunnsbilde
Vi vil deretter legge til et bildeoverlegg som bakgrunnsbilde av modulen. Du finner den vi bruker ved å laste ned mappen i begynnelsen av denne opplæringen.
- Bakgrunnsbildestørrelse: Omslag
- Bakgrunnsbildets plassering: Senter
Tekstinnstillinger for tittel
Gå til moduldesignfanen og endre titteltekstinnstillingene som følger:
- Tittelnivå: H3
- Tittel font: Quicksand
- Tittel skriftvekt: fet skrift
- Tittel tekstfarge: #ffffff
- Tittelstørrelse: 230%
Innstillinger for brødtekst
Endre også innstillinger for brødtekst.
- Kropps skrifttype: Åpen sans
- Tekstfarge på kroppen: #ffffff
- Linjehøyde: 2,2 em
Innstillinger for plasseringstekst
Gjør deretter noen endringer i innstillingene for posisjonstekst.
- Font Position: Open Sans
- Tekstfarge på plassering: # edf000
avstanden
Og fullfør modulinnstillingene ved å legge til tilpassede polstringsverdier i avstandsinnstillingene.
- Øvre polstring: 70%
- Nedre polstring: 10%
- Venstre polstring: 10%
- Høyre polstring: 10%
Dupliser Person-modulen 4 ganger
Når du har fullført Person-modulen, kan du klone hele modulen fire ganger.
Plasser duplikater i de resterende kolonnene
Plasser dupliserte moduler i de resterende fire kolonnene i raden. Pass på å også endre innhold.
Gjør Row til en automatisk rullekarusell
Endre størrelsen på linje 2
Nå, for å gjøre denne raden til en automatisk rulling av teammedlemskarusellen, må vi åpne radinnstillingene på nytt og endre bredden og maksimal bredde i størrelsesinnstillingene.
- Bredde: 180%
- Maksimal bredde: 220% (skrivebord), 100% (nettbrett og telefon)
Legg til horisontal bevegelse av linje nr. 2
Fullfør linjeinnstillingene ved å legge til vannrett bevegelse til rulleeffektinnstillingene i den avanserte kategorien, og du er ferdig!
- Aktiver horisontal bevegelse: Ja
- Start forskyvning:
- Kontor: 2,5
- Nettbrett og telefon: 0
- Gjennomsnittlig forskyvning: 0 (ved 40%)
- Slutt forskyvning:
- Kontor: -25 (62%)
- Nettbrett og telefon: 0
- Trigger bevegelseseffekt: midten av elementet
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
kontor
avslutt~~POS=TRUNC tanker
I denne opplæringen har vi vist deg hvordan du kan bli kreativ med de innebygde rulleeffektene til Divi. Nærmere bestemt gjenskapte vi en vakker autorullende karusell for teammedlemmer. Når Besøkende rull på siden, en annen del av karusellen vises.
