Wil je weten hoe je een afbeelding bij hover met DIVI kunt wijzigen?
Zweefeffecten zijn enkele van de eenvoudigste micro-interacties die een gebruiker kan hebben met een website. De Divi Thema Builder biedt een reeks ongelooflijk eenvoudige zweefeffecten die u kunt gebruiken om een ​​boeiende interactie te creëren voor iedereen die uw . bezoekt website.
Een van Divi's meest opvallende en nuttige effecten is het kunnen wijzigen van een afbeelding wanneer een gebruiker de cursor eroverheen beweegt.
We laten u in deze tutorial zien hoe u een prachtige afbeeldingsverandering kunt bereiken wanneer u de muiscursor erover beweegt.
overzicht
Voordat we beginnen, kijken we eerst naar het resultaat dat we willen bereiken.
Maak een pagina met Divi Theme Builder
Begin met het toevoegen van een nieuwe pagina aan de Site web vanuit het WordPress-dashboard.
Geef vervolgens een titel aan uw pagina en klik vervolgens op " Gebruik Divi Builder ".
Klik dan op " Kies lay-out«
Zoek en kies " Homepagina Hondenverzorging »
Kies een lay-out en klik op " Kies lay-out »
Vind je afbeeldingen
Zoek in Divi Builder naar de afbeeldingen waaraan u het effect wilt toevoegen.
Merk op dat je het kunt gebruiken op elk element dat een afbeelding bevat
Module-instellingen openen
Wanneer u uw beslissing hebt genomen, klikt u op het tandwielpictogram en voert u de moduleparameters: die de afbeelding bevat.
Lees ook: Hoe laat ik blogposts zweven in DIVI?
In het geval van dit lay-outpakket is de afbeelding waarop we het zweefeffect gaan toepassen de achtergrond van de meest rechtse kolom van de eerste rij.
Voer de kolominstellingen in.
Zoek afbeelding in instellingen
Als je eenmaal in de instellingen van colonne correct, zorg ervoor dat u het tabblad selecteert Inhoud. Scroll naar beneden tot je de optie vindt Onderkant.
Sous Achtergrond, Divi geeft je de mogelijkheid om ofwel een effen kleur, of een verloop, of een afbeelding, of een video in .mp4-formaat te gebruiken.
En hoewel de hover-effecten op elk van hen kunnen worden toegepast, werken we in het tabblad Afbeelding , derde van links.
Zweefeffecten inschakelen
Beweeg je muis over het woord Achtergrond (de kleinste ondertitel) en zoek naar depijlpictogram in de opties die verschijnen. Dit is de schakelaar voor Divi Zweefeffecten.
Wanneer deze optie is geactiveerd, verschijnen er twee nieuwe tabbladen. Het linkertabblad is de basisafbeelding die zonder interactie verschijnt.
Kies je nieuwe afbeelding
Wanneer u uw cursor over de afbeelding naar beneden beweegt, heeft u de normale opties: om de afbeelding te vervangen ou om de foto te verwijderen.
Als u het prullenbakpictogram kiest, wordt het zweefeffect geactiveerd, maar verdwijnt de afbeelding.
Omdat we willen veranderen de afbeelding op hover, zullen we ofwel klik op de afbeelding zelf, hetzij op detandwiel icoon .
Kies de hover-afbeelding (vervanging)
Hiermee wordt uw mediabibliotheek geopend. U kunt vervolgens de nieuwe afbeelding kiezen die uw gebruikers moeten zien wanneer ze de muisaanwijzer op het origineel houden. Klik op 'Upload een afbeelding'
Controleer op fouten met de originele afbeelding
We raden u altijd aan ervoor te zorgen dat de originele afbeelding ook hetzelfde blijft. Dus om te controleren, klik op de linker tabblad en zorg ervoor dat de originele afbeelding nog steeds op zijn plaats zit.
Als alles goed is, kunt u uw instellingen opslaan.
- Kolominstellingen opslaan
- Druk nogmaals op de groen vinkje om de lijninstellingen op te slaan.
Sla algemene algemene instellingen op en publiceer de pagina.
Resultaat
Als je alle stappen in deze tutorial hebt gevolgd, zou je dit moeten krijgen.
Download DIVI nu!!!
Conclusie
Divi's Theme Builder zit vol met krachtige tools die iedereen kan gebruiken maak een website interessant en interactief. De wijziging van de hover-afbeelding die we u in deze handleiding hebben laten zien, is slechts een van de vele hulpmiddelen.
Als u meer elementen nodig heeft om uw projecten voor het maken van websites te voltooien, bladert u ook door onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte erover te praten. Maar ondertussen, deel dit artikel op uw verschillende sociale netwerken.
...
