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 verbetert de betrokkenheid en helpt het bouncepercentage te verlagen. Hover-effecten zijn vooral handig in webshops. Ze stellen klanten in staat producten beter te bekijken, waardoor ze worden aangemoedigd om verder te zoeken en af ​​te rekenen.

Er zijn veel manieren om hover-effecten aan afbeeldingen toe te voegen in WordPress, van eenvoudige fades tot opvallende flip-animaties. Hieronder vind je 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 in de zoekbalk. 

• 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, verschijnt er een nieuw 'Afbeelding zweven' in je dashboard. 

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

• Kies de effecten die je wilt gebruiken. In deze tutorial gaan we experimenteren met de 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 om je afbeelding aan te passen. 

• 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 tekst in het omslagblok . 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 Animation' vindt u diverse kant-en-klare effecten. 

• Hier hebben we het Grow- effect als voorbeeld gekozen. Je kunt vervolgens de overgangsduur, de transparantie en andere instellingen aanpassen aan het ontwerp van je website. 

• 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 nieuwom een flipbox te maken.
• Kies de animaties die je mooi vindt. Zodra je er een hebt gevonden, klik je op Stijl maken.

• 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. 

• Klik na afloop 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 veldin

• Sla daarna de pagina op als concept.

• Ga naar het Plugins en selecteer je codefragmentplugin. 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.

Je kunt dit effect hergebruiken door de klasse `fade-hover-effect` toe te voegen aan elk blok of elke afbeelding. Maar als je met veel afbeeldingen werkt, kun je overwegen een plugin zoals WP Media Folder om je mediabibliotheek in mappen te organiseren. Dit maakt het gemakkelijker om gerelateerde content 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!