Å lage personaliseringer med en forhåndsvisning i sanntid på bloggen din er mye enklere og mer tilfredsstillende når du har muligheten til å se de forskjellige endringene så snart du gjør dem. Den beste måten å gjøre gjeldende endringer i sanntid er selvfølgelig ved hjelp av et plugin.

CSS tilpasning er en funksjon som tilbys av flere plugins på WordPress.org. Hvis du leter etter en plugin som genererer et stilark (CSS), har du flere valg tilgjengelig. Men mens det er mange plugins du kan bruke til å lage tilpasset CSS-kode, er det svært få alternativer som tilbyr sanntidsredigering av CSS-kode.

Så etter å ha utforsket plugin-katalogen for å finne en løsning på denne begrensningen, klarte jeg å finne noen sjeldne perler som fortjener vår oppmerksomhet.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blog i 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

1. Gul blyant: Visual CSS Style Editor

Yellow Pencil er en redaktør for visuell stil som du kan bruke med hvilket som helst tema for å tilpasse nettstedet ditt på få minutter (skrifter, farger, animasjoner og mer ...).Yellowpencil Visual CSS Style Editor Plugin Wordpress

Ce WordPress Plugin premium vil lage CSS-stiler av bakgrunn mens du spiller med fargene som om det var et spill. Det var designet for både nybegynnere og erfarne brukere.

Oppdag også vår 5-plugins WordPress for å vise varsler

Ingen kodekunnskap er nødvendig. Imidlertid WordPress Plugin har en god CSS-editor for de som liker å kode. Du kan kode live med denne editoren og tilpasse CSS.

Last ned | dEMO | Webhotell

2. Enkel tilpasset JS og CSS 

Ce WordPress Plugin premium er en kraftig CSS- og JavaScript-koderedigerer som lar deg legge dem til en hvilken som helst del av nettstedet ditt. Det lar deg beholde tilpasningene dine selv etter en større oppdatering av din WordPress tema. Enkel tilpasset js og css ekstra tilpasning wordpress plugin

Du har muligheten til å begrense bruksområdet for din personlige kode. For eksempel kan du bare bruke koden din til en artikkel i videoformat.

Se våre artikler om Hvordan kreve aksept av vilkårene for bruk på WordPress

Eller du kan begrense koden til en WordPress tema spesifikk; Noe som er nyttig hvis du ofte endrer temaer for din WordPress blog.

Last ned | dEMO | Webhotell

3. Tilpasset JS og CSS for Gutenberg

Premium WordPress-plugin Custom JS og CSS for Gutenberg vil tillate deg å legge til et ubegrenset antall tilpassede stiler i WYSIWYG-redigereren for WordPress-innlegg og sider. Den er fullt kompatibel med Gutenberg-versjonen av WordPress.

Tilpasset js og css for gutenberg wordpress plugin

Du kan ganske enkelt lage en ny stil med en brukervennlig CSS-editor. Denne WordPress-pluginen utvider funksjonene til tilpassede felt av nettstedet ditt og gir deg muligheten til å endre dine tilpassede felt med en dynamisk og kraftig personaliseringsmodul. og funksjonaliteten til forhåndsvisning av sanntid av dette WordPress-plugin gjør det veldig behagelig og brukervennlig.

Last ned | dEMO | Webhotell

4. Avansert CSS Editor

ThemeIsle og Wunderkind WordPress-produktselskapet utviklet denne pluginen. Etter å ha installert og aktivert sistnevnte, naviger til følgende plassering " Utseende> Personalisering For å få tilgang til dashbordet og se etter "Advanced CSS Editor" i menyen. Den vises øverst på listen over menyelementer i Customizer. Avansert CSS-editor - WordPress-plugin

For å endre en CSS-kode er alt du trenger å gjøre å legge til en velger og regelen som gjelder for den i tekstboksen når du klikker på "menyen". Avansert CSS Editor".

Se også Slik forbedrer du de dårlige kvalitetssidene til bloggen din

CSS-regler kan skrives for å gjelde generelt eller for å målrette et bestemt element på bestemte enheter (datamaskin, telefon, nettbrett, etc.). Så snart reglene er skrevet, vil Customizer vise en forhåndsvisning med endringene som er gjort.

Last ned | dEMO | Webhotell

5. SiteOrigin CSS

Det er uten tvil WordPress-pluginet som tilbyr de fleste alternativene i denne listen. Det mest fantastiske med det siste er at det er gratis. Dette WordPress-pluginet er det eneste som ikke finnes i tilpasseren.

Siteorigin CSS - WordPress-plugin

Etter å ha installert og aktivert plugin-en, må du navigere til følgende plassering " Utseende> Egendefinert CSS For å få tilgang til CSS-utgaven av pluginet. På denne siden kan du se et tekstredigeringsprogram som ikke tilbyr forhåndsvisning i sanntid. 

Les også artikkelen vår om 10 WordPress plugins for å øke salget av nettstedet ditt

For å få tilgang til sistnevnte må du klikke på en av de to knappene som vises til venstre, rett over redigeringsprogrammet. Knappen med et øyeikon vil få frem en visuell CSS-editor som entusiaster vil sette pris på. Ikonet med utvidelsespilene viser en tekstredigerer som vil innebære en mestring av CSS-koder.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

konklusjonen

Her er ! Det er alt for denne listen over premium WordPress-plugins som hjelper deg visuelt å redigere CSS på bloggen din. Hvis du har det commentaires eller forslag, ikke nøl med å gi oss beskjed i den reserverte delen.

Du kan imidlertid også konsultere vår ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Vi inviterer deg til del på dine favoritt sosiale nettverk.   

...