Monille blogi- ja verkkosivustojen rakentajille WordPress on välttämätön työkalu sivuston sisällön päivittämiseen nopeasti ja helposti. Monissa tapauksissa haluamme kuitenkin antaa verkkosivustollemme henkilökohtaisen ilmeen eri väreillä, kirjasinkokoilla ja -tyyleillä.
Tätä varten voimme muokkaa WordPress-mallin CSS-tyyliä. Mutta mikä on CSS? Kuinka voit käyttää CSS: ää blogisi ulkoasun muuttamiseen? Täällä me opetamme sinua.
Aloitetaan ensin ymmärtämällä, mikä CSS on. Lyhyesti sanottuna se on arkki koodiriveillä, jotka tarjoavat tyylin verkkosivun muodostaville HTML-elementeille.
Muuttamalla eri ominaisuuksien ja valitsimien arvoja voit muokata sivun ulkoasua. Selitämme lyhyesti, kuinka luoda tyylikäs CSS-otsikko Web-sivullesi ja pystyä siihen muokkaa css-tyyliä mallisi WordPressistä.
Kuinka muokata WordPress-mallin CSS: ää?
CSS-koodia voi muokata WordPressissä useita tapoja, mutta tässä selitämme yhden helpoimmista: dynaamisen editorin kautta itse sovelluksesta. Tämä ominaisuus on käytettävissä WordPressin versiosta 4.7 lähtien. Pelkästään napsauttamalla valikkoa ”Ulkoasu” → ”Mukauta” → ”Lisä-CSS”, pääset käyttämään CSS-muokkausaluetta, jolla on hyvät ominaisuudet.
Mutta nyt, mistä tiedät, mitä elementtejä haluat muokata sivullasi? Tätä varten käytämme elementtitarkastaja selaimesi kautta. Esimerkiksi Firefoxin avulla voit helposti ja helposti muokata tai muuttaa verkkosivusi tekstiä tai elementtiä.
Tätä varten avaamme verkkosivun tai WordPress-blogin, jonka ulkoasua haluamme muuttaa, ja sijoitamme itsemme muokattavaan elementtiin. Napsauttamalla sitä hiiren kakkospainikkeella valitsemme avattavasta valikosta ”Tarkasta”. Avautuu paneeli, jossa kyseisen elementin HTML-koodi näkyy toisella puolella ja CSS-koodit, jotka antavat sille tyylin.
Jopa samasta paneelista, kun löydät elementit, tarrat ja valitsimet, jotka haluat mukauttaa, voit yrittää ominaisuusarvojen muuttaminen haluamasi, jotta näet heti sen ulkonäön näytön vasemmalla puolella. Nyt sinun tarvitsee vain kirjoittaa CSS WordPressiin.
Kuinka korvata CSS-koodi WordPressissä?
Nyt kun tiedät elementit, joita haluat muokata WordPress CSS: ssä, palaa viestiin ja avaa dynaaminen editori. Myöhemmin, kirjoita tagi tai elementti, jota haluat muokata sen perusteella, mitä teit aiemmin selaimen tuotetarkastuksessa. Aseta lopuksi muutettavat ominaisuudet ja aseta uudet mukautetut arvot. Anna verkkosivustollesi ulkonäkö, josta pidät eniten!
Muista, että sinun on noudatettava CSS-koodin rakennetta selaimen elementtitarkastuksessa. WordPressin dynaamisen CSS-editorin etu on, että se tekee muokkaamisesta helppoa useilla ominaisuuksilla, kuten koodin korostuksella, joka auttaa luokkien, tunnisteiden ja arvojen tunnistamisessa. Lisäksi siinä on sisäänrakennettu tekstin automaattinen täydennys ja kirjoitusvirheilmaisin.
Voit muokata monia ominaisuuksia anna sivullesi makeover, Esimerkiksi: voit muuttaa tunnisteiden H1, H2, … edustamien otsikoiden ja tekstitysten ulkonäköä esimerkiksi seuraavilla ominaisuuksilla: font-size, text-family, color, background.
Voit myös helposti lisätä tai muuttaa FAVICONin, lomakekenttien taustan, painikkeiden värin ja tekstin niihin. Voit jopa muokata joidenkin elementtien ulkonäköä ennen toimintoa, kuten: valikon elementtien väri, kun viet hiiren hiiren päälle tai napsautat niitä.
Sinun täytyy kuitenkin Ole varovainen muutamien ominaisuuksien suhteen jotka kuuluvat tiettyihin CSS-koodin elementteihin. Koska nämä voivat muuttaa ja pilata verkkosivustosi rakennetta. Joitakin näistä ominaisuuksista ovat mm. Leveys, korkeus, pehmuste, marginaali, sijainti, näyttö. Jos et pysty tunnistamaan ominaisuutta, johon ominaisuus viittaa, älä muokkaa sitä.
Nyt blogisi tai verkkosivustosi mukauttaminen on palan kakkua! Suunnittele verkkosivustosi mieleisekseen ja muokkaa WordPressin otsikkoa ja alatunnistetta, mikä tekee siitä houkuttelevamman vierailijoille.