Nemrégiben egyik olvasónk azt kérdezte tőlünk, hogyan adhatunk parallaxis hatást bármilyen WordPress témához?

A Parallax effektus napjainkban népszerű tendencia az interneten, ahol a háttérkép lassabban görget, mint az előtér tartalma.

Ebben az oktatóanyagban megmutatjuk, hogyan lehet egyszerűen hozzáadni a parallaxis hatást bármely WordPress témához.

De ha még soha nem telepítette a WordPress-t, fedezze fel Hogyan kell telepíteni a WordPress blog 7 lépések et Hogyan lehet megtalálni, telepíteni és aktiválni a WordPress téma a blog 

De hát hát miért vagyunk itt.

Parallaxis effektus hozzáadása bármely WordPress témához e1567702269161

Mi a parallaxishatás?

A Parallax Effect egy modern webdesign technika, ahol a háttérelem lassabban görget, mint az előtér tartalma. Ez a hatás mélységet ad a háttérképeknek, és interaktívvá teszi őket.

Fedezze fel 25 WordPress témákat parallax segítségével létrehozhat egy weboldalt

A Parallax effektus használható céloldalak, értékesítési oldalak vagy egy üzleti webhely kezdőlapja. Ez nagyszerű módja annak, hogy kiemelje a különböző szakaszokat egy hosszú oldalon.

Sok prémium WordPress témák beépített parallaxis hatással bírnak a honlapjukon. A parallaxis effektust a legtöbb pluginnel is használhatja WordPress oldalak vizuális készítése.

Azonban minden WordPress témák nem kínál beépített parallaxis effektust, és nem biztos, hogy csak a parallaxis hatáshoz szeretne vizuális oldalkészítőt használni.

Vizsgáljuk meg, hogyan lehet egyszerűen hozzáadni a parallaxis hatást bármely WordPress témához.

1. módszer: A parallaxis effektus hozzáadása bármely WordPress témához egy plugin segítségével

Ez a módszer nem igényel semmilyen kód hozzáadását a WordPress témához. Könnyebb és ajánlott a legtöbb felhasználó számára.

Az első dolog, amit meg kell tennie, a plugin telepítése és aktiválása Speciális WordPress hátterek. További részletek: olvassa el lépésről lépésre a WordPress bővítmény telepítéséről.

A beépülő modul aktiválása után szerkesztenie kell azt az oldalt, ahová hozzá szeretné adni a parallaxis hatást. Észre fogja venni az új gombot "Speciális WordPress hátterek»A vizuális szerkesztő eszköztáron.

Adja hozzá a továbbfejlesztett wordpress hátteret

Ha rákattint, megjelenik egy előugró ablak, ahol megváltoztathatja a hozzáadni kívánt különböző háttérbeállításokat.

Először is ki kell választania egy képet háttérként, majd be kell jelölnie a " Stretch".

Speciális wordpress ablak háttér

Akkor kattintson a gombra Válassza a Kép lehetőséget A használni kívánt kép letöltése vagy kiválasztása. Ügyeljen arra, hogy nagy képet használjon, különben pixelezve jelenik meg.

Ezt követően aktiválnia kell az effektust Parallaxis A parallaxishatás típusának megválasztásával. Számos olyan stílus áll rendelkezésre, amelyekkel kísérletezhet. A leggyakoribb parallaxis effektus a görgetés.

A gombra kattintva betétlap hogy folytassa.

A plugin hozzáteszi a rövid kód az Publishing Szerkesztő. Így néz ki:

[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 = "X", "X" itt [/ nk_awb]

Csere " ezt a tartalmat Saját tartalma alapján mentse el az oldalt.

Látogasson el a webhelyére, hogy működésbe lépjen.

Parallaxis hatása a wordpress-re2. módszer: Adja hozzá a "Parallaxis" effektust minden WordPress-témához CSS-sel

Ez a módszer megköveteli, hogy rendelkezzen bizonyos ismeretekkel a "HTML / CSS" -ről, valamint arról, hogyan működnek a WordPress témák és beépülő modulok.

Először fel kell töltenie a WordPress médiatárába azt a képet, amelyet a parallaxishatáshoz használni szeretne. média> Új hozzáadása ".

Menj tovább felfedezésével Hogyan lehet megszervezni a médiát a WordPress blogján?

A kép feltöltése után át kell másolnia a kép URL-jét a kép szerkesztésével a WordPress médiatárban.

Másolja a kép URL-jét a wordpress fájlba

Ezután hozzá kell adnia a következő HTML kódot ahhoz az oldalhoz, ahol a parallaxis hatást szeretné megjeleníteni. Ezt a HTML-kódot hozzáadhatja a WordPress vagy a gyermek témája.

div class = "parallaxis"> A tartalma itt ...

Ezután hozzá kell adnia a következő egyéni CSS-kódot a WordPress témához.

.parallax {background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); magasság: 100%; háttér-csatolás: fix; háttér pozíció: center; háttér-ismétlés: nem-ismétlés; háttérméret: borító; margin-left: -410px; margin-right: -410px; } .parallax-content {width: 50%; margó: 0 auto; szín: #fff; padding-top: 50px; }

Ne felejtse el kicserélni a háttérkép URL-jét saját képére.

Most elmentheti a módosításokat, és ellátogathat webhelyére.

Példa Wordpress parallaxis effektusra

Itt van ! Most hozzáadhatja a parallaxis hatást a WordPress webhelyéhez.

Fedezze fel néhány témát és prémium WordPress-bővítményeket  

Használhatsz mást is WordPress plugin modern megjelenést kölcsönözni és optimalizálni blogja vagy weboldala kezelését.

Kínálunk itt néhány prémium WordPress plugin-ot, amelyek segítenek abban.

1. WooCommerce adományozás

Ebből a kiterjesztésből fogadhatja el az adományokat a WooCommerce webhelyén az ügyfelek által megadott összegekkel. Annyit tudnak majd adni, amennyit csak akarnak. Minden adomány bemutatható, mint a WooCommerce


Woocommerce adomány plugin

Ha az ügyfél kihagyja a kosár oldalt, vagy adományozás nélkül közvetlenül a pénztárhoz megy, akkor a pénztár fölött egy link jelenik meg, hogy adományozhasson.

A WooCommerce Donation használatának minden lépését a képernyőképekkel ellátott dokumentáció ismerteti. Csak aktiválja a bővítményt, és a kosárban megtalálja az "Adomány hozzáadása" mezőt.

Letöltés | demó Web hosting

2. LinkedIn More

A LinkedIn Plus egy WordPress plugint amely lehetővé teszi LinkedIn-profiljának bemutatását a blogján. Többszerzős blogoknál is működik. Követés és megosztás gombokat ad hozzá WordPress-bejegyzéseihez, oldalaihoz vagy kütyüihez.Linkedin és LinkedIn wordpress plugin

Ez egy nagyszerű módja annak, hogy a LinkedIn összes funkcióját hozzáadhassa a blogjához, és érvényesítse márkáját a fogyasztókkal. Lehetővé teszi a megjelenés testreszabását, a beállítások konfigurálását és egyéb speciális opciók aktiválását, hogy népszerűsítse profilját a potenciális toborzók vagy munkaadók előtt. 

Letöltés | demó | Web hosting

3. YouTuber

A YouTubeR egy WordPress plugint egyedülálló platform, amely lehetővé teszi, hogy webhelyéről videókat töltsön fel a YouTube-ra, és egyszerűen beágyazzon YouTube-videókat, lejátszási listákat és csatornákat webhelyére.

Youtuber youtube wordpress plugin

Ezzel a bővítménnyel lehetősége van kivételes videó galéria létrehozására a webhelyén.

Egyéb jellemzői a következők: egyszerűen töltsön fel videókat a YouTube-ra a WordPress webhelyéről, integráció egyszerű videók, lejátszási listák és YouTube-csatornák az Ön webhelyére, a Visual Composer támogatása, a végtelen görgetés a lejátszási listákban, kiváló gyorsítótárazás, érzékeny elrendezés, részletes dokumentáció és így tovább.

Letöltés | demó | Web hosting

Ajánlott források

Tudjon meg többet a webhely felépítéséhez és kezeléséhez javasolt egyéb forrásokról.

Következtetés

Ez minden! Reméljük, hogy nagy segítséget nyújtott. Ne hezitálj hogy ossza meg barátaival a kedvenc közösségi hálózatokon

Azonban Ön is képes lesz konzultálni a mi erőforrások, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához, olvassa el a WordPress blog létrehozása.

És ha bármilyen javaslata vagy észrevétele van, hagyja őket részünkben észrevételek.

...