Når du designer tjenestesiden din, vil du være sikker på at din Besøkende legge merke til alle de forskjellige tjenestene du tilbyr. I mange tilfeller vil det kun være én spesifikk tjeneste de leter etter, men hvis du gir en strømlinjeformet måte i tjenestestrukturen din, er det mer sannsynlig at Besøkende håndtere dem alle.
I denne opplæringen viser vi deg hvordan du kan bli kreativ med rulleeffektene til Divi og skape en sømløs tjenesteovergang. Du vil også kunne laste ned JSON-filen gratis!
La oss gå.
Mulig utfall
Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.
1, gjenskape strukturen til elementene
Legg til del 1
avstanden
Start med å legge til en ny seksjon på siden du jobber med. Åpne seksjonsinnstillingene og endre polstringsverdiene på forskjellige skjermstørrelser.
- Øvre polstring: 80px (stasjonær og nettbrett), 0px (telefon)
- Bunnpolstring: 80px
Legg til en ny linje
Kolonne struktur
Fortsett å legge til en ny rad ved å bruke følgende kolonnestruktur:
dimensjonering
Uten å legge til flere moduler, åpne linjeparametrene og bruke følgende endringer på dimensjoneringsparametrene:
- Bruk en tilpasset rennebredde: Ja
- Rennesteinsbredde: 1
- Bredde: 90%
- Maks bredde: 1580px
avstanden
Legg deretter til en tilpasset topp- og bunnmargin.
- Øvre margin: 200px
- Bunnmargin: 200px
Legg til en tekstmodul i 1-kolonnen
Legg til H2-innhold
Det er på tide å legge til moduler, og starter med en tekstmodul i kolonne 1. Skriv inn innhold H2 etter eget valg.
H2 tekstinnstillinger
Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:
- Tittel 2 Politi: kvart år
- Header 2 Tekststørrelse: 80px (stasjonær), 50px (nettbrett), 40px (telefon)
- Høyden på hodet på linje 2: 1.2em
avstanden
Legg deretter til en lavere margin på nettbrettet og telefonen.
- Bunnmargin: 50 piksler (bare nettbrett og telefon)
Legg til en tekstmodul i 2-kolonnen
Legg til innhold
La oss gå videre til den andre kolonnen. Der er den første modulen vi trenger en tekstmodul med en viss innhold beskrivelse.
Tekstinnstillinger
Bytt til moduldesignfanen og endre tekstinnstillingene deretter:
- Tekst font: hytte
- Tekst font stil: store bokstaver
- Tekstfarge: # 000000
- Tekststørrelse: 18px (stasjonær), 15px (nettbrett), 13px (telefon)
- Tekstbokstavavstand: 3px (stasjonær), 1px (nettbrett og telefon)
- Høyde på tekstlinjen: 3em
Legg til en skillemodul i kolonne 2
synlighet
Den neste og siste modulen vi trenger i denne kolonnen er en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.
- Vis separator: Ja
Ligne
Endre deretter linjefargen på modulen.
- Linjefarge: # 000000
dimensjonering
Gjør deretter noen endringer i dimensjoneringsparametrene.
- Divider vekt: 3px
- Bredde: 28%
avstanden
Vi legger også til en toppmargin.
- Øvre margin: 10px
Legg til del 2
avstanden
La oss gå videre til neste vanlige del. Fjern standard topp padding fra seksjonen.
- Øvre polstring: 0px
overløp
Skjul også overløpene.
- Horisontalt overløp: skjult
- Vertikal overløp: skjult
Legg til en ny linje
Kolonne struktur
Fortsett å legge til en første rad ved å bruke følgende kolonnestruktur:
dimensjonering
Uten å legge til flere moduler, åpne linjeparametrene, få tilgang til dimensjoneringsparametrene og gjøre følgende modifikasjoner:
- Bruk en tilpasset rennebredde: Ja
- Rennesteinsbredde: 1
- Utjevne kolonnehøyder: Ja
- Bredde: 90%
- Maks bredde: 1580px
avstanden
Fjern deretter all standard øvre og nedre polstring.
- Øvre polstring: 0px
- Bunnpolstring: 0px
Innstillinger for kolonne 1
Bakgrunnsfarge
Åpne deretter innstillingene for kolonne 1 og endre bakgrunnsfargen.
- Bakgrunnsfarge: # f7f7f7
avstanden
Fullfør kolonneinnstillingene ved å legge til egendefinerte polstringsverdier på forskjellige skjermstørrelser.
- Øvre polstring: 200px (skrivebord), 100px (nettbrett og telefon)
- Bunn polstring: 200 px (skrivebord), 100 px (nettbrett og telefon)
- Venstre polstring: 8%
- Høyre polstring: 8%
Innstillinger for kolonne 2
avstanden
Fortsett ved å åpne innstillingene i kolonne 2. Gå til den avanserte kategorien og legg til egendefinerte polstringsverdier på forskjellige skjermstørrelser.
- Topp polstring: 100px (stasjonær), 50px (nettbrett og telefon)
- Bunnpolstring: 200px
- Venstre polstring: 150 px (skrivebord), 0 px (nettbrett og telefon)
Legg til en skillemodul i kolonne 1
synlighet
I den første kolonnen er den første modulen vi trenger en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.
- Vis separator: Ja
Ligne
Endre deretter linjefargen på modulen.
- Linjefarge: # 000000
dimensjonering
Gjør også endringer i dimensjoneringsparametrene.
- Divider vekt: 3px
- Bredde: 50%
Legg til en tekstmodul i 1-kolonnen
Legg til H3-innhold
Den neste modulen vi trenger i kolonne 1 er en tekstmodul med innhold H3.
H3 tekstinnstillinger
Bytt til moduldesignfanen og endre H3-tekstinnstillingene:
- Tittel 3 Politi: kvart år
- Tekstfarge på element 3: # 000000
- Element 3 Tekststørrelse: 50px (stasjonær), 40px (nettbrett), 35px (telefon)
- Høyden på hodet på linje 3: 1.1em
Legg til en tekstmodul i 2-kolonnen
Legg til innhold
I den andre kolonnen er den første modulen vi trenger en tekstmodul med noe beskrivelse av innholdet.
Tekstinnstillinger
Endre modulens tekstinnstillinger som følger:
- Tekst font: hytte
- Tekst font stil: store bokstaver
- Tekststørrelse: 18px (stasjonær), 15px (nettbrett), 13px (telefon)
- Tekstbokstavavstand: 3px (stasjonær), 1px (nettbrett og telefon)
- Høyde på tekstlinjen: 3em
Legg til en knappmodul i 2-kolonnen
Legg til en kopi
Den neste og siste modulen vi trenger er en knappmodul. Skriv inn en kopi av ditt valg.
Knappinnstillinger
Stiler deretter knappen.
- Bruk egendefinerte stiler for knappen: Ja
- Knapptekststørrelse: 20 piksler
- Knapptekstfarge: #ffffff
- Knappens bakgrunnsfarge: # 000000
- Knappens bredde: 0px
- Knappeskrift: Kvart
- Knappens skriftvekt: fet
avstanden
Legg også til tilpasset polstring.
- Øvre polstring: 50px
- Bunnpolstring: 50px
- Venstre polstring: 100px
- Høyre polstring: 100px
Stilling
Og flytt knappen deretter:
- Posisjon: Absolutt
- Sted: nederst til venstre
Klone linjen så mange ganger som nødvendig
Når du har fullført hele linjen og alle modulene, kan du klone hele linjen tre ganger.
Endre alt innhold
Sørg for å redigere alt innholdet i dupliserte linjer.
2. Bruk rulleeffekter
Første rad rulleeffekter
Horisontal bevegelse
Når du har fullført alle linjene i seksjonen din, er det på tide å legge til rulleeffektene. Åpne den første raden i seksjonen og legg til vannrett bevegelse.
- Aktiver horisontal bevegelse: Ja
- Start offset: -5
- Gjennomsnittlig forskyvning: 0 (ved 26%)
- Sluttforskyvning: 0
- Trigger bevegelseseffekt: midten av elementet
Fade inn og ut
Bruk også en innkommende og utgående falming.
- Aktiver fade inn og ut: Ja
- Opprinnelig opacitet: 100%
- Gjennomsnittlig opacitet: 100% (ved 50%)
- Endelig opacitet: 0% (til 53%)
- Trigger bevegelseseffekt: midten av elementet
Rulleeffekter på midterste rad
Vertikal bevegelse
Deretter vil vi legge til rulleeffekter til alle linjene mellom første og siste linje i seksjonen. Bruk først en vertikal bevegelse:
- Aktiver vertikal bevegelse: Ja
- Start offset: -4
- Gjennomsnittlig forskyvning: 0 (ved 26%)
- Sluttforskyvning: 0
- Bevegelsesutløsereffekt: midten av elementet
Fade inn og ut
Aktiver også en inn- og ut-blekningseffekt.
- Aktiver fade inn og ut: Ja
- Opprinnelig opacitet: 0%
- Gjennomsnittlig opacitet: 100% (fra 27% til 50%)
- Sluttforskyvning: 0 (ved 53%)
- Trigger bevegelseseffekt: midten av elementet
Siste linje rulleeffekter
Vertikal bevegelse
Åpne deretter den siste linjen i seksjonen og legg til følgende vertikale bevegelse:
- Aktiver vertikal bevegelse: Ja
- Start offset: -4
- Gjennomsnittlig forskyvning: 0 (ved 26%)
- Sluttforskyvning: 0
- Trigger bevegelseseffekt: midten av elementet
Fade inn og ut
Med en innkommende og utgående falming, og du er ferdig!
- Aktiver fade inn og ut: Ja
- Opprinnelig opacitet: 0%
- Gjennomsnittlig opacitet: 100% (fra 27% til 50%)
- Endelig opacitet: 100% (til 53%)
- Trigger bevegelseseffekt: midten av elementet
Endelig resultat
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
avslutt~~POS=TRUNC tanker
I denne artikkelen viste vi deg hvordan du lager en vakker serverovergang med rulleeffektene til Divi. Allerede før en serve forsvinner, begynner den andre å dukke opp, og gir en fin overgang som er lett for øyet. Denne tilnærmingen vil hjelpe deg å fremheve hver tjeneste på et individuelt nivå. Du var også i stand til å laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, legg gjerne igjen en kommentar i kommentarfeltet nedenfor.
