Verloop achtergrond overlay maken in WordPress

De eenvoudigste manier om een kleurverloop als achtergrondkleur van een rij of kolom toe te voegen is om in je page builder (Elementor, Bakery Builder of beaver builder)  gebruik te maken van de kleurverloop-achtergrondfunctie die in de rijen en kolommen is ingebouwd. Als je echter een speciaal kleurverloop-effect wilt gebruiken, bijvoorbeeld van een gradient-genererend gereedschap, zijn hier enkele tips.

Voorbeelden kleurverloop

Kleurverlopen kunnen variaties van een enkele kleur zijn:

Of ze kunnen meerdere kleuren gebruiken:

Meerdere kleuren gebruiken voor gradient

Of ze kunnen zelfs met vormen te maken hebben. De volgende screenshot toont een vooraf ingestelde radiale gradiënt van gradientgenerator.com, met CSS kunt u kopiëren.

Ongeacht hoe betrokken het verloop is, als u een gereedschap gebruikt dat het CSS genereert, is de basisprocedure om het verloop toe te voegen aan een rij- of kolomachtergrond hetzelfde.

Om een CSS kleurverloop toe te voegen als een rij- of kolomachtergrond in Beaver Builder:

• Kies de CSS voor je gradiënt.
• Voeg een aangepaste CSS-klasse toe aan uw rij of kolom.
• Voeg de aangepaste CSS toe voor het verloop.

---

Methode 1 | kleurverloop maken met CSS

Er zijn veel gradiëntgeneratoren op het internet die CSS-code genereren. Hier zijn er maar een paar:

• Ultimate CSS gradient generator
• Gradiëntgenerator
• Web gradients
• UI gradients

Zodra je het gewenste verloop hebt gegenereerd, kopieer je de CSS en sla je het ergens op.

Voeg een aangepaste CSS klasse toe aan uw rij of kolom

1. Open uw rij of kolom voor bewerking en klik op het tabblad Advanced.
2. Schuif naar de CSS-selectoren en voer een aangepaste naam in het veld Class in. (Gebruik geen punt).
   Het is een goede gewoonte om een aangepast voorvoegsel toe te voegen aan uw klassennamen om conflicten te voorkomen met andere klassennamen die door het thema en de plugins worden gebruikt. In dit voorbeeld gebruiken we de klassennaam cursus-wordpress-gradiënt. Herhaal deze stap voor alle andere rijen of kolommen die je dezelfde kleurverloop-achtergrond wilt hebben.
3. Klik op Save.

Voeg de aangepaste CSS toe voor de gradiënt

Kopieer en plak de CSS van de gradiëntgenerator en vervang de klassennaam in de eerste regel door uw eigen klassennaam. Zie dit artikel over het toevoegen van aangepaste CSS-code op 1 pagina. Zodra u uw eigen classnaam toevoegt zou u de rij of kolom op uw pagina de kleur van het achtergrondverloop moeten zien aannemen.

Achtergrond kleurverloop maken met CSS in WordPress

---

Methode 2 | Verloop maken met page builder (beaver, elementor, bakery,  divi)

Verloop maken kun je met page builder (beaver, elementor, bakery,  divi). In dit voorbeeld laat ik het zien in Beaver Builder.

Kleurverlopen voor rij- en kolomachtergronden en overlays

Je kunt lineaire en radiale kleurverlopen maken voor rij- en kolomachtergronden, achtergrondoverlays en rijvormlagen. Om een kleurverloop te gebruiken als een rij- of kolomachtergrond of achtergrondoverlay doe je het volgende:

• Selecteer je rij en gasaar de rijinstellingen, meestal met het sleuteltje
• Kies Gradiënt of Verloop als achtergrondtype, waardoor de Achtergrondverloop sectie zichtbaar wordt, die in de volgende secties wordt beschreven.
• Kies twee kleuren die mooi bij elkaar passen.

Lineaire kleurverlopen

Om volledig te begrijpen hoe de rij of kolom instellingen het kleurverloop resultaat beïnvloeden, is het belangrijk om de basis concepten van CSS kleurverlopen te begrijpen. Hierboven is een screenshot van de lineaire gradient instellingen. De Beaver Builder lineaire gradient achtergrond vereist een hoek van gradient en twee kleuren. De hoek van het kleurverloop kan elk geheel getal zijn van 0-359. Note: Omdat de gradient lijn roteert op een cirkelvormige as en de rij of kolom achtergrond rechthoekig is, kunnen de 0% en 100% posities buiten de rij grens liggen voor sommige hoeken. Zie dit artikel over CSS lineaire-verlopen voor een gedetailleerde beschrijving van hoe lineaire CSS-verlopen werken.

Voorbeeld kleurverloop

Ik heb zelf een uitgebreid overzicht gemaakt met kleurverlopen voor achtergrond op basis van 216 wegvaste kleuren. Hier vast een voorproefje. Tijdens de designcursus krijg je het hele overzicht.

Overlay maken met CSS

Overlay maken met Z-index
Overlay maken met een div en CSS
Een voorbeeld zie je hieronder:

---

Meer handleidingen over beaver builder page builder

• WP Beaver Builder training pagina’s bouwen met WP plugin
• Beaver Builder margin padding rij kolom ruimte
• Class CSS stijlen maken WP Beaver page builder gevorderden
• Pagina kopieren WordPress Bakery Beaver Elementor builder
• Ultimate Beaver builder add-on plugin voor extra modules
• Livemesh Addons Beaver WordPress page builder plugin
• CSS aanpassen Beaver builder basis voor beginners
• Beeldvullende pagina maken foto volledige breedte scherm

---

Kleur kiezen voor je verlopen van je WordPress website

Lees de volgende handleidingen over kleur ter inspiratie:

• Kleur kiezen WordPress webdesign rgb hex kleurencirkel
• 50 Kleurenschema’s WordPress site RGB Hex kleur codes
• Beste kleurentools webdesign gereedschap voor ontwerpers
• Verloop kleurverloop voorbeelden gradient webdesign
• Kleur betekenis psychologie huisstijl ontwerp vormgeving