Hoe u zweefeffecten toevoegt aan afbeeldingen in WordPress (5 eenvoudige manieren)

Adding a hover effect to your website may seem like a small detail, but it can boost the site's appearance and usability. When visitors hover their mouse over an image or button and see it change slightly, it signals that the element is interactive. 

Deze subtiele beweging zal de betrokkenheid verbeteren en het bouncepercentage verlagen. Zweefeffecten zijn vooral handig in e-commerce. Hiermee kunnen shoppers producten beter bekijken, waardoor ze verder kunnen verkennen en naar de checkout gaan.

Er zijn veel manieren om zweefeffecten toe te voegen in WordPress, van eenvoudige fades tot opvallende flip-animaties. Hieronder vindt u verschillende methoden om aan de slag te gaan!

Hoe u zweefeffecten toevoegt aan afbeeldingen in WordPress

In dit artikel hebben we vijf eenvoudige manieren verzameld om zweefeffecten aan uw site toe te voegen. Kies degene die het beste voor u werkt!

Methode 1: Een plugin gebruiken

Een plugin zal je veel tijd en moeite besparen, vooral als je meerdere zweefeffecten op dezelfde site wilt gebruiken.

Bijvoorbeeld, als je meerdere beeldgalerijen hebt, kun je verschillende animaties toepassen op elk, zoals een eenvoudige zoom voor blogminiaturen of een flip-effect voor productafbeeldingen.

Het gebruik van een plugin zoals Image Hover Effects Ultimate maakt dit proces veel eenvoudiger. Deze plugin is gratis voor iedereen en biedt een breed scala aan effecten voor elk element. Om aan de slag te gaan, installeert u het gewoon door de onderstaande tutorial te volgen: 

Een plugin installeren

• Open uw WordPress-beheerdersgebied.
• Klik op Plugin toevoegen in het Plugins-menu in de zijbalk.

• Typ Image Hover Effects Ultimate

• Selecteer het eerste resultaat en klik op Nu installeren om de download te starten.
• Zodra de installatie is voltooid, klikt u op de Activeren knop om de plugin te gaan gebruiken.

De Image Hover Effects WordPress Plugin gebruiken

• Zodra de plugin is geïnstalleerd, ziet u een nieuw Beeld Zweven menu in uw dashboard.

• Klik op het menu om de plugin-instellingen te openen. 

• Kies elk effect dat u wilt gebruiken. Voor deze tutorial gaan we experimenteren met Beeldvergroter.
• Na het selecteren van het effect, ziet u een verscheidenheid aan animatiestijlen.

Als je er een vindt die je leuk vindt, klik je op Maak stijl

• Er verschijnt een pop-up. Voer een titel in het Naam veld in en selecteer een effect uit de lay-out (1e, 2e of 3e). Klik vervolgens op Opslaan om door te gaan.
• U wordt naar een nieuwe pagina geleid waar u de instellingen kunt aanpassen, zoals hoogte, breedte en dekking. Speel ermee om te zien wat er het beste uitziet.

• Als je tevreden bent met de instellingen, klik je op Bewerken

• Er verschijnt een ander pop-upvenster. Hier kunt u de vergrotingspositie aanpassen. 

• U kunt de afbeelding ook vervangen door op de Kies afbeelding knop.
• Nadat je alles hebt ingesteld, klik je op Verzenden om je zweefeffect op te slaan.

• Om het effect toe te passen op uw site, kopieert en plakt u de shortcode in uw bericht of pagina. 

• Nu is uw eenvoudige zweefeffect voor afbeeldingen klaar om in elk deel van uw site te worden gebruikt. 

Methode 2: CSS gebruiken

Je hoeft voor deze methode geen plugins te installeren. Door aangepaste CSS te gebruiken, kun je verschillende hover-effecten aan je thema toevoegen.

We beginnen met iets eenvoudigs, zoals een onderstreep hover-effect. Als u dit effect aan uw thema wilt toevoegen, volgt u de onderstaande eenvoudige stappen:

• Navigeer naar het bericht waar u een zweefeffect wilt toevoegen.
• Voeg een afbeelding toe door op het Omslag blok te klikken vanuit de +.

• Voer je inhoud in in het Omslag blok. Hier voegen we een titel en een knop toe.

• Stel het lettertype en de stijlen naar uw wens in.
• Sla de pagina op als concept.
• Ga vervolgens naar het Uiterlijk-menu in je dashboard.

• Klik vervolgens op Aanpassen en ga naar Extra CSS. Voeg de volgende code toe:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Klik op Publiceren om de code op te slaan.

• Ga nu terug naar je bericht en selecteer de tekst waarop je het onderstrepingseffect wilt toepassen.
• Open de Geavanceerd-sectie in de zijbalk van het blok en voer underline-hover in het veld Aanvullende CSS-klasse(s) in.

• Sla de pagina op en bekijk deze om het effect te zien. 

Er zijn zoveel zweefeffecten om uit te kiezen, dus kies degene die het beste bij je stijl past. Je kunt zelf leren om CSS te schrijven of voorbeelden vinden uit de WordPress-gemeenschap. Het is allemaal daar!

Methode 3: Pagina-builders gebruiken (bijv. Elementor)

Een pagina-builder zoals Elementor stelt je in staat om je website met veel creativiteit te bouwen. Het heeft ingebouwde hover-effecten, allemaal klaar voor gebruik om je site te verlevendigen zonder dat er codeerwerk vereist is.

Je kunt het ook gebruiken om zweefeffecten voor afbeeldingen te maken in WordPress. In dit gedeelte experimenteren we met de ingebouwde zweefeffecten binnen de pagina builder zelf.

Om de effecten in te stellen:

• Open de Elementor editor vanuit het administratiedashboard.
• Voeg uw afbeelding toe.

• Selecteer uw afbeelding, ga vervolgens naar de Stijl tab.
• Scroll naar beneden en klik Zweven.

• In het Hover Animatie dropdown menu vindt u een verscheidenheid aan kant-en-klare effecten.

• Hier hebben we het Grow effect als voorbeeld gekozen. U kunt de overgangstijd, dekking en andere instellingen aanpassen aan het ontwerp van uw site.

• Nadat u klaar bent, ziet u het effect onmiddellijk zonder dat u een voorbeeld hoeft te bekijken. 

Methode 4: Flipbox-plug-ins gebruiken

Als je op zoek bent naar een snelkoppeling, kun je de flipbox-plugin installeren. Een flipbox-effect is wanneer een afbeelding omdraait om inhoud op de voor- of achterkant te onthullen wanneer je eroverheen beweegt.

Dit effect is geweldig voor fotografie-afbeeldingen, waarbij u de foto aan de voorkant en cameragegevens aan de achterkant kunt weergeven. Maar de mogelijkheden zijn eindeloos.

• Ga vanuit uw WordPress-dashboard naar het Plugins-menu. Selecteer vervolgens Add Plugin.
• Typ Flipbox - Awesome Flip Boxes Image Overlay in de zoekbalk.

• Klik Nu installeren, en Activeer de plugin.

• Ga naar het Flip Box menu en klik op Maak nieuw om een flipbox te maken.
• Kies elke animatie die u leuk vindt. Zodra u er een heeft gevonden, klikt u op Maak stijl.

• Er verschijnt een pop-up. Selecteer de gewenste lay-out (1e, 2e of 3e) en voer een titel in. 

• Klik op Opslaan om door te gaan.
• Vervolgens wordt u naar het aanpassingsmenu gebracht waar u de effecten kunt instellen en uw inhoud kunt toevoegen.

• Scroll naar beneden om de Voorbeeld tab te vinden. Klik Bewerken om de inhoud voor zowel de voor- als achterkant van de flipbox aan te passen.

• Zodra u klaar bent, klikt u op Verzenden om het op te slaan.

• Om deze flipbox aan uw pagina toe te voegen, kopieert en plakt u de gegenereerde shortcode in elke sectie van uw site. 

• En dat is het, hier is het eindresultaat! 

Methode 5: Gutenberg-blokken gebruiken

Gutenberg is de standaard WordPress-blokeditor waarmee u zweefeffecten rechtstreeks binnen de editor kunt toevoegen.

Hoewel het mogelijk geen geavanceerde zweefeffecten biedt, kun je de animaties verbeteren met behulp van aangepaste CSS.

Laten we bijvoorbeeld een eenvoudig vervaageffect bij hover maken. Hier is de stap-voor-stap handleiding:

• Navigeer naar de post of pagina waar u het zweefeffect wilt toevoegen.
• Klik op de + om een nieuw blok toe te voegen en kies vervolgens het Omslag blok.

• Binnen het Omslag blok, voeg een Paragraaf blok toe.

• Voer uw titel en een korte beschrijving in.
• Pas de lettergrootte, dekking, uitlijning en kleur aan zoals nodig.

• Selecteer vervolgens het Cover blok om een aangepaste CSS-klasse toe te voegen.
• Open het Geavanceerd gedeelte in de rechter zijbalk.
• Voer fade-hover-effect in het Extra CSS Klasse veld

• Sla daarna de pagina op als concept.

• Ga naar het Plugins menu en selecteer uw code snippet plugin. In dit voorbeeld gebruiken we WPCode.
• Maak een nieuw CSS-fragment en plak vervolgens de volgende code:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Sla het codefragment op en activeer het.
• Bekijk nu uw pagina om het zweefeffect in actie te zien.

U kunt dit effect opnieuw gebruiken door de fade-hover-effect klasse toe te voegen aan elk blok of elke afbeelding. Maar als u te maken heeft met veel afbeeldingen, overweeg dan om een plugin zoals WP Media Folder te gebruiken om uw mediabibliotheek te organiseren in mappen. Dit maakt het gemakkelijker om gerelateerde inhoud te vinden en opnieuw te gebruiken.

Heeft het gebruik van te veel effecten invloed op de prestaties?

Ja, het gebruik van te veel hover-effecten op uw site kan de prestaties beïnvloeden, vooral als deze niet goed zijn geoptimaliseerd. Dit komt doordat sommige hover-effecten extra CSS vereisen. De grootte van de CSS van uw site kan toenemen en de laadtijd van de pagina vertragen.

Het is het beste om alleen essentiële hover-effecten te gebruiken om de gebruikerservaring te verbeteren zonder je site te overbelasten.

Samenvatting

Leren hoe u zweefeffecten toevoegt aan afbeeldingen in WordPress kan uw site stimuleren door de gebruikersinteractie te verbeteren en ze betrokken te houden.

Met meerdere manieren om zweefeffecten toe te voegen, of het nu via plugins, aangepaste CSS of pagina builders is, heb je de vrijheid om te kiezen wat het beste voor je werkt. Experimenteer met verschillende stijlen om degene te vinden die het beste bij je site past!