Vil du endre et bilde ved å holde musepekeren over en tekst med Page Builder Elementor ? I denne nye opplæringen vil vi vise deg hvordan du gjør det.
Hvis du ikke aner hva vi vil snakke om i dag, inviterer vi deg til å se følgende video:
Så la oss gå tilbake til hvorfor vi er her.
Oppdag også vår guide om: Hvordan lage et porteføljeeffektkort med Elementor
For å fullføre denne opplæringen trenger du Pro-versjonen av Elementor, fordi vi kommer til å bruke tilpasset CSS-kode som kun støttes av denne versjonen avElementor.
La oss lage en seksjon med 2 kolonner, og deretter i sidepanelet, la oss definere Høyde på Min Høyde, og deretter Minimum høyde la oss klikke videre VH og sett glidebryteren til 100.
I fanen Stil la oss velge det Bakgrunnstype en cliquant sur klassisk, endre deretter farge på# F9F9F9
I fanen avansert, endre alle Interne marginer på 25
La oss nå endre kolonnebredden til 40% for venstre kolonne og 60% for høyre kolonne.
La oss slippe en i venstre kolonne Tekstredigeringswidget, lim deretter inn en tekst i den og endre Tittelstørrelse tekst på Tittel 3.
I fanen avansert, skriv inn som Interne marginer 10-25-10-30 henholdsvis for topp, høyre, bunn og venstre indre marger
I avsnittet bakgrunn fanen avansert, klikk på OVERSIKT, og velg deretter bakgrunnstype på klassisk, la oss legge inn det farge #DFF5FF et Overgangsvarighet på 0.5.
Holder vi musepekeren over teksten, får vi muligheten til å oppdage en praktfull bakgrunnsfarge på hover.
La oss nå gå til delen grenser, og klikk på OVERSIKT, og velg deretter Fortsett for kanttype et la oss deaktivere koblingen mellom grensen å gå inn 4 for venstre kantlinje. La oss velge fargen #002FA7 og legg til en overgangsvarighet til 0.5
Hvis vi holder musepekeren over tekstboksen en gang til, vil vi se en mer fremtredende animasjon med en kantlinje til venstre.
I avsnittet grensen, la oss gå tilbake til fanen NORMAL, la oss velge kanttype på Fortsett, la oss slå av bindingen mellom grenser, ta tak 4 for venstre kant og gjør den veldig gjennomsiktig.
Hvis vi holder markøren over teksten en gang til, vil vi se en veldig jevn overgang.
Les også: Hvordan vise tekst over et bilde med Elementor
La oss duplisere denne teksten to ganger og endre tekstene til hver innhold som dette.
I høyre kolonne drar du en Bilde-widget, og sett inn et bilde fra biblioteket vårt.
Vi skal skape et rom rundt dette bildet ved å gå til Avansert-fanen i kolonnen og skriv inn 10 – 10 – 10 – 50 for alle interne marger av topp, høyre, bunn og venstre.
La oss velge bildet og i fanen avansert av sistnevnte, la oss gå til delen Bevegelseseffekter deretter Inngangsanimasjon, plukke ut Fade In
La oss gå inn i delen avansert fra Avansert-fanen og legg til noen klassenavn i feltet CSS-klasser. Så la oss få all-img img-1
La oss duplisere bildet vårt 2 ganger.
La oss velge det andre bildet og endre img-1 til img-2, og deretter endre bildet til et nytt bilde.
Se også: Hvordan lage et bildegalleri med Elementor
For det tredje bildet, la oss bare endre img-1 til img-3, og deretter endre bildet til et nytt bilde.
La oss velge vår seksjon og gå til fanen avansert. I seksjonen Custom CSS, kopier og lim inn følgende kodebit:
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}(Hvis du ikke har denne delen så har du ikke Pro-versjonen, hvis du vil fortsette må du oppgradere din versjon).
La oss velge vår første tekstredigerer og gå til Avansert-fanen og Attributter delen. I felten attributter, kopier og lim inn følgende kodebit:
data-showme|img-1Gjør dette for andre tekstredigerere mens du endrer img-1 til img-2 eller til img-3
La oss nå legge til en HTML-widget på siden vår. Kopier og lim inn følgende skript:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
Lagre eller oppdater siden din og forhåndsvis den.
Der du går, du har nettopp gjort denne oppgaven enkelt.
Få Elementor Pro nå!
konklusjonen
Der er den! Det er det for denne artikkelen som viser deg hvordan du endrer et bilde ved å holde musepekeren over en tekst. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
