Co je Parallax Effect? Proč a jak jej používat na svém webu WordPress

Co je Parallax Effect? Proč a jak jej používat na svém webu WordPress

Parallax efekt je velmi populární designová funkce, která se běžně používá na webových stránkách WordPress. Tento speciální efekt se objevuje ve světě her po celá léta, ale v poslední době přešel do webdesignu. A zatím se tento hlavní trend nezdá, že by nikam šel, i když se něco takového používá více než kdy jindy. Co je to paralaxy efekt a proč byste měli zvážit použití na webu WordPress?


V tomto článku se budeme zabývat tím, jaký je účinek paralaxy a výhody, které to může přinést pro váš web a firmu. Poté budeme diskutovat o tom, jak rychle a snadno přidat efekt paralaxy na jakýkoli web, stránku nebo příspěvek WordPress pomocí bezplatného pluginu Parallax Scroll..

Co je paralaxový efekt?

Dvacet sedmnáct

Parallax efekt zahrnuje webové stránky pozadí pohybující se pomaleji než v popředí. To vytváří iluzi hloubky na stránce a dává obsahu 3D efekt, když diváci přejdou dolů.

Většina prémiových témat WordPress nyní přichází s integrovaným paralaxovým efektem na jejich domovskou stránku. Dokonce i bezplatné výchozí téma WordPress Twenty Seventeen přichází s funkcí paralaxy. Většina tvůrců stránek také obsahuje nástroj pro paralaxový efekt, který vám umožňuje přidat efekt na jakoukoli stránku nebo příspěvek na vašem webu. A samozřejmě existuje řada pluginů WordPress, které můžete nainstalovat a přidat na svůj web prvky paralaxy.

Jaké jsou výhody použití paralaxového efektu?

Použití paralaxového efektu na vašem webu WordPress má řadu výhod. První a nejzřetelnější je vizuální aspekt paralaxy. Paralaxový efekt je esteticky příjemné, dává vašemu webu svěží, stylový a moderní vzhled a dojem. Tento páni efekt může udělat váš obsah opravdu popovým a vytvořit vzrušující a zajímavý prohlížeč.

Dalším klíčovým důvodem pro použití paralaxového efektu na vašem webu je pomoc rozdělit stránku, zejména na domovskou stránku, do čitelných částí. Tento efekt použijte k zvýraznění různých částí a typů obsahu, které chcete předvést. To může pomoci propagovat různé aspekty vašeho webu, osvětlit důležité informace a povzbudit uživatele k procházení webu a přístupu k obsahu způsobem, který si sami vyberete.

Paralaxový efekt lze použít na jakékoli stránce nebo na příspěvku na webu, ale lze jej vidět zejména na domovských stránkách, na vstupních stránkách nebo na jednostránkových webech. Tato ohromující vizuální paralaxy vytváří a její pozitivní vliv na uživatelský dojem může vést k tomu, že návštěvníci na vašem webu zůstanou déle, a mohou tak zlepšit míru konverze na webu oproti jeho cílům..

Parallax na mobilu

I když paralaxa je skvělá pro přidání vizuálního zájmu, na mobilních zařízeních to vždy nefunguje dobře. Protože telefony a tablety obvykle používají navigaci švihnutím (namísto posouvání, jako jsou stolní počítače), nemusí se paralaxy efekty vykreslit správně. To bude samozřejmě záviset na metodě a animacích, které používáte pro vlastní sekci paralaxy, ale pro dobrou použitelnost byste možná měli zvážit deaktivaci paralaxy na zařízeních.

Vyberte motiv s efektem paralaxe

Celkový

Pro ty z vás, kteří začínají nový projekt, byste měli vybrat prémiové téma, které obsahuje funkci paralaxy. A pokud chcete použít paralaxový efekt na různých stránkách vašeho webu, nejen na domovské stránce, můžete zvážit víceúčelové téma, které přichází s pokročilým tvůrcem stránek. Témata jako Divi od Elegant Themes, Parallax od Themify a naše vlastní téma Total, to vše zahrnuje tvůrce stránek poskytující nástroje pro paralaxové efekty.

Přidejte zásuvné moduly Parallax s zásuvným modulem WordPress Slider Revolution

Slider Revolution Parallax

Pokud chcete představovat jezdec s efektem paralaxy, naším nejlepším výběrem je zásuvný modul Slider Revolution. Tento prémiový plugin obsahuje stovky vestavěných možností a funkcí pro písma, vrstvy, posuvné efekty, rozvržení a samozřejmě paralaxu.

Povolit parallax revoluce jezdce

Nejprve nainstalujte plugin, potom buď importujte šablonu jezdce nebo začněte stavět svůj vlastní jezdec od nuly (další podrobnosti si můžete přečíst v našem úplném průvodci jezdci revolucí).

Nastavení parallaxu jezdce revoluce

Dále upravte snímek Hlavní pozadí přidat a Zdroj obrázek na pozadí a vyberte Paralaxa / 3D kartu pro přiřazení úrovně paralaxy. Poté, co přidáváte vrstvy, vyberte Paralaxa / 3D možnost vrstvy pro hloubku paralaxy pro přidání pohybu do textu, obrázku, tlačítka a dalších vrstev. Je to tak snadné!

Až budete hotovi, uložte posuvník a vložte jej do libovolného příspěvku nebo stránky pomocí krátkého kódu. Nebo pokud používáte tvůrce stránek, jako je Visual Composer, můžete pomocí prvku Posuvník Revoluce pro tvorbu stránek rychle vybrat a vložit posuvník..

Přidejte doplňky Parallaxu pomocí zásuvného modulu Parallax Scroll WordPress

Parallax Scroll

Pokud již máte motiv a neobsahuje integrovanou možnost paralaxového efektu, měli byste k provedení úlohy použít plugin WordPress.. Parallax Scroll je oblíbená bezplatná možnost, která vám umožní přidat obrázek pozadí posouvající se paralaxou k různým prvkům na stránce nebo v příspěvku na vašem webu. Přidání posouvaného pozadí k jednotlivému prvku, textu záhlaví nebo úplné části obsahující jakýkoli obsah, vše pomocí jednoduchého krátkého kódu.

Nyní se podívejme, jak nainstalovat a začít používat Parallax Scroll…

Instalace Parallax Scroll

Chcete-li nainstalovat Parallax Scroll, přihlaste se do svého ovládacího panelu WordPress jako správce a vyberte Pluginy> Přidat nový z nabídky.

Přidat nový plugin

Vyhledávání Parallax Scroll, pak vyberte Instalovat nyní> Aktivovat.

Parallax Scroll Activate

Nyní najdete kartu Parallax Scroll byla přidána do vaší nabídky WordPress.

Přidání sekce posouvání paralaxou

Abyste mohli začít s Parallax Scroll, musíte nejprve vytvořit novou sekci paralaxy. Chcete-li tak učinit, vyberte Parallax Scroll> Add New z nabídky WordPress.

Parallax Scroll Add New

Zde si můžete vytvořit novou sekci paralaxy …

Přidat novou paralaxu

Nastavení obrazu pozadí posouvající se paralaxe

Nejprve musíte nastavit obrázek pro pozadí posouvající se paralaxy. Klikněte na Nastavte doporučený obrázek a přidejte obrázek do sekce Doporučený obrázek.

Hlavní obrázek

Pečlivě přemýšlejte o obrázku, který používáte pro každou část pozadí. Ujistěte se, že jsou relevantní pro váš web a synchronizují se s vaší značkou. Pokud se chystáte zobrazit záhlaví nebo další obsah v horní části obrázku na pozadí, zvažte použití blokové barvy nebo jemných vzorů namísto fotografie nebo grafiky poutavé pozornost. To vám může pomoci zajistit, aby váš obrázek pracoval s vaším obsahem a propagoval ho, místo aby jej odvrátil.

Pokud se rozhodnete pro použití fotografií, musí být obrázky vysoké kvality. Krásné poutavé obrázky mohou vašemu webu poskytnout profesionální a jedinečný vzhled. Tyto vizuály vytvoří na publikum silný dojem, což zase přiměje lidi, aby si vzpomněli a vrátili se na váš web. Existuje široký sortiment akciových webů, ze kterých si můžete stáhnout obrázky nejvyšší kvality. Podívejte se na naši sbírku bezplatných a prémiových webových stránek s fotografiemi, kde rychle najdete úžasné fotografie pro pozadí paralaxy.

Vytvoření textu záhlaví na pozadí paralaxe

Přidat záhlaví

Pokud chcete vytvořit text záhlaví s pozadím paralaxy, musíte nejprve zadat název příspěvku. Tento titul se pak zobrazí jako nadpis záhlaví v horní části vybraného obrázku na pozadí paralaxy.

Možná nebudete chtít záhlaví ve své paralaxy sekci. Pokud tomu tak je, měli byste každé paralaxě i nadále přidávat název příspěvku, takže každou část, kterou vytvoříte, lze snadno identifikovat. Poté budete muset vybrat, aby se titul v skrýt Možnosti posouvání Parallax (tento článek je podrobněji popsán v tomto článku), takže záhlaví se na přední straně vašeho webu nezobrazí.

Zobrazit libovolný obsah s pozadím posouvání paralaxou

Možná budete chtít, aby sekce paralaxy zobrazovala na pozadí obrázek jiný obsah. To by mohlo zahrnovat cokoli, co je pro vaše stránky nezbytné, od textu a obrázků po krátké kódy. Rozhodněte se, co chcete zobrazit, a potom zadejte tento obsah do poštovní schránky.

Přizpůsobení nastavení posouvání Parallax

Až budete s obsahem spokojeni, musíte upravit nastavení části paralaxy, aby vyhovovala vaší stránce.

Možnosti posouvání Parallax

Přejděte dolů na Možnosti posouvání Parallax. Ve skupinovém rámečku Styl můžete změnit výšku paralaxy a velikost obrázku, jakož i výběr celé šířky a vynutíte, aby motiv zobrazoval obrázek na pozadí po celé šířce obrazovky, pokud ještě není.

Můžete také změnit horizontální a vertikální polohu záhlaví na pozadí paralaxy. A pokud chcete skrýt název příspěvku, můžete tak učinit zde zadáním displej: žádný; v Styl hlavičky.

Nastavení paralaxy vám umožní přizpůsobit chování svitku paralaxy. To zahrnuje změnu rychlosti pozadí paralaxy. Vyzkoušejte různé rychlosti a podívejte se, co funguje pro váš web a publikum.

Je tam také Mobilní nastavení možnost, která vám umožní deaktivovat obrázek pozadí a / nebo obsah paralaxy na mobilech, pokud máte pocit, že paralaxy nefungují na mobilních zařízeních dobře.

Po úpravě nastavení a dokončení vytváření části paralaxy klikněte na Publikovat.

Vložení sekce paralaxe do příspěvku nebo stránky

Dále musíte vložit část paralaxy do příspěvku nebo stránky na vašem webu. Z nabídky WordPress vyberte Parallax Scroll.

Krátký kód parallaxu

V uvedené tabulce se nyní zobrazí zkratka pro část paralaxy, kterou jste právě vytvořili. Zkopírujte kód a poté otevřete příslušnou stránku nebo příspěvek. Vložte kód do obsahu stránky na vhodné místo.

Vložte krátký kód

Náhled změn a pokud jste spokojeni s novou sekcí paralaxy, klikněte na Publikovat. Nyní můžete vytvořit další oddíly, které dají stránce nebo zveřejní plný paralaxy efekt. A pokud potřebujete provést změny, jednoduše znovu otevřete stránku sekce paralaxy a proveďte potřebné změny.

Závěrečné myšlenky

Pokud vaše téma nemá vestavěnou funkci paralaxy, nebo pokud chcete přidat efekt více než jen na svou domovskou stránku, pak funkce Parallax Scroll vám umožní rychle vytvořit sekce paralaxy, které se přidají na vaše stránky nebo příspěvky..

Jak jste viděli, přidání paralaxového efektu na váš web může být velmi užitečné. Nejenže to může výrazně zlepšit vzhled vašich webových stránek, pomůže také oslovit vaše publikum, umožní jim snadno procházet vaše stránky a přistupovat k obsahu a prodlužuje dobu, kterou stráví na vašem webu. Tato vylepšená uživatelská zkušenost by měla nakonec pomoci vašemu webu převést se proti jeho cílům, ať už jde o navracení navštěvujících návštěvníků, sbírání potenciálních zákazníků nebo prodej produktů nebo služeb..

Přidáte na svou domovskou stránku, vstupní stránku, příspěvek nebo někde jinde efekt paralaxy? Prosím, podělte se o své myšlenky v komentářích níže …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map