Vil du vide, hvordan man ændrer et billede på hover med DIVI?
Hover-effekter er nogle af de enkleste mikrointeraktioner, en bruger kan have med en websted. Det Divi Theme Builder tilbyder et sæt utroligt enkle svæveeffekter, som du kan bruge til at skabe en engagerende interaktion for hver person, der besøger din websted.
En af Divis mest slående og nyttige effekter er at kunne ændre et billede, når en bruger holder markøren over det.
Vi viser dig i denne vejledning, hvordan du opnår en smuk billedændring, når du holder musemarkøren over den.
undersøgelse
Inden vi starter, lad os tage et kig på det resultat, vi ønsker at opnå.
Opret en side med Divi Theme Builder
Start med at tilføje en ny side til Websted fra WordPress Dashboard.
Se også: Hvordan opretter man en glidende og push-menu i DIVI?
Giv derefter en titel til din side og klik på " Brug Divi Builder ".
Klik derefter på " Vælg layout«
Find og vælg " Hjemmeside for hundepleje »
Vælg et layout og klik på " Vælg layout »
Find dine billeder
Når du er i Divi Builder, skal du blot finde de billeder, du vil tilføje effekten til.
Bemærk at du kan bruge den på ethvert element, der indeholder et billede
Åbn modulindstillinger
Når du har truffet din beslutning, skal du klikke på tandhjulsikonet og indtaste modul parametre indeholdende billedet.
Læs også: Hvordan flyder jeg blogindlæg i DIVI?
I tilfælde af denne layoutpakke er det billede, vi vil anvende svæveeffekten på, baggrunden for kolonnen længst til højre i den første række.
Indtast kolonneindstillingerne.
Find billede i indstillinger
Når du er i indstillingerne af kolonne korrekt, skal du sørge for at vælge fanen Indhold. Rul ned, indtil du finder muligheden Bund.
under Baggrund, Divi giver dig mulighed for at bruge enten en ensfarvet eller en gradient, eller et billede eller en video i .mp4-format.
Og selvom hover-effekterne kan anvendes på enhver af dem, arbejder vi i fanen Billede, tredje fra venstre.
Aktiver svæveeffekter
Før musen hen over ordet Baggrund (den mindste undertekst) og søg efterpil ikon i de muligheder, der vises. Dette er omskifteren til Divi Hover-effekter.
Når denne mulighed er aktiveret, vises to nye faner. Den venstre fane er basisbilledet, der vises uden interaktion.
Vælg dit nye billede
Når du flytter markøren ned over billedet, har du de normale muligheder: for at erstatte billedet ou for at slette billedet.
Hvis du vælger skraldespandsikonet, vil det aktivere svæveeffekten, men det vil få billedet til at forsvinde.
Siden vi vil lave om billedet ved at svæve, vil vi også klik på selve billedet, enten pågearikon .
Vælg svævebilledet (erstatning)
Dette åbner dit mediebibliotek. Du kan derefter vælge det nye billede, som du ønsker, at dine brugere skal se, når de holder markøren over originalen. Klik på 'Upload et billede'
Tjek for fejl med det originale billede
Vi foreslår altid, at du sørger for, at det originale billede også forbliver det samme. Så for at tjekke, klik på venstre fane og sørg for, at det originale billede stadig er på plads.
Hvis alt er godt, kan du gemme dine indstillinger.
- Gem kolonneindstillinger
- Tryk igen på grønt kryds for at gemme linjeindstillingerne.
Gem generelle generelle indstillinger og udgiv siden.
Resultat
Hvis du fulgte alle trinene i denne tutorial, skulle du få dette.
Download DIVI nu!!!
Konklusion
Divi's Theme Builder er fuld af kraftfulde værktøjer, som alle kan bruge til oprette et websted interessant og interaktiv. Ændringen af svævebilledet, som vi viste dig i denne guide, er blot ét værktøj blandt mange.
Hvis du har brug for flere elementer til at fuldføre dine hjemmesideoprettelsesprojekter, kan du også gennemse vores guide på WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at tale om det. Men i mellemtiden, del denne artikel på dine forskellige sociale netværk.
...
