Vil du at teammedlemmene dine skal presenteres i form av en karusell med Divi ?
Når du setter opp Om-siden din, vil du sannsynligvis inkludere teammedlemmene dine der også. Ved å gjøre det tillater du Besøkende for å få kontakt med menneskene bak virksomheten din.
Hvis du leter etter en måte å animere teammedlemmenes seksjon på scroll, vil du elske denne opplæringen.
Vi skal gjenskape en vakker automatisk rullende teammedlemskarusell som beveger seg som din Besøkende bla gjennom siden.
La oss gå.
undersøkelsen
Før du dykker inn i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.
Stasjonær datamaskin
Mobil versjon
La oss begynne å designe med Divi
Les også: Divi: Hvordan avsløre innhold ved å holde musepekeren over seksjonsdeleren
Legg til en ny seksjon
Interne magikere
Start med å legge til en ny vanlig seksjon på siden du jobber med. Åpne seksjonsinnstillinger og legg til tilpasset polstring på forskjellige skjermstørrelser.
- Polstring (øverst og nederst): 200 piksler (skrivebord), 100 piksler (nettbrett og telefon)
synlighet
For å sikre at ingen horisontale rullefelt vises i designet vårt, skjuler vi seksjonsoverløp i avansert-fanen.
- Horisontalt overløp: Skjult
- Vertikal overløp: Skjult
Legg til linje #1
Struktur av kolonnen
Fortsett med å legge til en ny rad i seksjonen ved hjelp av følgende kolonnestruktur:
Bredde
Uten å legge til noen moduler ennå, åpne linjeinnstillingene, bytt til fanen utforming og endre bredden og maks bredden i dimensjoneringsinnstillingene.
- Bredde: 90 %
- Maks bredde: 1px
avstanden
Vi legger også til tilpasset øvre og nedre polstring.
- Polstring (øverst og bunn): 100px
Legg til en tekstmodul i kolonnen
Legg til innhold i H2-størrelse
Det er på tide å legge til moduler, og starter med en første tekstmodul. Skriv inn en innhold H2 størrelse etter eget valg.
H2 tekstinnstillinger
Bytt til fane utforming av modulen og endre H2-tekstparameterne som følger:
- Font: Quicksand
- Skriftvekt: Semi fet
- Tekstfarge: #000000
- Tekststørrelse: 70px (skrivebord), 50px (nettbrett), 40px (telefon)
Legg til en "Divider"-modul i kolonnen
synlighet
Legg deretter til en modul divider. Sørg for at alternativet "Vis skillelinje" er aktivert.
- Vis skillelinje: JA
Ligne
Gjør deretter noen endringer i linjeinnstillingene.
- Linjefarge: #edf000
- Stil: Solid
- Linjeposisjon: Topp
Størrelse
Og fullfør modulparametrene ved å modifisere størrelsesparametrene tilsvarende:
- Divider Vekt: 20px
- Bredde: 11 %
- Justeringsmodul: venstre
- Høyde: 20px
Legg til linje 2
Struktur av kolonnen
Neste rad! Bruk følgende kolonnestruktur:
Størrelse
Uten å legge til noen moduler ennå, åpner du radinnstillingene og endrer størrelsesinnstillingene som følger:
- Bruk egendefinert takrennebredde: Ja
- Rennebredde: 2
- Bredde: 100 %
- Maks bredde: 100 %
Avstand (kun nettbrett og telefon)
Deretter legger du kun til venstre og høyre polstring på små skjermstørrelser.
- Polstring (venstre og høyre): 5 % (kun nettbrett og telefon)
Kolonneparametere (5x)
Nå, i de neste tre trinnene i denne opplæringen, vil vi gjøre noen endringer i kolonnene. Bruk de tre trinnene på hver av kolonnene i raden din.
Bakgrunnsgradient
Først legger du til en gradientbakgrunn til hver kolonne.
- Gradientstopp (25%): rgba(255,255,255,0)
- Gradientstopp (86%): rgba(0,0,0,0.84)
- Type: Lineær
- Firkantet gradient over bakgrunnsbilde: JA
Bakgrunnsbilde
Last deretter opp et bakgrunnsbilde du ønsker. Dette bakgrunnsbildet representerer hvert teammedlem, så bruk et annet bilde for hver kolonne.
- Bakgrunnsbildestørrelse : Cover
- Bakgrunnsbilde Posisjon: Senter
Lagt til tilpasset CSS (kun nettbrett)
Fullfør kolonneinnstillingene ved å legge til tilpasset CSS til hovedelementet (For visning Tablett kun) i hver kolonne.
Disse linjene med CSS-kode vil hjelpe oss med å plassere kolonnene under hverandre på nettbrettet, i stedet for å ha to side ved side.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Legg til en "Person"-modul i kolonnen
Legg til innhold
For å dele informasjon om teammedlemmene vil vi bruke en modul Person.
Legg til den første Person-modulen i kolonne 1 og bruk innhold de votre choix.
Slett bildet
Slett deretter bildet. I stedet bruker vi kolonnens bakgrunnsbilde.
Bakgrunnsbilde
Deretter legger vi til et bildeoverlegg som bakgrunnsbilde for modulen.
- Bakgrunnsbildestørrelse: Omslag
- Bakgrunnsbildeposisjon: midt
Tekstinnstillinger for tittel
Bytt til fane utforming modul og endre titteltekstinnstillingene som følger:
- Tittel Overskrift Nivå: H3
- Tittel Font: Quicksand
- Skriftvekt: Fet
- Tittel Tekstfarge: #ffffff
- Titteltekststørrelse: 230 %
Innstillinger for brødtekst
Endre også innstillinger for brødtekst.
- Body Font: Open Sans
- Tekstfarge: #ffffff
- Linjehøyde: 2,2 em
Innstillinger for posisjonstekst for teammedlem
Deretter gjør du noen endringer i tekstinnstillingene for stillingen som teammedlemmet har.
- Posisjonsskrift: Åpne uten
- Posisjonstekstfarge: #edf000
avstanden
Og fullfør modulinnstillingene ved å legge til tilpassede polstringsverdier i avstandsinnstillingene.
- Polstring: 70 % (øverst), 10 % (bunn, venstre og høyre)
Klon "Person"-modulen fire 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.
Sørg også for å endre innhold.
Gjør en rad om til en automatisk rullende karusell
Se også: Divi: Hvordan lage et flytende kolonnenett ved sveving
Endre radstørrelse #2
Nå, for å gjøre denne linjen om til en automatisk rullende karusell, må vi åpne linjeinnstillingene på nytt og endre bredden og maksbredden i størrelsesinnstillingene.
- Bredde: 180 %
- Maks bredde: 220 % (stasjonær datamaskin), 100 % (nettbrett og telefon)
Legg til horisontal bevegelse på linje 2
Fullfør linjeinnstillinger ved å legge til horisontal bevegelse for å rulle effektinnstillinger i fanen Avansert under alternativ Rulleeffekter og du er ferdig!
- Aktiver horisontal bevegelse: Ja
- Startforskyvning:
- Desktop: 2,5
- Nettbrett og telefon: 0
- Midtforskyvning: 0 (til 40 %)
- Sluttforskyvning:
- Desktop: -25 (til 62 %)
- Nettbrett og telefon: 0
- Motion Effect Trigger: Middle of Element
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.
Stasjonær datamaskin
Last ned DIVI nå!!!
Mobil visning
Last ned DIVI nå!!!
konklusjonen
I denne artikkelen har vi vist deg hvordan du kan bli kreativ med de innebygde rulleeffektene til Divi.
Nærmere bestemt gjenskapte vi en vakker karusell med teammedlemmer med automatisk rulling. Når Besøkende rull på siden, en annen del av karusellen vises.
Vi håper denne veiledningen vil inspirere deg til dine neste prosjekter. Divi. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
