Bytte typsnitt i temat, och mobillayouten gick sönder. La till padding via ett barntema, och hela sajten slutade ladda. Alla som administrerar WordPress har fått "den vita dödens skärm" minst en gång efter vad som verkade vara en harmlös stilredigering.

Tidigare krävde CSS-anpassning en webbdesigner eller timmar av manuell kodning med flikväxling och oändligt F5-tryckande. Nu finns det live CSS-editor-plugins som visar resultat innan du sparar, direkt i frontend, i realtid. Inga djupa CSS-kunskaper eller filhanterare behövs.

Nedan, fyra plugins och ett inbyggt verktyg för visuell och manuell WordPress-stilredigering: från premium allt-i-ett-verktyg med animationer till helt gratis lösningar. Var och en har testats på en testsajt och fungerar med de flesta moderna teman.

💡 Snabb översikt:

• Starta WordPress-anpassaren (Utseende → Anpassa → Extra CSS), det är ett inbyggt gratisverktyg med live-förhandsvisning för enkla redigeringar.
• Om du behöver en visuell editor utan kod, installera CSS Hero eller Yellow Pencil: peka på ett element med musen och ändra stilar via en panel.
• För manuell CSS-kodning med autokomplettering, välj SiteOrigin CSS (gratis) eller Microthemer (premium, plus SCSS och utkastläge).

Jämförelsetabell: live CSS-editorer för WordPress

1. CSS Hero

CSS Hero, en visuell WordPress-temaeditor som fungerar enligt "peka och klicka"-principen. Välj vilket element som helst på sidan, rubrik, knapp, block, och ändra typsnitt, färg, padding eller skuggor via panelen till höger. CSS-kod genereras automatiskt, temafiler rörs inte.

CSS Heros främsta fördel, full redigeringshistorik. Varje ändring sparas som en version: gjorde du ett misstag med padding eller knappfärg, återställ ett specifikt element till temats ursprungliga skick utan att förlora resten av anpassningen. Pluginet levereras också med 29 färdiga "skins" och hundratals förinställningar, du kan ta en mall och justera den för ditt varumärke.

För avancerade användare finns en CSS-editor med syntaxmarkering och LESS-stöd. CSS Hero är kompatibelt med DIVI, Elementor, Beaver Builder, Genesis och de flesta WordPress-teman. Prestandan blir inte lidande: en enda statisk CSS-fil levereras till frontend, ingen serverbelastning.

• Fördelar: full redigeringshistorik med återställning av enskilda element, 29 färdiga skins, rör inte temafiler, CSS-export för att inaktivera pluginet efter layout.
• Nackdelar: prenumeration från $29/år (Starter för 1 sajt); när prenumerationen löper ut slutar uppdateringar komma, men layouten fortsätter fungera.
• Pris: Starter, $29/år (1 sajt), Personal, $59/år (5 sajter), Pro, $199/år (upp till 999 sajter), Lifetime Pro, $599 (engångsbetalning, inkluderar Animator).
• Nedladdning: 🔗 CSS Hero, officiell webbplats | 🔗 Live-demo

2. Yellow Pencil

Yellow Pencil, en visuell CSS-editor som finns gratis i WordPress.org-katalogen med en begränsad uppsättning egenskaper. Pro-versionen ger full tillgång till 60+ CSS-egenskaper, 900+ Google-typsnitt, 300+ bakgrundsmönster och 50+ animationer.

Gränssnittet är minimalistiskt: klicka på ett element på sidan, en panel med tillgängliga egenskaper visas till vänster. Dra-och-släpp för marginal och padding fungerar intuitivt: dra med musen, se paddingen i pixlar i realtid. Det inbyggda "Mät"-verktyget visar avstånd mellan element, och "Wireframe" slår på en trådmodell för exakt layout.

Pluginet ändrar inte temafiler, genererar en separat stilmall som kan exporteras till en fil och pluginet inaktiveras. Praktiskt för engångsprojekt: layout klar, CSS exporterad, Yellow Pencil borttagen.

• Fördelar: dra-och-släpp för padding, 60+ CSS-egenskaper i Pro, linjal och wireframe, stilexport, rör inte temat.
• Nackdelar: teckenfärg, bakgrundsbilder och bredd/höjd saknas i gratisversionen; supporten på wordpress.org är begränsad, full support endast i Pro.
• Pris: Gratis (begränsad) i WordPress.org-katalogen; Pro, från $26 (engångsbetalning på CodeCanyon, en sajt).
• Nedladdning: 🔗 Yellow Pencil på WordPress.org | 🔗 Live-demo

3. SiteOrigin CSS

SiteOrigin CSS, ett gratisplugin från SiteOrigin-teamet med betyget 4,9 och över 100 000 aktiva installationer på WordPress.org. Kombinerar visuella kontroller för nybörjare och en fullständig kodredigerare för utvecklare.

För dig som inte skriver CSS: panelen med visuella kontroller låter dig ändra färger, typsnitt, padding och ramar via rullgardinsmenyer och färgväljare, och resultatet syns direkt på sajten. För utvecklare: den inbyggda inspektorn hjälper dig hitta rätt CSS-selektor för ett specifikt element (ofta den mest tidsödande delen av manuell redigering), och kodredigeraren har autokomplettering för både selektorer och egenskaper.

Ett separat plus är felmarkering i CSS före publicering. Pluginet är inte bundet till SiteOrigin-temat och fungerar med vilket WordPress-tema som helst.

• Fördelar: helt gratis, visuella kontroller + kodredigerare, selektorinspektor, autokomplettering, felmarkering.
• Nackdelar: inga färdiga skal/presets (allt från grunden); gränssnittet är spartanskt, når inte upp till CSS Hero när det gäller visuell redigeringskomfort.
• Pris: Gratis.
• Nedladdning: 🔗 SiteOrigin CSS på WordPress.org

4. Microthemer

Microthemer, en visuell CSS-redigerare från ThemeOver med stöd för manuell kodning i CSS, SCSS och JavaScript. Den kostnadsfria Lite-versionen finns på WordPress.org (över 10 000 aktiva installationer, betyg 5/5), premiumversionen kostar engångsbeloppet $45 med livstidsuppdateringar.

Den viktigaste skillnaden mot konkurrenterna är utkastläget. Du kan experimentera med designen i veckor utan att det påverkar vad besökarna ser. När allt är klart publicerar du ändringarna med en knapptryckning. För dig som layoutar för kunder eller designar om en aktiv sajt är detta avgörande.

Microthemer stödjer responsiv redigering: växla mellan desktop, surfplatta och mobil i gränssnittet och redigera stilar för en specifik upplösning. SCSS-stöd med kompilering i realtid, ovanligt bland visuella redigerare och ett tungt argument för utvecklare som gått över från ren kodning.

• Fördelar: utkastläge utan att påverka besökare, SCSS + JS, responsiv redigering, livstidsuppdateringar för $45.
• Nackdelar: gränssnittet är överbelastat för nybörjare, passar bättre för den som redan kan CSS; Lite-versionen har begränsad funktionalitet.
• Pris: Lite, gratis på WordPress.org; Premium, $45 (engångsbetalning, livstidsuppdateringar och support).
• Ladda ner: 🔗 Microthemer Lite på WordPress.org | 🔗 Officiell webbplats

Bonus: WordPress Customizer, inbyggd CSS-redigerare

WordPress från och med version 4.7 innehåller redigeraren Extra CSS direkt i den vanliga Customizern (Utseende → Anpassa → Extra CSS). Detta är inget tillägg, det är en inbyggd kärnfunktion som fungerar med alla teman och inte kräver någon installation.

För enkla redigeringar, ändra rubrikfärg, justera padding på en sida, dölj ett element, är detta mer än tillräckligt. Liveförhandsvisning fungerar direkt: skriv in CSS i den vänstra panelen, resultatet syns till höger, utan att spara och ladda om. Koden lagras i databasen och är knuten till temat: när du byter tema försvinner inte den anpassade CSS:en, utan väntar tills du återgår till det tidigare.

Tidigare installerade man separata tillägg för sådana uppgifter, som TJ Custom CSS från Theme Junkie, men det har inte uppdaterats sedan 2016 och har inte testats med de senaste WordPress-versionerna. Customizern täcker denna nisch helt och gratis.

I praktiken är det överdrivet att installera ett separat tillägg för en webbplatsägare som behöver ändra ett par stilar en gång i halvåret. Customizern finns redan där, i varje WordPress-installation.

• Fördelar: inbyggd i WordPress kärna (inget separat tillägg behövs), liveförhandsvisning, försvinner inte vid temabyte, helt gratis.
• Nackdelar: endast manuell kodinmatning (ingen visuell redigerare), ingen redigeringshistorik, ingen autocomplete, för komplex anpassning behövs ett separat verktyg.
• Pris: Gratis (del av WordPress kärna).
• Var du hittar den: Utseende → Anpassa → Extra CSS i WordPress admin.

⁉️🤔 Vanliga frågor

Behöver jag kunna CSS för att arbeta med en visuell redigerare?

För CSS Hero och Yellow Pencil, nej. Välj ett element med musen och ändra stilar via en panel: typsnitt, färg, padding. Tillägget genererar CSS-kod i bakgrunden. SiteOrigin CSS och Microthemer har också visuella kontroller, men för komplex anpassning är grundläggande kunskaper om selektorer användbara.

Vilket tillägg saktar inte ner webbplatsen?

Alla listade tillägg genererar en statisk CSS-fil som cachas av webbläsaren och belastar inte servern. Microthemer och Yellow Pencil tillåter dessutom export av den slutliga CSS:en och inaktivering av själva tillägget, webbplatsen fortsätter att fungera med anpassade stilar, och tillägget kan tas bort. I praktiken är skillnaden i laddningshastighet med något av dem inom felmarginalen.

Kan jag redigera CSS för mobilversionen separat?

Ja. Microthemer och Yellow Pencil stöder responsiv redigering: växla mellan desktop, surfplatta och mobil direkt i tilläggets gränssnitt och sätt stilar för en specifik upplösning. CSS Hero tillåter också redigering av stilar i responsivt läge, men kräver manuell tillägg av media queries.

Vad gör jag om webbplatsen gick sönder efter redigeringar?

I CSS Hero finns fullständig ändringshistorik, återställ det problematiska elementet eller hela designen till önskad punkt. Microthemer arbetar i utkastläge: besökare ser den gamla designen tills du publicerar den nya. Yellow Pencil har Ångra/Gör om inom sessionen. Ta i vilket fall som helst en färsk backup före seriös anpassning, denna regel gäller för alla tillägg utan undantag.

Finns det någon poäng med att betala för en premiumredigerare om Customizern är gratis?

Beror på volymen av redigeringar. Customizern är perfekt för 5-10 rader CSS en gång per säsong. Om du gör om hela temat, färger, typografi, padding, animationer, kommer en visuell redigerare som CSS Hero att spara timmar av manuellt selektorurval. För byråer och frilansare som hanterar flera webbplatser betalar sig ett premiumtillägg på det andra eller tredje projektet.

Vilken live CSS-redigerare du ska välja för din uppgift

Alla verktyg i urvalet täcker olika scenarier, från "justera knappfärg en gång om året" till "gör om layouten för hela temat utan en enda rad kod."

• Om du inte skriver CSS och vill ha en visuell redigerare med färdiga stilar, ta CSS Hero. Startplan för $29/år för en webbplats med 30 dagars pengarna tillbaka.
• Om du behöver en billigare visuell redigerare för alltid, Yellow Pencil för $26 engångskostnad på CodeCanyon. Gratisversionen fungerar också, testa innan du köper.
• Om budgeten är begränsad och du behöver ett fullfjädrat gratis tillägg med visuella kontroller och kodredigerare, SiteOrigin CSS. 100 000+ användare har inte fel.
• Om du är en utvecklare som behöver SCSS, utkastläge och responsiva redigeringar, Microthemer. $45 en gång och för alltid, plus gratis Lite för testning.
• Om redigeringarna är få och enkla, öppna Utseende → Anpassa → Extra CSS. WordPress inbyggda redigerare täcker 80% av vardagliga uppgifter utan ett enda extra tillägg.

Börja med Customizern nu: gå till admin, öppna sektionen Extra CSS och lägg till ett par rader. Du ser hur temat reagerar i realtid, och förstår om du behöver ett kraftfullare verktyg. Och vilket tillägg som räddade dig när du anpassade teman, skriv i kommentarerna.