Vil du endre bilde ved å klikke på en knapp 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.
Les også: Hvordan endre et bilde ved å holde musepekeren over tekst 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.
La oss dra Bilde-widgeten til venstre kolonne og sette inn et bilde fra biblioteket vårt.
La oss sette inn en i høyre kolonne Tittel-widget med tittelen Velg det beste. I fanen Stil la oss klikke videre Typographie og endre Radhøyde ved 1.
Se også: Hvordan endre et bildehold musepekeren over tekst med Elementor
La oss legge til under Tittel-widgeten, en Tekstredigerer-widget.
Over Tittel-widgeten, la oss slippe en Separator-widget i fanen Innhold, la oss gå inn 270 for bredde. La oss klikke på Tekst for Legg til element, og skriv deretter trend som tekst. I fanen Stil, endre fettet og gapet på 2.
Oppdag også: Hvordan vise tekst over et bilde med Elementor
Klikk på i tekstdelen Typographie, la oss endre fonten, den Størrelse på 18den fett på 600.
Under Editor-widgeten innhold, la oss arkivere en Innvendig seksjon, slett en av kolonnene i den interne seksjonen og slipp inn sistnevnte a knapp-widget
La oss endre knappen ved å gå til sidepanelet og i fanen Innhold, klikk på ikonbibliotek på icon og sett inn ikonet Shopping Bag, la oss også slette innholdet av knappen på Texte
La oss gå til fanen Stil av knappen og inn Kanteradius, klikk på % og gripe 50 for alle kantsteinsradier og inn Interne marginer, la oss gå inn 20.
La oss tilpasse fargen på knappen ved å endre fargen på sistnevnte ved å klikke på klassisk for Bakgrunnstype og La oss endre fargen i henhold til uthevingsfargen på bildet.
Klikk deretter på fanen avansert på knappen vår, og deretter på posisjonering og Bredde la oss velge Inline (automatisk). I Avansert-delen avAvansert fane, la oss gå inn 10 for høyre marg.
La oss duplisere denne knappen 4 ganger og endre fargene på disse knappene.
La oss deretter duplisere bilde-widgeten vår 4 ganger, og deretter endre bildene deres.
I L 'Avansert-fanen, la oss gå inn alle bilder i felten CSS-klasser av hvert av våre bilder.
Så i felten CSS ID angi rødt bilde for bildet med rødt utheving, grønt bilde for bildet med grønt utheving, og brunt bilde for bildet med brunt utheving, og så videre.
La oss velge vår Seksjon og iAvansert fane, i felten Custom CSS kopier og lim inn følgende kodebit:
.all-images{
display: none;
}
#red-image{
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 deretter slippe en HTML-widget på siden vår, kopiere og lime inn følgende kodebit i HTML-kodedelen:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').on('click', function(){
var showme = $(this).attr('data-showme')
$('.all-images').hide()
$('#' + showme).show()
})
})
</script>
La oss velge den første knappen, i feltet Egendefinerte attributter fra Attributter delen, kopier og lim inn følgende kodebit:
data-showme|IMAGE-ID-NAMELa oss modifisere IMAGE-ID-NAME-delen etter ID-ene til knappene dine, disse er ID-ene for rødt bilde, grønt bilde og blått bilde, og så videre.
Så for hver knapp, la oss endre IMAGE-ID-NAME-koden til fargen på den aktuelle knappen
Oppdater arbeidet ditt og forhåndsvis det i skrivebords-, nettbrett- og smarttelefonmodus mens du tester knappene dine.
I smarttelefonmodus kan du for eksempel justere knappene i midten, redusere marginene og mye mer.
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.
...
Hei, det var veldig nyttig. Du har ingen anelse. Det er et problem med denne koden: Når du klikker på knappen, ruller siden automatisk til toppen. Her er en oppdatering av koden din for å løse dette problemet:
var $ = jQuery;
$ (dokument). klar (funksjon () {
$('[data-showme]').on('click', function(event){
event.preventDefault(); // Forhindre standardoppførselen til ankertagger
var showme = $(this).attr('data-showme');
$('.all-images').hide();
$('#' + showme).show();
});
});
Merci.