Når du designer din serviceside, vil du gerne sikre dig, at din besøgende læg mærke til alle de forskellige tjenester, du leverer. I mange tilfælde vil det kun være én bestemt tjeneste, de leder efter, men hvis du leverer en strømlinet måde i din servicestruktur, er det mere sandsynligt, at din besøgende håndtere dem alle.
I denne vejledning viser vi dig, hvordan du bliver kreativ med rulleeffekterne Divi og skabe en problemfri serviceovergang. Du vil også være i stand til at downloade JSON-filen gratis!
Lad os gå.
Muligt resultat
Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.
1, genskab strukturen af elementerne
Tilføj sektion # 1
afstand
Start med at tilføje et nyt afsnit til den side, du arbejder på. Åbn sektionsindstillingerne, og skift polstringsværdierne på forskellige skærmstørrelser.
- Øvre polstring: 80px (desktop og tablet), 0px (telefon)
- Bundpolstring: 80px
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene og anvende følgende ændringer på dimensioneringsparametrene:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Bredde: 90%
- Maks bredde: 1580px
afstand
Tilføj derefter en brugerdefineret øverste og nederste margin.
- Øvre margen: 200px
- Nederste margin: 200px
Føj et tekstmodul til 1-kolonnen
Tilføj H2 indhold
Det er tid til at tilføje moduler, startende med et tekstmodul i kolonne 1. Indtast indhold H2 efter eget valg.
H2 tekstindstillinger
Gå til fanen til moduldesign, og skift indstillingerne for H2-tekst som følger:
- Afsnit 2 Politi: kvartalsvis
- Header 2 Tekststørrelse: 80px (desktop), 50px (tablet), 40px (telefon)
- Højde på hoved 2 på hovedet: 1.2em
afstand
Tilføj derefter en lavere margin på tabletten og telefonen.
- Nederste margen: 50 pixels (kun tablet og telefon)
Føj et tekstmodul til 2-kolonnen
Tilføj indhold
Lad os gå videre til den anden kolonne. Der er det første modul, vi skal bruge, et tekstmodul med et bestemt indhold beskrivelse.
Tekstindstillinger
Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekst font: kabine
- Tekst font stil: store bogstaver
- Tekstfarve: # 000000
- Tekststørrelse: 18px (desktop), 15px (tablet), 13px (telefon)
- Mellemrum mellem tekster og bogstaver: 3px (desktop), 1px (tablet og telefon)
- Højde på tekstlinjen: 3em
Føj et separationsmodul til kolonne 2
synlighed
Det næste og sidste modul, vi har brug for i denne kolonne, er et separationsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.
- Vis separator: Ja
Linje
Skift derefter modulets linjefarve.
- Linjefarve: # 000000
dimensionering
Foretag derefter nogle ændringer i størrelsesparametrene.
- Divider vægt: 3px
- Bredde: 28%
afstand
Vi tilføjer også en øverste margen.
- Øvre margen: 10px
Tilføj sektion # 2
afstand
Lad os gå videre til det næste almindelige afsnit. Fjern den øverste standardpolstring fra sektionen.
- Øvre polstring: 0px
overløb
Skjul også overløbene.
- Vandret overløb: skjult
- Lodret overløb: skjult
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en første række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene, få adgang til dimensioneringsparametrene og foretage følgende ændringer:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Udligne kolonnehøjder: Ja
- Bredde: 90%
- Maks bredde: 1580px
afstand
Fjern derefter al standard øvre og nedre polstring.
- Øvre polstring: 0px
- Bundpolstring: 0px
Indstillinger for kolonne 1
Baggrundsfarve
Åbn derefter indstillingerne for kolonne 1, og skift baggrundsfarven.
- Baggrundsfarve: # f7f7f7
afstand
Fuldfør kolonneindstillingerne ved at tilføje tilpassede polstringsværdier på forskellige skærmstørrelser.
- Øvre polstring: 200px (skrivebord), 100px (tablet og telefon)
- Bundpolstring: 200px (skrivebord), 100px (tablet og telefon)
- Venstre polstring: 8%
- Høj polstring: 8%
Indstillinger for kolonne 2
afstand
Fortsæt ved at åbne indstillingerne i kolonne 2. Gå til fanen avanceret, og tilføj tilpassede polstringsværdier på forskellige skærmstørrelser.
- Top polstring: 100px (desktop), 50px (tablet og telefon)
- Bundpolstring: 200px
- Venstre polstring: 150 px (skrivebord), 0 px (tablet og telefon)
Føj et separationsmodul til kolonne 1
synlighed
I den første kolonne er det første modul, vi har brug for, et separationsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.
- Vis separator: Ja
Linje
Skift derefter modulets linjefarve.
- Linjefarve: # 000000
dimensionering
Foretag også ændringer i størrelsesparametrene.
- Divider vægt: 3px
- Bredde: 50%
Føj et tekstmodul til 1-kolonnen
Tilføj H3 indhold
Det næste modul vi skal bruge i kolonne 1 er et tekstmodul med indhold H3.
H3 tekstindstillinger
Skift til moduldesignfanen, og rediger H3-tekstindstillingerne:
- Afsnit 3 Politi: kvartalsvis
- Tekstfarve på punkt 3: # 000000
- Element 3 Tekststørrelse: 50px (desktop), 40px (tablet), 35px (telefon)
- Højde på hoved 3 på hovedet: 1.1em
Føj et tekstmodul til 2-kolonnen
Tilføj indhold
I den anden kolonne er det første modul, vi har brug for, et tekstmodul med noget beskrivelse af indholdet.
Tekstindstillinger
Skift modulets tekstindstillinger som følger:
- Tekst font: kabine
- Tekst font stil: store bogstaver
- Tekststørrelse: 18px (desktop), 15px (tablet), 13px (telefon)
- Mellemrum mellem tekster og bogstaver: 3px (desktop), 1px (tablet og telefon)
- Højde på tekstlinjen: 3em
Føj et knapmodul til 2-kolonnen
Tilføj en kopi
Det næste og sidste modul, vi har brug for, er et knapmodul. Indtast en kopi efter eget valg.
Knapindstillinger
Stil derefter knappen.
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 20 pixels
- Knappen tekstfarve: #ffffff
- Knappens baggrundsfarve: # 000000
- Knapkantbredde: 0px
- Knap skrifttype: kvartalsvis
- Knappens fontvægt: fed
afstand
Tilføj også brugerdefineret polstring.
- Øvre polstring: 50px
- Bundpolstring: 50px
- Venstre polstring: 100px
- Højre polstring: 100px
Position
Og placer knappen igen i overensstemmelse hermed:
- Position: Absolut
- Placering: nederst til venstre
Klon linjen så mange gange som nødvendigt
Når du har afsluttet hele linjen og alle dens moduler, kan du klone hele linjen tre gange.
Skift alt indhold
Sørg for at redigere alt indholdet i duplikatlinjer.
2. Anvend rulleeffekter
Rulleeffekter fra første række
Horisontal bevægelse
Når du har gennemført alle linjerne i dit afsnit, er det tid til at tilføje rulleeffekterne. Åbn sektionens første række og tilføj vandret bevægelse.
- Aktivér vandret bevægelse: Ja
- Start offset: -5
- Gennemsnitlig forskydning: 0 (ved 26%)
- Slutforskydning: 0
- Trigger bevægelseseffekt: midten af elementet
Fade ind og ud
Brug også en indgående og udgående fade-effekt.
- Aktivér fade ind og ud: Ja
- Indledende opacitet: 100%
- Gennemsnitlig opacitet: 100% (ved 50%)
- Endeopacitet: 0% (til 53%)
- Trigger bevægelseseffekt: midten af elementet
Mellem række rulleeffekter
Lodret bevægelse
Dernæst vil vi tilføje rulleeffekter til alle linjerne mellem den første og den sidste linje i sektionen. Brug først en lodret bevægelse:
- Aktivér lodret bevægelse: Ja
- Start offset: -4
- Gennemsnitlig forskydning: 0 (ved 26%)
- Slutforskydning: 0
- Bevægelsesudløsende effekt: midten af elementet
Fade ind og ud
Aktivér også en ind- og ud-fade-effekt.
- Aktivér fade ind og ud: Ja
- Indledende opacitet: 0%
- Gennemsnitlig opacitet: 100% (fra 27% til 50%)
- Slut offset: 0 (ved 53%)
- Trigger bevægelseseffekt: midten af elementet
Sidste linie Scroll Effects
Lodret bevægelse
Åbn derefter den sidste linje i sektionen og tilføj følgende lodrette bevægelse:
- Aktivér lodret bevægelse: Ja
- Start offset: -4
- Gennemsnitlig forskydning: 0 (ved 26%)
- Slutforskydning: 0
- Trigger bevægelseseffekt: midten af elementet
Fade ind og ud
Med en indkommende og udgående falmende effekt, og du er færdig!
- Aktivér fade ind og ud: Ja
- Indledende opacitet: 0%
- Gennemsnitlig opacitet: 100% (fra 27% til 50%)
- Endeopacitet: 100% (til 53%)
- Trigger bevægelseseffekt: midten af elementet
Endelig resultat
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
endelige tanker
I denne artikel viste vi dig, hvordan du skaber en smuk serveovergang med rulleeffekterne Divi. Allerede inden den ene serv forsvinder, begynder den anden at dukke op, hvilket giver en flot overgang, der er let for øjet. Denne tilgang vil hjælpe dig med at fremhæve hver tjeneste på et individuelt niveau. Du var også i stand til at downloade JSON-filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.