Chcete se dozvědět, jak přidat efekt najetí na položky ve widgetu příspěvkůElementor?
Pokud používáte WordPress Elementor vytvořit svůj Webové stránky, měli byste být obeznámeni s funkcí efektu vznášení. Tuto funkci najdete především v nastavení každého widgetu Elementor.
Efekt hoveru může vaše prvky zatraktivnit, takže je to efektivní způsob, jak zlepšit uživatelský dojem na vašem webové stránky.
Když už mluvíme o efektu hoveru, tento článek vám ukáže, jak ho přidat k jednotlivým prvkům příspěvku ve widgetu Elementor Příspěvky využívající vlastní CSS Elementor, konkrétně efekt přiblížení.
Existují dva důvody, proč pro vás připravujeme tento návod:
- Ve výchozím nastavení můžete přidat efekt najetí na příspěvek z widgetu Posts Elementor. Efekt hoveru však bude velmi základní/standardní.
- Ve výchozím nastavení vám Elementor umožňuje přidat efekt zipu do widgetu Příspěvky (záložka pokročilý -> Přeměnit -> Échelle). Efekt přechodu však ovlivní všechny (nikoli jednotlivé) prvky widgetu příspěvků.
Kroky pro přidání efektu najetí na jednotlivé příspěvky z widgetu příspěvků Elementor
Před zahájením výukového programu bychom vás chtěli upozornit, že tento výukový program používá funkci Custom CSS Elementor. Tato funkce je dostupná pouze na Elementor Pro; ujistěte se, že jste upgradovali svou verzi.
Krok 1: Přidání widgetu příspěvků
Přejděte do svého editoru Elementor a vše začneme od začátku, takže vytvořte sekci s jedním sloupcem.
Čtěte také: Jak integrovat MailChimp s Elementorem
Dále vyberte widget Příspěvky z panelu widgetů a poté jej přetáhněte do oblasti úprav. Po přidání widgetu Příspěvky můžete widget upravit a upravit podle svých preferencí.
Poznámka: Ujistěte se, že jste již publikovali články na svém webu webové stránky.
Krok 2: Přidejte fragment CSS
Jakmile upravíte a upravíte widget Příspěvky, přidáme do jednotlivého příspěvku efekt umístění kurzoru přidáním jednoduchého úryvku CSS. V nastavení widgetu Příspěvky přejděte na kartu pokročilý -> Vlastní CSS. Zkopírujte prosím níže uvedený fragment CSS a vložte jej do pole Vlastní CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Výše uvedený kód vybere jednotlivý prvek příspěvku na widgetu Příspěvky pomocí selektoru .élémentor-post a aplikujte transformaci CSS.
Pokud jste spokojeni s použitým efektem hoveru, můžete jej ponechat a uložit svůj projekt, pokud si přejete. Pokud však chcete upravit rychlost přechodu a hodnotu měřítka transformace, můžete změnit hodnotu ve fragmentu CSS.
Poznámka: Transformace/přiblížení je běžný a oblíbený efekt používaný na webových stránkách. Pokud se chcete dozvědět více o dalších metodách transformace efektů vznášení, můžete navštívit toto strana.
Objevte také: všechny selektory widgetů Elementor v následujícím článku
Získejte Elementor Pro nyní!!!
Proč investovat do čističky vzduchu?
Tento článek ukazuje, jak snadné je přidat efekt přechodu k jednotlivým prvkům příspěvku ve widgetu příspěvků Elementoru pomocí vlastního CSS.
Technika, kterou jsme pro tento efekt použili, je (zoom-in), která zahrnuje 2D a některé pseudo transformované prvky. Přizpůsobte si a hrajte se všemi styly efektů vznášení, dokud nenajdete ten nejlepší efekt vznášení pro svůj web.
Tady je! Právě jsme vám představili ty nejlepší nástroje pro marketing prostřednictvím e-mailu pro Elementor. Pokud máte nějaké obavy ohledně jejich použití, 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.
...
