Doriți să schimbați imaginea printr-un clic pe un buton cu Page Builder Elementor ? În acest nou tutorial, vă vom arăta cum să o faceți.

Dacă nu aveți idee despre ce vrem să vorbim astăzi, vă invităm să vizionați următorul videoclip:

Apoi să revenim la motivul pentru care suntem aici.

Citiți și: Cum să schimbați o imagine la trecerea cursorului peste text cu Elementor

Pentru a finaliza acest tutorial, veți avea nevoie versiunea Pro a Elementor, deoarece vom folosi cod CSS personalizat, care este acceptat numai de această versiune aElementor.

Să creăm o secțiune cu 2 coloane, apoi în panoul lateral, să definim Înălțime pe Înălțime minşi apoi Inaltimea minima hai să facem clic VH și setați glisorul la 100.

Să glisăm widgetul Imagine în coloana din stânga și să introducem o imagine din biblioteca noastră.

În coloana din dreapta, să inserăm a Widget de titlu intitulat Alege cel mai bun. În fila Stil hai să facem clic tipografie și modificați Înălțimea liniei la 1.

Vezi și: Cum se schimbă o imaginetrece cu mouse-ul peste text cu Elementor

Să adăugăm mai jos widgetul Titlu, a Widget Editor de text.

Deasupra widget-ului Titlu, să plasăm un widget Separator în fila acestuia Conținut, hai sa intram 270 pentru latime. Să facem clic pe Text pentru Adăugați element, apoi să introduceți tendință ca text. În fila Stil, modificați Unsoarea și spărtura pe 2.

Descoperiți și: Cum să afișați text deasupra unei imagini cu Elementor

În secțiunea Text, faceți clic pe tipografie, hai să schimbăm fontul, the Dimensiune pe 18, unsoare pe 600.

Sub widgetul Editor cuprins, să depunem a Sectiunea interna, ștergeți una dintre coloanele Secțiunii Interne și introduceți-o pe cea din urmă a buton-widget

Să modificăm butonul accesând panoul lateral și în filă Conținut, Click pe biblioteca de pictograme pe icoană și introduceți pictograma Shopping Bag, să ștergem și conținutul butonului pornit Text

Să mergem la filă Stil a butonului si in Raza de frontieră, Click pe % si apuca 50 pentru toate razele de bordură și în Marjele interne, hai sa intram 20.

Să personalizăm culoarea butonului schimbând culoarea acestuia din urmă făcând clic pe clasic pentru Tip de fundal și Să schimbăm culoarea în funcție de culoarea de evidențiere a imaginii.

Apoi faceți clic pe Tab avansat de butonul nostru, apoi pornit poziționare și Lățime hai sa alegem Inline (Automat). În secțiunea Avansat aFila Advanced, hai sa intram 10 pentru marginea dreaptă.

Să duplicăm acest buton de 4 ori și să modificăm culorile acestor butoane.

Apoi, să duplicăm widgetul nostru Imagine de 4 ori, apoi să le modificăm imaginile.

In EU'Filă avansată, hai sa intram toate imaginile în câmp Clasele CSS a fiecăreia dintre imaginile noastre.

Apoi pe câmp ID CSS introduceți imaginea roșie pentru imaginea cu o evidențiere roșie, imaginea verde pentru imaginea cu o evidențiere verde și imaginea maro pentru imaginea cu o evidențiere maro și așa mai departe.

Să ne selectăm Secțiune iar înFila Advanced, în câmp pachet personalizat Copiați și inserați CSS următorul fragment de cod:

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

(Dacă nu aveți această secțiune, atunci nu aveți versiunea Pro, dacă doriți să continuați, trebuie să faceți upgrade la versiunea dvs.)

Apoi, să aruncăm un widget HTML în pagina noastră, să copiam și să lipim următorul fragment de cod în secțiunea Cod HTML:

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

Să selectăm primul buton, din câmp Atribute personalizate a Secțiunea Atribute, copiați și inserați următorul fragment de cod:

data-showme|IMAGE-ID-NAME

Să modificăm partea IMAGE-ID-NAME după ID-urile butoanelor dvs., acestea sunt ID-urile imaginii roșii, verzi și albastre și așa mai departe.

Deci, pentru fiecare buton, să schimbăm codul IMAGE-ID-NAME la culoarea butonului corespunzător

Actualizați-vă munca și previzualizați-o în modul desktop, tabletă și smartphone în timp ce testați butoanele.

În modul smartphone, puteți, de exemplu, să aliniați butoanele în centru, să reduceți marginile și multe altele.

Iată, tocmai ai făcut această sarcină cu ușurință.

Obțineți Elementor Pro acum!

Concluzie

Iata ! Asta este pentru acest articol care vă arată cum să schimbați o imagine la trecerea cursorului peste un text. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...