Divi: Jak změnit obrázek při najetí myší

Chcete vědět, jak změnit obrázek při najetí myší pomocí DIVI?

Efekty přechodu jsou jedny z nejjednodušších mikrointerakcí, které může uživatel s a webové stránky. The Divi Theme Builder nabízí sadu neuvěřitelně jednoduchých efektů vznášení, které můžete použít k vytvoření poutavé interakce pro každého, kdo vás navštíví webové stránky. 

Jedním z nejnápadnějších a nejužitečnějších efektů Divi je možnost upravit obrázek, když na něj uživatel najede kurzorem. 

V tomto tutoriálu vám ukážeme, jak dosáhnout krásné změny obrázku, když na něj najedete kurzorem myši.

přehled

Než začneme, pojďme se podívat na výsledek, kterého chceme dosáhnout.

Vytvořte stránku pomocí Divi Theme Builder

Začněte přidáním nové stránky do Webové stránky z ovládacího panelu WordPress.

Viz též: Jak vytvořit posuvné a tlačné menu v DIVI?

Poté zadejte název své stránky a klikněte na „ Použijte nástroj Divi Builder ".

Poté klikněte na " Vyberte rozložení« 

Najděte a vyberte " Domovská stránka stříhání psů » 

Vyberte rozvržení a klikněte na " Vyberte rozložení »

Najděte své obrázky

V Divi Builderu jednoduše vyhledejte obrázky, ke kterým chcete přidat efekt.

Všimněte si, že jej můžete použít na jakýkoli prvek obsahující obrázek

Otevřete nastavení modulu

Až se rozhodnete, klikněte na ikonu ozubeného kola a zadejte parametry modulu obsahující obrázek. 

Čtěte také: Jak převedu blogové příspěvky v DIVI?

V případě tohoto balíčku rozložení je obrázek, na který použijeme efekt přechodu, pozadím sloupce úplně vpravo v prvním řádku. 

Zadejte nastavení sloupce.

Najděte obrázek v nastavení

Jakmile jste v nastavení sloup správně, nezapomeňte vybrat kartu Obsah. Přejděte dolů, dokud nenajdete možnost Dno.

pod  Pozadí, Divi vám dává možnost použít buď plnou barvu, nebo přechod, nebo obrázek nebo video ve formátu .mp4. 

A přestože efekty vznesení lze aplikovat na kterýkoli z nich, pracujeme v záložce Obrázek, třetí zleva.

Povolit efekty přechodu

Přesuňte kurzor myši na slovo  Pozadí (nejmenší titulky) a vyhledejteikona šipky v možnostech, které se objeví. Toto je přepínač pro  Divi Hover Effects.

Když je tato možnost aktivována, objeví se dvě nové karty. Levá karta je základní obrázek, který se zobrazí bez interakce.

Vyberte si svůj nový obrázek

Když přesunete kurzor dolů na obrázek, budete mít normální možnosti:  pro nahrazení obrázku ou  pro smazání obrázku. 

Pokud zvolíte ikonu koše, aktivuje se efekt vznesení, ale obrázek zmizí. 

Protože chceme  změna obrázek na přechodu, my buď klikněte na samotný obrázek, buď naikona ozubeného kola .

Vyberte obrázek při umístění kurzoru (náhrada)

Tím se otevře knihovna médií. Poté můžete vybrat nový obrázek, který chcete, aby se vašim uživatelům zobrazilo, když umístí kurzor na původní. Klikněte na 'Nahrajte obrázek"

Zkontrolujte chyby s původním obrázkem

Vždy doporučujeme, abyste se ujistili, že původní obrázek zůstane stejný. Takže pro kontrolu klikněte na levá záložka a ujistěte se, že původní obrázek je stále na svém místě.

Pokud je vše v pořádku, můžete nastavení uložit.

• Uložte nastavení sloupců

• Stiskněte znovu tlačítko  zelené klíště pro uložení nastavení linky. 

Uložte obecná obecná nastavení a publikujte stránku.

Výsledek

Pokud jste postupovali podle všech kroků v tomto tutoriálu, měli byste získat toto.

Stáhnout DIVI hned!!!

Proč investovat do čističky vzduchu?

Divi's Theme Builder je plný výkonných nástrojů, které může použít každý vytvořit web zajímavé a interaktivní. Změna obrázku při umístění kurzoru, kterou jsme vám ukázali v této příručce, je jen jedním z mnoha nástrojů.

Pokud potřebujete více prvků k dokončení svých projektů tvorby webových stránek, prohlédněte si také našeho průvodce na webu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů mluvit o tom. Ale mezitím, sdílejte tento článek na různých sociálních sítích.

...