Vill du skapa anpassade bakgrundsmönster med alternativet Gradient Repeat Divi ?
Bakgrundsalternativen för Divi erbjuder många sätt att skapa bakgrundsmönster. Du kan till och med skapa bakgrundsmönster med endast övertoningar. Alternativet Gradient Repeat gör detta enkelt och enkelt.
I den här artikeln kommer vi att se hur du använder alternativet Gradient Repeat Divi för att skapa anpassade bakgrundsmönster.
Låt oss börja.
Se även: Divi: Hur man skapar ett kontaktformulär som visas efter att man klickat på en knapp
Vad är gradient repeat
Alternativet Gradient Repeat skapar ett mönster baserat på Gradientstoppen. Gradientstopp är mått som bestämmer var färger visas och stannar i övertoningen. Divi och dess Gradient Builder använder dessa stopp för att skapa mönstret.
Den sista färgen talar om för gradienten var brytpunkten är i gradienten. Du kan ha så många färger du vill innan denna brytpunkt.
Le Gradient Builder kommer sedan att upprepa det för att fylla skärmen som skapar mönstret. Alternativet kan läggas till i valfri sektion, rad, kolumn eller modul, och de kan användas tillsammans.
Aktivera alternativet "Bakgrundsgradient".
För att aktivera alternativet Gradient Upprepa, öppna avsnittets inställningar genom att klicka på dess kugghjulsikon. Det fungerar även med rader, kolumner och moduler.
Bläddra till Bakgrund . Välj flik Gradient bakgrund och klicka Lägg till bakgrundsgradient.
Under lutningstoppfältet finns en inställning som kallas Gradient Upprepa . Detta är inaktiverat som standard. Klicka bara på den för att aktivera den.
Gradienten kommer nu att upprepas, vilket skapar ett mönster baserat på dina gradientstopp och dina andra gradientinställningar, såsom gradientenheten.
Gradientenheter
Gradientenheten är måttenheten. Detta anger vad gradientstoppsnumren på gradientstapeln indikerar, vilket bestämmer hur gradientstopp mäts. Detta påverkar mönstret som skapas av upprepningsalternativet.
Divis bakgrundsgradientgenerator erbjuder 15 enheter. Låt oss titta på ett exempel på de fyra mest populära alternativen. Som vi kommer att se i våra exempel kommer resultatet att ändras beroende på ditt antal gradientstopp och dina inställningar.
Procent (procent)
Procent mäter gradientstopp i procent. Detta beräknar gradientpunkterna baserat på det överordnade elementet. Ju mindre den sista gradientsömmen är, desto tätare skapas mönstret. När du justerar positionen för en av färgerna flyttas den färgen medan de andra förblir på plats.
Pixlar (px)
Pixlar mäter antalet pixlar för varje gradientstopp. Detta ger gradienten ett mindre mönster än de flesta andra enhetstyper. Om du flyttar positionen för den första eller sista färgen ändras positionen för varje färg.
Fönsterhöjd (vh)
Viewporten är det område i webbläsarfönstret som är synligt. Den mäts i höjd och bredd separat. Fönsterhöjden använder gradientstopp för att mäta procentandelen av fönsterstorlekens höjd. Att justera positionen för den första eller sista färgen påverkar alla färger.
Fönsterbredd (vw)
Fönsterbredd använder gradientstopp för att mäta procentandelen av fönsterstorlekens bredd (eller webbläsarens bredd). Justeringarna ändras beroende på bredden. När du justerar siffran större eller mindre ändrar den specifika färgen position medan de andra förblir desamma.
Exempel på användning av alternativet "Gradient Repeat".
Läs också: Divi: Hur man skapar en surfplatta med rullningsbart teaserinnehåll
För våra exempel använder vi avsnittet Uppmaning till handling på hemsidan gratis layoutpaket för akupunktur finns i Divi.
Vi kommer att behöva göra en justering av den första kolumnen i avsnittet. Öppna dem linjeparametrar genom att klicka på dess kugghjulsikon.
Välj sedan kugghjulsikon för den första kolumnen.
kolumn ett gradient
Den första kolumnen har sin egen bakgrundsgradient. Det är en del av layouten. Det kommer vi inte att ändra på. Vi kommer att använda samma gradient i våra fyra exempel. Här är inställningarna om du behöver dem.
- Gradientstopp:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Gradientinställningar
- Gradienttyp: Linjär
- Lutningsläge: 180 grader
- Upprepa gradient: NEJ
- Gradientenhet: procent
- Fyrkantig gradient ovanför bakgrundsbild: NEJ
avstånd
Vi kommer att lägga till mellanrum till vänster om kolumnen. Öppna fliken Designa, bläddra till Förband och välj surfplatta-ikonen för att öppna enhetsalternativ.
Lägg till 5 % vänster stoppning för skrivbords- och surfplattans flikar. Välj telefonfliken och ta bort den vänstra stoppningen. Lämna Top och Right vid sina nuvarande inställningar.
- Padding
- Topp: 180px
- Vänster: 5 %
- Vänster: 80px
exempel ett
Vårt första exempel skapar ett diagonalt repeterande mönster med tunna linjer.
Den här har tre gradientstopp.
- Gradientstopp:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Använd följande inställningar.
- Gradienttyp: Linjär
- Lutningsriktning: 156 grader
- Upprepa gradient: JA
- Gradientenhet: pixlar
- Fyrkantig gradient ovanför bakgrundsbild: nr
Andra exemplet
Vårt andra exempel skapar ett diagonalt repeterande mönster med större linjer.
Den här har tre gradientstopp.
- Gradientstopp:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
För gradientinställningar,
- Gradienttyp: Linjär
- Lutningsriktning: 156 grader
- Upprepa gradient: JA
- Gradientenhet: pixlar
- Fyrkantig gradient ovanför bakgrundsbild: NEJ
Exempel tre
Vårt tredje exempel skapar ett återkommande cirkulärt mönster med medelstora cirklar.
Den här har tre gradientstopp.
- Gradient stannar
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Använd följande gradientinställningar
- Gradienttyp: Cirkulär
- Gradientposition: Botten
- Upprepa gradient: JA
- Gradientenhet: procent
- Fyrkantig gradient ovanför bakgrundsbild: NEJ
Exempel 4
Vårt fjärde exempel skapar ett cirkulärt mönster med stora cirklar.
Den här har tre gradientstopp.
- Gradientstopp:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
För gradientinställningar, ändra enligt följande:
- Gradienttyp: Cirkulär
- Gradient Position: Center
- Upprepa gradient: JA
- Gradientenhet: procent
- Fyrkantig gradient ovanför bakgrundsbild: nr
Ladda ner DIVI nu!!!
Slutsats
Detta är vår titt på hur man använder alternativet för att Gradient Upprepa från Divi för att skapa anpassade bakgrunder. Många justeringar i gradientinställningarna påverkar utformningen av gradienten.
Gradient Repeat fungerar bra med alla dessa justeringar för att enkelt skapa intressanta anpassade bakgrundsmönster.
Vi rekommenderar att du provar exemplen vi har tillhandahållit här och gör ändringar för att se hur övertoningarna påverkas och skapar dina egna anpassade bakgrundsgradienter.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
