ezt a bevezetőt nagyon rövidre fogom tartani.
itt van, amit fogunk megvitatni ebben a cikkben:
- mik azok a háttérképek
- mi a helyzet a parallaxis háttérrel?
- hogyan lehet háttérképeket hozzáadni a WordPress webhelyéhez
- hogyan lehet megközelíteni a képméretet a WordPress alkalmazásban
Kész, stabil? Gyerünk!
mik azok a háttérképek?
a Háttérképek olyan képek, amelyeket egy elem hátterére alkalmaznak egy webhelyen, egy e-mailben stb. Míg a hős kép a weboldal vagy az e-mail fő fókuszpontja, a háttérképek finomabbak. Második rétegként támogatják a weboldal más elemeit: cselekvésre ösztönzést, egyéb képeket, a webhely különböző részeit stb.
vessünk egy pillantást néhány ilyen háttérképre:
IKEA
az IKEA weboldalának honlapján háttérképeket használnak inspiráló történeteik bemutatására. A történet címe és kategóriája a kép tetejére kerül. Van egy gradiens átfedés, amely csökkenti a tényleges kép átlátszatlanságát. Ez a megközelítés segít a szöveg láthatóbbá tételében, de következetességet teremt a tervezésben is, így egyetlen szín sem tűnik ki jobban, mint egy másik.
szerető Vincent
az egyik kedvenc filmem, ez.
háttérképeket feküdt mögött egy körhinta, amely bemutatja történetek mögött Vincent Van Gogh és a film. A háttérképeket úgy tűnik, hogy felhatalmazza a történet, és szállít erős érzelmek.
Lush
annyira szeretem, hogy a Lush weboldal úgy néz ki: színes és élénk, mint maguk a termékek.
mostantól a háttérképek mintákat vagy alakzatokat használhatnak, mint például ebben a hírlevél feliratkozási oldalon. Ezeknek a mintáknak sikerül valami potenciálisan unalmasat, valami vidámvá alakítani.
parallaxis háttérképek
ha megnézi a British Museum weboldalát, észreveheti, hogy az oldalakon olyan képek vannak, amelyek a háttérben fekszenek, miért gördül le az előtér tartalma. Ezek parallaxis háttérképek.
a parallaxis görgetés egyike azoknak a webdesign trendeknek, amelyek megfelelő integráció esetén ragyogó hatást tudnak hozzáadni egy webhelyhez.
ilyen hatást szerezhet a WordPress-ben is, megmutatom, hogyan egy kicsit később.
hogyan lehet háttérképeket hozzáadni a WordPress webhelyéhez
három fő módja van a háttérképek hozzáadásának a WordPress webhelyéhez. Nézzük meg őket, rendben?
-
háttérképek hozzáadása a WordPress theme Customizer segítségével
a legnépszerűbb WordPress témákban elérhető ez a lehetőség. A példa céljára A Colibri témát fogom használni. Más témák hasonlóan viselkednek, mint a Colibri téma.
ha a kiválasztott téma nem támogatja a funkciót, ugorjon a 2.és 3. módszerre.
most kezdjük azzal, hogy a megjelenés -> testreszabás a WordPress irányítópultjáról. A bal oldalon láthatja a téma testreszabási szerkesztési lehetőségeit, míg a jobb oldalon a webhely élő előnézete látható.
a téma lehetővé teszi, hogy helyezze háttérképeket:
- sorok
- oszlopok
- blokkok (teljes weboldal szakaszok, például: rólam, Portfólió, csapat, Kapcsolat stb.)
- alkatrészek (címsorok, körhinta, árazási táblázatok, körhinta stb.)
az út, amit tehetünk, ez ugyanaz, nem számít, hol van szüksége a háttérképet.
tegyük fel, hogy háttérképet szeretne hozzáadni a szolgáltatások webhelyblokkjához. Kezdje a szakasz kiválasztásával. A bal oldalon látni fogja a szerkesztési lehetőségeket az alábbiak szerint strukturált menüben:
- elrendezés
- Stílus
- haladó
ugrás a stílus – > háttér típusa elemre.
válassza a “Kép”lehetőséget. Most látni fog egy képet, amelyet kicserélhet a sajátjára. 
amikor rákattint a képre, megjelenik egy képernyő, ahol kiválaszthat egy képet a WordPress média galériából, vagy feltölthet egy másik képet.
mint már észrevetted, akár videót is hozzáadhat háttérként.
és van egy kapcsoló opció is a parallaxis effektushoz!
most van egy másik parancsikon a háttérkép megváltoztatásához. Amikor kiválaszt egy blokkot a jobb oldalon, látni fogja a Beállítások ikont. Kattintson rá, és látni fogja a szerkesztési lehetőségeket.
ha a “Háttér módosítása” lehetőséget választja, akkor a “stílus” belsejébe irányítja, hogy a fent leírtak szerint járjon el.
ez mind emberek. Elég könnyű, igaz?
most, ha a téma nem rendelkezik háttérkép opcióval, van egy módja ennek a WordPress alapértelmezett szerkesztőben.
-
háttérkép hozzáadása a WordPress blokkok segítségével
a WordPress irányítópultján lépjen át az “oldalak”pontra. Most válassza a “Szerkesztés” lehetőséget a kívánt oldal alatt. Az alábbiakban látható felületet fog látni.
az alapértelmezett WordPress szerkesztő blokk alapú, ami azt jelenti, hogy minden weboldal szakasz blokkokból áll. Ezek a blokkok bármely “+” jelből elérhetők, amelyet a felületen lát. Kattintsunk a bal felső sarokban lévőre.
Most válassza ki a “borító” blokkot. Látni fogja, hogy azonnal megjelenik az oldalán.
feltölthet egy képet, amelyet helyileg tárol a számítógépén, vagy választhat a médiakönyvtárban meglévők közül.
kiválasztott egy képet a Médiakönyvtárból. Most hozzá tudok adni egy kis szöveget. A szerkesztési lehetőségek itt meglehetősen korlátozottak.
ha kiválasztja a borítót, megjelenik egy menü, amely fent jelenik meg, ahol igazíthatja a képet, vagy lemásolhatja az egész blokkot. Akár azt is menteni a blokk, mint egy újrafelhasználható egy, hogy újra használható más minták.
most a képernyő jobb oldalán van néhány extra szerkesztési lehetőség.
a médiabeállításokon belül, ha bekapcsolja a rögzített háttér opciót, aktiválja a parallaxis effektust.
ha a kapcsoló ki van kapcsolva, beállíthatja a fókuszpontot.
ez a fókuszpont-beállítás százalékos alapon is elvégezhető, figyelembe véve a szélességet és a magasságot.
ezután hozzáadhat egy átfedést. Kiválaszthatja a színét és az átlátszatlanságot.
és kész.
-
háttérképek hozzáadása WordPress beépülő modulokon keresztül
Íme néhány WordPress bővítmény, amelyet háttérkép-bővítményként címkéztek meg. Fogok játszani egy kicsit az egyszerű teljes képernyős háttérkép plugin, mert a legtöbb telepítések és a legjobb értékelés eddig.
most itt van egy bemutató a WordPress plugin telepítéséről.
ezzel a bővítménnyel a képek automatikusan méreteződnek a böngészővel, így a böngésző méretétől függetlenül a kép mindig kitölti a képernyőt.
mindössze annyit kell tennie, hogy menjen a megjelenés -> teljes képernyős BG kép. Innen válassza ki a képet.
amikor megnyomja a “Beállítások mentése” gombot, látni fogja, hogy a webhely összes szakasza háttér nélkül háttérként megkapja ezt a képet.
most, ez az, ami történik az ingyenes verzió. Ez elég egyszerű és egyáltalán nem rugalmas. A fizetett terv extra opciókkal rendelkezik, mint például:
- Korlátlan háttérkép képek
- hozzászólás / oldal-specifikus háttérképeket
- több kép fade átmenetek oldalakon
és kész vagyunk, most kiderült, hogy a 3 módszerek segítségével hozzá háttérképeket a WordPress oldalon.
van még egy dolog, amit szeretném, ha tudnátok, mielőtt befejezhetnénk.
képméretek
mielőtt bármilyen képet feltöltene a webhelyére, ügyeljen a méretére. Tudom, hogy mindannyian a megapixeleket nézzük, de az interneten van egy fogás. A nagy felbontású képek károsíthatják webhelyét, mivel befolyásolják annak betöltési idejét. Hosszú távon minden extra betöltési másodperc elveszítheti a webhely látogatóit és a konverziókat. Ezenkívül jelentősen csökkenti a keresőmotorokban való rangsorolás esélyét, mert az életkor sebessége fontos rangsorolási tényező.
másrészt a túl kicsi képek használata károsíthatja a felhasználói élményt is. Szóval, meg kell élnünk.
ennek egyik módja a külső alkalmazások használata, amelyek segítenek a képek átméretezésében, miközben biztosítják a megfelelő tisztaságot.
de a WordPress-ben ezt egyszerűen megteheti egy…plugin segítségével, amint azt már kitalálta.
itt, a Colibri-nál Smush rajongók vagyunk. A Smush képes tömöríteni a képeket a minőség látható csökkenése nélkül.
a pro verzió, akkor is konvertálni képeket WebP, a következő generációs képformátum, amely képes tömöríteni képfájl mérete akár 35%, nem nyilvánvaló minőségromlás.
és ez egy wrap, emberek!
ha tetszett ez a cikk, és többet szeretne megtudni a WordPress weboldal tervezéséről, győződjön meg róla, hogy feliratkozik a Colibri Youtube-csatornájára, és kövessen minket a Twitteren és a Facebook-on!