Vil du skifte billede ved at klikke på en knap med Side Builder Elementor ? I denne nye tutorial viser vi dig, hvordan du gør det.

Hvis du ikke aner, hvad vi vil tale om i dag, inviterer vi dig til at se følgende video:

Lad os derefter vende tilbage til, hvorfor vi er her.

Læs også: Sådan ændres et billede, når du svæver over tekst med Elementor

For at fuldføre denne tutorial skal du bruge Pro-versionen af ​​Elementor, da vi vil bruge tilpasset CSS-kode, som kun understøttes af denne version afElementor.

Lad os oprette en sektion med 2 kolonner, og lad os derefter i sidepanelet definere Højde ud af Min Højdeog så Minimum højde lad os klikke videre VH og sæt skyderen til 100.

Lad os trække Billed-widgetten til venstre kolonne og indsætte et billede fra vores bibliotek.

Lad os indsætte en i højre kolonne Titel-widget med titlen Vælg det bedste. I fanen stil lad os klikke videre Typographie og ændre Rækkehøjde ved 1.

Se også: Sådan ændres et billedehold musen over tekst med Elementor

Lad os tilføje under titelwidgetten, en Teksteditor-widget.

Over Titel-widgetten, lad os slippe en Separator-widget i dens fane Indhold, lad os tage fat 270 for bredden. Lad os klikke på Tekst for Tilføj element og derefter indtaste trend som tekst. I fanen stil, ændre fedtet og kløften ud af 2.

Opdag også: Sådan viser du tekst over et billede med Elementor

Klik på i tekstafsnittet Typographie, lad os ændre skrifttypen, den Størrelse ud af 18, fedt ud af 600.

Under Editor-widgetten indhold, lad os arkivere en Internt afsnit, slet en af ​​kolonnerne i den interne sektion og slip sidstnævnte a knap-widget

Lad os ændre knappen ved at gå til sidepanelet og i fanen Indhold, Klik på ikon bibliotek ud af ikon og indsæt ikonet KURV, lad os også rydde indholdet af knappen på Tekster

Lad os gå til fanen stil på knappen og ind Grænseradius, Klik på % og gribe 50 for alle kantstensradier og ind Interne marginer, lad os tage fat 20.

Lad os tilpasse farven på knappen ved at ændre farven på sidstnævnte ved at klikke på klassisk for Baggrundstype og lad os ændre farven i henhold til den fremhævede farve på billedet.

Klik derefter på fanen avanceret på vores knap og så videre positionering og Bredde lad os vælge Inline (automatisk). I sektionen Avanceret iAvanceret fane, lad os tage fat 10 til at højre margin.

Lad os duplikere denne knap 4 gange og ændre farverne på disse knapper.

Lad os derefter duplikere vores billedwidget 4 gange og derefter ændre deres billeder.

I L 'Avanceret fane, lad os tage fat alle billeder i marken CSS klasser af hvert af vores billeder.

Så i marken CSS ID indtast rødt billede for billedet med en rød fremhævning, grønt billede for billedet med en grøn fremhævning, og brunt billede for billedet med en brun fremhævning, og så videre.

Lad os vælge vores Sektion og iAvanceret fane, i marken Tilpasset CSS kopier og indsæt følgende kodestykke:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Hvis du ikke har denne sektion, så har du ikke Pro-versionen, hvis du vil fortsætte skal du opgradere din version)

Lad os derefter slippe en HTML-widget på vores side, kopiere og indsætte følgende kodestykke i HTML-kodeafsnittet:

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

Lad os vælge den første knap i feltet Brugerdefinerede attributter fra Attributter sektion, kopier og indsæt følgende kodestykke:

data-showme|IMAGE-ID-NAME

Lad os ændre BILLEDE-ID-NAVN-delen ved hjælp af ID'erne på dine knapper, disse er ID'erne for rødt billede, grønt billede og blåt billede og så videre.

Så lad os for hver knap ændre IMAGE-ID-NAME-koden til farven på den relevante knap

Opdater dit arbejde, og se et eksempel på det i desktop-, tablet- og smartphonetilstand, mens du tester dine knapper.

I smartphone-tilstand kan du for eksempel justere knapperne i midten, reducere marginerne og meget mere.

Der går du, du har lige gjort denne opgave nemt.

Hent Elementor Pro nu!

Konklusion

Der er det ! Det er det for denne artikel, som viser dig, hvordan du ændrer et billede, når du svæver over en tekst. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...