Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Vil du endre bilde ved å klikke på en knapp med Elementor Page Builder? 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, da vi vil bruke tilpasset CSS-kode som kun støttes av denne versjonen av Elementor.

La oss lage en seksjon med 2 kolonner, og deretter i sidepanelet, la oss definere Høyde 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.

endre bilde ved å klikke på en knapp med Page Builder Elementor

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 innholdsfanen, skriv 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 2.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

Oppdag også: Hvordan vise tekst over et bilde med Elementor

Klikk på i tekstdelen Typographie, la oss endre fonten, den Størrelse 18den fett 600.

La oss slippe en under Content Editor-widgeten 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 klikke på i innholdsfanen ikonbibliotekicon 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-NAME

La 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.

...

0 aksjer
del
tweet
Enregistrer