Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Når du designer tjenestesiden din, vil du forsikre deg om at de besøkende legger merke til alle de forskjellige tjenestene du tilbyr. I mange tilfeller vil dette bare være en bestemt tjeneste de ser etter, men hvis du gir en strømlinjeformet måte i tjenestestrukturen, er det mer sannsynlig at de besøkende behandler dem alle. 

I denne veiledningen viser vi deg hvordan du kan bli kreativ med Divis rulleeffekter og skape en sømløs tjenesteovergang. Du kan også 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.

Overgang mellom seksjon divi

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

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

avstanden

Legg deretter til en tilpasset topp- og bunnmargin.

  • Øvre margin: 200px
  • Bunnmargin: 200px
Divi linjeavstandskonfigurasjon

Legg til en tekstmodul i 1-kolonnen

Legg til H2-innhold

Det er på tide å legge til moduler, startende med en tekstmodul i kolonne 1. Skriv inn H2-innhold du ønsker.

Våre tjenester som tilbys av eksperter for øyeblikket

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
Leder divi-politiet

avstanden

Legg deretter til en lavere margin på nettbrettet og telefonen.

  • Bunnmargin: 50 piksler (bare nettbrett og telefon)
Divi-tekstavstandskonfigurasjon

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 noe beskrivelsesinnhold.

Innhold divi tekstboks

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

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
Synlig skillelinje

Ligne

Endre deretter linjefargen på modulen.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

  • Linjefarge: # 000000
Divider farge bakgrunn

dimensjonering

Gjør deretter noen endringer i dimensjoneringsparametrene.

  • Divider vekt: 3px
  • Bredde: 28%
Divi separator størrelse

avstanden

Vi legger også til en toppmargin.

  • Øvre margin: 10px
Divi separator modul avstand

Legg til del 2

avstanden

La oss gå videre til neste vanlige del. Fjern standard topp padding fra seksjonen.

  • Øvre polstring: 0px
Seksjon 2 divi avstand

overløp

Skjul også overløpene.

  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Skjul divi-modul overløp

Legg til en ny linje

Kolonne struktur

Fortsett å legge til en første rad ved å bruke følgende kolonnestruktur:

Velg et divi-oppsett

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
Divisjonsseksjon for takrenner

avstanden

Fjern deretter all standard øvre og nedre polstring.

  • Øvre polstring: 0px
  • Bunnpolstring: 0px
Avstandsinnstillinger for Divi 1 linjemodul

Innstillinger for kolonne 1

Bakgrunnsfarge

Åpne deretter innstillingene for kolonne 1 og endre bakgrunnsfargen.

  • Bakgrunnsfarge: # f7f7f7
Divi line modul bakgrunnskonfigurasjon

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%
Radmodulkolonneinnstillinger

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)
Avstandsinnstillinger for divi-modul

Legg til en skillemodul i kolonne 1

synlighet

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

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

Ligne

Endre deretter linjefargen på modulen.

  • Linjefarge: # 000000
Divi separator innstillinger

dimensjonering

Gjør også endringer i dimensjoneringsparametrene.

  • Divider vekt: 3px
  • Bredde: 50%
Divi separator størrelse

Legg til en tekstmodul i 1-kolonnen

Legg til H3-innhold

Den neste modulen vi trenger i kolonne 1 er en tekstmodul med H3-innhold.

Divi innhold seksjon innstilling

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.

Divi tekstmodulinnstilling

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
Divi tekst mold justering

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.

Innstilling for tekstmodulinnhold

Knappinnstillinger

Stiler deretter knappen.

  • Bruk egendefinerte stiler for knappen: Ja
  • Knapptekststørrelse: 20 piksler
  • Knapptekstfarge: #ffffff
  • Knappens bakgrunnsfarge: # 000000
  • Knappens bredde: 0px
Innstilling av Divi-knappstil
  • Knappeskrift: Kvart
  • Knappens skriftvekt: fet
Divi-knappens fargeinnstillinger

avstanden

Legg også til tilpasset polstring.

  • Øvre polstring: 50px
  • Bunnpolstring: 50px
  • Venstre polstring: 100px
  • Høyre polstring: 100px
Avstandsinnstillinger for divi-modulknapp

Stilling

Og flytt knappen deretter:

  • Posisjon: Absolutt
  • Sted: nederst til venstre
Divi-knappmodulposisjonsjustering

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.

Klon divi-modul

Endre alt innhold

Sørg for å redigere alt innholdet i dupliserte linjer.

Rediger innholdet i divisjonen

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

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
Konfigurer deleavdelingen for fade-animasjon

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
Divi scrolling aniation konfigurasjon

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

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
Divi linjemodul rulle animasjon

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
Divi linjemodulens utseende animasjonsinnstillinger

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.

Endelig demo

avslutt~~POS=TRUNC tanker

I denne artikkelen har vi vist deg hvordan du lager en vakker tjenesteovergang med de rulleeffektene av Divi. Allerede før en servering forsvinner, begynner den andre å dukke opp, noe som gir en fin overgang behagelig for øyet. Denne tilnærmingen vil hjelpe deg med å markere hver tjeneste på individuelt nivå. Du kan også laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.

0 aksjer
del
tweet
Enregistrer