Vil du gerne have, at dine teammedlemmer præsenteres i form af en karrusel med Divi ?
Når du opretter din Om-side, vil du sandsynligvis også inkludere dine teammedlemmer der. Ved at gøre det tillader du besøgende at få kontakt med folkene bag din virksomhed.
Hvis du leder efter en måde at animere dine teammedlemmers sektion på scroll, vil du elske denne tutorial.
Vi vil genskabe en smuk automatisk rullende teammedlemskarrusel, der bevæger sig som din besøgende scroll siden.
Lad os gå.
undersøgelse
Før vi dykker ned i selvstudiet, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.
Stationær computer
Mobil version
Lad os begynde at designe med Divi
Læs også: Divi: Sådan afslører du indhold, når du svæver over sektionsopdelingen
Tilføj en ny sektion
Interne magikere
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.
- Polstring (top og bund): 200px (desktop), 100px (tablet og telefon)
synlighed
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
Struktur af søjlen
Fortsæt med at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:
Bredde
Uden at tilføje nogen moduler endnu, åbn linjeindstillingerne, skift til fanen Design og ændre bredden og maks. bredde i størrelsesindstillingerne.
- Bredde: 90 %
- Maks. bredde: 1px
afstand
Vi tilføjer også tilpasset top- og bundpolstring.
- Polstring (top og bund): 100px
Tilføj et tekstmodul til kolonnen
Tilføj indhold i H2-størrelse
Det er tid til at tilføje moduler, begyndende med et første tekstmodul. Indtast en indhold H2 størrelse efter eget valg.
H2 tekstindstillinger
Skift til fanen Design af modulet og modificere H2-tekstparametrene som følger:
- Skrifttype: Quicksand
- Skrifttypevægt: Semi fed
- Tekstfarve: #000000
- Tekststørrelse: 70px (desktop), 50px (tablet), 40px (telefon)
Tilføj et "Divider"-modul til kolonnen
synlighed
Tilføj derefter et modul Divider. Sørg for, at indstillingen "Vis opdeling" er aktiveret.
- Vis skillelinje: JA
Linje
Foretag derefter nogle ændringer i linjeindstillingerne.
- Linjefarve: #edf000
- Stil: Solid
- Linjeposition: Top
dimensionering
Og færdiggør modulparametrene ved at ændre størrelsesparametrene i overensstemmelse hermed:
- Divider Vægt: 20px
- Bredde: 11 %
- Justeringsmodul: venstre
- Højde: 20px
Tilføj linje 2
Struktur af søjlen
Næste række! Brug følgende kolonnestruktur:
dimensionering
Uden at tilføje moduler endnu, skal du åbne rækkeindstillingerne og ændre størrelsesindstillingerne som følger:
- Brug tilpasset tagrendebredde: Ja
- Rendebredde: 2
- Bredde: 100 %
- Maks. bredde: 100 %
Mellemrum (kun tablet og telefon)
Tilføj derefter venstre og højre polstring kun på små skærmstørrelser.
- Polstring (venstre og højre): 5 % (kun tablet og telefon)
Kolonneparametre (5x)
Nu, i de næste tre trin i denne øvelse, vil vi foretage nogle ændringer i kolonnerne. Anvend de tre trin på hver af kolonnerne i din række.
Baggrundsgradient
Tilføj først en gradientbaggrund til hver kolonne.
- Gradientstop (25%): rgba(255,255,255,0)
- Gradientstop (86%): rgba(0,0,0,0.84)
- Type: Lineær
- Firkantet 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.
- Baggrundsbillede Størrelse: Cover
- Baggrundsbillede Position: Center
Tilføjet tilpasset CSS (kun tablet)
Fuldfør kolonneindstillingerne ved at tilføje tilpasset CSS til hovedelementet (Til visning Tablet kun) 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.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Tilføj et 'Person'-modul til kolonnen
Tilføj indhold
For at dele oplysninger om teammedlemmer bruger vi et modul Person.
Tilføj det første Person-modul til kolonne 1 og brug indhold de votre choix.
Slet billede
Slet derefter billedet. I stedet bruger vi kolonnens baggrundsbillede.
Baggrundsbillede
Dernæst tilføjer vi en billedoverlejring som baggrundsbillede for modulet.
- Baggrundsbillede Størrelse: Cover
- Baggrundsbilledets position: i midten
Titeltekstindstillinger
Skift til fanen Design modul og ændre titeltekstindstillingerne som følger:
- Titeloverskriftsniveau: H3
- Titelskrifttype: Quicksand
- Skrifttypevægt: Fed
- Titel Tekstfarve: #ffffff
- Titeltekststørrelse: 230 %
Indstillinger for kropstekst
Skift også indstillinger for kropstekst.
- Body Font: Open Sans
- Tekstfarve: #ffffff
- Linjehøjde: 2,2 em
Indstillinger for indlæg af et teammedlem
Foretag derefter nogle ændringer i tekstindstillingerne for stillingen, som teammedlemmet har.
- Positionsskrifttype: Åbn uden
- Positionstekstfarve: #edf000
afstand
Og fuldfør modulparametrene ved at tilføje brugerdefinerede udfyldningsværdier til afstandsparametrene.
- Polstring: 70% (øverst), 10% (nederst, venstre og højre)
Klon "Person"-modulet fire 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 en række til en automatisk rullende karrusel
Se også: Divi: Sådan opretter du et flydende kolonnegitter ved svævning
Skift rækkestørrelse #2
For nu at gøre denne linje til en automatisk rullende karrusel, bliver vi nødt til at genåbne linjeindstillingerne og ændre bredden og maks. bredde i størrelsesindstillingerne.
- Bredde: 180 %
- Maks. bredde: 220 % (desktop), 100 % (tablet og telefon)
Tilføj vandret bevægelse til linje 2
Fuldfør linjeindstillinger ved at tilføje vandret bevægelse for at rulle effektindstillinger på fanen Avanceret under mulighed Rulleeffekter og du er færdig!
- Aktiver vandret bevægelse: Ja
- Start offset:
- Desktop: 2,5
- Tablet og telefon: 0
- Midtforskydning: 0 (til 40 %)
- Slutforskydning:
- Desktop: -25 (til 62 %)
- Tablet og telefon: 0
- Motion Effect Trigger: Middle of Element
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.
Stationær computer
Download DIVI nu!!!
Mobil visning
Download DIVI nu!!!
Konklusion
I denne artikel har vi vist dig, hvordan du bliver kreativ med de indbyggede rulleeffekter Divi.
Specifikt genskabte vi en smuk karrusel med auto-scrolling teammedlemmer. Når besøgende scroll på siden, en anden del af karrusellen dukker op.
Vi håber, at denne vejledning vil inspirere dig til dine næste projekter. Divi. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
