Byttet temafont, og mobiloppsettet knakk. La til padding via et child theme, og hele nettstedet sluttet å laste. Alle som administrerer WordPress har opplevd «den hvite dødsskjermen» minst én gang etter det som virket som en uskyldig stilredigering.

Tidligere krevde CSS-tilpasning en webdesigner eller timevis med manuell koding med fanebytte og endeløs F5. Nå finnes det live CSS-editor-plugins som viser resultatet før du lagrer, rett på frontend, i sanntid. Du trenger verken dyp CSS-kunnskap eller filbehandler.

Nedenfor finner du fire plugins og ett innebygd verktøy for visuell og manuell WordPress-stilredigering: fra premium alt-i-ett-verktøy med animasjoner til helt gratis løsninger. Hver av dem er testet på et testnettsted og fungerer med de fleste moderne temaer.

💡 Rask oversikt:

• Start WordPress Customizer (Utseende → Tilpass → Ekstra CSS), det er et innebygd gratisverktøy med live forhåndsvisning for enkle redigeringer.
• Trenger du en visuell editor uten kode, installer CSS Hero eller Yellow Pencil: pek på et element med musen og endre stiler via et panel.
• For manuell CSS-koding med autofullføring, velg SiteOrigin CSS (gratis) eller Microthemer (premium, pluss SCSS og utkastmodus).

Sammenligningstabell: live CSS-editorer for WordPress

1. CSS Hero

CSS Hero, en visuell WordPress-temaeditor som fungerer etter et «pek og klikk»-prinsipp. Velg et hvilket som helst element på siden, overskrift, knapp, blokk, og endre font, farge, padding eller skygger via panelet til høyre. CSS-kode genereres automatisk, temafiler berøres ikke.

CSS Heros største fordel er full redigeringshistorikk. Hver endring lagres som en versjon: gjorde du en feil med padding eller knappefarge, kan du rulle tilbake et spesifikt element til temaets opprinnelige tilstand uten å miste resten av tilpasningen. Pluginen leveres også med 29 ferdige «skins» og hundrevis av forhåndsinnstillinger, du kan ta en mal og justere den for din merkevare.

For viderekomne brukere finnes det en CSS-editor med syntaksutheving og LESS-støtte. CSS Hero er kompatibel med DIVI, Elementor, Beaver Builder, Genesis og de fleste WordPress-temaer. Ytelsen lider ikke: én enkelt statisk CSS-fil leveres til frontend, ingen serverbelastning.

• Fordeler: full redigeringshistorikk med tilbakerulling av enkeltelementer, 29 ferdige skins, berører ikke temafiler, CSS-eksport for å deaktivere pluginen etter layout.
• Ulemper: abonnement fra $29/år (Starter for 1 nettsted); når abonnementet utløper stopper oppdateringer, men layouten fortsetter å fungere.
• Pris: Starter, $29/år (1 nettsted), Personal, $59/år (5 nettsteder), Pro, $199/år (opptil 999 nettsteder), Lifetime Pro, $599 (engangsbetaling, inkluderer Animator).
• Last ned: 🔗 CSS Hero, offisielt nettsted | 🔗 Live demo

2. Yellow Pencil

Yellow Pencil, en visuell CSS-editor som er tilgjengelig gratis i WordPress.org-katalogen med et begrenset sett egenskaper. Pro-versjonen gir full tilgang til 60+ CSS-egenskaper, 900+ Google-fonter, 300+ bakgrunnsmønstre og 50+ animasjoner.

Grensesnittet er minimalistisk: klikk på et element på siden, så vises et panel med tilgjengelige egenskaper til venstre. Dra-og-slipp for margin og padding fungerer intuitivt: dra med musen, se paddingen i piksler i sanntid. Det innebygde «Measure»-verktøyet viser avstander mellom elementer, og «Wireframe» slår på en trådmodell for presis layout.

Pluginen endrer ikke temafiler, men genererer et separat stilark som kan eksporteres til en fil og pluginen deaktiveres. Praktisk for engangsprosjekter: layout ferdig, CSS eksportert, Yellow Pencil fjernet.

• Fordeler: dra-og-slipp for utfylling, 60+ CSS-egenskaper i Pro, linjal og trådmodell, stileksport, rører ikke temaet.
• Ulemper: skriftfarge, bakgrunnsbilder og bredde/høyde utilgjengelig i gratisversjonen; støtte på wordpress.org er begrenset, full støtte kun i Pro.
• Pris: Gratis (begrenset) i WordPress.org-katalogen; Pro, fra $26 (engangsbetaling på CodeCanyon, ett nettsted).
• Nedlasting: 🔗 Yellow Pencil på WordPress.org | 🔗 Live demo

3. SiteOrigin CSS

SiteOrigin CSS, en gratis plugin fra SiteOrigin-teamet med vurderingen 4,9 og over 100 000 aktive installasjoner på WordPress.org. Kombinerer visuelle kontroller for nybegynnere og en full kodeeditor for utviklere.

For dem som ikke skriver CSS: panelet med visuelle kontroller lar deg endre farger, fonter, utfylling og rammer via nedtrekksmenyer og velgere, med resultater synlige umiddelbart på forsiden. For utviklere: den innebygde inspektøren hjelper deg med å finne riktig CSS-selektor for et bestemt element (ofte den mest tidkrevende delen av manuell redigering), og kodeeditoren støtter autofullføring for både selektorer og egenskaper.

Et eget pluss er feilutheving i CSS før publisering. Pluginen er ikke knyttet til SiteOrigin-temaet og fungerer med ethvert WordPress-tema.

• Fordeler: helt gratis, visuelle kontroller + kodeeditor, selektorinspektør, autofullføring, feilutheving.
• Ulemper: ingen ferdige skinn/maler (alt fra bunnen av); grensesnittet er spartansk, underlegent CSS Hero når det gjelder visuell editor sin bekvemmelighet.
• Pris: Gratis.
• Nedlasting: 🔗 SiteOrigin CSS på WordPress.org

4. Microthemer

Microthemer, en visuell CSS-editor fra ThemeOver med støtte for manuell koding i CSS, SCSS og JavaScript. Den gratis Lite-versjonen er tilgjengelig på WordPress.org (over 10 000 aktive installasjoner, vurdering 5/5), premium, engangsbetaling $45 med livstidsoppdateringer.

Den viktigste forskjellen fra konkurrentene er utkastmodus. Du kan eksperimentere med design i ukevis uten at det påvirker hva besøkende ser. Når alt er klart, publiserer du endringene med én knapp. For dem som setter opp layout for kunder eller redesigner et live-nettsted, er dette kritisk.

Microthemer støtter responsiv redigering: bytt mellom desktop, nettbrett og mobil i grensesnittet, og rediger stiler for en bestemt oppløsning. SCSS-støtte med sanntidskompilering, sjeldent blant visuelle editorer og et tungtveiende argument for utviklere som har gått over fra ren koding.

• Fordeler: utkastmodus uten å påvirke besøkende, SCSS + JS, responsiv redigering, livstidsoppdateringer for $45.
• Ulemper: grensesnittet er overlesset for nybegynnere, passer bedre for dem som allerede forstår CSS; Lite-versjonen har begrenset funksjonalitet.
• Pris: Lite, gratis på WordPress.org; Premium, $45 (engangsbetaling, livstidsoppdateringer og support).
• Nedlasting: 🔗 Microthemer Lite på WordPress.org | 🔗 Offisielt nettsted

Bonus: WordPress Customizer, innebygd CSS-editor

WordPress fra og med versjon 4.7 inkluderer redigeringsverktøyet Tilleggs-CSS rett i standard Customizer (Utseende → Tilpass → Tilleggs-CSS). Dette er ikke en utvidelse, det er en innebygd kjernefunksjon som fungerer med ethvert tema og ikke krever installasjon.

For enkle redigeringer, endre overskriftsfarge, justere luft på én side, skjule et element, er dette mer enn nok. Live forhåndsvisning fungerer umiddelbart: skriv inn CSS i venstre panel, resultatet vises til høyre, uten å lagre og laste på nytt. Koden lagres i databasen og er knyttet til temaet: når du bytter tema går ikke den tilpassede CSS-en tapt, men venter til du går tilbake til det forrige.

Tidligere installerte folk egne utvidelser for slike oppgaver, som TJ Custom CSS fra Theme Junkie, men den har ikke blitt oppdatert siden 2016 og har ikke blitt testet med de nyeste WordPress-versjonene. Customizer dekker denne nisjen fullstendig og gratis.

I praksis er det overdrevent å installere en egen utvidelse for en nettstedeier som trenger å endre et par stiler hvert halvår. Customizer er allerede her, i hver WordPress-installasjon.

• Fordeler: innebygd i WordPress-kjernen (ingen egen utvidelse nødvendig), live forhåndsvisning, går ikke tapt ved temabytte, helt gratis.
• Ulemper: kun manuell kodeinntasting (ingen visuell editor), ingen redigeringshistorikk, ingen autofullføring, for kompleks tilpasning trengs et eget verktøy.
• Pris: Gratis (del av WordPress-kjernen).
• Hvor du finner den: Utseende → Tilpass → Tilleggs-CSS i WordPress-administrasjonen.

⁉️🤔 Ofte stilte spørsmål

Må jeg kunne CSS for å jobbe med en visuell editor?

For CSS Hero og Yellow Pencil, nei. Velg et element med musen og endre stiler gjennom et panel: skrift, farge, luft. Utvidelsen genererer CSS-kode i bakgrunnen. SiteOrigin CSS og Microthemer har også visuelle kontroller, men for kompleks tilpasning er grunnleggende kunnskap om selektorer nyttig.

Hvilken utvidelse vil ikke gjøre nettstedet tregere?

Alle listede utvidelser genererer en statisk CSS-fil som bufres av nettleseren og belaster ikke serveren. Microthemer og Yellow Pencil tillater i tillegg eksport av den endelige CSS-en og deaktivering av selve utvidelsen, nettstedet vil fortsette å fungere med tilpassede stiler, og utvidelsen kan fjernes. I praksis er forskjellen i lastehastighet med noen av dem innenfor feilmarginen.

Kan jeg redigere CSS for mobilversjonen separat?

Ja. Microthemer og Yellow Pencil støtter responsiv redigering: bytt mellom desktop, nettbrett og telefon rett i utvidelsens grensesnitt og sett stiler for en spesifikk oppløsning. CSS Hero tillater også redigering av stiler i responsiv modus, men krever manuell tilføyelse av media queries.

Hva gjør jeg hvis nettstedet ble ødelagt etter redigeringer?

I CSS Hero finnes det full endringshistorikk, rull tilbake problemelementet eller hele designet til ønsket punkt. Microthemer fungerer i kladdmodus: besøkende ser det gamle designet til du publiserer det nye. Yellow Pencil har Angre/Gjør om innenfor økten. I alle tilfeller, ta en fersk sikkerhetskopi før seriøs tilpasning, denne regelen gjelder for alle utvidelser uten unntak.

Er det noe poeng i å betale for en premium-editor når Customizer er gratis?

Avhenger av omfanget av redigeringer. Customizer er perfekt for 5-10 linjer CSS én gang i sesongen. Hvis du gjør om hele temaet, farger, typografi, luft, animasjoner, vil en visuell editor som CSS Hero spare timer med manuelt selektorvalg. For byråer og frilansere som administrerer flere nettsteder, betaler en premium-utvidelse seg på det andre eller tredje prosjektet.

Hvilken live CSS-editor du bør velge for din oppgave

Alle verktøyene i utvalget dekker forskjellige scenarier, fra «justere knappefarge én gang i året» til «omstrukturere hele temaet uten en eneste linje kode.»

• Hvis du ikke skriver CSS og vil ha en visuell editor med ferdige stiler, velg CSS Hero. Startplan til $29/år for ett nettsted med 30-dagers pengene-tilbake-garanti.
• Hvis du trenger en billigere visuell editor for alltid, Yellow Pencil for $26 engangsbeløp på CodeCanyon. Gratisversjonen fungerer også, prøv før du kjøper.
• Hvis budsjettet er begrenset og du trenger en fullverdig gratis utvidelse med visuelle kontroller og kodeeditor, SiteOrigin CSS. 100 000+ brukere tar ikke feil.
• Hvis du er en utvikler som trenger SCSS, kladdmodus og responsive redigeringer, Microthemer. $45 én gang og for alltid, pluss gratis Lite for testing.
• Hvis redigeringene er få og enkle, åpne Utseende → Tilpass → Tilleggs-CSS. WordPress sin innebygde editor dekker 80% av daglige oppgaver uten en eneste ekstra utvidelse.

Start med Customizer nå: gå til administrasjon, åpne Tilleggs-CSS-seksjonen og legg til et par linjer. Du vil se hvordan temaet reagerer direkte, og forstå om du trenger et kraftigere verktøy. Og hvilken utvidelse som reddet deg ved tilpasning av temaer, skriv i kommentarfeltet.