Želite li promijeniti sliku klikom na gumb s stranica Builder Elementor ? U ovom novom vodiču pokazat ćemo vam kako to učiniti.

Ako nemate pojma o čemu danas želimo razgovarati, pozivamo vas da pogledate sljedeći video:

Vratimo se onda zašto smo ovdje.

Pročitajte također: Kako promijeniti sliku kada zadržite pokazivač iznad teksta pomoću Elementora

Da biste dovršili ovaj vodič, trebat će vam Pro verzija Elementora, jer ćemo koristiti prilagođeni CSS kod koji podržava samo ova verzijaElementor.

Napravimo odjeljak s 2 stupca, a zatim u bočnoj ploči definirajmo Visina sur Minimalna visinaa onda Minimalna visina kliknimo na VH i postavite klizač na 100.

Povucite widget Slika u lijevi stupac i umetnimo sliku iz naše biblioteke.

U desni stupac ubacimo a Widget naslova pod nazivom Izaberi najbolje. U kartici Stil kliknimo na tipografija i modificirati Visina reda na 1.

Vidi također: Kako promijeniti slikuZadržite pokazivač miša iznad teksta pomoću Elementora

Dodajmo ispod widgeta Naslov, a Widget za uređivač teksta.

Iznad widgeta naslova ispustimo widget separator u njegovu karticu Sadržaj, uđimo 270 za širinu. Kliknite na Text for Add element, a zatim unesite trend kao tekst. U kartici Stil, modificirajte mast i Jaz sur 2.

Otkrijte također: Kako prikazati tekst iznad slike pomoću Elementora

U odjeljku Tekst kliknite na tipografija, promijenimo font, the Veličina sur 18je mast sur 600.

Ispod widgeta Editor sadržaj, podnesemo a Unutarnji dio, izbrišite jedan od stupaca unutarnjeg odjeljka i ubacite potonji a gumb-widget

Promijenimo gumb odlaskom na bočnu ploču i karticu Sadržaj, kliknite na biblioteka ikona sur ikona i umetnite ikonu Shopping Bag, očistimo i sadržaj gumba on Tekstovi

Idemo na karticu Stil gumba i unutra Granični radijus, kliknite na % i zaplijeniti 50 za sve polumjere rubnika i u Unutarnje margine, uđimo 20.

Prilagodimo boju gumba tako da promijenimo boju potonjeg klikom na klasična za Vrsta pozadine i Promijenimo boju prema boji isticanja na slici.

Zatim kliknite na karticu napredan našeg gumba, a zatim na namještanje i Širina birajmo Inline (automatski). U odjeljku Napredno naKartica Napredno, uđimo 10 za desna margina.

Duplicirajmo ovaj gumb 4 puta i izmijenimo boje ovih gumba.

Zatim, duplicirajmo naš widget za slike 4 puta, a zatim izmijenimo njihove slike.

U L 'Kartica Napredno, uđimo sve slike u polju CSS klase svake naše slike.

Zatim na terenu CSS ID unesite red-image za sliku sa crvenim naglaskom, green-image za sliku sa zelenim istaknutim, i brown-image za sliku sa smeđim istaknutim, i tako dalje.

Odaberimo naše Dio i uKartica Napredno, u području običaj CSS kopirajte i zalijepite sljedeći isječak koda:

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

(Ako nemate ovaj odjeljak, onda nemate Pro verziju, ako želite nastaviti trebate nadograditi svoju verziju)

Zatim, pustimo HTML widget na našu stranicu, kopirajte i zalijepite sljedeći isječak koda u odjeljak HTML koda:

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

Odaberimo prvi gumb, u polju Prilagođeni atributi od Odjeljak s atributima, kopirajte i zalijepite sljedeći isječak koda:

data-showme|IMAGE-ID-NAME

Izmijenimo dio IMAGE-ID-NAME prema ID-ovima vaših gumba, to su ID-ovi crvene slike, zelene slike i plave slike, itd.

Dakle, za svaki gumb promijenimo kod IMAGE-ID-NAME u boju odgovarajućeg gumba

Ažurirajte svoj rad i pregledajte ga u radnom računalu, tabletu i pametnom telefonu dok testirate svoje gumbe.

U načinu rada pametnog telefona možete, na primjer, poravnati gumbe u sredini, smanjiti margine i još mnogo toga.

Eto, upravo ste lako obavili ovaj zadatak.

Nabavite Elementor Pro odmah!

Zaključak

Tu je ! To je to za ovaj članak koji vam pokazuje kako promijeniti sliku kada zadržite pokazivač iznad teksta. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar Komentari.

Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...