Potřebujete přidat efekt přechodu do Elementoru pomocí vlastního CSS?

Elementor má integrovanou funkci pro přidání efektu přechodu k prvku (popsali jsme to v jednom z našich článků. I když je tato funkce dostatečně užitečná, má nevýhodu. Můžete k ní přidat pouze efekt přechodu. Část, sloupec, widget Obrázek, widget Tlačítko a widget Příspěvky.

Čtěte také: Jak nainstalovat Elementor na WordPress

Funkce vestavěného efektu vznášení elementu vám neumožňuje přidat efekt vznášení do jiných widgetů, jako je widget textového editoru, widget nadpisu atd. Další nevýhodou je, že můžete přidat pouze velmi základní efekt vznášení.

Existuje nějaká další možnost přidat efekt vznášení v Elementoru?

Ano, tam je. Efekt vznášení můžete do Elementoru přidat pomocí vlastního CSS. Chcete-li však přidat vlastní CSS, musíte použít Elementor Pro, protože vlastní CSS je k dispozici pouze na Elementor Pro.

Přidání efektu přechodu do Elementoru pomocí vlastního CSS

Než začneme, pojďme se podívat na příklad efektů přechodu vytvořených pomocí vlastních CSS.

Na rozdíl od vestavěného efektu přechodu Elementor, můžete použít tuto metodu k přidání efektu přechodu k libovolnému prvku v Elementoru. Ať už jde o sekci, sloupec nebo widget (všechny widgety).

V tomto příkladu si ukážeme, jak přidat bodový efekt do sloupce.

Nejprve kliknutím na úchyt sloupce přepněte na panel nastavení sloupců. Jakmile tam budete, přejděte na kartu pokročilý a otevřete blok Zvyk CSS a vložte následující kód CSS.

selector: hover {transition: all .2s easy-in-out; transformace: měřítko (1.1); kurzor: bod; z-index: 1; }

Tam.

Na výše uvedeném kódu používáme vlastnost CSS přeměnit () přidat efekt vznášení. Typ transformace, kterou používáme v tomto příkladu, je škálování s trváním 1,1 sekundy.

Existují 4 další typy transformace, které můžete použít s:transform

  • Matice
  • přeložit
  • Střídat
  • Šikmo

Pokud chcete použít jiný styl transformace, stačí nahradit hodnotu přeměnit na výše uvedeném kódu CSS.

Můžete číst cette stránky dozvědět se více o transformaci CSS.

Po stejné trase můžete přidat efekt přechodu k dalším prvkům.

Chcete-li do sekce přidat bodový efekt, můžete kliknout na úchyt sekce a přejít na kartu pokročilý a otevřete blok Vlastní CSS.

přidejte efekt vznášení v Elementoru pomocí vlastního CSS

Chcete-li do widgetu přidat efekt přechodu, můžete kliknout na úchyt widgetu a znovu přejít na kartu. Pokročilý, pak otevřete blok Vlastní CSS.

Další další prémiové pluginy WordPress 

Objevte také další WordPress pluginy prémiové, které optimalizují výkon vašeho blogu nebo webu WordPress.

1. Živé prodejní okno

Živé prodejní vyskakovací okno je další WordPress Plugin upozornění s několika vychytávkami, které můžete proměnit ve výhodu. Za prvé, má možnost zobrazit vyskakovací okno když někdo dokončí objednávku. Živý prodej vyskakovacího pluginu wordpress

Zadruhé, vyskakovací okno prodeje v reálném čase může také zobrazit upozornění, když osoba jednoduše přidá položku do košíku. A za třetí, můžete tento nástroj použít ke zvýšení humbuku u produktu tím, že ukážete, kolik návštěvníků si článek zobrazilo.

Díky nejnovějším webovým trendům můžete očekávat, že se Live Sales Popup nádherně zobrazí na všech zařízeních a prohlížečích. Pokud jde o rozbalovací nabídku, můžete ji přizpůsobit do nejmenších detailů.

Číst: Jak opravit výstraha zabezpečení na svém blogu WordPress

Mezi další funkce Live Sales Popup patří více než třicet animací, zvuků, odpočítávání a osobní umístění. Funguje také pro falešná oznámení a umožňuje jej nastavit pouze pro konkrétní stránky, kde chcete, aby oznámení plnilo svůj úkol.

Stáhnout | Demo | Web hosting

2. Foodify

Potraviny je nejrychlejší a nejjednodušší způsob, jak si zákazníci mohou objednat jídlo z obchodu. Je to úplně citlivý a obsahuje další funkce, jako je obrázek, možnost hledání, informace o produktu. Jídelní lístek restaurace Foodlify pro woocommerce

Také přidává tlačítka do koše ke zlepšení User Experience. Toto rozšíření WooCommerce je rychlé a komplexní objednávkové řešení, které lze přidat na jakýkoli web WooCommerce.

Tady pro vás 5 WordPress pluginy pro optimalizaci popisu kategorií a štítků

Výhodou je, že je velmi flexibilní a kompatibilní s mnoha existujícími doplňky v adresáři WordPress.

Stáhnout | Demo | Web hosting

3. Mega Zoom & Pan Image Viewer

Plugin Mega Zoom & Pan Image Viewer je skvělý prohlížeč obrázků a prohlížeč s plně responzivním rozložením pro zobrazování velkých obrázků na vašem WordPress blog.

Mega zoom pan wordpress plugin pro zoom

Jedná se o výkonný nástroj určený k prezentaci produktů (obrázky produktů s vysokým rozlišením. Např .: oblečení, automobily, technické diagramy atd.), Zobrazování map a všech dalších obrázků díky zvětšení a funkci panoramatické, jeho ovládací prvky navigace, jeho posuvníka vysoce přizpůsobitelné značky / přístupové body.

zde jsou 5 aplikací pro chytré telefony, které chrání vaše obrázky a videa

Tento plugin funguje skvěle pro iOS (iPad, iPhone), Android a Windows mobile atd. Funguje také na všech moderních prohlížečích a starších prohlížečích, jako je IE7 nebo IE8.

Stáhnout | Demo | Web hosting

Další doporučené zdroje

Zveme vás také, abyste si prostudovali níže uvedené zdroje, abyste se dostali dále do sevření a kontroly nad svým webem a blogem.

Proč investovat do čističky vzduchu?

Tady je ! To je pro tuto příručku vše. Doufáme, že vám tento článek pomohl přidat efekt přechodu do Elementoru pomocí vlastního CSS. Můžete si také přečíst náš článek na Jak opravit blokování vykreslování JavaScriptu a CSS ve WordPressu.

Budete však také moci konzultovat naše ressources, 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.

Pokud máte přítele nebo komentář, nechte to prosím v sekci komentář. Většinou sdílejte tento článek na různých sociálních sítích.

...