Nedávno sa nás jeden z našich čitateľov pýtal, ako pridať efekt paralaxy k akejkoľvek téme WordPress?
Efekt Paralaxy je v dnešnej dobe populárnym trendom na webe, kde sa obrázok na pozadí posúva pomalšie ako obsah v popredí.
V tomto tutoriáli vám ukážeme, ako ľahko pridať efekt paralaxy na ľubovoľnú tému WordPress.
Ak ste však ešte nikdy nenainštalovali program WordPress, zistite to Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu
Ale späť k tomu, prečo sme tu.
Čo je to efekt paralaxy?
Parallax Effect je moderná technika webového dizajnu, pri ktorej sa element pozadia posúva pomalšie ako obsah v popredí. Tento efekt dodáva obrázkom na pozadí hĺbku a robí ich interaktívnymi.
Objavte naše 25 WordPress témy s paralaxy na vytvorenie webovej stránky
Efekt Paralaxy je možné použiť na Vstupné stránky, predajné stránky alebo domovská stránka firemného webu. Je to vynikajúci spôsob zvýraznenia rôznych častí na dlhej stránke.
Mnoho prémiové témy WordPress majú zabudovaný efekt paralaxy na svojej domovskej stránke. U väčšiny doplnkov môžete tiež použiť efekt paralaxy WordPress vizuálna tvorba stránok.
Avšak, všetky Témy WordPress neponúka vstavaný efekt paralaxy a možno nebudete chcieť použiť vizuálny nástroj na tvorbu stránok len na efekt paralaxy.
Poďme sa pozrieť na to, ako ľahko pridať efekt paralaxy na ľubovoľnú tému WordPress.
Metóda 1: Pridajte efekt paralaxy na ľubovoľnú tému WordPress pomocou doplnku
Táto metóda nevyžaduje pridanie žiadneho kódu k vašej téme WordPress. Je to jednoduchšie a odporúča sa pre väčšinu používateľov.
Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať doplnok Rozšírené pozadie WordPress, Pre viac informácií, pozrite si nášho podrobného sprievodcu o tom, ako nainštalovať doplnok WordPress.
Po aktivácii pluginu musíte upraviť stránku, na ktorú chcete pridať efekt paralaxy. Všimnete si nové tlačidlo “Rozšírené pozadie WordPress»Na paneli nástrojov vizuálneho editora.
Kliknutím na ňu sa zobrazí vyskakovacie okno, kde môžete zmeniť rôzne nastavenia pozadia, ktoré chcete pridať.
Najskôr je potrebné zvoliť obrázok ako pozadie a potom začiarknuť možnosť „ Natiahnuť".
Potom musíte kliknúť na tlačidlo Vyberte položku Obrázok Na stiahnutie alebo výber obrázka, ktorý chcete použiť. Uistite sa, že používate veľký obrázok, inak sa bude javiť v pixeloch.
Potom musíte aktivovať efekt Parallax Výberom typu efektu paralaxy. Existuje množstvo štýlov, s ktorými môžete experimentovať. Najbežnejším použitým paralaxovým efektom je rolovanie.
Kliknutím na tlačidlo Vložiť pokračovať.
Doplnok pridá a shortcode na tvoje publikovanie Editor, 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 = X " tu [/ nk_awb]
Nahradiť “ tento obsah Podľa vlastného obsahu potom stránku uložte.
Môžete navštíviť svoje webové stránky a vidieť ich v akcii.
Metóda 2: Pridajte efekt „Paralaxy“ na ľubovoľnú tému WordPress pomocou CSS
Táto metóda vyžaduje, aby ste mali určité vedomosti o „HTML / CSS“, ako aj o tom, ako fungujú témy a doplnky WordPress.
Najskôr musíte do svojej knižnice médií WordPress nahrať obrázok, ktorý chcete použiť pre efekt paralaxy, navštívením „ médiá> Pridať nové ".
Choďte ďalej objavovaním Ako usporiadať médiá na svojom blogu WordPress
Po nahraní obrázka musíte skopírovať adresu URL obrázka úpravou obrázka v knižnici médií WordPress.
Potom musíte na stránku, na ktorej chcete zobraziť efekt paralaxy, pridať nasledujúci kód HTML. Tento HTML kód môžete tiež pridať do svojho Téma WordPress alebo téma pre deti.
div class = "paralaxa"> Váš obsah tu ...
Potom musíte do svojej témy WordPress pridať nasledujúci vlastný kód CSS.
.parallax {background-image: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); výška: 100%; background-attachment: pevné; background-poloha: centrum; background-repeat: no-repeat; background-size: kryt; margin-vľavo: -410px; margin-right: -410px; } .parallax-obsah {šírka: 50%; margin: 0 auto; Farba: #fff; padding-top: 50px; }
Nezabudnite nahradiť adresu URL obrázka na pozadí vlastným obrázkom.
Teraz môžete uložiť zmeny a navštíviť svoje webové stránky.
Tu je! Teraz môžete na svoj web WordPress pridať efekt paralaxy.
Objavte aj niektoré témy a prémiové doplnky WordPress
Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. WooCommerce Donation
Prostredníctvom tohto rozšírenia prijímajte dary na svojom webe WooCommerce v sumách určených zákazníkmi. Budú môcť dať, koľko chcú. Každý dar môže byť prezentovaný ako akýkoľvek obvyklý produkt WooCommerce.
Ak zákazník preskočí stránku košíka alebo prejde priamo k pokladni bez poskytnutia daru, zobrazí sa nad stránkou s platbou odkaz, pomocou ktorého môže prispieť.
Každý krok použitia daru WooCommerce je vysvetlený v dokumentácii so snímkami obrazovky. Stačí aktivovať doplnok a v košíku nájdete pole „Pridať dar“.
Stiahnuť | demo | web hosting
2. LinkedIn More
LinkedIn Plus je a WordPress Plugin ktorý vám umožní prezentovať váš LinkedIn profil na vašom blogu. Funguje to aj pre blogy viacerých autorov. Do vašich príspevkov, stránok alebo miniaplikácií WordPress pridáva tlačidlá Sledovať a Zdieľať.
Je to skvelý spôsob, ako do svojho blogu pridať všetky funkcie LinkedIn a overiť svoju značku u spotrebiteľov. Dáva vám možnosť prispôsobiť si vzhľad, konfigurovať nastavenia a aktivovať ďalšie rozšírené možnosti propagácie vášho profilu u potenciálnych náborových pracovníkov alebo zamestnávateľov.
Stiahnuť | demo | web hosting
3. YouTuber
YouTubeR je a WordPress Plugin unikátna platforma, ktorá vám umožňuje nahrávať videá na YouTube z vašich webových stránok a jednoducho vkladať videá, zoznamy skladieb a kanály YouTube na vašu webovú stránku.
Pomocou tohto doplnku máte na svojom webe možnosť vytvoriť výnimočné videogalérie.
Jeho ďalšie vlastnosti sú: možnosť jednoduché nahrávanie videí na YouTube z vášho webu WordPress, integrácia jednoduché videá, zoznamy skladieb a kanály YouTube na vaše webové stránky, podpora programu Visual Composer, internetu nekonečné posúvanie v zoznamoch skladieb, vynikajúce ukladanie do pamäte, responzívne rozloženie, podrobná dokumentácia a ďalšie.
Stiahnuť | demo | web hosting
Odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- Ako opraviť chybu „Nedá sa zapísať na disk“ na WordPress
- Ako sa stať úspešným blogerom a zarábať peniaze pomocou WordPress
- Ako publikovať svoje články e-mailom na WordPress
- Ako sa stať úspešným blogerom a zarábať peniaze pomocou WordPress
záver
To je všetko! Dúfame, že to bolo veľmi užitočné. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.
A ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre.
...
