Multi-color gradient in Elementor Pro.
Een goede gradient kan een ontwerp maken of breken. Maak je de juiste combinatie, dan ziet je pagina er direct strak en modern uit. En om je heen zie je de mooiste gradients voorbij komen. Waarom lukt het jou niet in Elementor pro, terwijl die een ingebouwde verloop-background functie hebben?
In dit artikel laat ik je zien hoe je die beperking binnen één minuut omzeilt met een klein stukje Custom CSS.
Waarom je Elementor gradients er nu niet fancy en professioneel uitzien
Dat ligt niet aan jouw en je oog voor design. Dit komt door een beperking binnen Elementor.
In de standaard achtergrondinstellingen van Elementor Pro kun je namelijk maar twee kleuren kiezen: een beginkleur en een eindkleur.
Terwijl die diepte en subtiele overgangen in een gradient, pas ontstaan als je drie, vier of meer kleurstops combineert. Doordat Elementor je beperkt tot twee punten, blijft je verloop al snel plat, hard of simpelweg saai. Tijd om dat op te lossen.
Zo maak je een multi-color gradient in Elementor Pro
Voor die echt mooie gradient gebruiken een gradient-generator en ga je een klein stukje CSS toepasen. Geen paniek, iedereen kan dit.
Stap 1: Maak je gradiënt in de generator
Even googlen naar css gradient background en je vind er meerdere. Dit is mijn favoriet: https://cssgradient.io/
Stap 2: CSS regel maken
Hier moet je even opletten, want de CSS-regel die je uit de tool kunt kopieren heeft een toevoeging nodig om te werken in Elementor pro.
Met het woord ‘selector’ zorg je ervoor dat CSS wordt toegepast op de bewuste container. Dat zorgt ervoor dat je code er zo uit ziet:
Stap 3: Plak de CSS-regel in de ‘aangepaste CSS’ van de container
Geen ingewikkelde stap: Gewoon knippen en plakken.
Met het woord ‘selector’ zorg je ervoor dat CSS wordt toegepast op de bewuste container. Dat zorgt ervoor dat je code er zo uit ziet:
Tadaa! Daar is je gradient
Als het goed is, is je mooie gradient background direct verschenen.
TIP! Stel een fallback background in
Voor de zekerheid!
Gewoon zoals je gewend bent een achtergrond kleur in te stellen. Dis via het tabblad stijl - Achtergrond - Global kleur kiezen. Als er dan onverhoopt iets niet goed gaat bij het inladen van de gradient, is daar altijd nog de fallback-achtergrond.
Bekijk ook de instructie video
Video komt eraan! Excuus voor de vertraging.
