Teema on asennettu, sisältö on paikoillaan, ja sivusto näyttää... ei miltään. Sisäänrakennettu WordPressin mukauttaja kattaa perusskenaariot: taustavärin, logon, sivupalkin widgetit. Mutta heti kun haluat siirtää otsikkoa 10 pikseliä vasemmalle, vaihtaa tietyn painikkeen fonttia tai lisätä liukuväritaustan yksittäiseen lohkoon, vakiosäätimet eivät riitä. Eikä kukaan halua sukeltaa style.css-tiedostoon jokaisen pienen säädön jälkeen.

Yellow Pencil ratkaisee tämän ongelman suoraan. Se on visuaalinen CSS-editori: klikkaat sivun elementtiä ja muutat välittömästi fontteja, värejä, välistyksiä, reunuksia ja animaatioita kirjoittamatta riviäkään koodia. Lisäosa tuottaa puhdasta CSS:ää lennossa ja jättää teematiedostosi koskemattomiksi.

Tämän oppaan loppuun mennessä säädät ulkoasuja nopeammin kuin front-end-kehittäjä ehtii avata koodintarkastimen, ja ilman riskiä rikkoa mitään.

💡 Pikakatsaus:

• Asenna Yellow Pencil WordPress.org-hakemistosta (ilmainen) tai lataa Pro-versio viralliselta verkkosivustolta
• Aktivoi lisäosa ja avaa visuaalinen editori tervetuloruudun "Let's Start" -painikkeella
• Valitse mukautustyyppi: yleinen (koko sivusto), yksittäinen sivu tai artikkelipohja
• Klikkaa sivun elementtejä ja säädä niiden ulkoasua oikean paneelin kautta: fontit, väri, reunukset, tausta, animaatio
• Tallenna muutokset ja tarkista responsiivisuus sisäänrakennetulla tabletti- ja puhelinemulaattorilla

Mikä Yellow Pencil on ja miksi tarvitset sitä

Yellow Pencil on visuaalinen CSS-muokkauslisäosa WordPressille. Tärkeä ero heti alkuun: tämä ei ole sivunrakentaja kuten Elementor tai Gutenberg. Lisäosa ei lisää uusia lohkoja, vaan se muotoilee olemassa olevia. Niitä, jotka loit millä tahansa rakentajalla, tai niitä, jotka tulevat teemasi mukana.

Sen ytimessä on elementtitarkastin: klikkaa otsikkoa, painiketta tai kuvaa, niin saat heti käyttöösi yli 60 CSS-ominaisuutta oikeassa paneelissa. Liikuta liukusäädintä, ja sivu muuttuu reaaliajassa. Ei enää "muokkaa koodia → päivitä selain → ei sovi → toista" -kiertoa.

Lisäosa toimii minkä tahansa WordPress-teeman kanssa eikä muokkaa sen tiedostoja. Kaikki muokkaukset tallennetaan erilliseen tyylitiedostoon ja ladataan dynaamisesti. Teema pysyy koskemattomana, muutokset voi peruuttaa, viedä käyttövalmiina CSS:nä tai poistaa lisäosan mukana.

Kuka tätä tarvitsee? Ensisijaisesti ne, jotka eivät kirjoita CSS:ää käsin, mutta haluavat hioa ulkoasua visuaalisesti. Kokeneetkin kehittäjät arvostavat kuitenkin nopeutta: sen sijaan, että muokkaisit lähdetiedostoja ja lataisit sivun uudelleen, hiiren klikkaus tuottaa välittömän tuloksen. Freelancerit ja toimistot käyttävät Yellow Penciliä nopeaan asiakassivuston mukauttamiseen ilman riskiä vahingoittaa jonkun toisen teemaa.

Yellow Pencilin tärkeimmät ominaisuudet

Ominaisuuksia on paljon, mutta ne kaikki pyörivät yhden ajatuksen ympärillä: ota mikä tahansa sivun elementti ja muuta sen ulkoasua visuaalisen käyttöliittymän kautta. Alla ovat Pro-version tärkeimmät ominaisuudet (v7.6.7, ajantasainen vuonna 2026):

• Elementtitarkastin: minkä tahansa lohkon, tekstin tai kuvan klikkaaminen avaa paneelin, jossa on kaikki saatavilla olevat CSS-ominaisuudet
• **Visuaalinen **drag and drop: muuta elementtien sijaintia hiirellä koodia muokkaamatta
• Koon muuttaminen: vedä elementin ympärillä olevan sinisen kehyksen reunoja, niin koko muuttuu visuaalisesti
• Yli 900 Google Fonttia: ota ne käyttöön yhdellä klikkauksella lisäosan sisäänrakennetusta kirjastosta
• Yli 300 taustakuviota: sekä liukuvärejä, tasavärejä ja omia kuvia
• Yli 50 animaatiota: valmiita CSS-animaatioita visuaalisella hallintatyökalulla ja mukautetulla keyframe-generaattorilla
• CSS-koodieditori: niille, jotka haluavat kirjoittaa tyylejä käsin, automaattisella täydennyksellä ja virhetarkistuksella
• Responsiivinen tila: erillinen tyylien muokkaus työpöydälle, tabletille ja puhelimelle

Lisäosa tuottaa CSS:n dynaamisesti ja lataa sen erillisenä tyylitiedostona. Sivuston suorituskykyyn tämä ei vaikuta; mukaan lisätään tasan yksi tyylitiedosto, ei mitään muuta.

Yellow Pencilin asentaminen

Asennus ei eroa muista WordPress-lisäosista. Hanki ensin tiedosto: ilmainen versio on saatavilla WordPress.org-hakemistossa, kun taas Pro ostetaan kehittäjän viralliselta verkkosivustolta (yhden sivuston lisenssi, elinikäiset päivitykset). Jotkin premium-teemat sisältävät Yellow Pencil Pron paketissa.

Avaa WordPressin hallintapaneeli ja siirry kohtaan "Lisäosat" → "Lisää uusi".

Klikkaa "Upload Plugin" → "Choose File."

Valitse ladattu ZIP-arkisto waspthemes-yellow-pencil.zip ja klikkaa "Install Now."

Asennuksen jälkeen klikkaa "Activate." Pro-versiossa syötä lisenssiavain (se saapuu sähköpostitse oston jälkeen). Aktivointi avaa päivitykset ja kaikki Pro-ominaisuudet.

Yellow Pencilin tervetulosivu tulee näkyviin. "Resources"-osiosta löydät dokumentaation, oppaat ja tukilinkit.

Klikkaa "Let's Start", niin siirryt heti visuaaliseen editoriin nykyisellä sivuston sivulla.

Käyttöliittymä: kolme editorin vyöhykettä

Yellow Pencilin käyttöliittymä jakautuu kolmeen vyöhykkeeseen. Vasemmalla on kapea työkalupalkki, jossa on kuvakkeet: elementtitarkastin, kumoa- ja tee uudelleen -toiminnot, koko näytön tila, responsiivisuustyökalu ja mittaviivain. Paneeli on minimalistinen eikä häiritse muokattavaa sivua.

Oikealla on editoripaneeli. Kun mitään elementtiä ei ole valittu, se näyttää kolme käytettävissä olevaa muokkaustyyppiä.

Kun klikkaat sivulla olevaa elementtiä, paneeli vaihtuu tyyliominaisuuksiin: fontit, värit, välistykset, reunukset.

Valitun elementin ympärille ilmestyy sininen kehys, jossa on kokokahvat. Elementtiä voi siirtää raahaamalla ja sen kokoa muuttaa vetämällä kehyksen reunoista.

Keskimmäisen vyöhykkeen varaa itse sivu: näet sen sellaisena kuin kävijät sen näkevät, ja muokkaat sitä reaaliajassa.

Päätyökalut

Vasemmassa paneelissa on kolme työkalua, joita käytät jatkuvasti:

• Elementtitarkastin: valitsee minkä tahansa visuaalisen elementin sivulta muokattavaksi. Klikkaa otsikkoa, painiketta tai lohkoa, niin kaikki sen CSS-ominaisuudet tulevat näkyviin oikeaan paneeliin.
• Kumoa ja tee uudelleen: kokeiletko värejä ja fontteja? Paina "kumoa", jos menit liian pitkälle. Muokkaushistoria säilyy, kunnes poistut editorista.
• Koko näytön tila: piilottaa WordPressin hallintapaneelin, jättäen näkyviin vain sivun ja editoripaneelit. Hyödyllinen tarkkaan asemointiin.

Oikean paneelin yläreunassa on kolme ratkaisevan tärkeää painiketta:

• Esikatselu: näyttää sivun ilman editorin käyttöliittymää. Näin näet lopputuloksen kävijän silmin.
• Palauta muutokset: peruuttaa kaikki tallentamattomat muokkaukset. Hyödyllinen, kun olet innostunut liikaa ja kadottanut punaisen langan.
• Tallenna: ottaa muutokset käyttöön. Tallennuksen jälkeen muokkaukset näkyvät kaikille sivuston kävijöille.

Kolme muokkaustilaa: milloin mitäkin kannattaa käyttää

Ennen kuin aloitat muokkaamisen, Yellow Pencil pyytää sinua valitsemaan muutosten laajuuden. Editoripaneelissa (kun mitään ei ole valittuna) näkyy kolme vaihtoehtoa:

• Yleinen mukautus: muutokset koskevat kaikkia sivuston sivuja. Vaihda kaikkien H2-otsikoiden väri, ja ne vaihtuvat kaikkialla (etusivu, blogi, yhteystiedot-sivu).
• Yksittäisen sivun mukautus: muokkaukset koskevat vain sitä sivua, jota olet muokkaamassa. Ihanteellinen laskeutumissivuille ja uniikeille osioille.
• Mallipohjan mukautus: muutokset koskevat kaikkia saman tyypin julkaisuja. Haluatko kaikkien tuotesivujen näyttävän samalta? Tämä tila on sinua varten.

Nykyinen tila näkyy editoripaneelin yläreunassa. Tarkista aina, että muokkaat oikeaa tyyppiä ennen tallentamista: yleisen ja sivukohtaisen mukautuksen sekoittaminen on helppoa, ja seuraukset näkyvät välittömästi koko sivustolla.

Mitä Yellow Pencilillä voi tehdä: käytännön läpikäynti

Alla on keskeisten ominaisuuksien erittely aitojen esimerkkien kera. Jokainen toimenpide tehdään klikkaamalla elementtiä ja valitsemalla oikea osio oikeanpuoleisesta paneelista.

Typografia

Teksti on ensimmäinen asia, johon ihmiset tarttuvat lisäosan asennettuaan. Klikkaa mitä tahansa tekstilohkoa ja valitse editoripaneelista "Text". Kaikki perusominaisuudet ovat käytettävissä: fontin vaihto (yli 900 vaihtoehtoa Google Fontsista Pro-versiossa), koko, rivikorkeus, kirjainväli ja sanaväli. Tekstin värin voit valita sisäänrakennetuista paleteista (material ja flat) tai asettaa pipetillä.

Suurin etu on live-esikatselu. Siirrät fonttikoon liukusäädintä ja näet heti, miten asettelu muuttuu. Tämä on paljon nopeampaa kuin "muokkaa CSS:ää → päivitä sivu → ei sovi → toista" -kierto.

Reunukset

Lohkon ympärillä oleva reunus on yksinkertainen tapa korostaa korttia, lainausta tai tilauslomaketta. Valitse elementti ja siirry editoripaneelin "Border"-välilehdelle. Käytettävissä on neljä tyyliä: solid, dashed, dotted ja hidden.

Ominaisuus, joka useimmilta kilpailijoilta puuttuu: jokainen neljästä reunuksen sivusta voidaan määrittää erikseen. Yläreuna on punainen katkoviiva, vasen on sininen yhtenäinen, oikea on vihreä, alareunaa ei ole. Kunkin sivun leveys, väri ja tyyli asetetaan itsenäisesti, mikä antaa suunnitteluvapautta ilman yhtäkään koodiriviä.

Tausta

Elementin tausta määritetään "Background"-välilehdellä. Kolme vaihtoehtoa on käytettävissä: tasainen väri (pipetti tai paletti), yksi yli 300 sisäänrakennetusta kuviosta ja CSS-liukuväri (lineaarinen tai radiaalinen). Voit ladata oman kuvan ja määrittää sen sijainnin, toistokäyttäytymisen ja vierityskäyttäytymisen.

Taustakuviot ovat mukava yksityiskohta, joka säästää aikaa. Sen sijaan että etsisit tekstuureja kuvapankeista, valitset kuvion kirjastosta, vaihdat sen värin ja peittävyyden, ja saat siistin lohkon taustan parilla klikkauksella.

Animaatio

"Animation"-välilehti antaa pääsyn yli 50 valmiiseen CSS-animaatioon: fade in, fade out, bounce, rotate, pulse ja muihin. Valitset efektin visuaalisesta hallintatyökalusta, asetat keston ja viiveen, ja näet heti elementin heräävän eloon.

Mukautettuja skenaarioita varten on animaatiogeneraattori (Pro): määrittelet avainkehykset visuaalisessa editorissa, ja lisäosa tuottaa CSS @keyframes -säännöt. Useita animaatioita voi ajaa samanaikaisesti monimutkaista elementin käyttäytymistä varten.

Koko ja sijainti

Elementin koon muuttaminen on kirjaimellisesti reunojen vetämistä. Elementin klikkaaminen näyttää sinisen kehyksen, jossa on kahvat kulmissa ja sivuilla. Vedä kahvasta, ja koko muuttuu.

Sijainnin muuttaminen on vielä yksinkertaisempaa: tartu elementtiin hiirellä ja vedä se haluttuun paikkaan.

Yksi varoitus: vetäminen voi rikkoa responsiivisuuden. Kun olet siirtänyt elementtejä, tarkista aina, miltä sivu näyttää tabletilla ja puhelimella. Vasemmassa paneelissa on responsiivisuusemulaattori, joka vaihtaa esikatselualueen työpöydän, tabletin ja älypuhelimen välillä. Jos jokin on siirtynyt, jokaiselle resoluutiolle voidaan asettaa erilliset tyylit.

Free vs Pro: kumpi valita

Ilmais- ja Pro-versioiden ominaisuudet eroavat merkittävästi. Ilmaisversio tarjoaa perusjoukon CSS-ominaisuuksia: fontit (ilman Google Fontsia), tekstin värin, välistykset, reunukset, varjot, sijainnin. Tämä riittää minimaaliseen teeman muokkaukseen (otsikon siirto, painikkeen värin vaihto, reunuksen lisäys).

Pro avaa kaiken muun: yli 900 Google-fonttia, taustavärin ja -kuvat, animaatiot visuaalisella hallintatyökalulla, liukuvärit, taustakuviot, leveyden ja korkeuden hallinnan, CSS-editorin automaattisella täydennyksellä, WordPressin kirjautumissivun muokkauksen ja animaatiogeneraattorin.

Kertaluontoiseen asiakasprojektiin Pro-lisenssi maksaa itsensä takaisin välittömästi säästäen tunteja manuaalista koodausta. Henkilökohtaiseen blogiin ilmaisversio on usein riittävä.

Hinta

Yellow Pencil Prota jaellaan maksullisella lisenssillä kehittäjän viralliselta verkkosivustolta. Hintaan sisältyy elinikäiset lisäosan päivitykset ja tukijakso. Lisenssi on voimassa yhdelle sivustolle; useita projekteja varten on ostettava erilliset avaimet.

Ilmaisversio on saatavilla WordPress.orgin lisäosasivulla. Asennus on vakio, suoraan hallintapaneelista kohdasta "Lisäosat" → "Lisää uusi" → haku "Yellow Pencil".

Yksityiskohtainen videokatsaus käyttöliittymästä ja keskeisistä tekniikoista lisäosan kanssa työskentelyyn (englanniksi, visuaalinen ja ytimekäs).

⁉️🤔 Usein kysytyt kysymykset

Rikkoiko Yellow Pencil teemani?

Ei. Lisäosa ei muokkaa teematiedostoja eikä koske muihin lisäosiin. Kaikki muutokset tallennetaan erikseen ja ladataan dynaamisesti. Jos jokin menee pieleen, peruuta muokkaukset "Reset changes" -painikkeella tai poista lisäosa, jolloin teema palautuu alkuperäiseen tilaansa.

Tarvitseeko minun osata CSS:ää työskennelläkseni Yellow Pencilin kanssa?

Ei, se on koko lisäosan tarkoitus. Klikkaat elementtiä ja muutat sen ominaisuuksia visuaalisesti: väriä, fonttia, välistystä, reunuksia, animaatiota. CSS luodaan automaattisesti. Jos osaat CSS:ää, käytössä on sisäänrakennettu koodieditori automaattisella täydennyksellä ja korostuksella, ja voit kirjoittaa tyylejä manuaalisesti visuaalisten muokkausten päälle.

Toimiiko lisäosa Gutenbergin ja Elementorin kanssa?

Kyllä, Yellow Pencil on yhteensopiva kaikkien suosittujen sivurakentajien kanssa: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Lisäosa tyylittää valmiit lohkot, jotka luot rakentajassa, eikä se ole ristiriidassa niiden merkintäkielen kanssa.

Voinko muokata WordPressin kirjautumissivua?

Kyllä, Pro-versiossa. Mene kohtaan "Ulkoasu" → "YellowPencil Editor", valitse kohteeksi "WordPress login page" ja klikkaa "Customize". Muokkaat logoa, taustaa, painikkeita ja lomakekenttiä aivan kuten tavallista sivua.

Mitä tapahtuu, kun poistan lisäosan?

Kaikki käytetyt tyylit katoavat, ja sivusto palaa teeman oletusulkoasuun. Ennen poistamista voit viedä CSS:n sisäänrakennetulla "Export stylesheet" -toiminnolla ja liittää sen manuaalisesti lapsiteemana, jolloin tyylit säilyvät myös ilman lisäosaa.

Onko vaihtoehtoja?

Suoria vastineita visuaalisella CSS-editorilla ovat Microthemer (samankaltainen elementtitarkastaja) ja CSS Hero (hieman yksinkertaisempi, vähemmän ominaisuuksia). Molemmat ovat maksullisia. Ilmaisista vaihtoehdoista on olemassa vain sisäänrakennettu WordPressin muokkain, mutta se tarjoaa pääsyn vain pieneen osaan niistä CSS-ominaisuuksista, joita Yellow Pencil tarjoaa.

Kannattaako Yellow Pencil hankkia teeman muokkaukseen

Jos et kirjoita CSS:ää käsin etkä halua käyttää tunteja teematiedostojen muokkaamiseen, Yellow Pencil on yksi markkinoiden parhaista työkaluista. Se ei korvaa sivunrakentajaa, mutta se ratkaisee juuri sen ongelman, jonka jokainen sivuston omistaja kohtaa: "Haluan säätää asioita vähän, vaihtaa värin ja fontin, mutta ilman koodia."

Freelancereille ja pienille toimistoille tämä tarkoittaa ajan säästöä rutiininomaisissa asiakassivustojen muokkauksissa. Blogin omistajille se on tapa siistiä ulkoasua ilman front-end-kehittäjän apua. Kehittäjille se tarjoaa nopean tyylien prototypoinnin ennen siirtämistä child-teemaan.

Pääsääntö Yellow Pencilin kanssa työskennellessä: tarkista responsiivisuus jokaisen muokkauserän jälkeen. Sisäänrakennettu tabletti- ja puhelinemulaattori näyttää rehellisen kuvan, ja erilliset tyylit jokaiselle resoluutiolle antavat sinun korjata kaiken, mikä on siirtynyt. Tällä tavalla tapa toimien lisäosa maksaa itsensä takaisin jo ensimmäisenä käyttöpäivänä.