Temat är installerat, innehållet är på plats och sajten ser ut… som ingenting. Den inbyggda anpassaren i WordPress täcker grundläggande scenarier: bakgrundsfärg, logotyp, widgetar i sidofältet. Men så fort du vill flytta en rubrik 10 pixlar åt vänster, byta typsnitt på en specifik knapp eller lägga till en gradientbakgrund på ett enskilt block, räcker inte standardkontrollerna till. Och ingen vill dyka ner i style.css efter varje liten justering.

Yellow Pencil löser det här problemet direkt. Det är en visuell CSS-redigerare: du klickar på ett element på sidan och ändrar direkt typsnitt, färger, avstånd, ramar, animationer, utan att skriva en enda rad kod. Pluginet genererar ren CSS i farten och lämnar dina temafiler orörda.

När du har läst klart den här guiden kommer du att justera design snabbare än en frontend-utvecklare hinner öppna kodinspektorn, och utan risk att förstöra något.

💡 Snabb översikt:

• Installera Yellow Pencil från WordPress.org-katalogen (gratis) eller ladda ner Pro-versionen från den officiella webbplatsen
• Aktivera pluginet och öppna den visuella redigeraren via "Let's Start"-knappen på välkomstskärmen
• Välj anpassningstyp: global (hela sajten), enskild sida eller mall för inlägg
• Klicka på element på sidan och justera deras utseende via panelen till höger: typsnitt, färg, ramar, bakgrund, animation
• Spara dina ändringar och kontrollera responsiviteten med den inbyggda emulatorn för surfplatta och mobil

Vad Yellow Pencil är och varför du behöver det

Yellow Pencil är ett visuellt CSS-redigeringsplugin för WordPress. En viktig distinktion direkt: det här är ingen sidbyggare som Elementor eller Gutenberg. Pluginet lägger inte till nya block; det stilsätter befintliga. Sådana du har skapat med valfri sidbyggare eller sådana som följer med ditt tema.

I dess kärna finns en elementinspektör: klicka på en rubrik, knapp eller bild så får du direkt tillgång till över 60 CSS-egenskaper i panelen till höger. Dra i ett reglage så ändras sidan i realtid. Inga fler cykler av "redigera kod → ladda om webbläsaren → passar inte → upprepa".

Pluginet fungerar med alla WordPress-teman och ändrar inte deras filer. Alla redigeringar sparas i en separat stilmall och laddas dynamiskt. Temat förblir orört, ändringar kan rullas tillbaka, exporteras som färdig CSS eller tas bort tillsammans med pluginet.

Vem behöver detta? Främst de som inte skriver CSS för hand men vill finslipa designen visuellt. Men även erfarna utvecklare uppskattar snabbheten: istället för att redigera källfiler och ladda om ger ett musklick omedelbara resultat. Frilansare och byråer använder Yellow Pencil för snabb anpassning av kundsajter utan att riskera att skada någon annans tema.

Nyckelfunktioner i Yellow Pencil

Det finns många funktioner, men de kretsar alla kring en idé: ta vilket element som helst på sidan och ändra dess utseende via ett visuellt gränssnitt. Här är nyckelfunktionerna i Pro-versionen (v7.6.7, aktuell per 2026):

• Elementinspektör: ett klick på valfritt block, text eller bild öppnar en panel med alla tillgängliga CSS-egenskaper
• **Visuell **dra och släpp: ändra elementpositioner med musen, utan att redigera kod
• Storleksändring: dra i kanterna på den blå ramen runt ett element så ändras storleken visuellt
• 900+ Google Fonts: anslut dem med ett klick från pluginets inbyggda bibliotek
• 300+ bakgrundsmönster: plus gradienter, heldragna färger och anpassade bilder
• 50+ animationer: färdiga CSS-animationer med en visuell hanterare och anpassad keyframe-generator
• CSS-kodredigerare: för den som vill skriva stilar manuellt, med autokomplettering och felkontroll
• Responsivt läge: separat stilredigering för dator, surfplatta och mobil

Pluginet genererar CSS dynamiskt och laddar den som en separat stilmall. Sajtens prestanda påverkas inte; exakt en stilmall läggs till, inget mer.

Installera Yellow Pencil

Installationen skiljer sig inte från något annat WordPress-plugin. Skaffa först filen: gratisversionen finns i WordPress.org-katalogen, medan Pro köps från utvecklarens officiella webbplats (licens för en sajt, livstidsuppdateringar). Vissa premiumteman inkluderar Yellow Pencil Pro i paketet.

Öppna WordPress adminpanel och gå till "Plugins" → "Lägg till nytt".

Klicka på "Ladda upp tillägg" → "Välj fil."

Välj det nedladdade ZIP-arkivet waspthemes-yellow-pencil.zip och klicka på "Installera nu."

Efter installationen klickar du på "Aktivera". För Pro-versionen anger du din licensnyckel (den kommer via e-post efter köp). Aktivering låser upp uppdateringar och alla Pro-funktioner.

Yellow Pencils välkomstsida visas på skärmen. Avsnittet "Resurser" innehåller dokumentation, guider och supportlänkar.

Klicka på "Kom igång" så kommer du direkt in i den visuella redigeraren på den aktuella sidan.

Gränssnitt: tre redigeringszoner

Yellow Pencils gränssnitt är uppdelat i tre zoner. Till vänster finns ett smalt verktygsfält med ikoner: elementinspektör, ångra och gör om, helskärmsläge, responsivitetsverktyg och mätlinjal. Panelen är minimalistisk och distraherar inte från sidan du redigerar.

Till höger finns redigeringspanelen. När inget element är valt visas tre tillgängliga anpassningstyper.

När du klickar på ett element på sidan växlar panelen till stilinställningar: typsnitt, färger, avstånd, ramar.

En blå ram med storlekshandtag visas runt det valda elementet. Elementet kan flyttas genom att dras och storleksändras genom att dra i ramens kanter.

Mittenzonen upptas av själva sidan: du ser den som besökarna kommer att se den, och du redigerar den i realtid.

Huvudverktyg

Den vänstra panelen har tre verktyg du kommer att använda hela tiden:

• Elementinspektör: väljer ett visuellt element på sidan för anpassning. Klicka på en rubrik, knapp eller ett block så visas alla dess CSS-egenskaper i den högra panelen.
• Ångra och gör om: experimenterar du med färger och typsnitt? Klicka på "ångra" om du gick för långt. Redigeringshistoriken sparas tills du lämnar redigeraren.
• Helskärmsläge: döljer WordPress admin och lämnar bara sidan och redigeringspanelerna synliga. Användbart för exakt positionering.

På den högra panelen, högst upp, finns tre viktiga knappar:

• Förhandsgranska: visar sidan utan redigeringsgränssnittet. Detta låter dig se resultatet genom en besökares ögon.
• Återställ ändringar: rullar tillbaka alla osparade redigeringar. Användbart när du har gått överstyr och tappat bort dig.
• Spara: tillämpar ändringarna. Efter sparandet är redigeringarna synliga för alla webbplatsbesökare.

Tre anpassningslägen: när du ska använda varje

Innan du börjar redigera ber Yellow Pencil dig att välja omfattningen för dina ändringar. Redigeringspanelen (när inget är markerat) visar tre alternativ:

• Global anpassning: ändringar gäller för alla sidor på webbplatsen. Ändra färgen på alla H2-rubriker, så ändras de överallt (startsida, blogg, kontaktsida).
• Anpassning av enstaka sida: redigeringar gäller bara den sida du redigerar. Perfekt för landningssidor och unika sektioner.
• Mallanpassning: ändringar gäller för alla inlägg av samma typ. Vill du att alla produktsidor ska se likadana ut? Det här läget är för dig.

Det aktuella läget visas högst upp i redigeringspanelen. Kontrollera alltid att du redigerar rätt typ innan du sparar: det är lätt att blanda ihop global anpassning och sidanpassning, och konsekvenserna syns omedelbart över hela webbplatsen.

Vad du kan göra med Yellow Pencil: praktisk genomgång

Här är en översikt över de viktigaste funktionerna med konkreta exempel. Varje åtgärd utförs genom att klicka på ett element och välja rätt sektion i panelen till höger.

Typografi

Text är det första folk tar itu med efter att ha installerat tillägget. Klicka på ett textblock och välj "Text" i redigeringspanelen. Alla grundläggande egenskaper finns tillgängliga: teckensnittsbyte (900+ alternativ från Google Fonts i Pro), storlek, radhöjd, teckenmellanrum och ordmellanrum. Textfärg väljs från inbyggda paletter (material och flat) eller ställs in med en pipett.

Den främsta fördelen är liveförhandsvisning. Du drar i reglaget för teckenstorlek och ser omedelbart hur layouten förskjuts. Detta är mycket snabbare än cykeln "redigera CSS → ladda om sidan → passar inte → upprepa".

Ramar

En ram runt ett block är ett enkelt sätt att framhäva ett kort, ett citat eller ett prenumerationsformulär. Markera elementet och gå till fliken "Border" i redigeringspanelen. Fyra stilar finns tillgängliga: solid, dashed, dotted och hidden.

En funktion de flesta konkurrenter saknar: var och en av de fyra ramsidorna kan konfigureras separat. Övre ramen är röd streckad, vänster är blå heldragen, höger är grön, nedre saknas. Bredd, färg och stil för varje sida ställs in oberoende, vilket ger dig designfrihet utan en enda rad kod.

Bakgrund

Elementbakgrund konfigureras under fliken "Background". Tre alternativ finns: solid färg (pipett eller palett), ett av 300+ inbyggda mönster och en CSS-gradient (linjär eller radiell). Du kan ladda upp en egen bild och konfigurera dess positionering, upprepningsbeteende och scrollbeteende.

Bakgrundsmönster är en trevlig detalj som sparar tid. Istället för att leta texturer på bildbyråer väljer du ett mönster från biblioteket, ändrar dess färg och opacitet och får en snygg blockbakgrund på ett par klick.

Animation

Fliken "Animation" ger tillgång till 50+ färdiga CSS-animationer: fade in, fade out, bounce, rotate, pulse och andra. Du väljer en effekt i den visuella hanteraren, ställer in varaktighet och fördröjning och ser omedelbart elementet få liv.

För anpassade scenarier finns en animationsgenerator (Pro): du definierar keyframes i den visuella redigeraren, och tillägget genererar CSS @keyframes. Flera animationer kan köras samtidigt för komplext elementbeteende.

Storlek och position

Att ändra elementstorlek är bokstavligen att dra i kanterna. När du klickar på ett element visas en blå ram med handtag i hörn och på sidor. Dra i ett handtag så ändras storleken.

Att ändra position är ännu enklare: ta tag i elementet med musen och dra det dit du vill ha det.

En varning: dragning kan förstöra responsiviteten. Efter att du har flyttat element, kontrollera alltid hur sidan ser ut på surfplatta och mobil. Den vänstra panelen har en responsivitetsemulator som växlar förhandsvisningsytan mellan desktop, surfplatta och smartphone. Om något har förskjutits kan separata stilar ställas in för varje upplösning.

Free vs Pro: vad ska man välja

Funktionerna i gratis- och Pro-versionen skiljer sig markant. Gratisversionen ger en grundläggande uppsättning CSS-egenskaper: teckensnitt (utan Google Fonts), textfärg, mellanrum, ramar, skuggor, positionering. Detta räcker för minimal temaanpassning (flytta en rubrik, ändra en knappfärg, lägga till en ram).

Pro låser upp allt annat: 900+ Google-teckensnitt, bakgrundsfärg och bilder, animationer med en visuell hanterare, gradienter, bakgrundsmönster, bredd- och höjdkontroll, en CSS-redigerare med autokomplettering, anpassning av WordPress inloggningssida samt animationsgeneratorn.

För ett engångsprojekt åt en kund betalar Pro-licensen sig direkt genom att spara timmar av manuell kodning. För en personlig blogg räcker gratisversionen ofta.

Pris

Yellow Pencil Pro distribueras under en betald licens från utvecklarens officiella webbplats. Priset inkluderar livstidsuppdateringar av tillägget och en supportperiod. Licensen gäller för en sajt; separata nycklar måste köpas för flera projekt.

Gratisversionen finns på WordPress.orgs tilläggssida. Installationen är standard, direkt från adminpanelen via "Tillägg" → "Lägg till nytt" → sök "Yellow Pencil".

En detaljerad videogenomgång av gränssnittet och viktiga tekniker för att arbeta med tillägget (på engelska, visuellt och rakt på sak).

⁉️🤔 Vanliga frågor

Kommer Yellow Pencil att förstöra mitt tema?

Nej. Tillägget ändrar inte temafiler eller rör andra tillägg. Alla ändringar lagras separat och laddas dynamiskt. Om något går fel, återställ redigeringar med knappen "Reset changes" eller ta bort tillägget, så återgår temat till sitt ursprungliga skick.

Behöver jag kunna CSS för att arbeta med Yellow Pencil?

Nej, det är hela poängen med tillägget. Du klickar på ett element och ändrar dess egenskaper visuellt: färg, teckensnitt, mellanrum, ramar, animation. CSS genereras automatiskt. Om du kan CSS finns en inbyggd kodredigerare med autokomplettering och syntaxmarkering, och du kan skriva stilar manuellt ovanpå visuella redigeringar.

Fungerar tillägget med Gutenberg och Elementor?

Ja, Yellow Pencil är kompatibelt med alla populära sidbyggare: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Tillägget stilsätter de färdiga block du skapar i sidbyggaren och kommer inte i konflikt med deras märkspråk.

Kan jag anpassa WordPress inloggningssida?

Ja, i Pro-versionen. Gå till "Utseende" → "YellowPencil Editor", välj "WordPress login page" som mål och klicka på "Customize". Du redigerar logotyp, bakgrund, knappar och formulärfält precis som en vanlig sida.

Vad händer efter att jag har tagit bort tillägget?

Alla tillämpade stilar försvinner och sajten återgår till temats standarddesign. Innan du tar bort kan du exportera CSS:en via den inbyggda funktionen "Export stylesheet" och ansluta den manuellt som ett child theme, så att stilarna bevaras även utan tillägget.

Finns det alternativ?

Direkta motsvarigheter med en visuell CSS-redigerare inkluderar Microthemer (liknande elementinspektör) och CSS Hero (något enklare, färre egenskaper). Båda är betalda. Bland gratisalternativen finns bara den inbyggda WordPress-anpassaren, men den ger tillgång till bara en bråkdel av de CSS-egenskaper Yellow Pencil erbjuder.

Är Yellow Pencil värt att skaffa för temaanpassning

Om du inte skriver CSS för hand och inte vill lägga timmar på att redigera temafiler är Yellow Pencil ett av de bästa verktygen på marknaden. Det ersätter inte en sidbyggare, men det löser precis det problem varje sajtägare brottas med: "Jag vill finjustera lite, ändra en färg och ett typsnitt, men utan kod."

För frilansare och små byråer innebär det sparad tid vid rutinmässiga redigeringar av kundsajter. För bloggägare är det ett sätt att snygga till det visuella utan att ringa en frontendutvecklare. För utvecklare ger det snabb stilprototypning innan man för över till ett barntema.

Huvudregeln när du jobbar med Yellow Pencil: kontrollera responsiviteten efter varje omgång redigeringar. Den inbyggda emulatorn för surfplatta och mobil visar en ärlig bild, och separata stilar för varje upplösning låter dig fixa allt som har flyttat på sig. Med den vanan betalar sig tillägget redan första dagen du använder det.