Jak přidat efekt najetí v nástroji divi builder

Wordpress

Existuje mnoho způsobů, jak zatraktivnit webové stránky na vašem webu. Jedním z nich je, že můžete přidat efekt najetí na určitý prvek na stránce. Pokud máte webové stránky založené na systému WordPress vytvořené pomocí nástroje Divi Builder , můžete bez námahy přidat prvku na stránce efekt najetí. Mimochodem, co je to Divi Builder?

Pokud jste o Divi Builderu dosud nevěděli. Jedná se o zásuvný modul pro sestavování stránek pro WordPress stejně jako Elementor (Elementor je nejoblíbenější sestavovač stránek pro WordPress). Jeho součástí je také vizuální editor, který vám usnadní tvorbu stránky. Divi Builder obsahuje některé vestavěné funkce pro přidávání animačních efektů, včetně těch, které můžete přidat, když návštěvník najede na určitý prvek na stránce. Podívejte se na ukázku níže.

Výše uvedené efekty při najetí na obrazovku jsou vytvořeny pomocí nástroje Divi Builder. Samotný nástroj Divi Builder využívá pro funkci hover efektu transformaci CSS. Technicky vzato tedy při přidání efektu hover k určitému prvku v nástroji Divi Builder implementujete do stránky transformaci CSS.

V nástroji Divi Builder se designový prvek dělí na tři typy: sekce, řádek a modul. K těmto třem typům prvků můžete přidat efekt hover. V tomto příkladu si ukážeme, jak přidat hover k modulu obrázku (jak můžete vidět na výše uvedeném screenu).

Jak přidat hover efekt v Divi Builderu

Nejprve je třeba připravit sekci a také řádek v oblasti plátna Divi Builderu. Za tímto účelem klikněte na modré tlačítko plus a přidejte novou sekci (pro tento příklad můžete přidat běžnou sekci). Vložte řádek a vyberte strukturu sloupců podle své potřeby. V tomto příkladu vybereme strukturu se třemi sloupci.

Po přidání řádku klikněte na šedou ikonu plus v jednom ze sloupců a přidejte modul. Protože chceme přidat efekt najetí na obrázek, pak vyberte možnost Obrázek a přidejte modul Obrázek.

Panel nastavení modulu Obrázek se zobrazí ihned po přidání modulu Obrázek. Obrázek přidáte kliknutím na držák obrázku v bloku Obrázek na kartě Obsah .

Po přidání obrázku přejděte na kartu Design a otevřete blok Transformace . V bloku Transformace klikněte na ikonu kurzoru a poté klikněte na kartu vznášení (která je rovněž znázorněna ikonou kurzoru).

Kliknutím na jednu z dostupných karet vyberte typ transformace, kterou chcete přidat, a pomocí myši nastavte její hodnotu. Nebo můžete hodnotu transformace nastavit také ručně zadáním preferované hodnoty.

To je vše. Změny můžete uplatnit kliknutím na zelenou ikonu kontrolního seznamu v pravém dolním rohu panelu nastavení.

Pro zatraktivnění stránky můžete také zobrazit jiný obrázek při najetí myší. Více se dozvíte v tomto článku .

Stejnou cestou můžete přidat efekt najetí na sekci a řádek. Nejprve otevřete panel nastavení a poté přejděte na kartu Design . Na kartě Design můžete otevřít blok Transformace . Na tomto bloku můžete nastavit efekt najetí, jak jsme právě popsali výše.

YouTube video: Jak přidat efekt najetí v nástroji Divi Builder


.

Rate article