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.

Divi teammedlem rulle

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)
Parameterindstillinger

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
Overløbskonfiguration

Tilføj linje 1

Kolonne struktur

Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:

Vælg divi-layout

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
Divi line parameter

afstand

Vi tilføjer også tilpasset top- og bundpolstring.

  • Øvre polstring: 100px
  • Bundpolstring: 100px
Divi afstand linje opsætning

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.

Mød holdet

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)
Mellemrum med divi-tekst

Føj et separationsmodul til kolonnen

synlighed

Tilføj derefter et skillemodul. Sørg for, at indstillingen "Vis separator" er aktiveret.

  • Vis separator: Ja
Vis divi-separator

Linje

Foretag derefter nogle ændringer i linjeindstillingerne.

  • Linjefarve: #edf000
  • Linjestil: solid
  • Linjeposition: Top
divi mellemrum stil

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
Dimensionering af divi-modullinje

Tilføj en linje # 2

Kolonne struktur

Til næste række! Brug følgende kolonnestruktur:

Divi kolonne konfiguration

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%
Konfiguration af tagrendebredde

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)
Konfiguration af linjeafstandsstil

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.

Divi parameter linje konfiguration

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
Divi-baggrundssøjlekonfiguration

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
Tilføj divi kolonne baggrundsbillede

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;
divi kolonne css kode

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.

divi personnavn

Slet billede

Slet derefter billedet. Vi bruger i stedet kolonnens baggrundsbillede.

Fjern divi-billede

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
Personmodulets baggrundskonfiguration

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 %
Tilpasning af Divi-modulets titel

Indstillinger for kropstekst

Skift også indstillinger for kropstekst.

  • Body Font: Open Sans
  • Brødtekstfarve: #ffffff
  • Kropslinjens højde: 2,2 em
Divi kropstilpasning

Indstillinger for positionstekst

Foretag derefter nogle ændringer i indstillingerne for positionstekst.

  • Positionsskrifttype: Åbn uden
  • Positionstekstfarve: #edf000
dykke position

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%
divi person modul afstand

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.

Tilpas brugerlisten

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)
Divi linje ændringsafstand

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
Divi-rullende animationskonfiguration

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

Divi teammedlem rulle

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.