Att göra personaliseringar med en förhandsgranskning i realtid på din blogg är mycket enklare och mycket mer tillfredsställande när du har förmågan att se de olika förändringarna så snart du gör dem. Det bästa sättet att göra ändringar i realtid är naturligtvis med hjälp av ett plugin.

CSS anpassa är en funktion som flera plugins erbjuder WordPress.org. Om du letar efter ett plugin som genererar ett formatmall (CSS), har du flera val tillgängliga. Men medan det finns många plugins som du kan använda för att skapa anpassad CSS-kod finns det väldigt få alternativ som erbjuder redigering av CSS-kod i realtid.

Så efter att ha utforskat plugin-katalogen för att hitta en lösning på denna begränsning lyckades jag hitta några sällsynta pärlor som förtjänar vår uppmärksamhet.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress blogg i fyra steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

1. Gul penna: Visual CSS Style Editor

Yellow Pencil är en visuell stilredigerare som du kan använda med vilket tema som helst för att anpassa din webbplats på några minuter (teckensnitt, färger, animationer och mer ...).Yellowpencil Visual CSS Style Editor plugin wordpress

Ce Wordpress plugin premium kommer att skapa CSS-stilar av bakgrund medan du spelar med färgerna som om det var ett spel. Det var designat för både nybörjare och erfarna användare.

Upptäck också vår 5-plugins Wordpress för att visa aviseringar

Inga kodkunskaper krävs. Men den Wordpress plugin har en bra CSS-editor för de som gillar att koda. Du kan koda live med denna editor och anpassa din CSS.

Ladda ner | demo | webbhotell

2. Easy Custom JS och CSS 

Ce Wordpress plugin premium är en kraftfull CSS- och JavaScript-kodredigerare som låter dig lägga till dem i valfri del av din webbplats. Det låter dig behålla dina anpassningar även efter en större uppdatering av din Wordpress tema. Enkel anpassad js och css extra anpassning wordpress plugin

Du har möjlighet att begränsa användningsområdet för din personliga kod. Du kan till exempel bara använda din kod för en artikel med videoformat.

Se våra artiklar om Hur man kräver godkännande av användarvillkoren på WordPress

Eller så kan du begränsa din kod till en Wordpress tema specifik; Vilket är praktiskt om du ofta byter teman för din Wordpress blogg.

Ladda ner | demo | webbhotell

3. Anpassad JS och CSS för Gutenberg

Premium-plugin-programmet WordPress anpassad JS och CSS för Gutenberg låter dig lägga till ett obegränsat antal anpassade stilar till WYSIWYG-redigeraren för dina WordPress-inlägg och sidor. Det är fullt kompatibelt med Gutenberg-versionen av WordPress.

Anpassade js och css för plugin för gutenberg wordpress

Du kan helt enkelt skapa en ny stil med en lättanvänd CSS-redigerare. Detta WordPress-plugin utökar funktionerna i anpassade fält på din webbplats och ger dig möjlighet att ändra dina anpassade fält med en dynamisk och kraftfull personaliseringsmodul. och funktionaliteten hos förhandsvisning i realtid av detta WordPress-plugin gör det mycket bekvämt och användarvänligt.

Ladda ner | demo | webbhotell

4. Advanced CSS Editor

ThemeIsle och Wunderkind WordPress-produktföretag utvecklade detta plugin. Efter att ha installerat och aktiverat den senare, navigera till följande plats " Utseende> Anpassning För att komma åt instrumentpanelen och leta efter "Advanced CSS Editor" i menyn. Det kommer att visas högst upp i listan över menyalternativ i Customizer. Avancerad CSS-redigerare - wordpress-plugin

För att ändra en CSS-kod är allt du behöver göra att lägga till en väljare och den regel som gäller för den i textrutan när du klickar på "menyn". Advanced CSS Editor".

Se också Så här förbättrar du dina bloggers dåliga kvalitetssider

CSS-regler kan skrivas för att gälla generellt eller för att rikta ett visst element på specifika enheter (dator, telefon, surfplatta etc.). Så snart reglerna skrivs kommer Customizer att visa en förhandsgranskning med de ändringar som har gjorts.

Ladda ner | demo | webbhotell

5. SiteOrigin CSS

Det är överlägset WordPress-plugin som erbjuder flest alternativ i den här listan. Det fantastiska med det senare är att det är gratis. Detta WordPress-plugin är det enda som inte kan hittas i anpassaren.

Siteorigin css - plugin för WordPress

Efter att ha installerat och aktiverat plugin-programmet måste du navigera till följande plats " Utseende> Anpassad CSS För att komma åt CSS-utgåvan av plugin. På den här sidan kan du se en textredigerare som inte erbjuder liveförhandsgranskning. 

Läs också vår artikel om 10 WordPress plugins för att öka försäljningen av din webbplats

För att komma åt det senare måste du klicka på en av de två knapparna som visas till vänster, precis ovanför redigeraren. Knappen med en ögonikon visar en visuell CSS-kodredigerare som entusiaster kommer att uppskatta. Ikonen med förlängningspilarna visar en textredigerare som innebär att du behärskar CSS-koder.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

Slutsats

Här är ! Det är allt för den här listan över premium WordPress-plugins som hjälper dig att redigera CSS på din blogg visuellt. Om du har commentaires eller förslag, tveka inte att meddela oss i det reserverade avsnittet.

Du kan dock också konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Vi inbjuder dig till dela på dina favorit sociala nätverk.