Ako pridať efekt paralaxy do ľubovoľného WordPress Téma

Nedávno sa nás jeden z našich čitateľov pýtal, ako pridať paralaxy efekt do akejkoľvek témy WordPress? Parallax efekt je trend webdizajnu, pri ktorom sa obrázok na pozadí posúva pomalšie ako obsah v popredí. V tomto článku vám ukážeme, ako ľahko pridať efekt paralaxy k ľubovoľnej téme WordPress.


Pridanie efektu paralaxy do ľubovoľnej témy WordPress

Čo je účinok parallaxie?

Parallax efekt je moderná technika webdizajnu, pri ktorej sa prvok pozadia posúva pomalšie ako obsah v popredí. Tento efekt zvyšuje hĺbku obrázkov na pozadí a spôsobuje, že sa cítia interaktívne.

Účinok paralaxy možno použiť na vstupných stránkach, dlhodobom obsahu, predajných stránkach alebo na domovskej stránke firemných webových stránok. Je to vynikajúci spôsob, ako zvýrazniť rôzne časti dlhej stránky.

Mnoho prémiových tém WordPress prichádza so zabudovanou paralaxou na ich domovskú stránku. Paralaxový efekt môžete použiť aj vo väčšine doplnkov nástroja na tvorbu stránok WordPress.

Nie všetky motívy však majú vstavaný efekt paralaxy a možno nebudete chcieť použiť nástroj na tvorbu stránok na vytvorenie vlastných rozložení stránky len pre efekt paralaxy..

Pozrime sa, ako ľahko pridať efekt paralaxy na pozadie ľubovoľnej témy WordPress.

Metóda 1: Pridanie účinku parallaxie do ľubovoľného motívu WordPress pomocou doplnku

Táto metóda nevyžaduje, aby ste do témy WordPress pridávali akýkoľvek kód. Je to jednoduchšie a odporúčané pre väčšinu používateľov.

Najprv musíte nainštalovať a aktivovať doplnok Advanced WordPress Backgrounds. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

Po aktivácii musíte stránku alebo príspevok upraviť, kam chcete pridať efekt paralaxy. Vo vizuálnom editore si všimnete nové tlačidlo „Rozšírené pozadie WordPress“.

Tlačidlo pokročilého pozadia WordPress

Kliknutím na ňu sa zobrazí kontextové okno, kde môžete zmeniť rôzne nastavenia pozadia, ktoré chcete pridať.

Najprv musíte ako typ pozadia vybrať obrázok a potom začiarknite možnosť „stretch“.

Nastavenie pozadia paralaxy

Ďalej je potrebné kliknúť na tlačidlo „Vybrať obrázok“ a nahrať alebo vybrať obrázok, ktorý chcete použiť. Uistite sa, že používate veľký obrázok, inak sa bude javiť ako pixelovaný.

Potom musíte povoliť paralaxu výberom typu paralaxy. Existuje niekoľko štýlov, s ktorými môžete experimentovať. Najčastejšie používaným paralaxy efektom je zvitok.

Pokračujte kliknutím na tlačidlo Vložiť.

Doplnok teraz pridá krátky kód do vášho editora príspevkov WordPress. Vyzerá to takto:

[nk_awb awb_type = ”image” awb_stretch = ”true” awb_image = ”22 ″ awb_image_size =” full ”awb_parallax =” scroll ”awb_parallax_speed =” 0.5 ″ awb_mouse_parallax = ”true” awb_mouse_parallax_slax_ ”100 = ″ ″ = ″

Váš obsah tu

[/ Nk_awb]

Nahraďte „tu svoj obsah“ svojím vlastným obsahom a potom stránku uložte.

Teraz môžete navštíviť svoj web a pozrieť si ho v akcii.

Náhľad efektu paralaxy

Metóda 2: Pridanie účinku parallaxie do ľubovoľného motívu WordPress s CSS

Táto metóda vyžaduje, aby ste mali spravodlivé porozumenie HTML / CSS a tiež to, ako fungujú témy WordPress.

Najprv budete musieť nahrať obrázok, ktorý chcete použiť pre efekt paralaxy, do mediálnej knižnice WordPress tým, že navštívite Médiá »Pridať nové strana.

Po odovzdaní obrázka musíte skopírovať adresu URL obrázka úpravou obrázka v knižnici médií WordPress.

Skopírujte webovú adresu obrázka

Ďalej musíte do stránky alebo príspevku pridať nasledujúci kód HTML, kde chcete zobraziť efekt paralaxy. Môžete tiež pridať tento kód HTML do svojej témy WordPress alebo podradenej témy.

Váš obsah je tu…

Ďalej musíte do svojho motívu WordPress pridať nasledujúce vlastné CSS.

.paralaxa {
background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
výška: 100%;
pozadie: pevné;
Pozícia na pozadí: stred;
pozadie-opakovanie: nie-opakovanie;
pozadie-veľkosť: kryt;
margin-vľavo: -410px;
margin-right: -410px;
}

.obsah paralaxy {
šírka: 50%;
okraj: 0 auto;
Farba: #fff;
padding-top: 50 pixelov;
}

Nezabudnite nahradiť adresu URL obrázka na pozadí vlastným obrázkom na pozadí.

Teraz môžete uložiť zmeny a navštíviť svoj web, aby ste ich videli v akcii.

Parallax efekt pridaný s CSS

Poznámka: Možno bude potrebné upraviť CSS, aby fungoval s rozložením vašich stránok.

Dúfame, že vám tento článok pomohol naučiť sa, ako ľahko pridať efekt paralaxy do ľubovoľnej témy WordPress. Môžete tiež navštíviť náš obrovský zoznam najžiadanejších tipov, trikov a hackov pre WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me