Čo je to účinok parallaxie? Prečo a ako ju používať na svojom webe WordPress

Čo je to účinok parallaxie? Prečo a ako ju používať na svojom webe WordPress

Parallax efekt je mimoriadne populárna konštrukčná funkcia, ktorá sa bežne používa na webových stránkach WordPress. Tento špeciálny efekt sa vyskytuje vo svete hier už roky, ale nedávno prešiel do webdizajnu. Zdá sa, že zatiaľ tento hlavný trend nikam nevedie, ak sa čoraz častejšie používa ako kedykoľvek predtým. Čo je to paralaxy efekt a prečo by ste mali zvážiť jeho použitie na svojej webovej stránke WordPress?


V tomto článku sa budeme zaoberať tým, čo je paralaxy efekt a aké výhody to môže priniesť pre vaše stránky a podnikanie. Potom budeme diskutovať o tom, ako rýchlo a ľahko pridať efekt paralaxy na ľubovoľnú webovú stránku, stránku alebo príspevok WordPress pomocou bezplatného doplnku Parallax Scroll..

Čo je účinok parallaxie?

Dvadsať sedemnásť

Parallax efekt zahŕňa webovú stránku pozadie sa pohybuje pomalšie ako v popredí. Vytvára tak ilúziu hĺbky stránky, čo dáva obsahu 3D efekt, keď diváci posúvajú stránku nadol.

Väčšina prémiových tém WordPress teraz prichádza so vstavanou paralaxou na ich domovskú stránku. Dokonca aj bezplatná predvolená téma WordPress Twenty Seventeen prichádza s funkciou paralaxy. Väčšina tvorcov stránok obsahuje aj nástroj na paralaxový efekt, ktorý vám umožňuje pridať efekt na akúkoľvek stránku alebo príspevok na vašom webe. A samozrejme existuje množstvo doplnkov WordPress, ktoré môžete nainštalovať, aby ste do svojich webových stránok pridali prvky s efektom paralaxy.

Aké sú výhody použitia paralaxového efektu?

Použitie paralaxového efektu na vašej webovej stránke WordPress má niekoľko výhod. Prvým a najzreteľnejším je vizuálny aspekt paralaxy. Paralaxy efekt je esteticky potešujúce, čo vášmu webu dodá svieži, štýlový a moderný vzhľad a dojem. toto páni efekt môže váš obsah skutočne popovať a vytvára vzrušujúce a zaujímavé prostredie prehliadača.

Ďalším kľúčovým dôvodom použitia účinku paralaxy na vašom webe je pomôcť rozbiť stránku, najmä na domovskú stránku, do čitateľných kúskov. Tento efekt použite na zdôraznenie rôznych častí a typov obsahu, ktoré chcete predviesť. Môže to pomôcť propagovať rôzne aspekty vášho webu, osvetľovať dôležité informácie a povzbudzovať používateľov, aby navigovali na vašom webe a prístup k obsahu spôsobom, ktorý si sami vyberiete..

Účinok paralaxy sa dá použiť na ľubovoľnej stránke alebo na niektorom z webových stránok, ale je viditeľný najmä na domovských stránkach, na vstupných stránkach alebo na jednostránkových stránkach. Táto ohromujúca vizuálna paralaxy vytvára a pozitívny vplyv na dojem používateľa môže viesť k tomu, že návštevníci zostanú dlhšie na vašom webe, a môžu pomôcť zlepšiť mieru konverzie vášho webu oproti jeho cieľom..

Paralaxa na mobile

Aj keď je paralaxa vynikajúca na zvýšenie vizuálneho záujmu, na mobilných zariadeniach to vždy nefunguje dobre. Pretože telefóny a tablety zvyčajne používajú posúvanú navigáciu (namiesto rolovania, napríklad stolné počítače), efekty paralaxy sa nemusia vykresliť správne. Závisí to samozrejme od metódy a animácií, ktoré používate pre svoju vlastnú časť paralaxy, ale pre dobrú použiteľnosť môžete zvážiť vypnutie paralaxy na zariadeniach.

Vyberte tému s efektom paralaxy

Celkom

Pre tých z vás, ktorí začínajú nový projekt, by ste mali zvoliť prémiovú tému, ktorá obsahuje funkciu paralaxy. A ak chcete použiť efekt paralaxy na rôznych stránkach vášho webu, nielen na domovskej stránke, môžete zvážiť viacúčelovú tému, ktorá sa dodáva s pokročilým nástrojom na tvorbu stránok. Témy ako Divi od Elegant Themes, Parallax od Themify a naša vlastná téma Celkom, všetky zahŕňajú tvorcov stránok poskytujúcich nástroje na paralaxové efekty.

Pridajte doplnok Parallax s doplnkom Slider Revolution WordPress

Posuvná revolúcia Parallax

Ak chcete predstavovať jazdca s paralaxovým efektom, naším najlepším výberom je doplnok Slider Revolution. Tento prémiový doplnok obsahuje stovky vstavaných možností a funkcií pre písma, vrstvy, efekty posúvača, rozloženia a samozrejme paralaxy.

Povoliť parallax otáčania jazdca

Najprv nainštalujte doplnok a potom buď importujte šablónu jazdca alebo začnite vytvárať svoj vlastný jazdec od začiatku (ďalšie podrobnosti nájdete v našej úplnej príručke Slider Revolution)..

Nastavenia parallaxu posúvača

Ďalej upravte snímku Hlavné pozadie pridať a zdroj obrázok na pozadí a vyberte ikonu 3D Parallax / na priradenie úrovne paralaxy. Potom, keď pridávate vrstvy, vyberte ikonu 3D Parallax / možnosť vrstvy pre hĺbku paralaxy, ktorá pridá pohyb textu, obrázka, tlačidla a ďalším vrstvám. Je to také ľahké!

Po dokončení posuňte jazdec a pomocou skráteného kódu ho vložte na ľubovoľný príspevok alebo stránku. Alebo ak používate nástroj na tvorbu stránok, ako je Visual Composer, môžete pomocou prvku Posuvník revolúcie nástroja na tvorbu stránok rýchlo vybrať a vložiť jazdec..

Pridajte doplnok Parallax pomocou doplnku Parallax Scroll WordPress

Parallax Scroll

Ak už máte tému a neobsahuje zabudovanú možnosť paralaxového efektu, mali by ste na vykonanie úlohy použiť doplnok WordPress.. Parallax Scroll je obľúbená bezplatná možnosť, ktorá vám umožní pridať obrázok na pozadí posúvajúci sa paralaxou k rôznym prvkom na stránke alebo v príspevku na vašom webe. Pridanie posúvateľného pozadia do jedného prvku, textu hlavičky alebo úplnej časti obsahujúcej akýkoľvek obsah, všetko pomocou jednoduchého skráteného kódu.

Pozrime sa teraz na to, ako nainštalovať a začať používať funkciu Parallax Scroll…

Inštalácia parallaxu

Ak chcete nainštalovať posúvanie Parallax, prihláste sa do svojho ovládacieho panela WordPress ako správca a vyberte položku Doplnky> Pridať nové z ponuky.

Pridajte nový doplnok

Vyhľadávanie Parallax Scroll, potom vyberte Inštalovať teraz> Aktivovať.

Aktivácia parallaxu

Teraz nájdete kartu Parallax Scroll bola pridaná do vašej ponuky WordPress.

Pridanie oddielu posúvania paralaxou

Ak chcete začať používať funkciu Parallax Scroll, musíte najprv vytvoriť novú časť paralaxy. Ak to chcete urobiť, vyberte položku Posun parallaxu> Pridať nový z ponuky WordPress.

Parallax Scroll Add New

Tu môžete vytvoriť novú sekciu paralaxy …

Pridať novú paralaxu

Nastavenie obrazu pozadia posúvajúceho sa paralaxu

Najprv musíte nastaviť obrázok pre pozadie s posúvateľnou paralaxou. Kliknite na Nastavte odporúčaný obrázok a pridajte obrázok do časti Odporúčaný obrázok.

Odporúčaný obrázok

Dôkladne premýšľajte o obrázku, ktorý používate pre každú časť pozadia. Uistite sa, že sú relevantné pre vaše stránky a synchronizujú sa s vašou značkou. Ak sa chystáte v hornej časti obrázka na pozadí zobraziť hlavičku alebo ďalší obsah, zvážte použitie fotografie alebo jemných vzorov namiesto fotografie alebo grafiky, ktorá zaujme pozornosť. Môže to pomôcť zaistiť, aby váš obrázok spolupracoval s vaším obsahom a propagoval ho, namiesto toho, aby ho odvrátil.

Ak sa rozhodnete pre použitie fotografií, obrázky musia byť vysokej kvality. Krásne pútavé obrázky vám môžu pomôcť dať vášmu webu profesionálny a jedinečný vzhľad. Tieto vizuálne prvky vytvoria silný dojem na vaše publikum, čo zase ľudí vyzve, aby si zapamätali a vrátili sa na vaše stránky. Existuje široký sortiment akciových webových stránok, z ktorých si môžete stiahnuť obrázky vysokej kvality. Prezrite si našu kolekciu bezplatných a prémiových fotografických webov s fotografiami, na ktorých rýchlo nájdete úžasné fotografie pre pozadie paralaxy.

Vytvorenie textu hlavičky na pozadí paralaxy

Pridajte hlavičku

Ak chcete vytvoriť text hlavičky s pozadím paralaxy, musíte zadať názov príspevku. Tento nadpis sa potom zobrazí ako nadpis hlavičky v hornej časti zvoleného obrázka na pozadí paralaxy.

Možno nebudete chcieť hlavičku v časti paralaxy. V takom prípade by ste mali každej paralaxe aj napriek tomu dať názov príspevku, takže každú vytvorenú sekciu je možné ľahko identifikovať. Potom budete musieť vybrať, ak chcete skryť názov v Možnosti posúvania paralaxou (podrobnejšie v tomto článku), takže hlavička sa nezobrazí na prednej strane vášho webu.

Zobraziť akýkoľvek obsah s pozadím posúvania paralaxou

Možno budete chcieť, aby sa v časti paralaxy zobrazoval nad obrázkom na pozadí iný obsah. Môže to zahŕňať všetko potrebné pre vaše stránky, od textu a obrázkov až po krátke kódy. Rozhodnite sa, čo chcete zobraziť, a potom zadajte tento obsah do poštového poľa.

Prispôsobenie nastavení posúvania Parallax

Keď budete spokojní s obsahom, musíte prispôsobiť nastavenia časti paralaxy, aby vyhovovali vašej stránke.

Možnosti posúvania paralaxou

Posuňte zobrazenie nadol na Možnosti posúvania paralaxou. V časti Štýl môžete zmeniť výšku paralaxy a veľkosť obrázka, ako aj výber celej šírky a prinútiť tak tému, aby zobrazovala obrázok na pozadí po celej šírke obrazovky, ak ešte nie je vytvorená.

Môžete tiež zmeniť horizontálnu a vertikálnu polohu hlavičky na pozadí paralaxy. Ak chcete skryť názov príspevku, môžete to urobiť zadaním textu displej: žiadny; v Štýl hlavičky.

Nastavenia paralaxu vám umožní prispôsobiť správanie vášho paralaxy. To zahŕňa zmenu rýchlosti pozadia paralaxy. Vyskúšajte rôzne rýchlosti a zistite, čo funguje pre váš web a publikum.

K dispozícii je tiež Nastavenia pre mobilné zariadenia možnosť, ktorá vám umožní zakázať obrázok na pozadí paralaxy a / alebo obsah na mobilných telefónoch, ak máte pocit, že sekcie paralaxy na mobilných zariadeniach nefungujú dobre.

Po úprave nastavení a dokončení tvorby časti paralaxy kliknite na Publikovať.

Vloženie oddielu paralaxy na príspevok alebo stránku

Ďalej musíte vložiť časť paralaxy do príspevku alebo stránky na vašom webe. V ponuke WordPress vyberte položku Posúvanie paralaxou.

Krátky kód parallaxu

V predloženej tabuľke sa teraz zobrazí skratka pre časť paralaxy, ktorú ste práve vytvorili. Skopírujte kód a potom otvorte príslušnú stránku alebo príspevok. Vložte kód do obsahu stránky na vhodné miesto.

Vložte krátky kód

Prezrite si ukážky zmien a ak ste spokojní so svojou novou časťou paralaxy, kliknite na položku Zverejniť. Teraz môžete vytvoriť ďalšie oddiely, ktoré poskytnú stránke alebo uverejnia úplný efekt paralaxy. Ak potrebujete vykonať zmeny, jednoducho znova otvorte stránku oddielu paralaxy a vykonajte potrebné zmeny.

Záverečné myšlienky

Ak vaša téma nemá vstavanú funkciu paralaxového efektu alebo ak chcete pridať efekt viac ako len na svoju domovskú stránku, funkcia Posúvanie Parallax vám umožní rýchlo vytvoriť oddiely paralaxy, ktoré môžete pridať na svoje stránky alebo príspevky..

Ako ste videli, pridanie účinku paralaxy na váš web môže byť veľmi užitočné. Nielenže to môže výrazne zlepšiť vizuály vášho webu, ale tiež pomôže osloviť vaše publikum, umožní im ľahkú navigáciu na vašom webe a prístup k obsahu a zvýši čas, ktorý strávia na vašom webe. Táto vylepšená používateľská skúsenosť by mala napokon pomôcť vášmu webu prekonvertovať jeho ciele, či už ide o zvýšenie počtu vracajúcich sa návštevníkov, získavanie potenciálnych zákazníkov alebo predaj produktov alebo služieb..

Pridáte na svoju domovskú stránku, vstupnú stránku, príspevok alebo niekde inde efekt paralaxy? Prosím, podeľte sa o svoje myšlienky v komentároch nižšie …

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