Paano Magdagdag ng isang Parallax Epekto sa Anumang Tema ng WordPress

Kamakailan, tinanong sa amin ng isa sa aming mga mambabasa kung paano magdagdag ng isang paralaks na epekto sa anumang tema ng WordPress? Ang parallax effect ay isang trend ng disenyo ng web kung saan mas mabagal ang isang scroll sa imahe ng background kaysa sa nilalaman ng harapan. Sa artikulong ito, ipapakita namin sa iyo kung paano madaling magdagdag ng isang paralaks na epekto sa anumang tema ng WordPress.


Pagdaragdag ng paralaks na epekto sa anumang tema ng WordPress

Ano ang isang Parallax Epekto?

Ang parallax effect ay isang modernong diskarte sa disenyo ng web kung saan ang elemento ng background ay mas mabagal kaysa sa harapan ng nilalaman. Ang epektong ito ay nagdaragdag ng lalim sa mga larawan sa background at ginagawang interactive sila.

Ang epekto ng paralaks ay maaaring magamit sa mga landing page, nilalaman ng longform, mga pahina ng benta, o homepage ng isang website ng negosyo. Ito ay isang mahusay na paraan upang i-highlight ang iba’t ibang mga seksyon sa isang mahabang pahina.

Maraming mga premium na tema ng WordPress ang may built-in paralaks epekto sa kanilang homepage. Maaari ka ring gumamit ng paralaks na epekto sa karamihan ng mga plugin ng tagabuo ng WordPress din.

Gayunpaman, hindi lahat ng mga tema ay may built-in paralaks epekto, at maaaring hindi mo nais na gumamit ng tagabuo ng pahina upang lumikha ng mga pasadyang layout ng pahina para lamang sa isang paralaks na epekto.

Tingnan natin kung paano madaling magdagdag ng paralaks na epekto sa background sa anumang tema ng WordPress.

Paraan 1: Magdagdag ng Parallax Epekto sa Anumang Tema ng WordPress Gamit ang Plugin

Hindi kinakailangan ng pamamaraang ito na magdagdag ka ng anumang code sa iyong WordPress tema. Ito ay mas madali at inirerekomenda para sa karamihan ng mga gumagamit.

Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang plugin ng Advanced na WordPress background. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

Sa pag-activate, kailangan mong i-edit ang pahina o mag-post kung saan nais mong idagdag ang paralaks na epekto. Mapapansin mo ang bagong pindutan ng ‘Advanced na Mga background sa WordPress’ sa visual editor.

WordPress button na advanced na background

Ang pag-click dito ay magdadala ng popup kung saan maaari mong baguhin ang iba’t ibang mga setting para sa background na nais mong idagdag.

Una, kailangan mong pumili ng isang imahe bilang iyong uri ng background at pagkatapos suriin ang ‘kahabaan’ na pagpipilian.

Mga setting ng background ng paralaks

Susunod, kailangan mong mag-click sa pindutan ng ‘Piliin ang Imahe’ upang mag-upload o pumili ng isang imahe na nais mong gamitin. Siguraduhin na gumagamit ka ng isang malaking imahe kung hindi man ito lilitaw na pixelated.

Pagkatapos nito kailangan mong paganahin ang Parallax sa pamamagitan ng pagpili ng isang paralaks na uri. Mayroong isang bilang ng mga estilo na magagamit na maaari mong mag-eksperimento. Ang pinaka-karaniwang ginagamit na paralaks epekto ay scroll.

Mag-click sa button na Ipasok upang magpatuloy.

Magdaragdag ang plugin ngayon ng isang shortcode sa loob ng iyong editor ng WordPress post. Magiging hitsura ito ng ganito:

[nk_awb awb_type = “imahe” awb_stretch = “totoo” awb_image = “22 ″ awb_image_size =” buong “awb_parallax =” scroll “awb_parallax_speed =” 0.5 ″ awb_mouse_parallax = “totoo” awb_mouse_parallax_size_ “100”

Narito ang Iyong Nilalaman

[/ nk_awb]

Palitan ang ‘Ang iyong nilalaman dito’ sa iyong sariling nilalaman at pagkatapos ay i-save ang iyong pahina.

Maaari mo na ngayong bisitahin ang iyong website upang makita ito sa pagkilos.

Pag-preview ng epekto ng paralaks

Paraan 2: Magdagdag ng Parallax Epekto sa Anumang Tema ng WordPress na may CSS

Ang pamamaraang ito ay nangangailangan sa iyo na magkaroon ng isang makatarungang pag-unawa sa HTML / CSS pati na rin kung paano gumagana ang mga tema ng WordPress.

Una, kakailanganin mong i-upload ang imahe na nais mong gamitin para sa paralaks na epekto sa iyong WordPress media library sa pamamagitan ng pagbisita Media »Magdagdag ng Bago pahina.

Pagkatapos ma-upload ang imahe, kailangan mong kopyahin ang imahe ng URL sa pamamagitan ng pag-edit ng imahe sa library ng media ng WordPress.

Kopyahin ang URL ng imahe

Susunod, kailangan mong magdagdag ng sumusunod na HTML sa pahina o mag-post kung saan nais mong ipakita ang paralaks na epekto. Maaari mo ring idagdag ang HTML na ito sa iyong WordPress tema o tema ng bata.

Pumunta ang iyong nilalaman dito…

Susunod na kailangan mong magdagdag ng sumusunod na pasadyang CSS sa iyong WordPress tema.

.paralaks {
background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
taas: 100%;
background-attachment: naayos;
background-posisyon: sentro;
background-ulitin: walang-ulit;
laki ng background: takip;
kaliwang margin: -410px;
margin-kanan: -410px;
}

.paralaks-nilalaman {
lapad: 50%;
margin: 0 auto;
kulay: #FFF;
padding-top: 50px;
}

Huwag kalimutan na palitan ang URL ng larawan ng background sa iyong sariling imahe sa background.

Maaari mo na ngayong i-save ang iyong mga pagbabago at bisitahin ang iyong website upang makita ito sa pagkilos.

Ang epekto ng paralaks ay idinagdag sa CSS

Tandaan: Maaaring kailanganin mong ayusin ang CSS upang gumana sa layout ng iyong site.

Inaasahan naming nakatulong sa iyo ang artikulong ito kung paano madaling magdagdag ng paralaks na epekto sa anumang tema ng WordPress. Maaari mo ring makita ang aming listahan ng mega ng pinaka nais na mga tip, trick, at hack ng WordPress.

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