Als je met je muis over een afbeelding of knop in je Elementor WordPress website gaat wil je natuurlijk laten zien dat deze klikbaar is. Dit noem je een hover effect, dit is zichtbaar als je met de muiswijzer over een item heen gaat. Hoe voeg je dit toe in Elementor?

Elementor hover effect afbeelding

Om een hover effect toe te voegen aan een afbeelding in Elementor, kun je de volgende stappen volgen:

  1. Afbeelding toevoegen: Begin met het toevoegen van een afbeelding door de “Image” widget naar je sectie of kolom te slepen. Kies de afbeelding die je wilt gebruiken.
  2. Hover Effect instellen:
    • Klik op het “Style”-tabblad van de “Image” widget.
    • Scroll naar beneden en open de “Hover” sectie.
    • Hier vind je opties om een hover effect toe te voegen. Je kunt kiezen voor effecten zoals zoom in, zoom out, fade in, of fade out.
    • Daarnaast kun je de hover effect “Transition Duration” aanpassen om de snelheid van het effect te bepalen.Hover elementor
  3. Hover Animatie instellen:
    • Open het “Advanced”-tabblad.
    • Scroll naar beneden naar de sectie “Motion Effects”.
    • Kies een animatie onder “Hover Animation” om een extra effect toe te voegen, zoals een draai- of zwaaieffect.
  4. Achtergrond en overlay:
    • Terug in het “Style”-tabblad kun je, indien gewenst, een achtergrond of overlay instellen die alleen zichtbaar wordt bij hover.
    • Onder “Background Overlay” kun je een kleur, afbeelding of gradient kiezen die wordt weergegeven bij hover.
  5. Opslaan en publiceren: Wanneer je tevreden bent met het hover effect, klik je op “Publish” of “Update” om je wijzigingen op te slaan en te publiceren.

Deze stappen geven je de mogelijkheid om visueel aantrekkelijke hover effecten toe te voegen aan je afbeeldingen in Elementor.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis nooit meer website tips.

Al 500+ webdesigners en marketeers ontvangen onze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.