Verloop gradient achtergrondkleur overlay maken met CSS Class handleiding

Verloop achtergrond overlay maken met CSS

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.

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.

Maak de CSS voor uw kleurverloop

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

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.

Voorbeeld van gradient met CSS


background-image: linear-gradient(to top right, rgb(101, 115, 255), rgb(111, 114, 247), rgb(120, 114, 239), rgb(130, 113, 231), rgb(139, 112, 223), rgb(149, 111, 215), rgb(158, 111, 208), rgb(168, 110, 200), rgb(177, 109, 192), rgb(187, 108, 184), rgb(196, 108, 176), rgb(206, 107, 168));


Meer handleidingen over classes en Css in WordPress