Teema on paigaldatud, sisu on paigas ja sait näeb välja... nagu mitte midagi. Sisseehitatud WordPressi kohandaja katab põhistsenaariumid: taustavärv, logo, külgriba vidinad. Kuid hetkel, kui soovid pealkirja 10 pikslit vasakule nihutada, konkreetse nupu fonti muuta või ühele plokile gradienttausta lisada, jäävad tavalised juhtelemendid hätta. Ja keegi ei taha pärast iga pisiparandust style.css faili sukelduda.

Yellow Pencil lahendab selle probleemi otse. See on visuaalne CSS-redaktor: klõpsad lehel elemendil ja muudad kohe fonte, värve, vahesid, ääriseid, animatsiooni, kirjutamata ühtegi koodirida. Plugin genereerib lennult puhta CSS-i ja jätab sinu teemafailid puutumata.

Selle juhendi lõpuks kohandad kujundusi kiiremini, kui front-end arendaja jõuab koodiinspektori avada, ja ilma igasuguse riskita midagi katki teha.

💡 Kiire ülevaade:

• Paigalda Yellow Pencil WordPress.org kataloogist (tasuta) või lae Pro versioon alla ametlikult veebisaidilt
• Aktiveeri plugin ja ava visuaalne redaktor, kasutades tervitusekraanil nuppu „Let's Start"
• Vali kohandamise tüüp: globaalne (üle kogu saidi), üksik leht või postituse mall
• Klõpsa lehel elementidel ja kohanda nende välimust parempoolse paneeli kaudu: fondid, värv, äärised, taust, animatsioon
• Salvesta muudatused ja kontrolli responsiivsust, kasutades sisseehitatud tahvelarvuti ja telefoni emulaatorit

Mis on Yellow Pencil ja miks sul seda vaja on

Yellow Pencil on visuaalne CSS-i redigeerimise plugin WordPressile. Oluline eristus kohe alguses: see ei ole leheehitaja nagu Elementor või Gutenberg. Plugin ei lisa uusi plokke; see kujundab olemasolevaid. Neid, mille oled loonud ükskõik millise ehitajaga, või neid, mis tulevad sinu teemaga kaasa.

Selle tuumaks on elemendi inspektor: klõpsa pealkirjal, nupul või pildil ja saad kohe ligipääsu enam kui 60-le CSS-i atribuudile parempoolses paneelis. Liiguta liugurit ja leht muutub reaalajas. Ei mingeid „redigeeri koodi → värskenda brauserit → ei sobi → korda" tsükleid.

Plugin töötab iga WordPressi teemaga ega muuda selle faile. Kõik muudatused salvestatakse eraldi stiililehte ja laaditakse dünaamiliselt. Teema jääb puutumata, muudatusi saab tagasi võtta, eksportida kasutusvalmis CSS-ina või eemaldada koos pluginaga.

Kellele seda vaja on? Eelkõige neile, kes ei kirjuta CSS-i käsitsi, kuid soovivad kujundust visuaalselt viimistleda. Kuid ka kogenud arendajad hindavad kiirust: lähtefailide redigeerimise ja uuesti laadimise asemel annab hiireklõps kohese tulemuse. Vabakutselised ja agentuurid kasutavad Yellow Pencil'it kliendi saidi kiireks kohandamiseks, riskimata kellegi teise teema kahjustamisega.

Yellow Pencil'i põhifunktsioonid

Funktsioone on palju, kuid need kõik keerlevad ühe idee ümber: võta lehel ükskõik milline element ja muuda selle välimust visuaalse liidese kaudu. Allpool on Pro versiooni (v7.6.7, kehtiv 2026. aasta seisuga) põhifunktsioonid:

• Elemendi inspektor: ükskõik millisel plokil, tekstil või pildil klõpsamine avab paneeli kõigi saadaolevate CSS-i atribuutidega
• **Visuaalne **lohista ja aseta: muuda elementide asukohta hiirega, koodi redigeerimata
• Suuruse muutmine: lohista elemendi ümber oleva sinise raami servi ja suurus muutub visuaalselt
• 900+ Google'i fonti: ühenda need ühe klõpsuga pluginasse sisseehitatud teegist
• 300+ taustamustrit: pluss gradiendid, ühtlased värvid ja kohandatud pildid
• 50+ animatsiooni: valmis CSS-animatsioonid visuaalse halduri ja kohandatud võtmekaadrite generaatoriga
• CSS-koodi redaktor: neile, kes soovivad stiile käsitsi kirjutada, koos automaatse lõpetamise ja veakontrolliga
• Responsiivne režiim: eraldi stiilide redigeerimine lauaarvutile, tahvelarvutile ja telefonile

Plugin genereerib CSS-i dünaamiliselt ja laadib selle eraldi stiililehena. Saidi jõudlust see ei mõjuta; lisatakse täpselt üks stiilileht, ei midagi enamat.

Yellow Pencil'i paigaldamine

Paigaldamine ei erine ühegi teise WordPressi plugina omast. Esmalt hangi fail: tasuta versioon on saadaval WordPress.org kataloogis, Pro aga ostetakse arendaja ametlikult veebisaidilt (ühe saidi litsents, eluaegsed uuendused). Mõned premium-teemad sisaldavad Yellow Pencil Pro'd komplektis.

Ava WordPressi juhtpaneel ja mine „Plugins" → „Add New."

Klõpsake „Upload Plugin" → „Choose File."

Valige allalaaditud ZIP-arhiiv waspthemes-yellow-pencil.zip ja klõpsake „Install Now."

Pärast installimist klõpsake „Activate." Pro-versiooni puhul sisestage oma litsentsivõti (see saabub pärast ostu e-posti teel). Aktiveerimine avab uuendused ja kõik Pro-funktsioonid.

Teie ekraanile ilmub Yellow Pencili tervitusleht. Jaotises „Resources" on dokumentatsioon, juhendid ja tugilingid.

Klõpsake „Let's Start" ja te sisenete kohe visuaalsesse redaktorisse praegusel saidi lehel.

Liides: kolm redaktoritsooni

Yellow Pencili liides on jagatud kolmeks tsooniks. Vasakul on kitsas ikoonidega tööriistariba: elemendi inspektor, undo- ja redo-toimingud, täisekraanirežiim, reageerivuse tööriist ja mõõtjoonlaud. Paneel on minimalistlik ega tõmba tähelepanu redigeeritavalt lehelt kõrvale.

Paremal on redigeerimispaneel. Kui ükski element pole valitud, kuvab see kolm saadaolevat kohandamistüüpi.

Kui klõpsate lehel elemendil, lülitub paneel stiiliomadustele: fondid, värvid, vahed, äärised.

Valitud elemendi ümber ilmub sinine raam koos suuruse muutmise käepidemetega. Elementi saab lohistades liigutada ja raami servi tõmmates suurust muuta.

Keskmise tsooni hõivab leht ise: näete seda nii, nagu külastajad seda näevad, ja redigeerite seda reaalajas.

Peamised tööriistad

Vasakpoolsel paneelil on kolm tööriista, mida kasutate pidevalt:

• Elemendi inspektor: valib lehel kohandamiseks mis tahes visuaalse elemendi. Klõpsake pealkirjal, nupul või plokil ja kõik selle CSS-omadused ilmuvad parempoolsele paneelile.
• Undo ja redo: katsetate värvide ja fontidega? Vajutage „undo", kui läksite liiale. Redigeerimisajalugu säilib kuni redaktorist väljumiseni.
• Täisekraanirežiim: peidab WordPressi administraatori, jättes alles ainult lehe ja redigeerimispaneelid. Kasulik täpseks positsioneerimiseks.

Parempoolse paneeli ülaosas on kolm olulist nuppu:

• Eelvaade: kuvab lehe ilma redaktori liideseta. See võimaldab näha tulemust külastaja pilgu läbi.
• Muudatuste lähtestamine: võtab tagasi kõik salvestamata muudatused. Kasulik, kui olete üle pingutanud ja järje kaotanud.
• Salvesta: rakendab muudatused. Pärast salvestamist on muudatused nähtavad kõigile saidi külastajatele.

Kolm kohandamisrežiimi: millal millist kasutada

Enne kui redigeerima hakkad, palub Yellow Pencil sul valida muudatuste ulatuse. Redigeerimispaneel (kui midagi pole valitud) näitab kolme võimalust:

• Globaalne kohandamine: muudatused rakenduvad kõigile saidi lehtedele. Muuda kõigi H2-pealkirjade värvi ja need muutuvad igal pool (avalehel, blogis, kontaktlehel).
• Ühe lehe kohandamine: muudatused rakenduvad ainult sellele lehele, mida parajasti redigeerid. Ideaalne sihtlehtede ja unikaalsete sektsioonide jaoks.
• Malli kohandamine: muudatused rakenduvad kõigile sama tüüpi postitustele. Soovid, et kõik tootelehed näeksid välja ühesugused? See režiim on sulle.

Praegune režiim kuvatakse redigeerimispaneeli ülaosas. Kontrolli alati enne salvestamist, et redigeerid õiget tüüpi: globaalse ja lehepõhise kohandamise segi ajamine on lihtne ning tagajärjed ilmnevad koheselt kogu saidil.

Mida saad Yellow Penciliga teha: praktiline ülevaade

Allpool on jaotus peamistest võimalustest koos reaalsete näidetega. Iga toiming sooritatakse elemendil klõpsates ja parempoolsel paneelil vastava jaotise valimisega.

Tüpograafia

Tekst on esimene asi, millega inimesed pärast pluginat paigaldamist tegelema hakkavad. Klõpsa suvalisel tekstiplokil ja vali redigeerimispaneelil „Text". Kõik põhiomadused on saadaval: fondi muutmine (Pro versioonis 900+ valikut Google Fonts'ist), suurus, reavahe, tähevahe ja sõnavahe. Teksti värv valitakse sisseehitatud palettidest (material ja flat) või määratakse pipetiga.

Peamine eelis on reaalajas eelvaade. Liigutad fondi suuruse liugurit ja näed kohe, kuidas paigutus nihkub. See on palju kiirem kui tsükkel „muuda CSS-i → värskenda lehte → ei sobi → korda".

Äärised

Ploki ümber olev ääris on lihtne viis esile tõsta kaarti, tsitaati või tellimisvormi. Vali element ja mine redigeerimispaneelil vahekaardile „Border". Saadaval on neli stiili: pidev, kriipsjoon, punktiir ja peidetud.

Funktsioon, mis enamikul konkurentidest puudub: kõiki nelja äärise külge saab eraldi seadistada. Ülemine ääris on punane kriipsjoon, vasak sinine pidev, parem roheline, alumine puudub. Iga külje laius, värv ja stiil määratakse iseseisvalt, andes sulle disainivabaduse ilma ühegi koodireata.

Taust

Elemendi tausta seadistatakse vahekaardil „Background". Saadaval on kolm võimalust: ühtlane värv (pipett või palett), üks 300+ sisseehitatud mustrist ja CSS-gradient (lineaarne või radiaalne). Saad üles laadida kohandatud pildi ja seadistada selle positsioneerimise, kordumise ja kerimise käitumise.

Taustamustrid on kena detail, mis säästab aega. Selle asemel, et otsida tekstuure fotopankadest, valid teegist mustri, muudad selle värvi ja läbipaistmatust ning saad paari klõpsuga korraliku ploki tausta.

Animatsioon

Vahekaart „Animation" annab juurdepääsu 50+ valmis CSS-animatsioonile: fade in, fade out, bounce, rotate, pulse ja teised. Valid visuaalses halduris efekti, määrad kestuse ja viivituse ning näed kohe, kuidas element ellu ärkab.

Kohandatud stsenaariumide jaoks on olemas animatsioonigeneraator (Pro): määratled võtmekaadrid visuaalses redaktoris ja plugin genereerib CSS-i @keyframes. Mitu animatsiooni võivad keeruka elemendi käitumise jaoks samaaegselt töötada.

Suurus ja asukoht

Elemendi suuruse muutmine on sõna otseses mõttes servade lohistamine. Elemendil klõpsamine näitab sinist raami, mille nurkades ja külgedel on pidemed. Tõmba pidemest ja suurus muutub.

Asukoha muutmine on veelgi lihtsam: haara elemendist hiirega ja lohista see vajalikku kohta.

Üks hoiatus: lohistamine võib lõhkuda reageerivuse. Pärast elementide liigutamist kontrolli alati, kuidas leht tahvelarvutis ja telefonis välja näeb. Vasakpoolsel paneelil on reageerivuse emulaator, mis lülitab eelvaateala lauaarvuti, tahvelarvuti ja nutitelefoni vahel. Kui midagi on nihkunud, saab igale resolutsioonile eraldi stiilid määrata.

Tasuta vs Pro: mida valida

Tasuta ja Pro versiooni võimalused erinevad oluliselt. Tasuta versioon pakub põhilist CSS-i omaduste komplekti: fondid (ilma Google Fonts'ita), teksti värv, vahed, äärised, varjud, positsioneerimine. Sellest piisab minimaalseks teema kohandamiseks (pealkirja liigutamine, nupu värvi muutmine, äärise lisamine).

Pro avab kõik muu: 900+ Google'i fonti, taustavärvi ja -pildid, animatsioonid visuaalse halduriga, gradiendid, taustamustrid, laiuse ja kõrguse juhtimine, automaatse lõpetamisega CSS-redaktor, WordPressi sisselogimislehe kohandamine ja animatsioonigeneraator.

Ühekordse kliendiprojekti puhul tasub Pro litsents end kohe ära, säästes tunde käsitsi kodeerimist. Isikliku blogi jaoks piisab sageli tasuta versioonist.

Hind

Yellow Pencil Pro on levitatav tasulise litsentsi alusel arendaja ametlikult veebisaidilt. Hind sisaldab eluaegseid plugina uuendusi ja tugiperioodi. Litsents kehtib ühele saidile; mitme projekti jaoks tuleb osta eraldi võtmed.

Tasuta versioon on saadaval WordPress.org plugina lehel. Paigaldamine on standardne, otse administraatoriliidesest: „Plugins" → „Add New" → otsi „Yellow Pencil".

Üksikasjalik videoülevaade liidesest ja peamistest pluginaga töötamise võtetest (inglise keeles, visuaalne ja asjalik).

⁉️🤔 Korduma kippuvad küsimused

Kas Yellow Pencil lõhub mu teema ära?

Ei. Plugin ei muuda teemafaile ega puuduta teisi pluginaid. Kõik muudatused salvestatakse eraldi ja laaditakse dünaamiliselt. Kui midagi läheb valesti, võta muudatused tagasi nupuga „Reset changes" või kustuta plugin ja teema naaseb algsesse olekusse.

Kas ma pean Yellow Penciliga töötamiseks CSS-i oskama?

Ei, see ongi plugina kogu mõte. Klõpsad elemendil ja muudad selle omadusi visuaalselt: värv, font, vahed, äärised, animatsioon. CSS genereeritakse automaatselt. Kui sa oskad CSS-i, on olemas sisseehitatud koodiredaktor koos automaatse lõpetamise ja esiletõstuga ning saad visuaalsetele muudatustele käsitsi stiile juurde kirjutada.

Kas plugin töötab Gutenbergi ja Elementoriga?

Jah, Yellow Pencil ühildub kõigi populaarsete leheehitajatega: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Plugin kujundab valmis plokke, mille sa ehitajas lood, ega lähe nende märgendusega vastuollu.

Kas ma saan WordPressi sisselogimislehte kohandada?

Jah, Pro versioonis. Mine jaotisse „Appearance" → „YellowPencil Editor", vali sihtmärgiks „WordPress login page" ja klõpsa „Customize". Saad muuta logo, tausta, nuppe ja vormivälju täpselt nagu tavalist lehte.

Mis juhtub pärast plugina kustutamist?

Kõik rakendatud stiilid kaovad ja sait naaseb vaikimisi teema kujunduse juurde. Enne kustutamist saad CSS-i eksportida sisseehitatud funktsiooni „Export stylesheet" kaudu ja ühendada selle käsitsi alamteemana, nii säilivad stiilid ka ilma pluginata.

Kas on alternatiive?

Otseste analoogide hulka visuaalse CSS-redaktoriga kuuluvad Microthemer (sarnane elemendi inspektor) ja CSS Hero (veidi lihtsam, vähem omadusi). Mõlemad on tasulised. Tasuta võimalustest on olemas ainult sisseehitatud WordPressi kohandaja, kuid see annab juurdepääsu vaid murdosale neist CSS-i omadustest, mida Yellow Pencil pakub.

Kas Yellow Pencilit tasub teema kohandamiseks hankida

Kui sa CSS-i käsitsi ei kirjuta ega taha veeta tunde teemafailide redigeerimisel, on Yellow Pencil üks parimaid tööriistu turul. See ei asenda leheehitajat, kuid lahendab täpselt selle valukoha, millega iga saidiomanik silmitsi seisab: „Tahan asju natuke kohendada, muuta värvi ja fonti, aga ilma koodita."

Vabakutselistele ja väikestele agentuuridele tähendab see aja kokkuhoidu rutiinsete kliendisaitide muudatuste tegemisel. Blogiomanike jaoks on see viis visuaali korda teha ilma front-end arendajat kutsumata. Arendajatele pakub see kiiret stiilide prototüüpimist enne alamteemasse üleviimist.

Peamine reegel Yellow Penciliga töötamisel: kontrolli responsiivsust pärast iga muudatuste partiid. Sisseehitatud tahvelarvuti ja telefoni emulaator näitab ausat pilti ning iga resolutsiooni jaoks eraldi stiilid võimaldavad sul parandada kõik, mis on paigast nihkunud. Selle harjumusega tasub plugin end ära juba esimesel kasutuspäeval.