Kako dodati učinek Parallax v katero koli temo WordPress

Pred kratkim nas je eden od naših bralcev vprašal, kako dodati učinek paralakse katerikoli WordPress temi? Učinek Parallax je trend spletnega oblikovanja, pri katerem se slika ozadja pomika počasneje kot vsebina v ospredju. V tem članku vam bomo pokazali, kako enostavno dodati učinek paralakse katerikoli temi WordPressa.


Dodajanje učinka paralakse v katero koli temo WordPressa

Kaj je učinek paraleksa?

Učinek Parallax je sodobna tehnika spletnega oblikovanja, pri kateri se elementi ozadja pomikajo počasneje od vsebine novega besedila. Ta učinek doda globino slik v ozadje in jih počuti interaktivne.

Učinek Parallax je mogoče uporabiti na ciljnih straneh, vsebini z dolgo obliko, na prodajnih straneh ali na domači strani poslovnega spletnega mesta. Odličen način za poudarjanje različnih odsekov na dolgi strani.

Številne vrhunske WordPress teme imajo na svoji domači strani vgrajen učinek paralakse. Učinek paralakse lahko uporabite tudi v večini vtičnikov za oblikovalce strani WordPress.

Vendar pa vse teme nimajo vgrajenega učinka paralakse in morda ne boste želeli uporabljati ustvarjalca strani za ustvarjanje postavitev strani po meri samo za učinek paralakse..

Oglejmo si, kako preprosto dodati učinek ozadja paralakse kateri koli temi WordPressa.

1. način: Dodajte učinek Parallax v katero koli temo WordPress z uporabo vtičnika

Ta metoda ne zahteva, da v svojo WordPress temo dodate nobeno kodo. To je lažje in priporočljivo za večino uporabnikov.

Prvo, kar morate storiti, je namestiti in aktivirati vtičnik Advanced WordPress Backgrounds. Za več podrobnosti glejte naš korak za korakom navodila za namestitev vtičnika WordPress.

Po aktiviranju morate urediti stran ali objavo, kamor želite dodati učinek paralakse. V vizualnem urejevalniku boste opazili nov gumb “Napredna ozadja WordPress”.

WordPress napredni gumb za ozadje

S klikom nanj se prikaže pojavno okno, v katerem lahko spremenite različne nastavitve za ozadje, ki ga želite dodati.

Najprej morate izbrati sliko kot vrsto ozadja in nato preveriti možnost ‘stretch’.

Nastavitve ozadja Parallax

Nato morate za prenos ali izbiro slike, ki jo želite uporabiti, klikniti na gumb »Izberi sliko«. Prepričajte se, da uporabljate veliko sliko, sicer bo videti slikovno.

Po tem morate omogočiti Parallax z izbiro vrste paralaksa. Na voljo je več stilov, s katerimi lahko eksperimentirate. Najpogosteje uporabljeni učinek paralakse je drsenje.

Za nadaljevanje kliknite na gumb Vstavi.

Vtičnik bo zdaj dodal kratko kodo v vaš urejevalnik sporočil WordPress. Videti bo nekako takole:

[nk_awb awb_type = ”slika” awb_stretch = “resnična” awb_image = ”22 ″ awb_image_size =“ polna ”awb_parallax =“ pomaknite ”awb_parallax_speed =” 0,5 ″ awb_mouse_parallax = ”true” awb_mouse_parallax = “true” awb_mouse_parallax

Vaša vsebina tukaj

[/ nk_awb]

Nadomestite »Vaša vsebina tukaj« s svojo vsebino in nato shranite svojo stran.

Zdaj lahko obiščete vaše spletno mesto in si ogledate akcijo.

Predogled učinka Parallax

2. način: Dodajte učinek Parallax v katero koli WordPress temo s CSS

Ta metoda zahteva, da dobro razumete HTML / CSS in tudi, kako delujejo teme WordPress.

Najprej boste morali obiskati sliko, ki jo želite uporabiti za učinek paralakse, v svojo medijsko knjižnico WordPress Mediji »Dodaj novo stran.

Ko naložite sliko, morate kopirati URL slike z urejanjem slike v medijski knjižnici WordPress.

Kopiraj URL slike

Nato morate na stran ali objavo dodati naslednji HTML, kjer želite pokazati učinek paralakse. Ta HTML lahko dodate tudi v svojo WordPress temo ali otroško temo.

Vaša vsebina je tu…

Nato morate svoji temi WordPress dodati naslednji CSS po meri.

.paralaksa {
slika ozadja: URL ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
višina: 100%;
pritrditev ozadja: fiksna;
ozadje-položaj: sredina;
ozadje-ponovite: brez ponovitve;
velikost ozadja: platnica;
meja levo: -410px;
meja-desno: -410px;
}

.vsebina paralakse {
širina: 50%;
marža: 0 samodejno;
barva: #FFF;
oblazinjeni vrh: 50px;
}

Ne pozabite nadomestiti URL-ja slike za ozadje s svojo sliko ozadja.

Zdaj lahko shranite svoje spremembe in obiščete svoje spletno mesto in si ogledate, kako deluje.

Parallax učinek dodan s CSS

Opomba: Morda boste morali prilagoditi CSS, da bo deloval s postavitvijo spletnega mesta.

Upamo, da vam je ta članek pomagal naučiti, kako preprosto dodati učinek paralakse v katero koli temo WordPressa. Mogoče si želite ogledati tudi naš mega seznam najbolj iskanih nasvetov, trikov in haksov za WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me