Vaihdoin teeman fontin, ja mobiilinäkymä hajosi. Lisäsin täytettä child-teeman kautta, ja koko sivusto lakkasi latautumasta. Jokainen WordPressiä hallinnoiva on törmännyt "valkoiseen kuolemanruutuun" vähintään kerran sen jälkeen, mikä vaikutti harmittomalta tyylimuokkaukselta.

Aiemmin CSS-muokkaus vaati web-suunnittelijan tai tuntikausia manuaalista koodausta välilehtien vaihtamisineen ja loputtomine F5-painalluksineen. Nyt on olemassa live-CSS-editorilisäosia, jotka näyttävät tulokset ennen tallennusta, suoraan sivuston etusivulla, reaaliajassa. Syvällistä CSS-osaamista tai tiedostonhallintaa ei tarvita.

Alla neljä lisäosaa ja yksi sisäänrakennettu työkalu visuaaliseen ja manuaaliseen WordPress-tyylien muokkaukseen: aina premium-tason all-in-one-työkaluista animaatioineen täysin ilmaisiin ratkaisuihin. Jokainen on testattu testisivustolla ja toimii useimpien nykyaikaisten teemojen kanssa.

💡 Pikakatsaus:

• Käynnistä WordPressin mukauttaja (Ulkoasu → Mukauta → Lisä-CSS), se on sisäänrakennettu ilmainen työkalu, jossa on live-esikatselu yksinkertaisiin muokkauksiin.
• Jos tarvitset visuaalisen editorin ilman koodia, asenna CSS Hero tai Yellow Pencil: osoita elementtiä hiirellä ja muuta tyylejä paneelin kautta.
• Manuaaliseen CSS-koodaukseen automaattisella täydennyksellä valitse SiteOrigin CSS (ilmainen) tai Microthemer (maksullinen, lisäksi SCSS ja luonnostila).

Vertailutaulukko: live-CSS-editorit WordPressille

1. CSS Hero

CSS Hero, visuaalinen WordPress-teemaeditori, joka toimii "osoita ja klikkaa" -periaatteella. Valitse mikä tahansa elementti sivulta, otsikko, painike, lohko, ja muuta fonttia, väriä, täytettä tai varjoja oikealla olevan paneelin kautta. CSS-koodi luodaan automaattisesti, teematiedostoihin ei kosketa.

CSS Heron tärkein etu on täysi muokkaushistoria. Jokainen muutos tallennetaan versiona: teit virheen täytteessä tai painikkeen värissä, palauta tietty elementti teeman alkuperäiseen tilaan menettämättä muuta mukautusta. Lisäosa sisältää myös 29 valmista "skiniä" ja satoja esiasetuksia, voit ottaa mallipohjan ja hienosäätää sen brändillesi.

Edistyneille käyttäjille tarjolla on CSS-editori, jossa on syntaksin korostus ja LESS-tuki. CSS Hero on yhteensopiva DIVIn, Elementorin, Beaver Builderin, Genesiksen ja useimpien WordPress-teemojen kanssa. Suorituskyky ei kärsi: yksi staattinen CSS-tiedosto toimitetaan etusivulle, ei palvelinkuormaa.

• Hyvää: täysi muokkaushistoria ja yksittäisen elementin palautus, 29 valmista skiniä, ei koske teematiedostoihin, CSS-vienti lisäosan poistamiseksi käytöstä ulkoasun valmistuttua.
• Huonoa: tilaus alkaen $29/vuosi (Starter 1 sivustolle); kun tilaus päättyy, päivitykset lakkaavat tulemasta, mutta ulkoasu toimii edelleen.
• Hinta: Starter, $29/vuosi (1 sivusto), Personal, $59/vuosi (5 sivustoa), Pro, $199/vuosi (jopa 999 sivustoa), Lifetime Pro, $599 (kertamaksu, sisältää Animatorin).
• Lataa: 🔗 CSS Hero, virallinen sivusto | 🔗 Live-demo

2. Yellow Pencil

Yellow Pencil, visuaalinen CSS-editori, joka on saatavilla ilmaiseksi WordPress.org-hakemistossa rajoitetulla ominaisuusvalikoimalla. Pro-versio avaa täyden pääsyn yli 60 CSS-ominaisuuteen, yli 900 Google-fonttiin, yli 300 taustakuvioon ja yli 50 animaatioon.

Käyttöliittymä on minimalistinen: klikkaa sivun elementtiä, vasemmalle ilmestyy paneeli, jossa on käytettävissä olevat ominaisuudet. Marginaalin ja täytteen vedä ja pudota -toiminto toimii intuitiivisesti: vedä hiirellä, näet täytteen pikseleinä lennossa. Sisäänrakennettu "Mittaa"-työkalu näyttää elementtien väliset etäisyydet, ja "Rautalankamalli" kytkee päälle rautalankamallin tarkkaa asettelua varten.

Lisäosa ei muokkaa teematiedostoja, se luo erillisen tyylitiedoston, joka voidaan viedä tiedostoksi ja lisäosa poistaa käytöstä. Kätevää kertaluonteisissa projekteissa: ulkoasu valmis, CSS viety, Yellow Pencil poistettu.

• Hyödyt: raahaa ja pudota -täyte, yli 60 CSS-ominaisuutta Pro-versiossa, viivain ja rautalankamalli, tyylien vienti, ei koske teemaan.
• Haitat: fontin väri, taustakuvat ja leveys/korkeus eivät ole käytettävissä ilmaisversiossa; tuki wordpress.orgissa on rajallista, täysi tuki vain Pro-versiossa.
• Hinta: Ilmainen (rajoitettu) WordPress.org-hakemistossa; Pro alkaen $26 (kertamaksu CodeCanyonissa, yksi sivusto).
• Lataa: 🔗 Yellow Pencil WordPress.orgissa | 🔗 Live-demo

3. SiteOrigin CSS

SiteOrigin CSS, SiteOrigin-tiimin ilmainen lisäosa, jolla on 4,9 arvosana ja yli 100 000 aktiivista asennusta WordPress.orgissa. Yhdistää visuaaliset hallintapainikkeet aloittelijoille ja täyden koodieditorin kehittäjille.

Niille, jotka eivät kirjoita CSS:ää: visuaalisten hallintapainikkeiden paneelissa voit muuttaa värejä, fontteja, täytteitä ja reunuksia pudotusvalikoilla ja valitsimilla, ja tulokset näkyvät heti julkisella puolella. Kehittäjille: sisäänrakennettu tarkastaja auttaa löytämään oikean CSS-valitsimen tietylle elementille (usein manuaalisen muokkauksen tylsin osa), ja koodieditori tukee automaattista täydennystä sekä valitsimille että ominaisuuksille.

Erillinen plussa on virheiden korostus CSS:ssä ennen julkaisua. Lisäosa ei ole sidottu SiteOrigin-teemaan ja toimii minkä tahansa WordPress-teeman kanssa.

• Hyödyt: täysin ilmainen, visuaaliset hallintapainikkeet ja koodieditori, valitsintarkastaja, automaattinen täydennys, virheiden korostus.
• Haitat: ei valmiita teemoja/esiasetuksia (kaikki tehdään alusta); käyttöliittymä on spartalainen, häviää CSS Herolle visuaalisen editorin käyttömukavuudessa.
• Hinta: Ilmainen.
• Lataa: 🔗 SiteOrigin CSS WordPress.orgissa

4. Microthemer

Microthemer, ThemeOverin visuaalinen CSS-editori, joka tukee manuaalista koodausta CSS:llä, SCSS:llä ja JavaScriptillä. Ilmainen Lite-versio on saatavilla WordPress.orgissa (yli 10 000 aktiivista asennusta, arvosana 5/5), maksullinen kertamaksu $45 elinikäisillä päivityksillä.

Keskeinen ero kilpailijoihin on luonnostila. Voit kokeilla designia viikkoja ilman, että se vaikuttaa siihen, mitä kävijät näkevät. Kun kaikki on valmista, julkaise muutokset yhdellä painikkeella. Niille, jotka tekevät ulkoasuja asiakkaille tai uudistavat elävää sivustoa, tämä on ratkaiseva ominaisuus.

Microthemer tukee responsiivista muokkausta: vaihda työpöydän, tabletin ja mobiilin välillä käyttöliittymässä ja muokkaa tyylejä tietylle resoluutiolle. SCSS-tuki reaaliaikaisella käännöksellä, harvinaista visuaalisten editoreiden joukossa ja vakava argumentti kehittäjille, jotka ovat siirtyneet puhtaasta koodauksesta.

• Hyödyt: luonnostila, joka ei vaikuta vierailijoihin, SCSS + JS, responsiivinen muokkaus, elinikäiset päivitykset 45 dollarilla.
• Haitat: käyttöliittymä on aloittelijalle sekava, sopii paremmin niille, jotka jo ymmärtävät CSS:ää; Lite-versio on toiminnoiltaan rajallinen.
• Hinta: Lite, ilmainen WordPress.orgissa; Premium, 45 $ (kertamaksu, elinikäiset päivitykset ja tuki).
• Lataa: 🔗 Microthemer Lite WordPress.orgissa | 🔗 Virallinen sivusto

Bonus: WordPress Customizer, sisäänrakennettu CSS-editori

WordPress sisältää versiosta 4.7 alkaen Lisä-CSS-editorin suoraan vakio-Customizerissa (Ulkoasu → Mukauta → Lisä-CSS). Tämä ei ole lisäosa, vaan sisäänrakennettu ydintoiminto, joka toimii minkä tahansa teeman kanssa eikä vaadi asennusta.

Yksinkertaisiin muokkauksiin, kuten otsikon värin vaihtamiseen, yhden sivun marginaalin säätämiseen tai elementin piilottamiseen, tämä on enemmän kuin riittävä. Live-esikatselu toimii välittömästi: kirjoita CSS vasempaan paneeliin, tulos näkyy oikealla ilman tallennusta ja uudelleenlatausta. Koodi tallennetaan tietokantaan ja sidotaan teemaan: teemaa vaihdettaessa mukautettu CSS ei katoa, vaan odottaa paluuta edelliseen.

Aiemmin tällaisiin tehtäviin asennettiin erillisiä lisäosia, kuten Theme Junkien TJ Custom CSS, mutta sitä ei ole päivitetty vuoden 2016 jälkeen eikä testattu uusimmilla WordPress-versioilla. Customizer kattaa tämän tarpeen täysin ja ilmaiseksi.

Käytännössä sivuston omistajalle, jonka tarvitsee vaihtaa pari tyyliä puolen vuoden välein, erillisen lisäosan asentaminen on liioittelua. Customizer on jo valmiina jokaisessa WordPress-asennuksessa.

• Hyvää: sisäänrakennettu WordPress-ytimeen (ei tarvita erillistä lisäosaa), live-esikatselu, ei katoa teemaa vaihdettaessa, täysin ilmainen.
• Huonoa: vain manuaalinen koodin syöttö (ei visuaalista editoria), ei muokkaushistoriaa, ei automaattista täydennystä, monimutkaiseen muokkaukseen tarvitaan erillinen työkalu.
• Hinta: Ilmainen (osa WordPress-ydintä).
• Mistä löytyy: Ulkoasu → Mukauta → Lisä-CSS WordPress-hallintapaneelissa.

⁉️🤔 Usein kysytyt kysymykset

Tarvitseeko minun osata CSS:ää työskennelläkseni visuaalisella editorilla?

CSS Heron ja Yellow Pencilin kohdalla ei. Valitse elementti hiirellä ja muuta tyylejä paneelin kautta: fontti, väri, marginaali. Lisäosa tuottaa CSS-koodin taustalla. SiteOrigin CSS:ssä ja Microthemerissa on myös visuaaliset säätimet, mutta monimutkaisessa muokkauksessa valitsimien perustuntemus on hyödyksi.

Mikä lisäosa ei hidasta sivustoa?

Kaikki listatut lisäosat tuottavat staattisen CSS-tiedoston, jonka selain välimuistittaa, eivätkä kuormita palvelinta. Microthemer ja Yellow Pencil mahdollistavat lisäksi lopullisen CSS:n viennin ja itse lisäosan poistamisen käytöstä, jolloin sivusto jatkaa toimintaansa mukautetuilla tyyleillä ja lisäosan voi poistaa. Käytännössä ero latausnopeudessa millä tahansa niistä on virhemarginaalin sisällä.

Voinko muokata CSS:ää mobiiliversiolle erikseen?

Kyllä. Microthemer ja Yellow Pencil tukevat responsiivista muokkausta: vaihda työpöydän, tabletin ja puhelimen välillä suoraan lisäosan käyttöliittymässä ja aseta tyylit tietylle resoluutiolle. CSS Hero mahdollistaa myös tyylien muokkaamisen responsiivisessa tilassa, mutta vaatii media queryjen manuaalista lisäämistä.

Mitä tehdä, jos sivusto hajosi muokkausten jälkeen?

CSS Herossa on täysi muutoshistoria, palauta ongelmallinen elementti tai koko ulkoasu haluttuun kohtaan. Microthemer toimii luonnostilassa: kävijät näkevät vanhan ulkoasun, kunnes julkaiset uuden. Yellow Pencilissä on Kumoa/Tee uudelleen -toiminto istunnon aikana. Pidä joka tapauksessa tuore varmuuskopio ennen vakavaa muokkausta, tämä sääntö pätee kaikkiin lisäosiin poikkeuksetta.

Onko mitään järkeä maksaa premium-editorista, jos Customizer on ilmainen?

Riippuu muokkausten määrästä. Customizer on täydellinen 5-10 CSS-riville kerran kaudessa. Jos olet uusimassa koko teemaa, värejä, typografiaa, marginaaleja, animaatioita, visuaalinen editori kuten CSS Hero säästää tunteja manuaaliselta valitsimien etsimiseltä. Useita sivustoja hallinnoiville toimistoille ja freelancereille premium-lisäosa maksaa itsensä takaisin toisessa tai kolmannessa projektissa.

Mikä live-CSS-editori valita tehtävääsi

Kaikki valikoiman työkalut kattavat eri skenaarioita "napin värin säädöstä kerran vuodessa" aina "koko teeman uudelleen asemointiin ilman yhtäkään koodiriviä".

• Jos et kirjoita CSS:ää ja haluat visuaalisen editorin valmiilla tyyleillä, ota CSS Hero. Starter-paketti hintaan 29 $/vuosi yhdelle sivustolle, 30 päivän rahat takaisin -takuu.
• Jos tarvitset edullisemman visuaalisen editorin ikuisesti, Yellow Pencil kertamaksulla 26 $ CodeCanyonista. Ilmainen versio toimii myös, kokeile ennen ostoa.
• Jos budjetti on rajallinen ja tarvitset täysiverisen ilmaisen lisäosan visuaalisilla säätimillä ja koodieditorilla, SiteOrigin CSS. Yli 100 000 käyttäjää ei ole väärässä.
• Jos olet kehittäjä, joka tarvitsee SCSS:n, luonnostilan ja responsiiviset muokkaukset, Microthemer. 45 $ kertamaksu ja ikuinen, plus ilmainen Lite testaukseen.
• Jos muokkauksia on vähän ja ne ovat yksinkertaisia, avaa Ulkoasu → Mukauta → Lisä-CSS. WordPressin sisäänrakennettu editori kattaa 80% jokapäiväisistä tehtävistä ilman yhtäkään erillistä lisäosaa.

Aloita Customizerilla heti: mene hallintapaneeliin, avaa Lisä-CSS-osio ja lisää pari riviä. Näet, miten teema reagoi lennossa, ja ymmärrät, tarvitsetko tehokkaampaa työkalua. Ja mikä lisäosa pelasti sinut teemoja muokatessasi, kirjoita kommentteihin.