Wilt u aangepaste achtergrondpatronen maken met de optie Verloopherhaling van Divi ?
De achtergrondopties van Divi bieden vele manieren om achtergrondpatronen te maken. U kunt zelfs achtergrondpatronen maken met alleen verlopen. De optie Verloopherhaling maakt dit eenvoudig en gemakkelijk.
In dit artikel zullen we zien hoe u de optie Verloopherhaling kunt gebruiken Divi om aangepaste achtergrondpatronen te maken.
Laten we beginnen.
Zie ook: Divi: Hoe maak je een contactformulier aan dat verschijnt nadat je op een knop hebt geklikt
Wat is gradiëntherhaling
De optie Verloopherhaling maakt een patroon op basis van de verloopstops. Verloopstops zijn metingen die bepalen waar kleuren verschijnen en stoppen in het verloop. Divi en de Gradient Builder gebruiken deze stops om het patroon te maken.
De laatste kleur vertelt het verloop waar het breekpunt zich in het verloop bevindt. U kunt zoveel kleuren hebben als u wilt vóór dit breekpunt.
Le Verloop bouwer zal het dan herhalen om het scherm te vullen dat het patroon maakt. De optie kan aan elke sectie, rij, kolom of module worden toegevoegd en ze kunnen samen worden gebruikt.
Activeer de optie "Achtergrondverloop"
Om de optie te activeren: Verloop herhalen, open je de instellingen van de sectie door op het tandwielpictogram te klikken. Het werkt ook met rijen, kolommen en modules.
Scroll naar Achtergrond . Selecteer tabblad Gradient Achtergrond En klik op Achtergrondverloop toevoegen.
Onder de verloopstopbalk staat een instelling genaamd Verloop herhalen . Dit is standaard uitgeschakeld. Klik er gewoon op om het te activeren.
Het verloop wordt nu herhaald, waardoor een patroon ontstaat op basis van uw verloopstops en uw andere verloopinstellingen, zoals de verloopeenheid.
Gradiënteenheden
De gradiënteenheid is de meeteenheid. Dit specificeert wat de gradiëntstopnummers op de gradiëntbalk aangeven, wat bepaalt hoe gradiëntstops worden gemeten. Dit heeft invloed op het patroon dat door de herhalingsoptie wordt gemaakt.
Divi's achtergrondverloopgenerator biedt 15 eenheden. Laten we eens kijken naar een voorbeeld van de vier meest populaire opties. Zoals we in onze voorbeelden zullen zien, zal het resultaat veranderen afhankelijk van het aantal gradiëntstops en uw instellingen.
Procent (procent)
Percentage meet gradiëntstops in procenten. Dit berekent de gradiëntpunten op basis van het bovenliggende element. Hoe kleiner de laatste verloopsteek, hoe strakker het gemaakte patroon. Bij het aanpassen van de positie van een van de kleuren, beweegt die kleur terwijl de andere op hun plaats blijven.
pixels (px)
Pixels meet het aantal pixels voor elke verloopstop. Dit geeft het verloop een kleiner patroon dan de meeste andere soorten eenheden. Door de positie van de eerste of laatste kleur te verplaatsen, verandert de positie van elke kleur.
Raamhoogte (vh)
De viewport is het gebied van het browservenster dat zichtbaar is. Het wordt afzonderlijk in hoogte en breedte gemeten. Vensterhoogte gebruikt gradiëntstops om het percentage van de hoogte van de venstergrootte te meten. Het aanpassen van de positie van de eerste of laatste kleur is van invloed op alle kleuren.
Raambreedte (vw)
Vensterbreedte gebruikt verloopstops om het percentage van de vensterbreedte (of browserbreedte) te meten. De aanpassingen veranderen afhankelijk van de breedte. Als u het getal groter of kleiner aanpast, verandert die specifieke kleur van positie terwijl de andere hetzelfde blijven.
Voorbeelden van het gebruik van de optie "Gradient Repeat"
Lees ook: Divi: een tablet maken met schuifbare teaserinhoud
Voor onze voorbeelden gebruiken we het gedeelte Call-to-action van de startpagina van de gratis lay-outpakket voor acupunctuur verkrijgbaar in Divi.
We zullen een aanpassing moeten maken aan de eerste kolom van de sectie. Open Ze lijnparameters door op het tandwielpictogram te klikken.
Selecteer vervolgens de tandwiel icoon voor de eerste kolom.
kolom één verloop
De eerste kolom heeft zijn eigen achtergrondverloop. Het maakt deel uit van de lay-out. Dat gaan we niet veranderen. We zullen hetzelfde verloop gebruiken in onze vier voorbeelden. Hier zijn de instellingen voor het geval je ze nodig hebt.
- Gradiëntstops:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Verloop instellingen
- Gradiënttype: Lineair
- Gradiëntpositie: 180 graden
- Herhaal verloop: NEE
- Gradiënteenheid: Percentage
- Vierkant verloop boven achtergrondafbeelding: NEE
tussenruimte
We zullen spaties toevoegen aan de linkerkant van de kolom. Toegang tot het tabblad Design, scroll naar Spacing en selecteer de tablet icoon om apparaatopties te openen.
Voeg 5% linkerpadding toe voor desktop- en tablettabbladen. Kies het telefoontabblad en verwijder de linkerpadding. Laat Boven en Rechts op hun huidige instellingen.
- Vulling
- Boven: 180px
- Links: 5%
- Links: 80px
voorbeeld een
Ons eerste voorbeeld creëert een diagonaal herhalend patroon met dunne lijnen.
Deze heeft drie gradiëntstops.
- Gradiëntstops:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Gebruik de volgende instellingen.
- Gradiënttype: Lineair
- Gradiëntrichting: 156 graden
- Verloop herhalen: JA
- Gradiënteenheid: pixels
- Vierkant verloop boven achtergrondafbeelding: nee
Tweede voorbeeld
Ons tweede voorbeeld creëert een diagonaal herhalend patroon met grotere lijnen.
Deze heeft drie gradiëntstops.
- Gradiëntstops:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Voor verloopinstellingen,
- Gradiënttype: Lineair
- Gradiëntrichting: 156 graden
- Verloop herhalen: JA
- Gradiënteenheid: pixels
- Vierkant verloop boven achtergrondafbeelding: NEE
Voorbeeld drie
Ons derde voorbeeld creëert een herhalend cirkelvormig patroon met middelgrote cirkels.
Deze heeft drie gradiëntstops.
- Verloop stopt
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Pas de volgende verloopinstellingen toe:
- Gradiënttype: circulair
- Gradiëntpositie: Bodem
- Verloop herhalen: JA
- Gradiënteenheid: Percentage
- Vierkant verloop boven achtergrondafbeelding: NEE
Voorbeeld 4
Ons vierde voorbeeld creëert een cirkelvormig patroon met grote cirkels.
Deze heeft drie gradiëntstops.
- Gradiëntstops:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Wijzig de instellingen voor Verloop als volgt:
- Gradiënttype: circulair
- Gradiëntpositie: Midden
- Verloop herhalen: JA
- Gradiënteenheid: Percentage
- Vierkant verloop boven achtergrondafbeelding: nee
Download DIVI nu!!!
Conclusie
Dit is onze kijk op het gebruik van de optie om: Verloop herhalen van Divi om aangepaste achtergronden te maken. Veel aanpassingen in de verloopinstellingen zijn van invloed op het ontwerp van het verloop.
Gradient Repeat werkt goed met al deze tweaks om gemakkelijk interessante aangepaste achtergrondpatronen te maken.
We raden u aan de voorbeelden die we hier hebben gegeven uit te proberen en wijzigingen aan te brengen om te zien hoe de verlopen worden beïnvloed en uw eigen aangepaste achtergrondverlopen te maken.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
