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.

Å lage en tekstbakgrunn rullende animasjon er en unik måte å legge til fargerike animerte teksturer til nettstedsteksten mens en bruker blar på siden. Med Divi er prosessen overraskende enkel når du har lært deg noen viktige teknikker.

I denne opplæringen bruker vi bare kraften til Divis innebygde innstillinger til å lage 3 unike design som har fargerik tekstbakgrunnsrullende animasjon. Vi vil til og med vise deg hvordan du lager en mørk versjon av hvert design for et helt nytt utseende.

La oss begynne!

Mulig utfall

Her er en titt på designene vi skal bygge i dag.

Design 1: Bakgrunnsgradient med tekst med horisontal rulleeffekt

Denne første designen har en horisontal rulleeffekt som animerer en farget skillemodul bak en tekstmodul med skjermfilteret.

Legg til en kolonne

For å starte, legg til en rad med en kolonne i standarddelen.

Velg divi kolonnelayout

Legg til en tekstmodul

Legg deretter til en ny tekstmodul i kolonnen.

Legg til divi-tekstmodul

Innhold

For innholdet i kolonnen, lim inn følgende HTML-kode i innholdsområdet:

Lagre fragmentkode

Formaterer teksten

Oppdater deretter tekstdesignet som følger:

  • Bakgrunnsfarge: #ffffff
  • Tekst Font Style: TT
  • Tekstfarge: # 000000
  • Tekststørrelse: 100 px (stasjonær), 40 px (telefon)
  • Avstand mellom tekstbokstaver: 0.15 em
  • Høyde på tekstlinjen: 1em
  • Justering av teksten: senter
  • Tittel Font: Merriweather
  • Tittel skriftvekt: fet skrift
  • Tittel font stil: TT
  • Overskriftstekstjustering: Senter
  • Topptekstfarge: # 000000
  • Topptekststørrelse: 200 px (skrivebord), 80 px (telefon)
  • Avstand mellom tittelbokstaver: 0.15 em
  • Høyden på tittellinjen: 1em

Polstring og filter

Nå må vi legge til noe polstring og skjermfilter i tekstmodulen. Filteret er nødvendig for at dette designet skal fungere, da det er det som gjør at bakgrunnsfargene / modene kan vises bak teksten.

Oppdater følgende for å legge til fyll og filter:

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.

  • polstring: 15px høy, 20px lav
  • Blend Mode: Skjerm

Merk: Skjermblandingsmodus fungerer best med svart tekst på hvit bakgrunn. Hvis vi ønsket å bruke hvit tekst på svart bakgrunn, ville vi bruke modusen Multiply blend.

Divi tekstmodul avstandskonfigurasjon

Øvre og nedre separator

Når tekstmodulen vår er fullført, la oss legge til noen separatorer (over og en under tekstmodulen) for et ekstra designelement.

Legg til en nedre separator

Legg til en ny separasjonsmodul under tekstmodulen.

Legg til diviseparatormodul
Innstillinger for høyere separasjon

Åpne separatorinnstillingene og velg NO for å vise separatoren.

divi-tekst bakgrunnsrulleeffekter

Oppdater deretter bakgrunnen og gi skillelinjen samme blandingsmodus som tekstmodulen som følger:

  • Bakgrunnsfarge på venstre gradient: # 000000
  • Bakgrunnsfarge på gradient til høyre: #ffffff
  • Gradientretning: 90deg
  • Startposisjon: 48%
  • Sluttposisjon: 0%
  • Blend Mode: Skjerm
Konfigurasjon av fargeseparator

Oppdater deretter skillelinjens høyde på telefonskjermen som følger:

  • Høyde: 15px (telefon)
Divi separator konfigurasjon

Legg til øvre separator

For å opprette den øverste skillelinjen, dupliser den forrige bunndeleren og dra den over tekstmodulen ved å bruke lagvisningsområdet.

Divi separatorinnsats

Ø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.

Vend deretter fargene på gradientbakgrunnen.

Gradient bakgrunn innsetting

Oppdater linjeparametere

Når våre øvre og nedre separatorer er på plass, oppdaterer du linjeparametrene som følger:

  • Rennesteinsbredde: 1 (for å fjerne de nedre marginene mellom modulene)
  • Maksimal bredde: 600 piksler (for å holde et sammenhengende design på skrivebordet og nettbrettet)
  • Linjejustering: sentrum
  • Polstring: 0px høy, 0px lav
  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Tilpass divi line parameter

Lag en skilletegn for bakgrunnsfargen til den animerte teksten

Det siste elementet i dette første designet er skillelinjen som vi bruker til å animere bakgrunnsfargen på teksten på rullen. For å gjøre dette, legg til en ny separasjonsmodul under den nedre deleren.

Separatorinnføring

Velg deretter NO for å vise separatoren.

Vis skilleskille

Innstillinger for bakgrunnsdeler

Oppdater separatoren med en gradientbakgrunn som følger:

  • Bakgrunnsfarge på venstre gradient: # e02b20
  • Farge på høyre bakgrunnsgradient: # 8300e9
  • Gradientretning: 90deg
  • Startposisjon: 30%
  • Sluttposisjon: 70%
Divi bakdeler

Vi ønsker at høyden på skilletegnet skal være høyt nok til å fargelegge all teksten vår i tekstmodulen og topp- og bunnskillene. For denne designen, sett høyden til 400 px.

  • Høyde: 400px
Skillehøyde skillevegg

Gi deretter skillelinjen en absolutt posisjon for å plassere den rett over de andre modulene. Bruk Z-indeksen til å plassere skillelinjen bak de andre modulene.

  • Posisjon: Absolutt
  • Z-indeks: -1
Indeksutskiller
Bakgrunnsdeler rulleeffekter

Med skilletegnet på plass, er alt vi trenger å gjøre å flytte skilletegnet bak teksten ved hjelp av Divis rulleeffekter. For dette designet skal vi bare legge til horisontal bevegelse til rullen.

Oppdater følgende elementer:

Under fanen Horisontal bevegelse ...

kontor

  • Aktiver horisontal bevegelse: YES
  • Start offset: 6 (ved 20%)
  • Gjennomsnittlig forskyvning: 0 (ved 40% -60%)
  • Sluttforskyvning: -6 (ved 80%)

Telefon

  • Start offset: 3
  • Sluttforskyvning: -3

Sørg også for å sette utløseren for bevegelseseffekten i midten av klippet:

  • Trigger bevegelseseffekt: midten av elementet
Animasjonskonfigurasjon

Legg til seksjonsavstand

Hvis du vil lage et midlertidig rulleområde for å teste designen, legger du følgende til delen:

  • Marginen: 80vh over, 80vh under
Konfigurasjonsstørrelse seksjon divi

avslutt~~POS=TRUNC tanker

Tekstbakgrunnsanimasjonsdesignene som vises i denne artikkelen, vil faktisk fungere fint som en statisk design uten å legge til bevegelse på rullen. Imidlertid tar de ekstra rulleeffektene designet til et helt nytt nivå. Eksperimenter gjerne med flere farger og effekter!

Jeg gleder meg til å høre fra deg i kommentarene.

Til helsen din!

0 aksjer
del
tweet
Enregistrer