Divi: Vergelijking van de verschillende soorten gradiënten

Wil je gebruik maken van de Gradient Builder van? Divi maar weet je niet welk type verloop je moet kiezen?

Verlooptypen maken deel uit van de nieuwe Divi Verloop bouwer . Nieuwe soorten verlopen Divi kunt u verschillende vormen en kleuren aan uw achtergronden toevoegen. 

In dit artikel vergelijken we dit soort verlopen en laten we zien hoe je ze kunt gebruiken om unieke achtergronden te maken!

Laten we beginnen.

Wat zijn de Divi-gradiënttypes?

Divi's nieuwe Gradient Builder voegt verschillende nieuwe verloopfuncties toe, waaronder verlooptypes. Er zijn vier soorten gradiënten om uit te kiezen:

• Lineair
• bouwen
• Elliptisch
• kegelvormig

Elk van de typen geeft het verloop anders weer. Ze worden gebruikt om het verloop te vormen dat moet worden weergegeven als een lineair kleurenpatroon, in een cirkel, ellips of kegel. We zullen ze in detail zien in onze voorbeelden.

Verlooptypen worden ook beïnvloed door andere besturingselementen, zoals positie, al dan niet herhalen, maateenheid voor de schuifbalk voor het verloop en plaatsing van het verloop boven de achtergrond.

Elke aanpassing kan een kleine of grote impact hebben op het verloop. Het verloop kan subtiel zijn of opvallen. Met slechts één aanpassing kunnen kleine of grote wijzigingen worden aangebracht.

Laten we met dat in gedachten eens kijken naar enkele voorbeelden van verlopen die elk van de verlooptypes gebruiken. We laten drie voorbeelden zien van elk type verloop. 

De eerste is een standaard verlooptype dat u op internet zult zien. De volgende twee zullen een beetje meer experimenteel zijn, gewoon om te zien wat je kunt doen met de soorten gradiënten.

Voorbeelden van gradiënttypes

Voor voorbeelden van het verlooptype gebruiken we het gedeelte Held van de startpagina van de gratis bed & breakfast lay-outpakket verkrijgbaar in Divi. Dit gedeelte heeft al een verloop, maar we zullen het vervangen en wat experimenteren. 

We kunnen het oorspronkelijke achtergrondverloop verwijderen of wijzigen. De resultaten zijn hetzelfde. Voor de eenvoud zullen we het aanpassen.

We hebben de titeltekst aangepast door deze van zwart naar wit te veranderen.

Lineair verlooptype

Lees ook: Divi: patroonvermenging gebruiken op achtergrondafbeeldingen

Lineaire verlopen geven het verloop weer alsof het over de pagina is verspreid.

Eerste voorbeeld van het lineaire gradiënttype

Hier is een voorbeeld van ons eerste voorbeeld. Het toont een lichtere kleur aan de linkerkant van het scherm en een donkerdere kleur aan de rechterkant, met een vloeiende overgang daartussen.

Voeg twee kleuren toe om dit voorbeeld te maken. de premier is rgba(92,158,82,0.76) op de 0%-positie. de tweede is rgba(0,10,4,0.76) op de 97% positie.

• Gradiëntstops:
  • 0%: rgba(92,158,82,0.76)
  • 97%: rgba(0,10,4,0.76)

Verander dan de Type verloop naar Lineair en stel de Aanwijzingen meer dan 131 graden. dat hij niet herhalen. Stel deeenheid op Percentage. Plaats het verloop boven de achtergrondafbeelding.

• Gradiënttype: Lineair
• Gradiëntrichting: 131deg
• Herhaal verloop: NEE
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Tweede voorbeeld van het lineaire gradiënttype

Hier is een voorbeeld van het tweede voorbeeld van een lineaire gradiënt. Het werkt als de eerste, maar het heeft een harde stop aan de linkerkant waar een donkerdere tint het overneemt.

Voeg drie gradiëntstops toe om deze te maken. de premier is rgba(18,76,41,0.76) op de 13%-positie. de tweede is rgba(92,158,82,0.76) op de 13% positie. kleur 3 is rgba(18,76,41,0.76) op de 34% positie.

• Gradiëntstops:
  • 13%: rgba(18,76,41,0.76)
  • 13%: rgba(92,158,82,0.76)
  • 34%: rgba(18,76,41,0.76)

Stel vervolgens de Type verloop naar Lineair en stel de Aanwijzingen meer dan 90 graden. dat hij niet herhalen . Verander deeenheid percentage. Plaats deze boven de achtergrondafbeelding.

• Gradiënttype: Lineair
• Gradiëntrichting: 90deg
• Herhaal verloop: NEE
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Derde voorbeeld van het lineaire gradiënttype

Ons derde voorbeeld plaatst een lichtgekleurde lijn diagonaal over de rechterbovenhoek en raakt een donkerder gekleurde lijn.

Deze heeft drie kleuren. kleur 1 is rgba(92,158,82,0.76) op de 13% positie. kleur 2 is rgba(92,158,82,0.76) op de 23% positie. De derde kleur is rgba(18,76,41,0.76) op de 32% positie.

• Gradiëntstops:
  • 13%: rgba(92,158,82,0.76)
  • 23%: rgba(92,158,82,0.76)
  • 32%: rgba(18,76,41,0.76)

Definieer de Type verloop naar lineair in a richting van 209 graden. geboren de niet herhalen en stel deeenheid op Percentage. Plaats het verloop boven de achtergrondafbeelding.

• Gradiënttype: Lineair
• Gradiëntrichting: 209deg
• Herhaal verloop: NEE
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Cirkelvormig verlooptype

Het cirkelvormige verlooptype maakt een cirkel met de kleuren.

Eerste voorbeeld van het cirkelvormige verlooptype

Ons eerste voorbeeld van een cirkelvormig verloop plaatst een lichte kleur in het midden en een donkerdere kleur rond de randen.

Deze heeft 2 kleuren. de premier is rgba(92,158,82,0.76) op de 0%-positie. de tweede is rgba(0,10,4,0.76) op de 62% positie.

• Gradiëntstops:
  • 0%: rgba(92,158,82,0.76)
  • 62%: rgba(0,10,4,0.76)

Definieer de Type verloop op circulaire. Centreer de richting . Zorg ervoor dat hij niet herhalen , verander deeenheid als een percentage en plaats het boven de achtergrondafbeelding.

• Gradiënttype: circulair
• Gradiëntpositie: Midden
• Herhaal verloop: NEE
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Tweede voorbeeld van het cirkelvormige verlooptype

Dit verloop plaatst een duidelijke cirkelvormige rand in het midden van het scherm.

Het heeft vier kleuren. Twee kleuren worden over elkaar heen gelegd. de premier is rgba(18,76,41,0.76) op de 13%-positie. de tweede is rgba(92,158,82,0.76) op de 33% positie. kleur 3 is rgba(92,158,82,0.76) op de 51% positie. kleur 4 is rgba (18,76,41,0.76). Het wordt geplaatst op positie 51%, boven kleur 3.

• Gradiëntstops:
  • 13%: rgba(18,76,41,0.76)
  • 33%: rgba(92,158,82,0.76)
  • 51%: rgba(92,158,82,0.76)
  • 51%: rgba(18,76,41,0.76)

Definieer de Type verloop naar Circular en plaats de Aanwijzingen linksboven in de hoek. Zorg ervoor dat hij niet herhalen , verander de eenheid als een percentage en plaats het boven de achtergrondafbeelding.

• Gradiënttype: circulair
• Gradiëntpositie: Linksboven
• Herhaal verloop: NEE
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Derde voorbeeld van het cirkelvormige verlooptype

Dit voorbeeld plaatst meerdere lichte cirkels in de donkerste kleur, beginnend in het midden van de cirkel.

Deze stapelt ook twee kleuren in een bepaalde volgorde om dit ontwerp te bereiken. De première kleur is rgba (18,76,41,0.76) op de 13% positie. kleur 2 is rgba(18,76,41,0.76) op de 44% positie. De troisième kleur overlapt met de tweede kleur. Dit is rgba(92,158,82,0.76) op de 44% positie. kleur 4 is rgba(92,158,82,0.76) op de 51% positie.

• Gradiëntstops:
  • 13%: rgba(18,76,41,0.76)
  • 44%: rgba(18,76,41,0.76)
  • 44%: rgba(92,158,82,0.76)
  • 51%: rgba(92,158,82,0.76)

Verander het gradiënttype: in circulaire. Plaats de richting onderaan. herhaling deze. Stel deeenheid op Percentage en plaats het verloop boven de achtergrondafbeelding.

• Gradiënttype: circulair
• Gradiëntpositie: Bodem
• Verloop herhalen: JA
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Elliptisch verlooptype

Elliptische verlopen plaatsen kleuren in de vorm van een ellips.

Eerste voorbeeld van het elliptische gradiënttype

Ons eerste elliptische voorbeeld plaatst een lichtgekleurde ellips in het midden van het scherm met een donkerdere kleur eromheen.

Deze heeft twee kleuren. de premier is rgba(92,158,82,0.76) op de 0%-positie. de tweede is rgba(0,10,4,0.76) op de 50% positie.

• Gradiëntstops:
  • 0%: rgba(92,158,82,0.76)
  • 50%: rgba(0,10,4,0.76)

Verander het gradiënttype: elliptisch. Stel de richting op Centrum. Zorg ervoor dat deze niet herhalen , pas de .... aaneenheid op Percentage en plaats deze boven de achtergrondafbeelding.

• Gradiënttype: Elliptisch
• Gradiëntpositie: Midden
• Herhaal verloop: NEE
• Gradiënteenheid: Percentage
• Vierkant verloop boven achtergrondafbeelding: JA

Tweede voorbeeld van het elliptische gradiënttype

Ons tweede voorbeeld plaatst veel dunne cirkelvormige lijnen door het verloop.

Het heeft twee kleuren. de premier is rgba(92,158,82,0.76) op de 34pt-positie. de tweede is rgba(0,10,4,0.76) op positie 39pt.

• Gradiëntstops:
  • 34pt: rgba(92,158,82,0.76)
  • 39pt: rgba(0,10,4,0.76)

Verander het Type verloop naar elliptisch en pas de Aanwijzingen op Links. Heb deze bij herhaling. Verander deeenheid in stippen. Plaats deze boven de achtergrondafbeelding.

• Gradiënttype: Elliptisch
• Gradiëntpositie: Rechts
• Verloop herhalen: JA
• Gradiënteenheid: Punten (pt)
• Vierkant verloop boven achtergrondafbeelding: JA

Derde voorbeeld van het elliptische gradiënttype

Ons derde voorbeeld plaatst veel halve cirkels in het verloop.

Deze heeft twee kleuren. de premier is rgba(32,68,35,0.73) op positie 34vmin. de tweede is rgba(0,10,4,0.76) op positie 39vmin.

• Gradiëntstops:
  • 34vmin: rgba(32, 68, 35, 0.73)
  • 39vmin: rgba(0,10,4,0.76)

Verander het Type verloop naar elliptisch en pas de Aanwijzingen op Hoog. Heb deze bij herhaling. Verander deUnité in Viewport Minimum. Plaats deze boven de achtergrondafbeelding.

• Gradiënttype: Elliptisch
• Gradiëntpositie: Boven
• Verloop herhalen: JA
• Gradient Unit: Viewport Minimum (vmin)
• Vierkant verloop boven achtergrondafbeelding: JA

Conisch verlooptype

Zie ook: Divi: Hoe maak je achtergrondovergangen tussen elementen

Het type conische gradiënt geeft de gradiënt weer als een kegel alsof de kegel van bovenaf wordt bekeken.

Eerste voorbeeld van het conische gradiënttype

In dit voorbeeld wordt een diagonale lijn vanuit het midden van het verloop naar links geplaatst met aan de ene kant een lichte kleur en aan de andere kant een donkere kleur.

Het heeft twee kleuren. de premier is rgba(92,158,82,0.76) op de 0%-positie. de tweede is rgba(0,10,4,0.76) op de 50% positie.

• Gradiëntstops:
  • 0%: rgba(92,158,82,0.76)
  • 50%: rgba(0,10,4,0.76)

Verander het gradiënttype: in conisch. Pas de .... aan richting boven de 221 graden. Centreer de positie et herhaal het niet . Plaats het verloop boven de afbeelding.

• Gradiënttype: conisch
• Gradiëntrichting: 221deg
• Positie: Midden
• Herhaal verloop: NEE
• Vierkant verloop boven achtergrondafbeelding: JA

Tweede voorbeeld van het conische gradiënttype

Dit voorbeeld is vergelijkbaar met het vorige, maar plaatst de middenlijn omhoog.

Deze heeft vier kleuren. de premier is rgba(20,40,20,0.76) op de 7% positie. kleur 2 is rgba(30,73,25,0.68) op de 24% positie. kleur 3 is rgba(103,132,30,0.68) op de 65% positie. De vierde kleur is rgba (38,86,26,0.68) op de 85% positie.

• Gradiëntstops:
  • 7%: rgba(20,40,20,0.76)
  • 24%: rgba(30,73,25,0.68)
  • 65%: rgba(103,132,30,0.68)
  • 85%: rgba(38,86,26,0.68)

Definieer de gradiënttype: op conisch en de richting bij 0 graden. Centreer de positie . geboren de niet herhalen en plaats deze boven de afbeelding.

• Gradiënttype: conisch
• Gradiëntrichting: 0deg
• Positie: Midden
• Herhaal verloop: NEE
• Vierkant verloop boven achtergrondafbeelding: JA

Derde voorbeeld van het conische gradiënttype

Ons laatste voorbeeld plaatst een reeks lijnen vanaf het midden bovenaan het verloop naar buiten in alle richtingen.

Deze heeft twee kleuren. de premier is rgba(30,73,25,0.68) op de 5deg positie. de tweede is rgba(20,40,20,0.76) op de 7deg positie.

• Gradiëntstops:
  • 5deg: rgba(30,73,25,0.68)
  • 7deg: rgba(20,40,20,0.76)

Stel de Verlooptype op Conische en de Aanwijzingen op 221 gr. Plaats de positie bovenaan. Herhaling deze en plaats deze boven de achtergrondafbeelding.

• Gradiënttype: conisch
• Gradiëntrichting: 221deg
• Positie: Boven
• Verloop herhalen: JA
• Vierkant verloop boven achtergrondafbeelding: JA

Download DIVI nu!!!

Conclusie

Dit is onze kijk op de vergelijking van gradiënttypen in Divi's Gradient Builder. 

Zoals u in deze voorbeelden kunt zien, zijn de instellingen eenvoudig, maar elk ervan kan een groot verschil maken in het ontwerp van het verloop. 

Experimenteer voor de beste resultaten met verlooptypen met verschillende richtingen en posities, en schakel de herhalingsoptie in of uit om te zien wat u kunt 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.

Aarzel niet om ook onze gids te raadplegen over 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.

...