K. Andersson
Moderna metoder för CSS gör det superenkelt att redigera utseendet och känslan på din webbplats. Men vanligtvis behöver du fortfarande gå fram och tillbaka mellan redigeraren och din webbplatss front-end, tweaking och teständringar. Tänk om du kunde redigera din CSS live med en förhandsvisning i realtid?
Det är tillräckligt enkelt att hitta ett anpassat CSS-plugin i WordPress-pluginförrådet, men alternativen minskar snabbt när du letar efter en som har ett liveförhandsvisningsalternativ.
I den här artikeln presenterar vi våra val för anpassade WordPress CSS-redigerare som har en liveförhandsvisning…
CSS-hjälte
CSS Hero är en premium WordPress CSS-redigerare som gör det möjligt för användare att anpassa varje egenskap av webbplatsens tema, live. Plugin-programmet har ett intuitivt peka-och-klicka-användargränssnitt genom vilket användare kan stöka runt med typografi, experimentera med färgändringar i realtid och till och med ändra storlek på sidelement direkt.
Till skillnad från traditionella live CSS-redigerare låter CSS Hero också användare lägga till specialeffekter till sin webbplats tema med hovring, skuggor och övergångar. En annan utmärkande funktion som användare får med det här pluginet är att det matar ut ren och förminskad CSS-kod baserat på de ändringar du gjorde i temat under liveredigeringsprocessen. Användare kan sedan implementera den bärbara CSS-koden till vilken annan plattform som helst för att göra liknande ändringar av andra teman.
CSS Hero-pluginens startplan kommer med en prislapp på $29/år och är bra att använda på en webbplats. Om du vill använda plugin på flera webbplatser kan du välja $59/år personlig plan som kan användas på upp till 5 webbplatser eller $199/år Pro Plan som du kommer att kunna använda på upp till 999 webbplatser . Jämför planer här.
Visual CSS Style Editor
Om du kommer på att du ändrar webbplatsens tema ofta kommer du att älska det Visual CSS Style Editor. Denna kraftfulla plugin gör det möjligt för användare att modifiera allt från Google Fonts och bakgrundsstilar till animationer och färgpaletter live. Med bara några klick kommer du äntligen att kunna ändra det irriterande designelementet samtidigt som du förhandsgranskar ändringarna när de sker. Det finns också en utökad premiumversion tillgänglig här.
Visual CSS Style Editors enastående funktion är dess inbyggda, smarta inspektör som låter användare skapa CSS-väljare och stilar precis som professionella webbutvecklare. Så snart du klickar på ett element kommer inspektören automatiskt att skapa den mest lämpliga väljaren för att rikta in sig på det.
En av de bästa funktionerna med detta plugin är att det erbjuder en dra och släpp-redigerare och live resizer som är bra för webbansvariga som drar sig för kodning. Gratisversionen av plugin är bra att komma igång med och när du är redo att ta saker vidare kan du uppgradera till Pro-versionen.
TJ Custom CSS
Tema Junkie’s TJ Custom CSS aktiverar en anpassad CSS-redigerare på din WordPress-webbplats administrationssida och åsidosätter automatiskt standardstilarna som skapas av dina teman och plugins. Plugin-programmet har två alternativ för att komma åt CSS-redigeraren – det traditionella textområdet eller en liveförhandsvisning.
Genom att välja liveförhandsgranskningsalternativet kommer du att kunna redigera din webbplats i realtid och se dina ändringar live när du gör dem. Insticksprogrammet fungerar också som ett underordnat temaalternativ till att lägga till anpassad CSS-kod till din webbplats tema.
Detta plugin är bra för webbutvecklare som vill ha bättre kontroll över sin webbplats anpassning packad i en lättviktslösning. Dess textredigerare har en syntaxmarkör som hjälper dig att hitta och korrigera eventuella CSS-syntaxfel i din kod.
SiteOrigin CSS
SiteOrigins CSS-redigerare är kanske det mest populära pluginet på den här listan – och av goda skäl! Denna avancerade, live WordPress CSS-redigerare är packad till toppen med fantastisk funktionalitet och designad för att användas av både nybörjare och avancerade användare.
Om du någonsin har krånglat med CSS så vet du ganska väl att det svåraste är att hitta en lämplig väljare för ditt målelement. Plugin-inspektören hjälper dig i detta avseende genom att identifiera den bästa väljaren för dig när du klickar på något sidelement. Ganska snyggt, eller hur?
SiteOrigins CSS är en dröm som går i uppfyllelse för icke-kodare som kan utnyttja pluginens enkla kontrollsystem som låter dem välja färger, stilar och mått utan att behöva smutsa ner händerna med kod.
Microthemer Lite
Microthemer Lite är en enkel men kraftfull visuell temaredigerare som gör det möjligt för användare att responsivt modifiera sin webbplats utseende och känsla utan att behöva gå in i dess kod. Med detta plugin kan du liveredigera nästan allt på din webbplats inklusive plugininnehåll.
De av er som är tekniskt sinnade kommer att upptäcka att detta plugin dramatiskt påskyndar anpassningsprocessen genom att ha en ACE-kodredigerare med syntaxmarkering och brandbugliknande CSS-rapportering.
Pluginens intuitiva användargränssnitt fungerar utmärkt för icke-tekniska användare genom att låta dem redigera sin webbplats sidelement i realtid. Det bästa av allt är att den levereras med en handfull användbara handledningar för att hjälpa webbansvariga för första gången att komma igång. Om du fastnar på vägen kan du kolla in pluginets omfattande dokumentation eller kontakta supportteamet för hjälp.
Du kan också kolla in premiumversioner av plugin här.
Avancerad CSS Editor
De Avancerat CSS Editor plugin är verkligen avancerad i ordets alla bemärkelser. Till att börja med låter den dig skriva anpassad CSS-kod för varje enhet (mobiler, surfplattor och stationära datorer) från live-anpassaren. Med detta plugin kan du inte bara anpassa utseendet för stationära enheter utan även för mobila enheter – och du kan se ändringarna medan du redigerar.
När du har valt din enhet är allt du behöver göra att lägga till en CSS-väljare och några regler för den i textruteredigeraren. Liveförhandsvisningen ändras hela tiden när du fortsätter att lägga till regler till CSS-väljarna. Insticksprogrammets enhetsinriktningsfunktion skiljer den från sina konkurrenter. Men om det finns några ändringar som du vill implementera på alla enheter kan du ställa in dem för att tillämpas globalt.
Slår ihop det
Var och en av de fem plugin-programmen på vår lista har en unik uppsättning funktioner som tilltalar olika användare och en av dem är skyldig att passa dina CSS-anpassningsbehov beroende på din tekniska expertis och kompetens. Vi lyfte fram de utmärkande funktionerna i varje CSS-redigerare och uppmuntrar dig att prova dem på egen hand för att hitta den som är bäst för dig.
Vilka live WordPress CSS editor plugins har du provat på din WordPress webbplats? Vi vill gärna höra allt om din upplevelse med dem så låt oss veta genom att kommentera nedan!
