Kunne du tænke dig at oprette brugerdefinerede baggrundsmønstre ved at bruge indstillingen Gradient Repeat Divi ?
Baggrundsmulighederne for Divi tilbyder mange måder at skabe baggrundsmønstre på. Du kan endda oprette baggrundsmønstre ved kun at bruge gradienter. Muligheden Gradient Repeat gør dette enkelt og nemt.
I denne artikel vil vi se, hvordan du bruger indstillingen Gradient Repeat Divi at skabe brugerdefinerede baggrundsmønstre.
Lad os starte.
Se også: Divi: Sådan opretter du en kontaktformular, der vises efter klik på en knap
Hvad er gradientgentagelse
Indstillingen Gradient Repeat opretter et mønster baseret på gradientstops. Gradientstop er målinger, der bestemmer, hvor farverne vises og stopper i gradienten. Divi og dens Gradient Builder bruger disse stop til at skabe mønsteret.
Den sidste farve fortæller gradienten, hvor brudpunktet er i gradienten. Du kan have så mange farver, som du vil, før dette brudpunkt.
Le Gradient Builder vil derefter gentage det for at udfylde skærmen, der skaber mønsteret. Muligheden kan tilføjes til enhver sektion, række, kolonne eller modul, og de kan bruges sammen.
Aktiver indstillingen "Baggrundsgradient".
For at aktivere muligheden Gentag gradient, åbn sektionens indstillinger ved at klikke på dets tandhjulsikon. Det fungerer også med rækker, kolonner og moduler.
Rul til Baggrund . Vælg faneblad Gradient baggrund og klik Tilføj baggrundsgradient.
Under gradientstopbjælken er en indstilling kaldet Gentag gradient . Dette er deaktiveret som standard. Bare klik på den for at aktivere den.
Gradienten gentages nu og skaber et mønster baseret på dine gradueringsstop og dine andre gradueringsindstillinger, såsom gradueringsenheden.
Gradientenheder
Gradientenheden er måleenheden. Dette angiver, hvad gradientstopnumrene på gradientbjælken angiver, hvilket bestemmer, hvordan gradientstop måles. Dette påvirker det mønster, der oprettes af gentagelsesindstillingen.
Divis baggrundsgradientgenerator tilbyder 15 enheder. Lad os se på et eksempel på de fire mest populære muligheder. Som vi vil se i vores eksempler, vil resultatet ændre sig afhængigt af dit antal gradientstop og dine indstillinger.
Procent (procent)
Procent måler gradientstop i procent. Dette beregner gradientpunkterne baseret på det overordnede element. Jo mindre den sidste gradientsøm er, jo strammere er mønsteret. Når du justerer placeringen af en af farverne, flytter den farve sig, mens de andre forbliver på plads.
pixels (px)
Pixels måler antallet af pixels for hvert gradientstop. Dette giver gradienten et mindre mønster end de fleste andre enhedstyper. Flytning af placeringen af den første eller sidste farve ændrer placeringen af hver farve.
Vindueshøjde (vh)
Viewporten er det område af browservinduet, der er synligt. Den måles i højden og bredden separat. Vindueshøjde bruger gradientstop til at måle procentdelen af vinduesstørrelsens højde. Justering af placeringen af den første eller sidste farve påvirker alle farver.
Vinduesbredde (vw)
Vinduesbredde bruger gradientstop til at måle procentdelen af vinduesstørrelsens bredde (eller browserbredde). Justeringerne ændres afhængigt af bredden. Når du justerer tallet større eller mindre, ændrer den specifikke farve position, mens de andre forbliver de samme.
Eksempler på brug af indstillingen "Gentag gradient".
Læs også: Divi: Sådan opretter du en tablet med teaser-indhold, der kan rulles
Til vores eksempler bruger vi Call-to-Action-sektionen på hjemmesiden for gratis akupunktur layout pakke tilgængelig i Divi.
Vi bliver nødt til at foretage en justering af den første kolonne i afsnittet. Åbn dem linjeparametre ved at klikke på dets tandhjulsikon.
Vælg derefter gearikon for den første kolonne.
kolonne XNUMX gradient
Den første kolonne har sin egen baggrundsgradient. Det er en del af layoutet. Det vil vi ikke ændre på. Vi vil bruge den samme gradient i vores fire eksempler. Her er indstillingerne, hvis du har brug for dem.
- Gradientstop:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Gradientindstillinger
- Gradienttype: Lineær
- Gradientposition: 180 grader
- Gentag gradient: NEJ
- Gradientenhed: Procent
- Firkantet gradient over baggrundsbillede: NR
afstand
Vi tilføjer mellemrum til venstre for kolonnen. Få adgang til fanen Design, rul til Mellemrum og vælg tablet-ikon for at åbne enhedsindstillinger.
Tilføj 5 % venstre polstring til desktop- og tabletfaner. Vælg telefonfanen, og slet den venstre polstring. Lad Top og Right stå ved deres aktuelle indstillinger.
- Polstring
- Top: 180px
- Venstre: 5 %
- Venstre: 80px
eksempel et
Vores første eksempel skaber et diagonalt gentaget mønster med tynde linjer.
Denne har tre gradientstop.
- Gradientstop:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Brug følgende indstillinger.
- Gradienttype: Lineær
- Gradientretning: 156 grader
- Gentag gradient: JA
- Gradientenhed: pixels
- Firkantet gradient over baggrundsbillede: nr
Andet eksempel
Vores andet eksempel skaber et diagonalt gentaget mønster med større linjer.
Denne har tre gradientstop.
- Gradientstop:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
For gradientindstillinger,
- Gradienttype: Lineær
- Gradientretning: 156 grader
- Gentag gradient: JA
- Gradientenhed: pixels
- Firkantet gradient over baggrundsbillede: NR
Eksempel tre
Vores tredje eksempel skaber et gentaget cirkulært mønster med mellemstore cirkler.
Denne har tre gradientstop.
- Gradient stopper
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Anvend følgende gradientindstillinger
- Gradienttype: Cirkulær
- Gradientposition: Bund
- Gentag gradient: JA
- Gradientenhed: Procent
- Firkantet gradient over baggrundsbillede: NR
Eksempel 4
Vores fjerde eksempel skaber et cirkulært mønster med store cirkler.
Denne har tre gradientstop.
- Gradientstop:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
For gradientindstillinger skal du ændre som følger:
- Gradienttype: Cirkulær
- Gradientposition: Center
- Gentag gradient: JA
- Gradientenhed: Procent
- Firkantet gradient over baggrundsbillede: nr
Download DIVI nu!!!
Konklusion
Dette er vores kig på, hvordan du bruger muligheden for at Gentag gradient fra Divi til at skabe brugerdefinerede baggrunde. Mange justeringer i forløbsindstillingerne påvirker forløbets design.
Gradient Repeat fungerer godt med alle disse tweaks for nemt at skabe interessante brugerdefinerede baggrundsmønstre.
Vi anbefaler, at du prøver de eksempler, vi har givet her, og foretager ændringer for at se, hvordan forløbene påvirkes, og at du laver dine egne tilpassede baggrundsforløb.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
