Chcete změnit obrázek při najetí myší na text pomocí 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:

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

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

Objevte také našeho průvodce:  Jak vytvořit kartu efektů z portfolia 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.

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

Na kartě Styl pojďme to vybrat Typ pozadí kliknutím na tlačítko klasický, poté upravte barva z# F9F9F9

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

Na kartě pokročilý, upravit všechny Vnitřní rozpětí z 25

Nyní změňme šířku sloupce na 40% pro levý sloupec a 60% pro pravý sloupec.

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

V levém sloupci vynecháme a Widget textového editoru, pak do něj vložte Text a upravte Velikost titulku text na Hlava 3.

Na kartě pokročilý, zadejte jako Interní okraje 10-25-10-30 respektive pro horní, pravý, spodní a levý vnitřní okraj

V sekci pozadí záložka pokročilý, klikněte na PŘEHLEDa poté vyberte typ pozadí z klasický, pojďme do toho barva #DFF5FF et Doba trvání přechodu z 0.5.

Pokud najedeme kurzorem na text, budeme mít příležitost objevit nádhernou barvu pozadí.

Nyní pojďme do sekce hranicea klikněte na PŘEHLEDa poté vyberte Pokračovat pro typ ohraničení et deaktivujeme spojení mezi hranicemi vstoupit 4 pro levý okraj. Vyberme barvu #002FA7 a přidejte k němu dobu přechodu 0.5

Pokud najedeme na naše textové pole ještě jednou, uvidíme výraznější animaci s okrajem vlevo.

V sekci Hranice, vraťme se na kartu NORMÁLNÍ, vybereme typ ohraničení na Pokračovat, vypněte vazbu mezi hranicemi, chytit 4 pro levý okraj a udělejte jej velmi průhledným.

Pokud na text najedeme ještě jednou, uvidíme velmi plynulý přechod.

Čtěte také: Jak zobrazit text nad obrázkem pomocí Elementor

Zduplikujme tento text dvakrát a změňme texty každého z nich obsah takhle.

V pravém sloupci přetáhněte a Obrázek widgeta vložte obrázek z naší knihovny.

Vytvoříme kolem tohoto obrázku nějaký prostor tím, že půjdeme do Karta Pokročilé sloupce a zadejte 10 – 10 – 10 – 50 pro všechny vnitřní okraje nahoře, vpravo, dole a vlevo.

Vybereme obrázek a v záložce pokročilý z toho druhého přejděme do sekce Pohybové efekty pak Vstupní animace, vyberte Pozvolna zesílit

Pojďme do sekce pokročilý z karty Upřesnit a přidejte některé názvy tříd do pole Třídy CSS. Tak pojďme all-img img-1

Zduplikujme náš obrázek 2x.

Vyberme druhý obrázek a změňme img-1 na img-2, poté změňme obrázek na nový obrázek.

Viz též: Jak vytvořit galerii obrázků s Elementorem

U třetího obrázku změňme img-1 na img-3 a potom změňme obrázek na nový obrázek.

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

Vybereme naši sekci a přejdeme na její záložku pokročilý. V sekci Vlastní CSS, zkopírujte a vložte následující fragment kódu:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

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

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

Vyberme náš první textový editor a přejděte na kartu Upřesnit a na Sekce Atributy. V oboru Atributy, zkopírujte a vložte následující fragment kódu:

data-showme|img-1

Proveďte to pro ostatní textové editory při změně img-1 na img-2 nebo na img-3

Nyní na naši stránku přidáme HTML widget. Zkopírujte a vložte následující skript:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

Nyní uložte nebo aktualizujte svou stránku a poté si ji zobrazte.

změnit obrázek při najetí myší na text pomocí prvku Page Builder Elementor

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.

...