Kaip pridėti “Parallax” efektą prie bet kurios “WordPress” temos

Neseniai vienas iš mūsų skaitytojų paklausė mūsų, kaip pridėti paralakso efektą prie bet kurios „WordPress“ temos? „Parallax“ efektas yra interneto dizaino tendencija, kai fono vaizdas slenka lėčiau nei priešakinis turinys. Šiame straipsnyje mes jums parodysime, kaip lengvai pridėti paralakso efektą prie bet kurios „WordPress“ temos.


Paralakso efekto pridėjimas prie bet kurios „WordPress“ temos

Kas yra „Parallax“ efektas?

„Parallax“ efektas yra šiuolaikiška interneto dizaino technika, kai fono elementas slinka lėčiau nei žinios apie turinį. Šis efektas padidina foninių vaizdų gylį ir leidžia jiems jaustis interaktyviais.

„Parallax“ efektą galima naudoti nukreipimo puslapiuose, ilgalaikio turinio, pardavimo puslapiuose arba verslo svetainės pagrindiniame puslapyje. Tai puikus būdas išryškinti skirtingas dalis ilgą puslapį.

Daugelio „WordPress“ „premium“ temų pagrindiniame puslapyje yra įmontuotas paralakso efektas. Paralakso efektą taip pat galite naudoti daugelyje „WordPress“ puslapio kūrimo priemonės papildinių.

Tačiau ne visos temos turi įmontuotą paralakso efektą, todėl galbūt nenorėsite naudoti puslapio kūrimo priemonės norėdami kurti pasirinktinius puslapio maketus tik paralakso efektui..

Pažvelkime į tai, kaip lengvai pridėti paralakso fono efektą prie bet kurios „WordPress“ temos.

1 būdas: naudodami papildinį pridėkite „Parallax“ efektą prie bet kurios „WordPress“ temos

Šis metodas nereikalauja, kad pridėtumėte kodą prie „WordPress“ temos. Tai lengviau ir rekomenduojama daugumai vartotojų.

Pirmas dalykas, kurį jums reikia padaryti, yra įdiegti ir suaktyvinti „WordPress“ fonų papildinį. Norėdami gauti daugiau informacijos, skaitykite mūsų nuoseklų vadovą, kaip įdiegti „WordPress“ papildinį.

Įjungę turite redaguoti puslapį arba įrašą ten, kur norite pridėti paralakso efektą. Vaizdo rengyklėje pastebėsite naują mygtuką „Išplėstiniai„ WordPress “fonai“.

„WordPress“ išplėstinio fono mygtukas

Spustelėjus jį, pasirodys iššokantis langas, kuriame galėsite pakeisti skirtingus norimo pridėti fono parametrus.

Pirmiausia turite pasirinkti vaizdą kaip fono tipą ir tada patikrinti parinktį „ruožas“.

„Parallax“ fono nustatymai

Tada turite spustelėti mygtuką „Pasirinkti vaizdą“, jei norite įkelti arba pasirinkti vaizdą, kurį norite naudoti. Įsitikinkite, kad naudojate didelį vaizdą, kitaip jis bus rodomas pikseliais.

Po to turite įjungti „Parallax“ pasirinkdami paralakso tipą. Yra daugybė stilių, kuriais galite eksperimentuoti. Dažniausiai naudojamas paralakso efektas yra slinkimas.

Norėdami tęsti, spustelėkite mygtuką Įterpti.

Papildinys dabar pridės trumpąjį kodą „WordPress“ įrašų redagavimo priemonės viduje. Tai atrodys maždaug taip:

[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 = ”true”

Jūsų turinys čia

[/ nk_awb]

Pakeiskite „Savo turinį čia“ savo turiniu ir išsaugokite puslapį.

Dabar galite apsilankyti savo svetainėje ir pamatyti, kaip ji veikia.

„Parallax“ efekto peržiūra

2 būdas: pridėkite „Parallax“ efektą prie bet kurios „WordPress“ temos naudodami CSS

Šis metodas reikalauja, kad jūs tinkamai suprastumėte HTML / CSS, taip pat kaip veikia „WordPress“ temos.

Pirmiausia apsilankydami turėsite įkelti vaizdą, kurį norite naudoti paralakso efektui, į savo „WordPress“ laikmenų biblioteką Žiniasklaida »Pridėti naują puslapis.

Įkėlę vaizdą, turite nukopijuoti vaizdo URL, redaguodami vaizdą „WordPress“ laikmenų bibliotekoje.

Nukopijuokite vaizdo URL

Tada į puslapį ar įrašą, kuriame norite parodyti paralakso efektą, turite pridėti šį HTML. Taip pat galite įtraukti šį HTML į savo „WordPress“ ar vaiko temas.

Čia jūsų turinys…

Toliau prie „WordPress“ temos turite pridėti šią pasirinktinę CSS.

.paralaksas {
fono vaizdas: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
aukštis: 100%;
fonas-pritvirtinimas: fiksuotas;
fono padėtis: centras;
foninis pakartojimas: nekartoti;
fono dydis: viršelis;
paraštė-kairė: -410 taškų;
dešinė paraštė: -410 pikselių;
}

.paralaksas-turinys {
plotis: 50%;
paraštė: 0 auto;
spalva: #FFF;
padding-top: 50px;
}

Nepamirškite pakeisti fono paveikslėlio URL savo fono paveikslėliu.

Dabar galite išsaugoti pakeitimus ir apsilankyti svetainėje norėdami pamatyti, kaip ji veikia.

Parallax efektas pridedamas naudojant CSS

Pastaba: gali tekti koreguoti CSS, kad ji atitiktų jūsų svetainės išdėstymą.

Tikimės, kad šis straipsnis padėjo jums išmokti lengvai pridėti paralakso efektą prie bet kurios „WordPress“ temos. Taip pat galbūt norėsite pamatyti mūsų populiariausių „WordPress“ patarimų, gudrybių ir įsilaužimų sąrašą.

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