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.

Overgang mellem sektionsdel

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
Divi-parameterafsnit

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
Konfiguration af divi-afstand

afstand

Tilføj derefter en brugerdefineret øverste og nederste margin.

  • Øvre margen: 200px
  • Nederste margin: 200px
Konfiguration af divi linjeafstand

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.

Vores tjenester, der tilbydes af eksperterne i øjeblikket

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
Hoved divi politi

afstand

Tilføj derefter en lavere margin på tabletten og telefonen.

  • Nederste margen: 50 pixels (kun tablet og telefon)
Konfiguration af divi-tekstafstand

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.

Indhold divi tekstfelt

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
Divi-tekstparameter

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
Synlig skillevæg

Linje

Skift derefter modulets linjefarve.

  • Linjefarve: # 000000
Opdeler farve baggrund

dimensionering

Foretag derefter nogle ændringer i størrelsesparametrene.

  • Divider vægt: 3px
  • Bredde: 28%
Divi separator størrelse

afstand

Vi tilføjer også en øverste margen.

  • Øvre margen: 10px
Divi separator modul afstand

Tilføj sektion # 2

afstand

Lad os gå videre til det næste almindelige afsnit. Fjern den øverste standardpolstring fra sektionen.

  • Øvre polstring: 0px
Afsnit 2 divi mellemrum

overløb

Skjul også overløbene.

  • Vandret overløb: skjult
  • Lodret overløb: skjult
Skjul overløb af divi-modul

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:

Vælg et divi-layout

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
Divisionssnit til tagrendekonfiguration

afstand

Fjern derefter al standard øvre og nedre polstring.

  • Øvre polstring: 0px
  • Bundpolstring: 0px
Indstillinger for afstand for Divi 1-linjemodul

Indstillinger for kolonne 1

Baggrundsfarve

Åbn derefter indstillingerne for kolonne 1, og skift baggrundsfarven.

  • Baggrundsfarve: # f7f7f7
Divi line modul baggrundskonfiguration

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%
Række modul kolonneindstillinger

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)
Indstillinger for afstand for Divi-modul

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
Vis skillelinje divi 1

Linje

Skift derefter modulets linjefarve.

  • Linjefarve: # 000000
Divi separator indstillinger

dimensionering

Foretag også ændringer i størrelsesparametrene.

  • Divider vægt: 3px
  • Bredde: 50%
Divi separator størrelse

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.

Indstilling af Divi-indholdssektion

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
Divi design negleopsætning

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.

Indstilling af Divi-tekstmodul

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
Divi tekstform justering af skrifttype

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.

Indstilling af tekstmodulindhold

Knapindstillinger

Stil derefter knappen.

  • Brug brugerdefinerede stilarter til knappen: Ja
  • Knaptekststørrelse: 20 pixels
  • Knappen tekstfarve: #ffffff
  • Knappens baggrundsfarve: # 000000
  • Knapkantbredde: 0px
Indstilling af Divi-knapstil
  • Knap skrifttype: kvartalsvis
  • Knappens fontvægt: fed
Divi-knapfarveindstillinger

afstand

Tilføj også brugerdefineret polstring.

  • Øvre polstring: 50px
  • Bundpolstring: 50px
  • Venstre polstring: 100px
  • Højre polstring: 100px
Indstillinger for afstand til knapafstand for Divi-modul

Position

Og placer knappen igen i overensstemmelse hermed:

  • Position: Absolut
  • Placering: nederst til venstre
Divi knap modul position justering

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.

Klon divi-modul

Skift alt indhold

Sørg for at redigere alt indholdet i duplikatlinjer.

Rediger indhold i divisektion

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
Anvend divi-rulleeffekter

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
Konfigurer fade animation sektion divi

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
Divi-rulning aniation konfiguration

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
Divi line fade animation

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
Divi line modul rulle animation

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
Divi line modul udseende animationsindstillinger

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.

Endelig demo

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.