Chcete zmeniť obrázok kliknutím na tlačidlo s Page Builder Elementor ? V tomto novom návode vám ukážeme, ako na to.

Ak neviete, o čom dnes chceme hovoriť, pozývame vás pozrieť si nasledujúce video:

Potom sa vráťme k tomu, prečo sme tu.

Čítajte tiež: Ako zmeniť obrázok pri umiestnení kurzora myši nad text pomocou Elementor

Na dokončenie tohto návodu budete potrebovať verzia Elementor Pro, pretože budeme používať vlastný kód CSS, ktorý podporuje iba táto verziaElementor.

Vytvorme sekciu s 2 stĺpcami, potom na bočnom paneli definujme Výška sur Min. výška, a potom Minimálna výška kliknime ďalej VH a nastavte posúvač na 100.

Pretiahneme widget Obrázok do ľavého stĺpca a vložíme obrázok z našej knižnice.

Do pravého stĺpca vložíme a Názov Widget s názvom Vybrať to najlepšie. V záložke Štýl kliknime ďalej typografie a upraviť Výška riadku 1.

Pozri tiež: Ako zmeniť obrázokumiestnite kurzor myši na text pomocou Elementor

Pridajme pod widget Title, a Miniaplikácia Textový editor.

Nad miniaplikáciou Názov presuňte na jej kartu miniaplikáciu Separator Obsah, chytíme sa 270 pre šírku. Kliknite na položku Text pre položku Pridať položku a potom zadajte trend ako text. V záložke Štýl, upravte mazivo a medzera sur 2.

Objavte tiež: Ako zobraziť text nad obrázkom pomocou Elementor

V časti Text kliknite na typografie, poďme zmeniť písmo, veľkosť sur 18v tuk sur 600.

Pod miniaplikáciou Editor obsah, podáme a Vnútorná časť, vymažte jeden zo stĺpcov internej sekcie a vložte druhý a tlačidlo-widget

Upravme tlačidlo tak, že prejdeme na bočný panel a na kartu Obsah, kliknite na knižnica ikon sur ikona a vložte ikonu Nákupná taška, tiež vymažeme obsah tlačidla na Texty

Poďme na kartu Štýl tlačidla a dovnútra Polomer okraja, kliknite na % a zabaviť 50 pre všetky polomery obrubníkov a v Vnútorné okraje, chytíme sa 20.

Prispôsobme si farbu tlačidla tak, že zmeníme farbu tlačidla kliknutím na klasický pre Typ pozadia a Zmeňme farbu podľa farby zvýraznenia na obrázku.

Potom kliknite na kartu pokročilý nášho tlačidla a potom zapnite polohovacie a Šírka vyberme si Vložené (automaticky). V časti RozšírenéKarta Spresnenie, chytíme sa 10 pre pravý okraj.

Zduplikujme toto tlačidlo 4-krát a upravme farby týchto tlačidiel.

Ďalej zduplikujme náš widget Obrázok 4-krát a potom upravme jeho obrázky.

V ĽKarta Rozšírené, chytíme sa všetky obrázky v teréne CSS triedy každého z našich obrázkov.

Potom v teréne CSS ID zadajte červený obrázok pre obrázok s červeným zvýraznením, zelený-obrázok pre obrázok so zeleným zvýraznením a hnedý-obrázok pre obrázok s hnedým zvýraznením atď.

Vyberme si naše Časť a vKarta Spresnenie, v teréne zvyk CSS skopírujte a prilepte nasledujúci útržok kódu:

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

(Ak túto sekciu nemáte, nemáte verziu Pro, ak chcete pokračovať, musíte aktualizovať svoju verziu)

Ďalej umiestnime miniaplikáciu HTML na našu stránku, skopírujeme a prilepíme nasledujúci útržok kódu do sekcie Kód 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>

Vyberme prvé tlačidlo v poli Vlastné atribúty z Sekcia atribútov, skopírujte a prilepte nasledujúci útržok kódu:

data-showme|IMAGE-ID-NAME

Upravme časť IMAGE-ID-NAME podľa ID vašich tlačidiel, sú to ID červeného obrázka, zeleného obrázka a modrého obrázka atď.

Pre každé tlačidlo teda zmeňme kód IMAGE-ID-NAME na farbu príslušného tlačidla

Aktualizujte svoju prácu a ukážte si ju v režime stolného počítača, tabletu a smartfónu pri testovaní tlačidiel.

V režime smartfónu môžete napríklad zarovnať tlačidlá na stred, zmenšiť okraje a oveľa viac.

Tu to máte, práve ste túto úlohu urobili ľahko.

Získajte teraz prvok Elementor!

záver

Je to tu ! To je všetko pre tento článok, ktorý vám ukáže, ako zmeniť obrázok po umiestnení kurzora myši nad text. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...