Wilt u met een druk op de knop van afbeelding veranderen met de Pagina Builder Elementor ? In deze nieuwe tutorial laten we je zien hoe je dit doet.

Als je geen idee hebt waar we het vandaag over willen hebben, nodigen we je uit om de volgende video te bekijken:

Laten we dan teruggaan naar waarom we hier zijn.

Lees ook: Hoe verander je een afbeelding als je over tekst zweeft met Elementor

Om deze tutorial te voltooien, heb je nodig: de Pro-versie van Elementor, omdat we aangepaste CSS-code zullen gebruiken die alleen wordt ondersteund door deze versie vanElementor.

Laten we een sectie met 2 kolommen maken en vervolgens in het zijpaneel de . definiëren hoogmoed op Minimale hoogte, en dan Minimale hoogte laten we klikken op VH en zet de schuifregelaar op 100.

Laten we de afbeeldingswidget naar de linkerkolom slepen en een afbeelding uit onze bibliotheek invoegen.

Laten we in de rechterkolom a . invoegen Titelwidget getiteld Kies het beste. Op het tabblad Style laten we klikken op typografie en wijzig de Rijhoogte op 1.

Zie ook: Een afbeelding wijzigenga met de muis over tekst met Elementor

Laten we onder de titelwidget een . toevoegen Teksteditor-widget.

Laten we boven de Titelwidget een Scheidingswidget op het tabblad plaatsen Inhoud, laten we grijpen 270 voor breedte. Laten we op Tekst klikken om element toe te voegen en dan invoeren neiging als tekst. Op het tabblad Style , wijzig het vet en de kloof op 2.

Ontdek ook: Tekst boven een afbeelding weergeven met Elementor

Klik in het gedeelte Tekst op typografie, laten we het lettertype veranderen, de Maat op 18, vet op 600.

Hieronder de Editor-widget inhoud, laten we een bestand indienen Interne sectie, verwijder een van de kolommen van de interne sectie en plaats de laatste a knop-widget

Laten we de knop aanpassen door naar het zijpaneel en op het tabblad te gaan Inhoud, Klik op icoon bibliotheek op icon en plaats het pictogram Winkelwagen, laten we ook de inhoud van de knop op . wissen Teksten

Laten we naar het tabblad gaan Style van de knop en in Grensstraal, Klik op % en grijp 50 voor alle stoepranden en in Interne marges, laten we grijpen 20.

Laten we de kleur van de knop aanpassen door de kleur van de laatste te veranderen door te klikken op klassiek voor Achtergrondtype en Laten we de kleur wijzigen volgens de markeringskleur op de afbeelding.

Klik vervolgens op het tabblad vergevorderd van onze knop, dan op positionering en Breedte selecteer Inline (automatisch). In het gedeelte Geavanceerd vanTabblad Geavanceerd, laten we grijpen 10 voor rechtermarge.

Laten we deze knop 4 keer dupliceren en de kleuren van deze knoppen aanpassen.

Laten we vervolgens onze afbeeldingswidget 4 keer dupliceren en vervolgens hun afbeeldingen aanpassen.

In L 'Tabblad Geavanceerd, laten we grijpen alle afbeeldingen in het veld CSS-klassen van elk van onze afbeeldingen.

Dan in het veld CSS-ID voer rode afbeelding in voor de afbeelding met een rode markering, groene afbeelding voor de afbeelding met een groene markering en bruine afbeelding voor de afbeelding met een bruine markering, enzovoort.

Laten we onze . selecteren sectie en in deTabblad Geavanceerd, in het veld Eigen CSS kopieer en plak het volgende codefragment:

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

(Als je deze sectie niet hebt, heb je de Pro-versie niet, als je wilt doorgaan, moet je je versie upgraden)

Laten we vervolgens een HTML-widget op onze pagina plaatsen, het volgende codefragment kopiëren en plakken in het gedeelte HTML-code:

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

Laten we de eerste knop in het veld selecteren Aangepaste kenmerken van Eigenschappen sectie, kopieer en plak het volgende codefragment:

data-showme|IMAGE-ID-NAME

Laten we het IMAGE-ID-NAME-gedeelte aanpassen aan de hand van de ID's van uw knoppen, dit zijn de ID's voor de rode afbeelding, de groene afbeelding en de blauwe afbeelding, enzovoort.

Laten we dus voor elke knop de IMAGE-ID-NAME-code wijzigen in de kleur van de juiste knop

Werk uw werk bij en bekijk het in desktop-, tablet- en smartphonemodus terwijl u uw knoppen test.

In de smartphone-modus kun je bijvoorbeeld de knoppen in het midden uitlijnen, de marges verkleinen en nog veel meer.

Daar ga je, je hebt deze taak zojuist gemakkelijk gedaan.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een afbeelding kunt wijzigen wanneer u met de muis over een tekst zweeft. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...