Bedste CSS Live Editor WordPress Plugins 2020

Tilpasning af designet til dit websted har aldrig været så let. Ved at bruge et WordPress CSS live editor plugin kan du nu oprette et unikt websted, der matcher dine specifikke designspecifikationer og afspejler dit brands image.


Indtil for nylig er brug af CSS til at ændre dit websteds udseende hovedsageligt overladt til webdesignere. Imidlertid er der nu en række WordPress CSS live editor plugins tilgængelige, der hjælper dig med at tilpasse dit websted. Nogle kræver lidt kodningskendskab, mens andre ikke har brug for nogen kodningserfaring overhovedet. Og alle af dem giver dig mulighed for at arbejde i forkant af dit rigtige websted i realtid.

I denne artikel skal vi se på, hvad et CSS-liveeditor-plugin er, hvad WordPress CSS-liveeditor-plugins er tilgængelige, og hvad vi skal kigge efter, når du vælger et.

Hvad er et WordPress CSS Live Editor Plugin?

Et WordPress CSS live editor plugin giver dig mulighed for at tilpasse dit temas design. Afvigende fra at redigere CSS-filer direkte eller bruge en bog-standard CSS-plugin, giver et WordPress CSS live editor-plugin dig dog mulighed for at arbejde i forreste ende af dit websted. Dette betyder, at du kan se dine ændringer, der er anvendt live i realtid, mens du foretager dem.

WordPress CSS live editor plugin

Brug af et WordPress CSS live editor plugin indebærer, at du indtaster kode, eller justerer kontrollerne i frontend. Dette betyder, at du kan se dine ændringer finde sted, mens du skriver. Ikke kun det, hvis du arbejder på den besøgende, der vender mod siden af ​​et websted, sparer du tid til at skifte mellem faner og konstant trykke på opdatering.

WordPress CSS Live Editor Plugins Kontrolpanel

WordPress CSS live editor-plugins, som ikke kræver, at du redigerer CSS, viser direkte et kontrolpanel i fronten af ​​dit websted, der giver dig mulighed for at foretage ændringer til dit websteds design gennem en visuel grænseflade. Dette fungerer meget enkelt ved at bare pege på og klikke på et element på siden og derefter vælge en ny indstilling fra de tilgængelige indstillinger. Valg af et af WordPress CSS live editor plugins med denne funktion er ideelt for dem, der vil tilpasse deres websteds design, men ikke ved, hvordan man skriver CSS.

Uanset hvilken type WordPress CSS live editor plugin, du bruger slutresultaterne, er det væsentlige det samme. Du får oprette et originalt og personligt design til dit websted. På grund af live editor-komponenten sparer du ikke kun tid og kræfter, men du kan faktisk også nyde processen.

Hvad skal man kigge efter i et WordPress CSS Live Editor-plugin

Hvad du ser efter fra et CSS live editor-plugin afhænger meget af dit niveau af CSS-viden eller kodningsoplevelse.

Hvis du er en ikke-koder, skal du ikke bekymre dig, er nogle CSS live editor-plugins blevet oprettet til at blive brugt af totalt begyndere. Du skal dog vælge et live editor-plugin med et kontrolpanel, der giver dig mulighed for bare at pege og klikke for at foretage ændringer. Det er dog værd at undersøge nøjagtigt, hvilke elementer du kan tilpasse, da hvert plugin er forskellige.

Mere erfarne udviklere ønsker måske et plugin, der giver dig mulighed for selv at indtaste eller redigere koden. En god mulighed er en, der giver dig en hjælpende hånd, når du koder og fremhæver eventuelle fejl. Andre plugin-funktioner, du skal kigge efter, uanset hvad din oplevelse inkluderer:

  • Fungerer det med alle WordPress-temaer og plugins?
  • Tilbyder det foruddefinerede designs?
  • Kan du arbejde i udkasttilstand, før du offentliggør ændringerne?
  • Gemmer det trinvise ændringer, mens du går, så du kan fortryde dit arbejde om nødvendigt?
  • Tilbyder det dybdegående dokumentation, tutorials og support?

Så nu ved du, hvad du skal overveje, før du vælger, lad os se på de forskellige WordPress CSS live editor plugins tilgængelige.

Disclaimer: WPExplorer er tilknyttet et eller flere produkter, der er anført nedenfor. Hvis du klikker på et link og gennemfører et køb, kan vi foretage en provision.

1. CSS Hero

CSS Hero

Info & DownloadSe demoen

CSS Hero er et premium live WordPress-temaeditor-plugin, der giver dig mulighed for at tilpasse næsten ethvert aspekt af dit temas design. Det gør dette ved at bruge et intuitivt punkt- og klikgrænseflade, der fungerer i forreste ende af webstedet, uden at du behøver at indtaste en linje med CSS, hvis du ønsker det. Derfor, selvom du overhovedet ikke har nogen kodningskendskab, kan du stadig bruge dette plugin til at ændre designet på dit websted.

CSS Hero har et par særligt bemærkelsesværdige funktioner. For det første gemmer det alle dine redigeringer, så du kan fortryde alt det arbejde, du har udført, eller vende tilbage til et bestemt punkt i din arbejdsgang. Du behøver ikke længere at frygte at begå en fejl og ødelægge dit websted.

For det andet leverer CSS Hero ‘Ready Made Styles’ og ‘Theme Skins’. Dette giver dig hundreder af design og 29 foruddefinerede layouts at vælge imellem som udgangspunkt for dit websted. Så selv dem af os uden designinspiration eller vision kan skabe et sted at være stolt af.

CSS Hero er et af de mest imponerende WordPress CSS live editor plugins, designet til at lade dig nemt tilpasse dit websteds design, uanset om du er en kodende begynder eller en webudvikler. Før du køber CSS Hero for kun $ 19, er det værd at kontrollere, om dette plugin fungerer med dit tema. CSS Hero arbejder på et antal Hero-klar-temaer, og de giver dig en beskrivelse, kompatibilitetsprocent (fyi Total scorer en højeste karakter på 99% – langt højere end andre topsælgende premium-temaer) og et live testwebsted for hver. Du kan også prøve CSSHero RocketMode for at gøre det tilgængeligt for dit aktuelle tema.

CSSHero Sommersalg

Lige nu kan du spare op til 50% på CSSHero under deres sommersalg! Ingen kode nødvendigt, når du tjekker, vil rabatten blive anvendt. Tilbuddet slutter den 9. august 2016.

Spar op til 50% på CSSHero

2. Gul blyant

Gul blyant

Info & DownloadSe demoen

Yellow Pencil er en WordPress Visual CSS Style-editor og et andet plugin, der ikke kræver nogen kodning. Når det er sagt, er der en CSS-editor, der er indbygget for dem, der kan lide at redigere deres stilark manuelt. Dette plugin fungerer 100% i frontenden, så du kan se og arbejde på dit websted i realtid. Det er oprettet for at lade dig tilpasse ethvert element til ethvert tema eller plugin, og giver dig mulighed for at redigere dit tema på få minutter, eller redesigne hele designet på dit websted, hvis du ønsker det.

Gul blyant giver dig mulighed for let at fremhæve individuelle CSS-vælgere, hvilket gør ændring af dit tema hurtigt og smertefrit. Dette plugin kan prale af mere end 300 baggrunde, 600+ fontfamilier og 50+ animationer at vælge imellem, så du kan tilpasse dit tema, så det passer til dit brands image. Gule sider leveres også med omfattende dokumentation og support til dem, der ikke har brugt WordPress live CSS-editor plugins før.

Gul blyant sætter dig tilbage $ 23 og er kompatibel med alle WordPress-temaer og plugins. Endnu en gang en god mulighed for både begyndere og erfarne webdesignere.

3. TJ Custom CSS

TJ Custom CSS-plugin

TJ Custom CSS fra Theme Junkie er et gratis WordPress-plugin, der giver dig mulighed for at tilpasse dit websted gennem en frontend interface. Dette plugin er designet med tanke på kodere, og det er ikke et plugin, der kan anbefales til dem, der ikke er sikker på CSS.

Som mange af disse plugins bruger TJ Custom CSS en CSS-manager til at tilføje den tilpassede CSS til dit websted og tilsidesætter ethvert tema eller standardformater. Dette kan åbnes og arbejdes på fra dit dashboard.

Med TJ Custom CSS kan du imidlertid også forhåndsvise dine ændringer i realtid. Ved at bruge Live Customizer kan du se den effekt, dine ændringer har, når du tilføjer den tilpassede CSS. Dette kan spare dig meget tid, da du ikke behøver at gemme dit arbejde, skifte browser-faner og opdatere sider.

TJ Custom er et meget ligetil plugin, der hjælper dig med at oprette et unikt websted nøjagtigt til dine behov. Hvis du har lyst til at smutte med kode og har erfaring med at tilpasse dit tema ved hjælp af CSS, kan dette være det perfekte plugin for dig.

4. SiteOrigin CSS

SiteOrigin CSS Editor

SiteOrigin CSS er et gratis avanceret WordPress CSS live editor plugin fra SiteOrigin. Efter sigende kompatible vil alle WordPress-temaer, denne funktionsrige plugin tilbyder et udvalg af værktøjer til at imødekomme alle brugeres behov uanset deres kodningsoplevelse.

For begyndere giver SiteOrigin CSS en Visual Editor. Dette består af et simpelt sæt af kontroller, der lader dig nemt vælge stilarter, farver og andre indstillinger. Har du ikke brug for nogen kodningsfærdigheder overhovedet, kan du foretage ændringer i dit websteds design med bare et par klik.

For dem med en vis manuel CSS-redigeringsoplevelse og et behov for at gøre mere, kommer SiteOrigin med en dynamisk inspektør. Dette hjælper dig med at finde den rigtige vælger, du skal bruge til at målrette mod et specifikt element, du vil tilpasse. Dette kan ofte være den sværeste del af redigering af eksisterende CSS, så det er en god hjælp til dem, der stadig lærer.

For de mere avancerede kodere derude har SiteOrigin-plugins kraftige CSS-editor autocompletion for både CSS-vælgere og attributter. Det vil også hjælpe dig med at finde problemer i din CSS, før du offentliggør den.

Uanset hvilke funktioner ved dette plugin, du bruger til at tilpasse dit WordPress-sted, foregår alt arbejde på fronten af ​​dit websted i realtid, så du kan se dine ændringer, mens du foretager dem.

5. Microthemer

Microtherma

Info & DownloadSe demoen

Microthemer er en intuitiv og kraftfuld visuel frontend premium WordPress CSS editor plugin. Det kan tilpasse udseendet på ethvert WordPress-tema eller plugin, og det er let nok til at undgå at nedsætte dit websted.

Microthemer giver muligheder for begyndere og professionelle. Ikke-kodere kan ændre elementer som farver, skrifttyper, baggrundsbilleder og webstedslayouts for at nævne nogle få. Udviklere kan arbejde i live preview-tilstand, kodning i CSS, SCSS og JavaScript, manuelt.

Et vigtigt træk ved Microthemer er, at det giver dig mulighed for at arbejde i kladde-tilstand. Du kan prøve et nyt design til dit websted eller bruge tid på at prøve forskellige stylingindstillinger uden at det påvirker dit publikums oplevelse på dit websted. Du kan derefter offentliggøre alle dine ændringer på én gang, når du er tilfreds med det endelige udkast.

Microthemer kommer med ekstremt grundige tutorials, dokumentation og supportfora, der hjælper dig med at få mest muligt ud af dette plugin. Du kan købe Microthemer mod et engangsgebyr på $ 45, som inkluderer gratis opgraderinger for livet.

Bonus: Ultimate Tweaker

Ultimate Tweaker til WordPress

Info & DownloadSe demoen

Måske vil du redigere ikke kun front-end-udseendet på dit websted, men nogle af brugerrollerne, login-siden eller andre WordPress-funktioner. Det er her Ultimate Tweaker til WordPress kan komme godt med. Plugin er kompatibelt med aktuelle versioner af WordPress. De fleste JavaScript-aktiverede browsere får dem til at arbejde uden problemer.

Ultimate Tweaker indeholder mere end 260 forskellige hacks og tweaks, der tillader brugere (uden php eller programmeringsviden) at konfigurere og tilpasse WordPress. På trods af det store antal funktioner er plugin meget hurtig og optimeret til kun at indlæse brugte tweaks (doven indlæsning uden hukommelsesbrug).

Plugin understøtter også de fleste temaer, logoer og ikoner og beskytter indholdet (ingen kontekstmenu, intet valg og ingen trækning). HTML Minifier-funktion hjælper brugere med at fjerne kommentarer, minimere HTML og oprette relative webadresser.

Blandt de bemærkelsesværdige funktioner i dette plugin er en letvægtsadministratorgrænseflade med automatisk besparelse, HTML Minifier og relative linksbygger, mulighed for at skjule Meta-bokse på brugerdefinerede sidetyper, Rollehåndtering, Rolleuafhængig indstillingstilstand, 2X hurtigere / Lazing Loading, Skjul og “Ultimate Tweaker” -administratorrolle.


Afsluttende tanker

Alle WordPress CSS live editor plugins nævnt her er imponerende muligheder for at hjælpe dig med at tilpasse dit webstedsdesign. Uanset hvilket plugin du vælger, skal du sørge for at læse den medfølgende dokumentation, så du kan få det bedste ud af det. Jo mere du forstår, hvordan du bruger en live editor, desto bedre bliver designene du producerer.

Bruger du et CSS live editor plugin, og i bekræftende fald hvilken? Vil du anbefale det? Del eventuelle nyttige tip eller observationer i kommentarerne.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map