Vill du veta hur man ändrar en bild på hovring med DIVI?
Hover-effekter är några av de enklaste mikrointeraktionerna en användare kan ha med en webbplats. De Divi Theme Builder erbjuder en uppsättning otroligt enkla svävningseffekter som du kan använda för att skapa en engagerande interaktion för varje person som besöker din webbplats.
En av Divis mest slående och användbara effekter är att kunna modifiera en bild när en användare håller markören över den.
Vi visar dig i denna handledning hur du uppnår en vacker bildförändring när du håller muspekaren över den.
undersökningen
Innan vi börjar, låt oss ta en titt på det resultat vi vill uppnå.
Skapa en sida med Divi Theme Builder
Börja med att lägga till en ny sida till webbplats från WordPress Dashboard.
Ge sedan en titel till din sida och klicka sedan på " Använd Divi Builder ".
Klicka sedan på " Välj layout«
Hitta och välj " Hemsida för hundtrimmning »
Välj en layout och klicka på " Välj layout »
Hitta dina bilder
När du är i Divi Builder letar du helt enkelt upp bilderna du vill lägga till effekten på.
Observera att du kan använda den på alla element som innehåller en bild
Öppna modulinställningar
När du har fattat ditt beslut, klicka på kugghjulsikonen och skriv in modulparametrar som innehåller bilden.
Läs också: Hur flyter jag blogginlägg i DIVI?
När det gäller det här layoutpaketet är bilden vi ska tillämpa hovringseffekten på bakgrunden till kolumnen längst till höger i den första raden.
Ange kolumninställningarna.
Hitta bild i inställningarna
När du är i inställningarna för kolonn korrekt, se till att välja fliken Innehåll. Scrolla ner tills du hittar alternativet Botten.
Sous Bakgrund, Divi ger dig möjlighet att använda antingen en enfärgad eller en gradient, eller en bild eller en video i .mp4-format.
Och även om svävningseffekterna kan tillämpas på vilken som helst av dem, arbetar vi i fliken Bild , tredje från vänster.
Aktivera svävningseffekter
Flytta musen över ordet Bakgrund (den minsta undertexten) och sök efterpilikon i alternativen som visas. Detta är växeln för Divi Hover-effekter.
När det här alternativet är aktiverat visas två nya flikar. Den vänstra fliken är basbilden som visas utan interaktion.
Välj din nya bild
När du flyttar markören nedåt över bilden har du de vanliga alternativen: för att ersätta bilden ou för att radera bilden.
Om du väljer papperskorgsikonen aktiveras hovringseffekten, men bilden försvinner.
Eftersom vi vill förändra bilden på svävaren, det gör vi heller klicka på själva bilden, antingen påkugghjulsikon .
Välj svävbild (ersättning)
Detta öppnar ditt mediebibliotek. Du kan sedan välja den nya bild som du vill att dina användare ska se när de håller muspekaren över originalet. Klicka på 'Ladda upp en bild'
Kontrollera om det finns fel med originalbilden
Vi föreslår alltid att du ser till att originalbilden också förblir densamma. Så för att kontrollera, klicka på vänster flik och se till att originalbilden fortfarande är på plats.
Om allt är bra kan du spara dina inställningar.
- Spara kolumninställningar
- Tryck igen på grön fästing för att spara linjeinställningarna.
Spara allmänna allmänna inställningar och publicera sidan.
Resultat
Om du följde alla steg i den här handledningen borde du få det här.
Ladda ner DIVI nu!!!
Slutsats
Divis Theme Builder är full av kraftfulla verktyg som alla kan använda till skapa en webbplats intressant och interaktiv. Hover bildändringen som vi visade dig i den här guiden är bara ett verktyg bland många.
Om du behöver fler element för att slutföra dina webbplatsskapande projekt, bläddra också i vår guide på WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att prata om det. Men under tiden, dela den här artikeln på dina olika sociala nätverk.
.
