Ano ang Parallax Epekto? Bakit at Paano Ito Gamitin sa Iyong WordPress Site

Ano ang Parallax Epekto? Bakit at Paano Ito Gamitin sa Iyong WordPress Site

Ang epekto ng paralaks ay isang napaka-tanyag na tampok ng disenyo na karaniwang ginagamit sa mga website ng WordPress. Ang natatanging epekto na ito ay itinampok sa mundo ng gaming para sa maraming taon ngunit mas kamakailan ay tumawid sa disenyo ng web. At sa ngayon ang pangunahing kalakaran na ito ay mukhang hindi pupunta kahit saan, kung anupaman ito ay mas malawak na ginagamit kaysa dati. Kaya kung ano ang paralaks na epekto at bakit dapat mong isaalang-alang ang paggamit nito sa iyong website ng WordPress?


Sa artikulong ito, isasaalang-alang namin kung ano ang isang paralaks na epekto at ang mga benepisyo na maaaring dalhin sa iyong site at negosyo. Tatalakayin namin kung paano mabilis at madaling magdagdag ng isang paralaks epekto sa anumang website ng WordPress, pahina, o post, na may libreng plugin Parallax scroll.

Ano ang Epekto ng Paralaks?

Dalawampu't labing pitong

Ang epekto ng paralaks ay nagsasangkot ng isang web page ang paglipat ng background sa isang mabagal na rate kaysa sa harapan. Lumilikha ito ng isang ilusyon ng lalim sa pahina, na nagbibigay ng nilalaman ng 3D na epekto habang ang mga manonood ay bumaba.

Ang karamihan ng mga premium na tema ng WordPress ngayon ay may built-in na paralaks na epekto sa kanilang homepage. Kahit na ang libreng WordPress default na tema Dalawampu’t Labin ay may tampok na paralaks. Karamihan sa mga tagagawa ng pahina ay nagsasama ng isang tool na paralaks epekto, na nagbibigay-daan sa iyo upang idagdag ang epekto sa anumang pahina o mag-post sa iyong website. At syempre, maraming mga plugin ng WordPress na maaari mong mai-install upang magdagdag ng mga elemento ng epekto ng paralaks sa iyong website.

Ano ang mga Pakinabang ng Paggamit ng Parallax Epekto?

Mayroong isang bilang ng mga pakinabang sa paggamit ng isang paralaks epekto sa iyong WordPress website. Ang una, at pinaka-halata, ay ang visual na aspeto ng isang paralaks epekto. Ang isang paralaks epekto ay aesthetically nakalulugod, pagbibigay ng iyong website ng isang sariwa, naka-istilong at modernong hitsura at pakiramdam. Ito epekto maaaring gawing pop ang iyong nilalaman, at lumilikha ng isang kapana-panabik at kagiliw-giliw na karanasan sa browser.

Ang isa pang pangunahing dahilan para sa paggamit ng paralaks na epekto sa iyong site ay makakatulong masira ang isang pahina, lalo na ang isang homepage, sa mababasa na mga chunks. Gamitin ang epekto na ito upang bigyang-diin ang iba’t ibang mga seksyon at uri ng nilalaman na nais mong ipakita. Makakatulong ito upang maitaguyod ang iba’t ibang mga aspeto ng iyong website, maipaliwanag ang mahalagang impormasyon, at hikayatin ang mga gumagamit na mag-navigate sa iyong site at ma-access ang nilalaman sa isang paraan ng iyong pagpili.

Ang epekto ng paralaks ay maaaring magamit sa anumang pahina o post ng isang website, ngunit maaaring makita lalo na sa mga homepages, landing page, o isang pahina ng mga site. Ang nakamamanghang visual na paralaks ay lumilikha, at ang positibong epekto nito sa karanasan ng gumagamit, ay maaaring magresulta sa mga bisita na manatili nang mas mahaba sa iyong site, at makakatulong na mapabuti ang mga rate ng conversion ng iyong site laban sa mga layunin nito.

Paralaks sa Mobile

Habang ang paralaks ay mahusay para sa pagdaragdag ng visual na interes, hindi ito palaging gumagana nang maayos sa mga mobile device. Sapagkat ang mga telepono at tablet ay karaniwang gumagamit ng pag-navigate ng swipe (sa halip na isang scroll tulad ng mga desktop) ay maaaring hindi mabigyan ng tama ang mga paralaks na epekto. Siyempre, depende ito sa pamamaraan at mga animation na ginagamit mo para sa iyong sariling paralaks na seksyon, gayunpaman para sa mahusay na kakayahang magamit maaari mong isaalang-alang ang pagpapagana ng paralaks sa mga aparato.

Pumili ng isang Tema na may Parallax Epekto

Kabuuan

Para sa mga nagsisimula ka ng isang bagong proyekto, dapat kang pumili ng isang premium na tema na may kasamang tampok na paralaks. At kung nais mong gumamit ng paralaks na epekto sa iba’t ibang mga pahina ng iyong website, hindi lamang sa homepage, kung gayon maaari mong isaalang-alang ang isang multipurpose na tema na may isang advanced na tagabuo ng pahina. Mga tema tulad ng Divi mula sa Elegant Themes, Parallax by Themify, at ang aming sariling tema Kabuuan, kasama ang lahat ng mga tagabuo ng pahina na nagbibigay ng mga tool na paralaks na epekto.

Magdagdag ng Parallax Slider gamit ang Slider Revolution WordPress Plugin

Slall Revolution Parallax

Kung nais mo ang isang tampok na slider na may paralaks na epekto ang aming nangungunang pumili ay ang plugin ng Slider Revolution. Kasama sa premium na plugin na ito ang daan-daang mga built-in na pagpipilian at tampok para sa mga font, layer, slider effects, layout at siyempre paralaks.

Paganahin ang Slider Revolution Parallax

Una i-install ang plugin, pagkatapos ay i-import ang isang slider template o simulan ang pagbuo ng iyong sariling slider mula sa simula (maaari mong basahin ang aming buong gabay sa Slider Revolution para sa higit pang mga detalye).

Mga Setting ng Paralaks ng Slider Revolution

Susunod, i-edit ang slide Pangunahing background upang magdagdag ng a Pinagmulan background na imahe at piliin ang Paralaks / 3D tab upang magtalaga ng isang paralaks na antas. Pagkatapos habang nagdaragdag ka ng mga layer, piliin ang Paralaks / 3D pagpipilian ng layer para sa malalim na paralaks upang magdagdag ng paggalaw sa iyong teksto, imahe, pindutan at iba pang mga layer. Madali yan!

Kapag tapos ka na, i-save ang iyong slider at gamitin ang shortcode upang ipasok ito sa anumang post o pahina. O kung gumagamit ka ng tagabuo ng pahina tulad ng Visual Composer maaari mong gamitin ang elemento ng tagabuo ng Slider Revolution upang mabilis na piliin at ipasok ang iyong slider.

Magdagdag ng Mga Seksyon ng Parallax sa Plugin ng Parallax scroll

Parallax scroll

Kung mayroon ka nang isang tema, at hindi kasama nito ang isang built-in na paralaksong opsyon na epekto, dapat mong isaalang-alang ang paggamit ng isang plugin ng WordPress upang gawin ang trabaho. Parallax scroll ay isang tanyag na libreng pagpipilian na magbibigay-daan sa iyo upang magdagdag ng isang paralaks na imahe ng background ng pag-scroll sa iba’t ibang mga elemento sa isang pahina o post ng iyong website. Magdagdag ng isang background ng pag-scroll sa isang solong elemento, isang header text, o isang buong seksyon na naglalaman ng anumang nilalaman, lahat sa pamamagitan ng paggamit ng isang simpleng shortcode.

Kaya tingnan ngayon kung paano i-install at simulang gamitin ang Parallax scroll …

Pag-install ng Parallax scroll

Upang mai-install ang Parallax scroll, mag-log in sa iyong WordPress dashboard bilang admin, at piliin ang Mga plugin> Magdagdag ng Bago mula sa menu.

Magdagdag ng bagong Plugin

Paghahanap Parallax scroll, pagkatapos ay piliin I-install Ngayon> I-aktibo.

Mag-scroll sa Parallax scroll

Makakakita ka na ngayon ng isang tab na Parallax scroll na naidagdag sa iyong WordPress menu.

Pagdaragdag ng isang Seksyon ng Parallax scroll

Upang makapagsimula sa Parallax Scroll kailangan mo munang lumikha ng isang bagong paralaks na seksyon. Upang gawin ito, piliin ang Parallax scroll> Magdagdag ng Bago mula sa iyong WordPress menu.

Mag-scroll ng Parallax Magdagdag ng Bago

Dito maaari ka na ngayong lumikha ng iyong bagong paralaks na seksyon …

Magdagdag ng Bagong Parallax

Pagtatakda ng Pag-scroll ng Parallax Background na Imahe

Una kailangan mong magtakda ng isang imahe para sa iyong pag-scroll paralaks na background. Upang gawin ito, mag-click sa Itakda ang Itinatampok na Imahe at idagdag ang imahe sa seksyong Itinatampok.

Itinatampok na Larawan

Mag-isip nang mabuti tungkol sa imahe na ginagamit mo para sa bawat seksyon ng background. Tiyaking nauugnay ang mga ito sa iyong site at naka-sync sa iyong pagba-brand. Kung magpapakita ka ng isang header o karagdagang nilalaman sa tuktok ng imaheng ito sa background, isaalang-alang ang paggamit ng isang bloke ng kulay o banayad na mga pattern sa halip na isang larawan o isang graphic na nakakakuha ng atensyon. Makakatulong ito upang matiyak na gumagana ang iyong imahe at nagtataguyod ng iyong nilalaman, sa halip na makagambala sa ito.

Kung pipiliin mong gumamit ng mga litrato, kailangang maging mataas ang kalidad ng mga imahe. Ang magagandang mga imahe na nakagaganyak sa mata ay makakatulong na bigyan ang iyong site ng isang propesyonal at natatanging hitsura. Ang mga visual na ito ay lilikha ng isang malakas na impression sa iyong tagapakinig, na siya naman ay mag-udyok sa mga tao na alalahanin at bumalik sa iyong site. Mayroong isang malawak na assortment ng mga website ng stock na maaari mong i-download ang nangungunang mga imahe ng kalidad mula sa. Suriin ang aming koleksyon ng mga libre at premium na mga website ng larawan ng stock kung saan mabilis mong makahanap ng mga nakamamanghang litrato para sa iyong mga background na paralaks.

Paglikha ng isang Tekstong Header Sa Labi ng Parallax

Magdagdag ng header

Kung nais mong lumikha ng isang header text na may paralaks na background, dapat kang sumunod sa isang post ng pamagat. Ang titulong ito ay lalabas bilang iyong pamagat ng header sa tuktok ng iyong napiling paralaks na imahe sa background.

Maaaring hindi mo nais ang isang header sa iyong seksyon ng paralaks. Kung ito ang kaso dapat mo pa ring bigyan ang bawat paralaks ng isang pamagat ng post, kaya ang bawat seksyon na nilikha mo ay madaling makilala. Kailangan mong piliin upang itago ang pamagat sa Mga Pagpipilian sa Pag-scroll ng Paralaks (natakpan pa sa artikulong ito), kaya ang isang header ay hindi ipinapakita sa harap ng iyong site.

Ipakita ang Anumang Nilalaman na may Parallax scroll na Background

Maaaring nais mong ipakita ang paralaks na seksyon upang ipakita ang iba pang nilalaman sa imahe ng background. Maaaring kabilang dito ang anumang kinakailangan para sa iyong site, mula sa teksto at mga imahe hanggang sa mga shortcode. Magpasya sa nais mong ipakita at pagkatapos ay ipasok ang nilalamang ito sa post box.

Pagpapasadya ng Mga Setting ng Parallax scroll

Sa sandaling masaya ka sa nilalaman, kailangan mong ipasadya ang mga setting ng paralaks na seksyon upang umangkop sa iyong pahina.

Mga Pagpipilian sa Pag-scroll ng Paralaks

Mag-scroll pababa sa Mga Pagpipilian sa Pag-scroll ng Paralaks. Sa ilalim ng Estilo maaari mong baguhin ang taas ng paralaks at sukat ng imahe pati na rin ang pagpili ng Buong Lapad upang pilitin ang iyong tema upang maipakita ang background na imahe sa buong buong lapad ng screen kung hindi pa.

Maaari mo ring baguhin ang pahalang at patayong posisyon ng header sa paralaks na background. At kung nais mong itago ang pamagat ng post, magagawa mo ito sa pamamagitan ng pag-type pagpapakita: wala; sa Estilo ng header.

Mga Setting ng Paralaks hahayaan mong ipasadya kung paano kumilos ang iyong paralaks scroll. Kasama dito ang pagbabago ng bilis ng background ng paralaks. Subukan ang iba’t ibang mga bilis upang makita kung ano ang gumagana para sa iyong website at madla.

Mayroon ding isang Mga Setting ng Mobile pagpipilian, na nagbibigay-daan sa iyo upang huwag paganahin ang paralaks na imahe ng background at / o nilalaman sa mga mobiles, kung sa tingin mo ay hindi gumagana nang maayos ang mga seksyon ng paralaks sa mga mobile device.

Kapag nabago mo ang mga setting at natapos ang paglikha ng iyong seksyon ng paralaks, i-click ang I-publish.

Ang pagpasok ng Parallax Section sa isang Post o Pahina

Susunod, kailangan mong ipasok ang iyong seksyon ng paralaks sa isang post o pahina sa iyong website. Piliin ang Parallax scroll mula sa iyong WordPress menu.

Shortcode ng Parallax scroll

Sa talahanayan na ipinakita makikita mo na ngayon ang isang shortcode para sa seksyon ng paralaks na nilikha mo lamang. Kopyahin ang code at pagkatapos ay buksan ang naaangkop na pahina o post. Idikit ang code sa nilalaman ng pahina sa naaangkop na posisyon.

Ipasok ang Shortcode

I-preview ang mga pagbabago at kung masaya ka sa iyong bagong seksyon ng paralaks, i-click ang I-publish. Maaari ka na ngayong lumikha ng karagdagang mga seksyon bigyan ang pahina o mag-post ng isang buong paralaks epekto. At kung kailangan mong gumawa ng mga pagbabago, muling buksan ang pahina ng paralaks ng seksyon at gumawa ng anumang kinakailangang pagbabago.

Pangwakas na Kaisipan

Kung ang iyong tema ay walang tampok na tampok na paralaks na epekto, o kung nais mong magdagdag ng isang epekto sa higit pa sa iyong homepage, pagkatapos ay paganahin ng Parallax scroll na mabilis kang lumikha ng mga seksyon ng paralaks upang idagdag sa iyong mga pahina o post.

Tulad ng nakita mo, ang pagdaragdag ng isang paralaks na epekto sa iyong website ay maaaring maging kapaki-pakinabang. Hindi lamang ito lubos na mapabuti ang visual ng iyong website, makakatulong ito sa pag-apila sa iyong tagapakinig, paganahin ang mga ito madaling mag-navigate sa iyong site at ma-access ang nilalaman, at dagdagan ang oras na ginugol nila sa iyong site. Ang pinahusay na karanasan ng gumagamit na ito ay dapat na tulungan ang iyong site na mag-convert laban sa mga layunin nito, upang madagdagan ang pagbabalik ng mga bisita, mangolekta ng mga lead, o magbenta ng mga produkto o serbisyo.

Magdaragdag ka ba ng paralaks na epekto sa iyong homepage, isang landing page, isang post, o sa ibang lugar? Mangyaring ibahagi ang iyong mga saloobin sa mga komento sa ibaba …

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