Seuraava artikkeli auttaa sinua: 4 helppoa tapaa vaihtaa taustaväriä WordPressissä
Totta puhuen:
Mikään ei ole turhauttavampaa kuin pelkkä valkoinen tausta, kun haluat eloisamman, katseenvangitsevan ja houkuttelevamman verkkosivuston!
Onneksi sinun ei tarvitse olla tekninen asiantuntija muuttaaksesi WordPress-verkkosivustosi taustaväriä!
Tässä artikkelissa opastetaan neljä yksinkertaista tapaa muuttaa taustaväriä WordPressissä muutamassa minuutissa.
Tapoja vaihtaa taustaväriä WordPressissä
Jos haluat piristää WordPress-sivustoasi, taustavärin vaihtaminen on hyvä paikka aloittaa. Voit suorittaa tämän tehtävän useilla tavoilla sisäänrakennetun teemamuokkaajan käytöstä erityisten laajennusten asentamiseen.
Tässä on neljä yksinkertaista tapaa lisätä uusi taustaväri WordPress-verkkosivustollesi.
1. Teeman mukauttaja
Yksinkertaisin tapa muuttaa verkkosivustosi taustaväriä on käyttää WordPress-teeman mukauttajaa. Vaikka useimmat teemat varaavat tämän ominaisuuden maksullisille käyttäjille, Astra tarjoaa sen ilmaiseksi (lue koko Astra-teeman arvostelu täältä). Näin voit testata sen itse.
1. Kirjaudu sisään WordPress-hallintapaneeliisi ja valitse Ulkoasu > Mukauta vasemmasta navigointivalikosta.
2. Teeman mukaan napsauta seuraavia vaihtoehtoja päästäksesi taustamuokkausvaihtoehtoon:
- Astra: Yleinen > Värit > Sivuston tausta
- Divi: Yleiset asetukset > Tausta > Taustavärit
- OceanWP: Yleiset asetukset > Yleinen tyyli > Taustavärit
3. Valitse mikä tahansa väri paletista ja napsauta Julkaista ylävalikkopalkissa.
2. Mukautettu CSS
Verkkosivustosi oletustaustaväri määräytyy CSS-nimisen koodin tyypin mukaan. Voit käyttää mitä tahansa väriä sivustosi taustalle säätämällä tätä koodia.
Mutta ensin sinun on muutettava valitsemasi väri kuusinumeroiseksi heksadesimaalikoodiksi. Käytä tätä ilmaista värinvalitsintyökalua luodaksesi mukautetun hex-värikoodin ennen kuin jatkat eteenpäin.
1. Kirjaudu sisään WordPress-tilillesi ja siirry osoitteeseen Ulkoasu > Mukauta.
2. Napsauta Ylimääräinen CSS vasemmassa valikkorivissä.
3. Kirjoita seuraava mukautettu CSS-koodi tekstikenttään:
.site { taustaväri: #XXXXXX; }
Korvata ‘XXXXXX‘ valitsemallasi hex-värikoodilla.
Huomautus: Jos ensimmäinen koodi ei toimi, yritä korvata “site” sanalla “body” mukautetussa CSS-koodissa.
4. Valitse Julkaista yläpalkista tallentaaksesi asetukset.
3. Koko sivustoeditori
WordPress esitteli Full Site Editor -sovelluksensa vuonna 2022 uusilla muokkausominaisuuksilla yksittäisille sivuille. Tämän päivityksen avulla käyttäjät voivat muokata verkkosivustonsa taustakuvaa tai väriä ostamatta premium-teemoja tai laajennuksia.
Tässä on ohjeet sen tekemiseen:
1. Kirjaudu sisään kojelautaan ja siirry osoitteeseen Ulkoasu > Teemat.
2. Valitse WordPress-teema, joka tukee Full Site Editoria ja napsauta Aktivoida. (Käytämme tässä esimerkissä arvoa Twenty Twenty-Three.)
3. Napsauta Toimittaja vasemmasta valikkopalkista. Kun näyttö on latautunut uudelleen, paina Muokata -painiketta.
4. Voit muuttaa taustaväriä napsauttamalla sinistä + -painiketta ylävalikosta ja hae Peite lohko. Napsauta kuvaketta hakeaksesi.
5. Valitse väri oletusväripaletista.
Huomautus: Jos haluat käyttää mukautettua väriä, vaihda kohtaan “Estä” ja sitten “Tyylit”-välilehti vasemmasta valikkopalkista. Napsauta “Peittokuva” ja luo oma yksivärinen tai liukuväri värinvalitsintyökalulla.
6. Napsauta Hampurilainen menu ylävalikossa ja vedä jokainen osio alle Peite.
7. Jos haluat muuttaa yksittäisen lohkon väriä, napsauta sitä ja siirry kohtaan Lohko ja Tyylit -välilehti oikeanpuoleisesta navigointipalkista.
8. Napauta Tausta ja valitse oma taustasi värinvalitsintyökalulla.
9. Kun olet tehnyt kaikki muutokset, napsauta Tallentaa painiketta kahdesti oikeassa yläkulmassa.
4. Lohkoeditori
WordPress Block Editorissa on piilotettu ominaisuus, jonka avulla voit muuttaa verkkosivustosi tiettyjen osien taustaväriä.
Voit kokeilla erilaisia sävyjä käyttämällä sisäänrakennettua väripalettia ja valita useista yhtenäisistä ja liukuväristä.
1. Kirjaudu sisään WordPressiin ja napsauta jompaakumpaa Sivut tai Viestit.
2. Valitse sivu/julkaisu, jota haluat mukauttaa ja napauta Muokata.
3. Napsauta + -kuvaketta lisätäksesi otsikon tai kappaleen.
4. Vaihda vasemmasta sivupalkista kohtaan Lohko ja valitse Tausta.
5. Valitse yksivärinen tai liukuväri ja napsauta Päivittää ylävalikosta.
Kuinka muuttaa yhden sivun taustaväriä
Oikean taustavärin valitseminen voi olla kriittistä napsautussuhteen ja tulojen kannalta. Otetaan Heinz esimerkkinä; se myi yli 10 miljoonaa pulloa ketsuppia 7 kuukaudessa sen jälkeen, kun sen värit muuttuivat punaisesta vihreäksi!
Silmiinpistävän taustavärin käyttäminen tulossivullasi voi luoda saman vaikutuksen uudelleen ja lisätä myyntiäsi merkittävästi. Tässä on ohjeet yksittäisen verkkosivun taustavärin muuttamiseen WordPressissä.
1. Avaa muokattava viesti/sivu verkkosivustollasi.
2. Napsauta hiiren kakkospainikkeella ja valitse Tarkastaa.
3. Etsi post id -luokka ja kopioi tunnus. (Paina Ctrl+F tai Cmd+F ja kirjoita “artikkeli” löytääksesi viestin tunnus.)
4. Siirry WordPress-hallintapaneeliin ja napsauta Ulkoasu > Mukauta.
5. Avaa Ylimääräinen CSS -välilehti vasemmasta valikosta.
6. Liitä seuraava koodinpätkä:
.post-xxx { taustaväri: #FFFFFF; väri:#000000; }
Korvata xxx ‘.post-‘:n jälkeen aiemmin kopioidulla ID-luokalla. Jos haluat muuttaa taustaväriä, vaihda FFFFFF valitsemallasi hex-värikoodilla. Toista sama kanssa 000000 kolmannella rivillä muokataksesi kyseisen viestin/sivun tekstin väriä.
7. Osuma Julkaista tallentaaksesi muutokset.
Kuinka lisätä videotausta WordPressiin
Videotaustan käyttäminen voi olla loistava tapa tehdä vaikutuksen vierailijoihin brändistäsi ja kouluttaa niitä. Koska useimmissa WordPress-teemoissa ei ole sisäänrakennettua toimintoa videotaustan lisäämiseksi, käytämme Advanced WordPress Backgrounds -laajennusta tähän menetelmään.
1. Kirjaudu sisään WordPressiin ja napsauta Plugins > Lisää uusi vasemmasta navigointivalikosta.
2. Kirjoita hakupalkkiin “Advanced WordPress Backgrounds”. Klikkaus Asenna nyt ja Aktivoida.
3. Siirry kohtaan Sivut käyttämällä vasenta valikkoa ja napsauttamalla Muokata sivulla, jota haluat muokata.
4. Napauta + -painiketta vasemmassa yläkulmassa ja etsi AWB lohko. Lisää se sivullesi napsauttamalla.
5. Siirry oikeanpuoleisessa navigointipalkissa kohtaan Video. (Voit myös lisätä taustakuvia vaihtamalla Kuva välilehti.)
- Käytä online-videota liittämällä YouTube- tai Vimeo-linkki Videon URL-osoite -tekstikentän alle.
- Ota ladattu video käyttöön siirtymällä kohtaan Itse isännöimä -välilehti. Valitse jokin videomuodoista ja lataa leike tietokoneeltasi Mediakirjastoon.
6. Muokkaa videota seuraavilla parametreilla:
- Aloitus/lopetusaika
- Loop ja Always Play
- Tausta- ja peittoväri
- Hiiri ja Standard Parallax
- Välit
7. Napsauta + -painiketta lisätäksesi lohkoja videon päälle. Kun lisäät sisältöä, AWB säätää automaattisesti videon mitat.
8. Paina Päivittää -painiketta oikeassa yläkulmassa julkaistaksesi muutokset.
UKK
Tässä on joitain vastauksia yleisiin kysymyksiin taustaväreistä WordPressissä!
Kuinka muutan fontin väriä WordPressissä?
Jos käytät oletusteeman mukauttajaa, löydät vaihtoehdon fontin värin vaihtamiseen kohdasta Maailmanlaajuinen tai Yleiset asetukset. Koko sivustoeditoria käyttävät ihmiset voivat löytää tämän vaihtoehdon kohdasta Estä-asetukset taustavalitsimen yläpuolella.
Kuinka muutan otsikon taustavärin WordPressissä?
Jos haluat muuttaa WordPress-sivustosi otsikon väriä, siirry osoitteeseen Ulkoasu > Mukauta ja klikkaa Ylimääräinen CSS. Liitä seuraava koodinpätkä ja vaihda se XXXXXX valitsemasi taustavärin heksadesimaalikoodilla:
.site-header { taustaväri: #XXXXXX; }
Kuinka vaihdan WordPress-teeman pääväriä?
Kirjaudu sisään WordPress-hallintapaneeliisi ja siirry osoitteeseen Ulkoasu > Mukauta. Valitse Maailmanlaajuinen tai värit vasemmasta valikosta riippuen käyttämästäsi teemasta. Klikkaa Ensisijainen teemaväri tai Korostusväri ja valitse sävy paletin avulla. Osuma Julkaista kun olet valmis.
Johtopäätös
Värit voivat vaikuttaa suuresti siihen, miten asiakkaat näkevät verkkosivustosi tai verkkokauppasi. Valitsemalla tasaisen taustavärin voit luoda persoonallisuuden, joka resonoi kohdeyleisösi kanssa ja edistää kasvua.
Jos haluat tehdä dramaattisempia mukautuksia verkkosivustollesi, tutustu 15 parhaan animoidun WordPress-teeman luetteloomme.
Tai jos haluat oppia lisää CSS:stä, lue opas 3 yksinkertaisesta tapasta muokata CSS:ää WordPressissä suunnittelua rikkomatta.
