Vil du lage tilpassede bakgrunnsmønstre ved å bruke alternativet Gradient Repeat Divi ?
Bakgrunnsalternativene til Divi tilbyr mange måter å lage bakgrunnsmønstre på. Du kan til og med lage bakgrunnsmønstre med bare gradienter. Alternativet Gradient Repeat gjør dette enkelt og enkelt.
I denne artikkelen vil vi se hvordan du bruker alternativet Gradient Repeat Divi for å lage tilpassede bakgrunnsmønstre.
La oss begynne.
Se også: Divi: Hvordan lage et kontaktskjema som vises etter å ha klikket på en knapp
Hva er gradient repeat
Alternativet Gradient Repeat oppretter et mønster basert på gradientstoppene. Gradientstopp er målinger som bestemmer hvor farger vises og stopper i gradienten. Divi og Gradient Builder bruker disse stoppene for å lage mønsteret.
Den siste fargen forteller gradienten hvor bruddpunktet er i gradienten. Du kan ha så mange farger du vil før dette bruddpunktet.
Le Gradientbygger vil deretter gjenta det for å fylle skjermen som lager mønsteret. Alternativet kan legges til en hvilken som helst seksjon, rad, kolonne eller modul, og de kan brukes sammen.
Aktiver alternativet "Bakgrunnsgradient".
For å aktivere alternativet Gjenta gradient, åpne seksjonens innstillinger ved å klikke på tannhjulikonet. Det fungerer også med rader, kolonner og moduler.
Bla til Bakgrunn . Velg fane Gradient bakgrunn og klikk Legg til bakgrunnsgradient.
Under gradientstopplinjen er en innstilling som kalles Gjenta gradient . Dette er deaktivert som standard. Bare klikk på den for å aktivere den.
Gradienten vil nå gjentas, og skaper et mønster basert på gradientstoppene og andre gradientinnstillinger, for eksempel gradientenheten.
Gradientenheter
Gradientenheten er måleenheten. Dette spesifiserer hva gradientstoppnumrene på gradientlinjen indikerer, som bestemmer hvordan gradientstoppene måles. Dette påvirker mønsteret som er opprettet av gjentakelsesalternativet.
Divis bakgrunnsgradientgenerator tilbyr 15 enheter. La oss se på et eksempel på de fire mest populære alternativene. Som vi vil se i eksemplene våre, vil resultatet endre seg avhengig av antall gradientstopp og innstillingene dine.
Prosent (prosent)
Prosentandel måler gradientstopp i prosent. Dette beregner gradientpoengene basert på det overordnede elementet. Jo mindre den siste gradientsømmen er, desto strammere blir mønsteret. Når du justerer posisjonen til en av fargene, flyttes den fargen mens de andre forblir på plass.
Piksler (px)
Piksler måler antall piksler for hvert gradientstopp. Dette gir gradienten et mindre mønster enn de fleste andre enhetstyper. Hvis du flytter posisjonen til den første eller siste fargen, endres posisjonen til hver farge.
Vindushøyde (vh)
Viewporten er området i nettleservinduet som er synlig. Den måles i høyde og bredde separat. Vinduhøyde bruker gradientstopp for å måle prosentandelen av høyden på vindusstørrelsen. Justering av posisjonen til den første eller siste fargen påvirker alle farger.
Vindusbredde (vw)
Vindubredde bruker gradientstopp for å måle prosentandelen av vindusstørrelsens bredde (eller nettleserbredden). Justeringene endres avhengig av bredden. Når du justerer tallet større eller mindre, endrer den spesifikke fargen posisjon mens de andre forblir de samme.
Eksempler på bruk av alternativet "Gradient Repeat".
Les også: Divi: Hvordan lage et nettbrett med rullbart teaser-innhold
For våre eksempler bruker vi Call-to-action-delen på hjemmesiden til gratis akupunkturoppsettpakke tilgjengelig i Divi.
Vi må gjøre en justering av den første kolonnen i seksjonen. Åpne dem linjeparametre ved å klikke på tannhjulikonet.
Velg deretter girikon for den første kolonnen.
kolonne én gradient
Den første kolonnen har sin egen bakgrunnsgradient. Det er en del av oppsettet. Det vil vi ikke endre på. Vi vil bruke den samme gradienten i våre fire eksempler. Her er innstillingene i tilfelle du trenger dem.
- Gradientstopp:
- 0px: #f4d5b8
- 100 piksler: rgba(244,213,184,0)
Gradientinnstillinger
- Gradienttype: Lineær
- Gradient posisjon: 180 grader
- Gjenta gradient: NEI
- Gradientenhet: prosent
- Firkantet gradient over bakgrunnsbilde: NR
avstanden
Vi legger til mellomrom til venstre for kolonnen. Få tilgang til fanen utforming, bla til Mellomrom og velg nettbrettikon for å åpne enhetsalternativer.
Legg til 5 % venstre polstring for skrivebords- og nettbrettfaner. Velg telefonfanen og slett den venstre polstringen. La Topp og Høyre stå ved gjeldende innstillinger.
- Padding
- Topp: 180px
- Venstre: 5 %
- Venstre: 80px
eksempel én
Vårt første eksempel lager et diagonalt repeterende mønster med tynne linjer.
Denne har tre gradientstopp.
- Gradientstopp:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Bruk følgende innstillinger.
- Gradienttype: Lineær
- Gradientretning: 156 grader
- Gjenta gradient: JA
- Gradientenhet: piksler
- Firkantet gradient over bakgrunnsbilde: nr
Andre eksempel
Vårt andre eksempel lager et diagonalt repeterende mønster med større linjer.
Denne har tre gradientstopp.
- Gradientstopp:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
For gradientinnstillinger,
- Gradienttype: Lineær
- Gradientretning: 156 grader
- Gjenta gradient: JA
- Gradientenhet: piksler
- Firkantet gradient over bakgrunnsbilde: NR
Eksempel tre
Vårt tredje eksempel lager et repeterende sirkulært mønster med middels store sirkler.
Denne har tre gradientstopp.
- Gradient stopper
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Bruk følgende gradientinnstillinger
- Gradienttype: Sirkulær
- Gradientposisjon: Bunn
- Gjenta gradient: JA
- Gradientenhet: prosent
- Firkantet gradient over bakgrunnsbilde: NR
Eksempel 4
Vårt fjerde eksempel lager et sirkulært mønster med store sirkler.
Denne har tre gradientstopp.
- Gradientstopp:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
For gradientinnstillinger, endre som følger:
- Gradienttype: Sirkulær
- Gradientposisjon: Senter
- Gjenta gradient: JA
- Gradientenhet: prosent
- Firkantet gradient over bakgrunnsbilde: nr
Last ned DIVI nå!!!
konklusjonen
Dette er vår titt på hvordan du bruker alternativet til Gjenta gradient fra Divi for å lage tilpassede bakgrunner. Mange justeringer i gradientinnstillingene påvirker utformingen av gradienten.
Gradient Repeat fungerer godt med alle disse justeringene for enkelt å lage interessante tilpassede bakgrunnsmønstre.
Vi anbefaler å prøve ut eksemplene vi har gitt her og gjøre endringer for å se hvordan gradientene påvirkes og lage dine egne tilpassede bakgrunnsgradienter.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
