aion pitää tämän intron todella lyhyt.
tässä jutussa käsitellään:
- mitkä ovat taustakuvat
- mikä on parallaksitaustojen juttu?
- miten lisätä taustakuvia WordPress-verkkosivustollesi
- miten lähestyä kuvan kokoa WordPress-palvelussa
valmis, vakaa? Mennään!
Mitä ovat taustakuvat?
taustakuvat ovat kuvia, joita levitetään elementin taustalle verkkosivustolla, sähköpostissa jne. Vaikka sankarikuva on sivuston tai sähköpostin pääpaino, taustakuvat ovat hienovaraisempia. Ne tukevat muita sivuston elementtejä, toisena kerroksena: puhelut toimintaan, muut kuvat, sivuston eri osiot jne.
katsotaanpa esimerkkejä tällaisista taustakuvista:
IKEA
Ikean verkkosivujen kotisivuilla taustakuvat esittelevät inspiroivia tarinoitaan. Jutun otsikko ja luokka on sijoitettu kuvan päälle. Käytetään gradienttipäällystä niin, että se vähentää todellisen kuvan sameutta. Tämä lähestymistapa auttaa tekemään tekstin näkyvämmäksi, mutta se myös luo johdonmukaisuutta suunnitteluun, joten mikään väri erottuu enemmän kuin toinen.
Loving Vincent
yksi suosikkielokuvistani, tämä.
taustakuvat asettuvat karusellin taakse, joka esittää tarinoita Vincent van Goghin ja elokuvan takaa. Taustakuvat tuntuvat antavan voimaa tarinaan ja tuottavan vahvoja tunteita.
Lush
rakastan niin sitä, miten vehreä sivusto näyttää: värikäs ja eloisa kuin itse tuotteet.
nyt taustakuvissa voi käyttää kuvioita tai muotoja, kuten tässä uutiskirjeen rekisteröitymissivun esimerkissä. Nämä kuviot onnistuvat muuttamaan jotain mahdollisesti tylsää, jotain iloinen.
Parallaxin taustakuvat
jos katsot British Museumin verkkosivuja, huomaat, että niiden sivuilla on kuvia, joiden taustalla näkyy, miksi etualalla oleva sisältö rullaa alas. Nämä ovat parallaksitaustakuvia.
Parallax-vieritys on yksi niistä web-suunnittelutrendeistä, jotka onnistuvat lisäämään loistavan efektin verkkosivustoon, jos se on integroitu oikein.
tällaisen efektin voi saada myös WordPressissä, aion näyttää miten vähän myöhemmin.
miten lisätä taustakuvia WordPress-verkkosivustollesi
on kolme pääasiallista tapaa lisätä taustakuvia WordPress-verkkosivustollesi. Tarkastetaan ne.
-
lisäämällä taustakuvat kautta WordPress teema Customizer
suosituin WordPress teemoja on tämä vaihtoehto. Aion käyttää Colibri teema varten tämän esimerkin. Muut teemat käyttäytyvät samalla tavalla kuin Colibri-teema.
jos valitsemasi teema ei tue ominaisuutta, siirry menetelmiin 2 ja 3.
nyt, aloitetaan suuntaamalla yli ulkonäkö – > muokata WordPress kojelauta. Vasemmalla näet teeman muokkausvaihtoehdot, kun taas oikealla, on live esikatselu sivustosi.
teeman avulla voit asettaa taustakuvia:
- rivit
- sarakkeet
- lohkot (kokonaisia verkkosivuston osioita, kuten: tietoja minusta, portfolio, tiimi, yhteystiedot jne.)
- komponentit (nimikkeet, karusellit, hinnoittelutaulukot, karusellit jne.)
tapa, jolla voit tehdä tämän, on sama riippumatta siitä, missä tarvitset taustakuvan.
sanotaan, että haluat lisätä taustakuvan palvelujesi verkkosivujen estoon. Aloita valitsemalla osio. Vasemmalla näet muokkausasetukset valikon jäsennelty kuten alla:
- asettelu
- Tyyli
- Lisäasetukset
Siirry tyyliin – > Taustatyyppi.
Valitse ”kuva”. Näet nyt kuvan, jonka voit korvata omallasi. 
kun napsautat kuvaa, sinua pyydetään näytölle, jossa voit valita kuvan WordPress-mediagalleriasta tai voit ladata toisen kuvan.
kuten olet saattanut jo huomata, voit jopa lisätä videon taustaksi.
ja, on myös vaihto-vaihtoehto parallaksi-efektille!
nyt on toinen oikotie tehdä tämä taustakuvan muutos. Kun valitset lohkon oikealta, näet asetuskuvakkeen. Klikkaa sitä ja näet joitakin muokkausvaihtoehtoja.
jos valitset ”Muuta Taustaa”, sinut ohjataan” tyylin ” sisään jatkamaan edellä kuvatulla tavalla.
tämä oli kaikki porukkaa. Aika helppoa, vai mitä?
nyt, jos teemassasi ei ole taustakuvavaihtoehtoa, voit tehdä tämän WordPress-oletusmuokkaimessa.
-
taustakuvan lisääminen WordPress-lohkojen avulla
vuodesta WordPress kojelauta, pään yli ”sivut”. Nyt, Valitse ”muokata” alta haluamasi sivun. Näet käyttöliittymän kuten alla.
WordPress-oletusmuokkain on lohkopohjainen, eli jokainen verkkosivuston osio on tehty lohkoista. Näitä lohkoja voi käyttää mistä tahansa ” + ” – merkistä, jonka näet käyttöliittymässä. Napautetaanpa vasemmanpuoleista.
nyt, valitse ”kansi” – lohko. Näet sen ilmestyvän heti sivullesi.
voit ladata tietokoneellesi paikallisesti tallennetun kuvan tai valita olemassa olevista mediakirjastosta.
valitsin Kuvan mediakirjastosta. Nyt voin lisätä siihen tekstiä. Muokkausvaihtoehdot ovat melko rajalliset täällä.
jos valitset kannen, näet yllä näkyvän valikon, jossa voit kohdistaa kuvasi tai kopioida koko lohkosi. Voit jopa tallentaa lohkosi uudelleenkäytettäväksi, käytettäväksi uudelleen muissa malleissa.
nyt näytön oikealla puolella on joitain ylimääräisiä muokkausvaihtoehtoja.
media Inside-asetukset, Jos kytket kiinteän taustan asetuksen päälle, aktivoit parallax-efektin.
kun kytkin on pois päältä, voit säätää polttopistettä.
tämä polttopisteen säätö voidaan tehdä myös prosenttiperusteisesti ottaen huomioon leveys ja korkeus.
seuraavaksi voit lisätä peittokuvan. Voit valita sen värin ja läpinäkymättömyyden.
ja, olet tavallaan valmis.
-
lisäämällä taustakuvat kautta WordPress plugins
Tässä muutamia WordPress plugins tagged taustakuvan plugins. Aion pelata hieman yksinkertainen Koko näytön taustakuvan plugin koska se on eniten asentaa ja parhaat arvostelut toistaiseksi.
nyt, tässä opetusohjelma Miten asentaa WordPress plugin.
tällä liitännäisellä kuvat skaalautuvat automaattisesti selaimella, joten selaimen koosta riippumatta kuva täyttää aina näytön.
all you have to do is go to Appearance – > Fullscreen BG Image. Valitse kuva täältä.
kun painat ”Tallenna asetukset”, näet, että kaikki sivustosi osiot, joissa ei ole taustaa, saavat tämän kuvan taustana.
nyt tapahtuu näin ilmaisversiossa. Se on aika perus – eikä ollenkaan joustava. Maksettu suunnitelma tulee ylimääräisiä vaihtoehtoja, kuten:
- rajoittamaton taustakuvat
- Post / sivukohtaiset taustakuvat
- useita kuvia häivyttää siirtymät sivuilla
ja, olemme valmiita, olet juuri selvittänyt 3 menetelmiä voit lisätä taustakuvat WordPress sivuston.
on vielä yksi asia, jonka haluan sinun tietävän ennen kuin voimme lopettaa.
kuvakoot
ennen kuin lataat mitään kuvaa sivustollesi, kiinnitä huomiota sen kokoon. Kaikki katsovat megapikseleitä, mutta netissä on juju. Korkearesoluutioiset kuvat voivat vahingoittaa sivustoasi vaikuttamalla sen latausaikaan. Pitkällä aikavälillä, ylimääräinen lataus toinen saattaa menettää sinut sivuston kävijöitä ja tuloksia. Myös, voit merkittävästi vähentää mahdollisuuksiasi sijoitus hakukoneita, koska ikä nopeus on tärkeä ranking tekijä.
toisaalta liian pienten kuvien käyttäminen voi vahingoittaa myös käyttäjäkokemusta. Meidän on saatava rahat riittämään.
yksi tapa tehdä tämä on käyttää ulkoisia sovelluksia, joiden avulla voit muuttaa kuviesi kokoa varmistaen samalla oikean selkeyden.
mutta WordPress, voit tehdä tämän helposti käyttämällä…plugin, kuten ehkä jo arvata.
täällä Colibrilla ollaan Smush-faneja. Smush voi ja pakkaa kuvia ilman näkyvää laadun laskua.
pro-versiossa se myös muuntaa kuvat WebP: ksi, seuraavan sukupolven kuvaformaatiksi, joka voi pakata kuvatiedostokokoja jopa 35%, ilman selvää laadun heikkenemistä.
ja se on paketissa, ihmiset!
jos pidit tästä artikkelista ja haluat oppia lisää WordPress-verkkosivuston suunnittelusta, varmista, että tilaat Colibrin Youtube-kanavan ja seuraat meitä Twitterissä ja Facebookissan!