Chcete změnit obrázek kliknutím na tlačítko s Page Builder Elementor ? V tomto novém návodu vám ukážeme, jak na to.

Pokud nevíte, o čem chceme dnes mluvit, zveme vás ke shlédnutí následujícího videa:

Pak se vraťme k tomu, proč jsme tady.

Čtěte také: Jak změnit obrázek při najetí myší na text pomocí Elementor

K dokončení tohoto tutoriálu budete potřebovat Pro verzi Elementor, protože budeme používat vlastní kód CSS, který je podporován pouze touto verzíElementor.

Vytvořme sekci se 2 sloupci, poté na bočním panelu definujme výška z Min. výška, a pak Minimální výška klikneme na VH a nastavte posuvník na 100.

Přetáhněte widget Obrázek do levého sloupce a vložte obrázek z naší knihovny.

Do pravého sloupce vložíme a Název Widget s názvem Vybrat to nejlepší. V záložce Styl klikneme na typografie a upravit Výška řádku 1.

Viz též: Jak změnit obrázeknajeďte myší na text pomocí Elementoru

Přidejme pod widget Title, a Widget textového editoru.

Nad widgetem Titulek přemístěme na jeho kartu widget Oddělovač Obsah, chytneme se 270 pro šířku. Klikněte na Text pro Přidat prvek a poté zadejte trend jako text. V záložce Styl, upravit Mazací a mezera z 2.

Objevte také: Jak zobrazit text nad obrázkem pomocí Elementor

V části Text klikněte na typografie, pojďme změnit písmo, velikost z 18, la tuk z 600.

Pod widgetem Editor obsah, podejme a Vnitřní část, vymažte jeden ze sloupců vnitřní sekce a vložte druhý a tlačítko-widget

Upravme tlačítko tak, že přejdeme na boční panel a na kartu Obsah, klikněte na knihovna ikon z ikona a vložte ikonu Nákupní taška, vymažeme také obsah tlačítka na Texty

Pojďme na kartu Styl tlačítka a dovnitř Poloměr okraje, klikněte na % a zmocnit se 50 pro všechny poloměry obrubníku a v Vnitřní rozpětí, chytneme se 20.

Upravme barvu tlačítka změnou barvy tlačítka kliknutím na klasický pro Typ pozadí a Změňme barvu podle barvy zvýraznění na obrázku.

Poté klikněte na záložku pokročilý našeho tlačítka a poté zapněte polohovací a Šířka pojďme vybrat Inline (automaticky). V části RozšířenéKarta Upřesnit, chytneme se 10 pro pravý okraj.

Zduplikujme toto tlačítko 4krát a upravme barvy těchto tlačítek.

Dále zduplikujme náš widget Obrázek 4krát a poté upravíme jeho obrázky.

V L 'Karta Upřesnit, chytneme se všechny obrázky v poli CSS třídy každého z našich obrázků.

Pak v terénu CSS ID zadejte červený obrázek pro obrázek s červeným zvýrazněním, zelený obrázek pro obrázek se zeleným zvýrazněním a hnědý obrázek pro obrázek s hnědým zvýrazněním a tak dále.

Vyberme naše Sekce a vKarta Upřesnit, v oboru Zvyk CSS zkopírujte a vložte následující fragment kódu:

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

(Pokud tuto sekci nemáte, nemáte verzi Pro, pokud chcete pokračovat, musíte aktualizovat svou verzi)

Dále umístíme na naši stránku widget HTML, zkopírujeme a vložíme následující fragment kódu do části 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 první tlačítko v poli Vlastní atributy z Sekce Atributy, zkopírujte a vložte následující fragment kódu:

data-showme|IMAGE-ID-NAME

Upravme část IMAGE-ID-NAME podle ID vašich tlačítek, to jsou ID červeného obrázku, zeleného obrázku a modrého obrázku a tak dále.

U každého tlačítka tedy změňme kód IMAGE-ID-NAME na barvu příslušného tlačítka

Aktualizujte svou práci a zobrazte její náhled v režimu stolního počítače, tabletu a chytrého telefonu při testování tlačítek.

V režimu chytrého telefonu můžete například zarovnat tlačítka na střed, zmenšit okraje a mnoho dalšího.

Tady to máte, právě jste tento úkol snadno provedli.

Získejte nyní prvek Elementor Pro!

Proč investovat do čističky vzduchu?

Je to tady ! To je vše pro tento článek, který vám ukáže, jak změnit obrázek při najetí myší na text. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...