Vill du byta bild genom att klicka på en knapp med Page Builder Elementor ? I den här nya handledningen kommer vi att visa dig hur du gör.

Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:

Låt oss sedan gå tillbaka till varför vi är här.

Läs också: Hur man ändrar en bild när man håller muspekaren över text med Elementor

För att slutföra den här handledningen behöver du Pro-versionen av Elementor, eftersom vi kommer att använda anpassad CSS-kod som endast stöds av den här versionen avElementor.

Låt oss skapa en sektion med 2 kolumner, och sedan i sidopanelen, låt oss definiera HÖGMOD sur Min höjdoch sedan Minsta höjd låt oss klicka vidare VH och ställ in reglaget på 100.

Låt oss dra bildwidgeten till den vänstra kolumnen och infoga en bild från vårt bibliotek.

I den högra kolumnen, låt oss infoga en Titelwidget med titeln Välj det bästa. I fliken Stil låt oss klicka vidare typografi och ändra Radhöjd vid 1.

Se även: Hur man ändrar en bildhåll muspekaren över text med Elementor

Låt oss lägga till under titelwidgeten, en Textredigeringswidget.

Ovanför titelwidgeten, låt oss släppa en separatorwidget på dess flik Innehåll, låt oss ta tag 270 för bredd. Låt oss klicka på Text för Lägg till element och sedan gå in trend som text. I fliken Stil, ändra fettet och gapet sur 2.

Upptäck också: Hur man visar text ovanför en bild med Elementor

Klicka på i textavsnittet typografi, låt oss ändra teckensnittet storlek sur 18i fett sur 600.

Nedanför Editor-widgeten innehåll, låt oss arkivera en Intern sektion, ta bort en av kolumnerna i den interna sektionen och släpp i den senare a knapp-widget

Låt oss ändra knappen genom att gå till sidopanelen och i fliken Innehåll, Klicka på ikon bibliotek sur icon och infoga ikonen SHOPPINGBAG, låt oss också rensa innehållet i knappen på Texte

Låt oss gå till fliken Stil av knappen och in Gränsradie, Klicka på % och gripa 50 för alla trottoarradier och in Interna marginaler, låt oss ta tag 20.

Låt oss anpassa färgen på knappen genom att ändra färgen på den senare genom att klicka på klassisk för Bakgrundstyp och Låt oss ändra färgen enligt höjdpunktsfärgen på bilden.

Klicka sedan på fliken advanced på vår knapp och sedan på positionering och Bredd låt oss välja Inline (automatisk). I avsnittet Avancerat iAvancerad flik, låt oss ta tag 10 för högermarginal.

Låt oss duplicera den här knappen 4 gånger och ändra färgerna på dessa knappar.

Låt oss sedan duplicera vår bildwidget 4 gånger och sedan ändra deras bilder.

I L 'Fliken Avancerat, låt oss ta tag alla bilder i fältet CSS klasser av var och en av våra bilder.

Sedan i fält CSS ID ange röd-bild för bilden med en röd höjdpunkt, grön-bild för bilden med en grön höjdpunkt, och brun-bild för bilden med en brun höjdpunkt, och så vidare.

Låt oss välja vår § och iAvancerad flik, på fältet Custom CSS kopiera och klistra in följande kodavsnitt:

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

(Om du inte har det här avsnittet så har du inte Pro-versionen, om du vill fortsätta måste du uppgradera din version)

Låt oss sedan släppa en HTML-widget på vår sida, kopiera och klistra in följande kodavsnitt i HTML-kodsektionen:

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

Låt oss välja den första knappen i fältet Anpassade attribut från Avsnittet Attribut, kopiera och klistra in följande kodavsnitt:

data-showme|IMAGE-ID-NAME

Låt oss modifiera IMAGE-ID-NAME delen med ID:n för dina knappar, dessa är ID:n för röd bild, grön bild och blå bild, och så vidare.

Så för varje knapp, låt oss ändra koden IMAGE-ID-NAME till färgen på lämplig knapp

Uppdatera ditt arbete och förhandsgranska det i skrivbords-, surfplatta- och smartphoneläge medan du testar dina knappar.

I smartphone-läge kan du till exempel rikta in knapparna i mitten, minska marginalerna och mycket mer.

Där har du, du har precis gjort den här uppgiften enkelt.

Skaffa Elementor Pro nu!

Slutsats

Där är det ! Det är allt för den här artikeln som visar hur du ändrar en bild när du håller muspekaren över en text. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.