De afgelopen maanden hebben we bij elke website die we maakten, geprobeerd er iets extra’s aan toe te voegen qua beweging. Gelukkig zijn er handige WordPress plugins voor beweging in je website. Voor ons een toffe uitdaging om mee aan de slag te gaan, voor de opdrachtgever nog coolere resultaten!
De meeste websites die we opleveren ontwikkelen we met Elementor. Dat is een zogenaamde pagebuilder waarmee je de opbouw en layout van websitepagina’s kunt bepalen. Elementor is ook erg SEO friendly omdat het een ‘lichte’ tool is. Meer info over Elementor kun je op hun website terugvinden.
Zoals wel vaker geldt bij het WordPress platform zijn er verschillende uitbreidingsmogelijkheden. Dit geldt ook voor Elementor zelf. Je kunt de free version gebruiken of de PRO version en er zijn meerdere uitbreidingsmogelijkheden. Deze uitbreidingsmogelijkheden geven je nieuwe widgets/bouwblokken om je website mee vorm te geven. In dit blog zetten we een paar uitbreidingen op een rij zodat je een idee krijgt welke WordPress plugins voor beweging in je website kunnen zorgen.
Met beweging bedoelen we zaken als scrollen, bewegingen aan de hand van je muis, (korte) animaties, een bewegend menu, etc. Van alles dus! lees vooral verder als je een kijkje wilt krijgen in de keuken van handige WordPress plugins voor beweging in je website!
De afgelopen tijd hebben we gewerkt met de volgende uitbreidingen op Elementor:
Premium Add ons for Elementor (link). Deze uitbreiding hebben we gebruikt om een .json file (heel kort uitgelegd: een bestand waarin een korte animatie is geplaatst van enkele seconden) te kunnen uploaden in een website door middel van een zogenaamde Lottie widget (zie hier enkele voorbeelden van bewegende elementen). Resultaat hiervan is een ‘afbeelding’ die gaat bewegen als je er met je muis overheen gaat of als de animatie zelf in beeld komt op een computerscherm. Op deze websitepagina zie je daar een voorbeeld van. Groot voordeel: De .json bestanden zijn erg klein (nog geen 100 Kb) waardoor er geen negatieve impact is op de laadtijd van je website. Hoe sick is dat!?
Met de Jettricks plugin van Crocoblock, als uitbreiding op Elementor, hebben we op deze websitepagina zogenaamde hotspots toegevoegd. Zo’n hotspot geeft je informatie op het moment dat je met je muis over een bepaald gedeelte van een afbeelding scrollt. Je kunt zelf je iconen kiezen, kleuren bepalen, grootte instellen en een kleine beweging toevoegen.
Elementor heeft een free version, die je prima mogelijkheden geeft om een ‘standaard’ website mee te maken. De PRO versie echter, geeft je nog meer mogelijkheden. Een overzicht van de in te zetten widgets (= bouwblokken van elementor) vind je op deze websitepagina. By the way, de PRO versie heeft ook een Lottie widget en hotspot widget in zich.
Met Elementor PRO hebben we bij de website van Carla een pop-op oplossing gebruikt om het menu te laten ‘sliden’ van links naar rechts op het moment dat je links bovenin klikt op de drie streepjes (een zogenaamd hamburger menu). Het lijkt dus een normaal menu maar stiekem is het een pop-up oplossing binnen Elementor PRO.
Elementor PRO heeft ook nog motion effects in zich. We zijn nu aan het onderzoeken of we dit in ons nieuwste project kunnen implementeren.
Zoals je ziet zijn er dus best wat mogelijkheden om op een leuke, maar ook professionele manier, beweging toe te voegen tot je WordPress website.
Heb je vragen?
Heb je hulp nodig bij het updaten van je WordPress website of webshop? Of heb je andere vragen over WordPress, jouw website of webshop? Zodat ook jij bovenstaande vragen (en meer) kunt beantwoorden voor jezelf? Neem gerust contact op of laat een reactie achter onder dit blog. Thanks!