Potřebujete způsob, jak vytvořit efekt posouvání obrázku Elementor ? V tomto článku vás provedeme vytvořením efektu posouvání obrázků pomocí Elementoru na vašich webových stránkách.
Efekt posouvání obrázku vám umožní odhalit celý obrázek, když uživatel najede myší na obrázky. Když navštívíte web, který prodává šablony webů, můžete vidět úplný náhled šablon s funkcemi efektu posouvání obrázků.
Díky těmto funkcím můžete svým uživatelům snadno zobrazit celé zobrazení webu na malém prostoru. Normálně, pokud chcete zobrazit celý obrázek webové stránky, zabere to na vašich webových stránkách hodně místa. Navíc to ovlivňuje design vašeho webu.
Ale s efektem posouvání obrázků můžete přidat další obrázky atraktivním způsobem, který snadno upoutá pozornost publika.
Vytvořte efekt posouvání obrázku v Elementor
Elementor neposkytuje widget pro přidání efektu posouvání obrázku. Takže musíte přidat efekt pomocí vlastního CSS. Vlastní funkce CSS je k dispozici pouze s Elementor Pro. Ujistěte se tedy, že jste upgradovali na Elementor Pro.
Nyní otevřete stránku pomocí editoru Elementor a kliknutím na ikonu plus přidejte sekci.
Nyní musíte vybrat sloupec pro vaši sekci. Zde vybereme sekci s jedním sloupcem.
Nyní klikněte na ikonu úpravy sekce a v záložce rozvržení nastavte minimální výšku na 500.
Nyní z widgetu bloku přidejte blok vnitřní sekce do vytvořené sekce a odstraňte výchozí sloupec. Klikněte pravým tlačítkem na ikonu úpravy sloupce a kliknutím na možnost odstranit hlavní sloupec odstraňte.
Znovu přejděte na možnost úpravy vnitřní sekce a v záložce rozložení nastavte minimální výšku na 500, jak jsme si ukázali dříve.
Nyní se přepněte na záložku styl vnitřní sekce a nastavte pozadí jako klasické z volby pozadí. Dále musíte přidat obrázek na pozadí. Ve volbě pozice obrazu nastavte polohu obrazu podle Nejlepší střed. Z možnosti opakování nastavte možnost neopakovat a velikost jako krytí.
Nyní přejděte na kartu pokročilý přidat vlastní CSS. Do vlastního pole CSS přidejte následující kód:
selector{ -webkit-transition: easy-in-out 3s !důležité; přechod: easy-in-out 3s !důležité; } selector:hover{ background-position: center bottom !important; }
Změnou hodnoty přechodu můžete změnit efekt posouvání obrázků. Pokud chcete přidat více obrázků se stejným efektem, můžete duplikovat sloupec a poté změnit obrázek na pozadí.
Proč investovat do čističky vzduchu?
Dodržováním tohoto procesu budete moci na svůj web přidat efekt posouvání obrázků pomocí nástroje pro tvorbu stránek Elementor. Můžete se podívat na naše další články, kde se dozvíte:
- Jak používat bloky Elementor v editoru Gutenberg?
- Elementor vs Divi vs SeedProd – Co je lepší?
- Jak používat historii k vrácení a opakování akcí v Elementoru
- Jak udělat web Elementor super rychlý
- Jak vytvořit interaktivní kruh v Elementoru
Doufáme, že tento článek bude pro vás užitečný. Pokud se vám tento článek líbí, dejte like naší facebookové stránce, abyste zůstali ve spojení.
