CSS Hero Review: WordPress-teeman mukauttaminen on helppoa!

WordPress-tarjoukset


Kun kyse on verkkosivustosta, joka näyttää täsmälleen haluamaltasi, käytettävissä olevien WordPress-teemojen runsas runsaus on todellinen siunaus! Ja jos vietät tarpeeksi kauan etsimällä, saatat tosiasiallisesti löytää teeman, joka on ehdottoman täydellinen sivustollesi. On kuitenkin mahdollista, että vaikka pääsetkin lähelle haluamaasi, olet silti todennäköisesti hiukan kaukana täydellisyydestä. Loppujen lopuksi, voiko valmiiksi rakennettu teema koskaan todella vastata yksilön tarpeisiin T: ään asti?…

Joten mitä tehdä, jos olet onnistunut löytämään teeman, joka on lähellä haluamaasi, mutta joudut silti tekemään muutama muutos? No, jos sinulla on tietysti vaadittavat taidot, ei hätää: voit muokata sitä haluamallasi tavalla. Entä jos sinulla ei ole luottamusta mennä sisään ja tehdä omia muutoksia tarvittaviin tiedostoihin?

Tänään haluaisin esitellä sinulle todella kätevän laajennuksen: CSS Hero – laajennus, joka antaa sinulle mahdollisuuden tehdä itse pieniä – tai ehkä jopa suhteellisen suuria – visuaalisia mukautuksia: tarvitsematta koskettaa yhtä koodiriviä!

Mikä on CSS Hero?

CSS Hero on teeman räätälöintilaajennus (Näytä ominaisuudet.

CSS Hero

Sellaisena se vie samanlaisen tilan vetämällä ja pudottamalla sivunmuodostajan laajennuksia. Jos sivunrakentajat kuitenkin rohkaisevat sinua rakentamaan mukautetun suunnittelun alusta alkaen, CSS Hero antaa sinun muokata olemassa olevaa WordPress-teemaa millä tahansa haluat.

Tämän avulla voit pelata kehittäjää ilman, että sinulla on välttämättä mitään kehittäjän taitoja, jotka yleensä ovat mukana. Käytät edelleen ammattimaisesti suunniteltua WordPress-teemaasi – tiedätte, asiantuntijan rakentaman, ei sen, että joku heittää satunnaisia ​​moduuleja yhdessä, à la-sivunmuodostaja-laajennuksia – samalla kun teet pieniä muutoksia tarpeitasi vastaavaksi.

Mikään paikan päällä oleva elementti ei ole rajoissa: Voit mukauttaa mitä tahansa ja kaikkea. CSS Hero muuntaa mukautuksesi asiaankuuluvaksi CSS-koodiksi, joka lisätään sitten uuteen CSS-tyylitaulukkoon (alkuperäinen tyylitaulukko pysyy koskemattomana, välttäen mahdolliset ongelmat).

CSS Hero toimii myös minkä tahansa WordPress-teeman kanssa. Niitä, joille on testattu yhteensopivuus yhteensopivuuden kanssa, kutsutaan sankarivalmiiksi, kun taas testaamattomia teemoja tuetaan edelleen Rocket-tilassa.

hintoja

CSS Hero on edullinen, edullinen lisäosa. Kilpailun vuoksi se hinnoitellaan verrattuna suosituimpiin sivujen rakennuksen lisäosiin.

Peruskäyttäjälisenssi maksaa vain 29 dollaria, ja se antaa sinulle pääsyn koko CSS Hero -laajennukseen (vaikkakin sinulla on käyttö vain yhdessä verkkosivustossa).

Jos haluat käyttää CSS Heroa useammassa kuin yhdessä verkkosivustossa, vaihtoehdot ovat:

  • Henkilökohtainen lisenssi (59 dollaria) – enintään viisi sivustoa
  • Pro-lisenssi (199 dollaria) – jopa 999 sivustoa

Kuten voitte kuvitella, pro-lisenssi on tarkoitettu luoville toimistoille ja urakehittäjille. Sekä henkilöllisillä että pro-lisensseillä on pääsy myös premium-lisäosaan, Inspector Pro – peitämme tätä tarkemmin sivun alaosassa.

Kaikki kolme CSS Hero -lisenssiä ovat voimassa yhden vuoden, ne antavat pääsyn yhden vuoden päivityksiin ja tukeen, ja niillä on 30 päivän rahat takaisin -takuu.

Päästä alkuun

Ostoksesi jälkeen sinut viedään CSS Hero -hallintapaneeliin. Sieltä pääset käsiksi laajennuksen laajaan dokumentaatioon sekä mahtavaan CSS Hero Academy -sovellukseen. Akatemia on hieno kosketus, sisältää sarjan aloittelijoille sopivia video-oppaita, jotka on suunniteltu auttamaan sinua saamaan kaikki irti uudesta liitännäisestäsi (mielelläni nähdä muita edistyneitä laajennuksia, jotka seuraavat mallia).

CSS Hero Dashboard

Hallintapaneeli suorittaa yhden muun tärkeän toiminnon: Sieltä lataat CSS Hero -sovelluksen ja lisenssitasosta riippuen Inspector Pro -laajennukset.

Kun lataukset on valmis, kirjaudu sisään WordPress-hallintapaneeliin. Siirry laajennuksiin > Lisää uusi > Lataa laajennus, seuraa sitten ohjeita ladataksesi plugin-zip-tiedostot ja aktivoida plugin. Jos olet jo asentanut WordPress-laajennuksen aiemmin, se tuntuu kaikilta erittäin tutulta.

CSS Hero -asennus vaatii kuitenkin yhden lisävaiheen: Vahvistus. Napsauta sinistä painiketta ja noudata sitten ohjeita rekisteröidessään jonkin lisenssisi. Toistaiseksi niin hyvä.

Nyt CSS Hero on teeman muokkaustyökalu, ja sellaisenaan editointi tapahtuu käyttöliittymässä, jossa voit tarkastella muutoksia reaaliajassa. Pääset sivustosi käyttöliittymään ja näet uuden sinisen kuvakkeen näytön oikeassa yläkulmassa. Napsauta tätä aloittaaksesi uuden laajennuksen käytön.

CSS Hero -kuvake

CSS Hero Editor

Kun olet napsauttanut sinistä kuvaketta, sinun on odotettava muutama sekunti CSS Hero -sovelluksen käynnistymiseen. Kun laajennus on aktivoitu, voit nyt aloittaa verkkosivustosi muotoilun ja mukauttamisen.

Aloita napsauttamalla yksinkertaisesti sinistä kuvaketta asetuspaneelin yläosassa. Jos et ole varma etenemisestä, plugin tarjoaa sinulle kätevät linkit, jotka kattavat kaikki perusasiat. Jos olet kuitenkin valmis sukeltamaan suoraan sisään, voit alkaa kohdistaa ja muokata mitä tahansa sivusi elementtiä.

Vie hiiri muokattavan elementin päälle ja napsauta sitten (aloitamme katsomalla suhteellisen perustiedot kappaleesta, kuten alla olevassa kuvakaappauksessa). Napsautuksen jälkeen CSS Hero lukittuu elementtiisi, mikä tarkoittaa, että voit vapaasti aloittaa mukauttamisen.

CSS-sankarikohde

Jotta prosessista tulisi mahdollisimman yksinkertainen, CSS Hero tarjoaa sinulle luettelon mukautusvaihtoehdoista valitsemasi elementin tyypistä riippuen. Kun olen valinnut kappaleen, vaihtoehtoni ovat fonttien, taustat ja reunat vaihtaminen ja tekstin ympäristön pehmusteiden määrittäminen.

Elementtien muokkaaminen on helppoa, sillä kaikkea hallitaan oikeanpuoleisesta valikkopalkista sekä reaaliajassa esikatseltuja muutoksia. Aluksi olen päättänyt keskittyä tekstiominaisuuksiin. Kun tämä vaihtoehto on valittu, CSS Hero näyttää kaikki käytettävissä olevat asetukset tekstin määrittämiseen, mukaan lukien:

  • Fonttien kasvot – jokaisella käytettävissä olevalla Google-kirjasimella
  • Fontin väri
  • Fonttikoko
  • Fontin paino
  • Tekstin kohdistus
  • Tekstin muuntaminen – esimerkiksi isot kirjaimet
  • Sanaväli
  • Viivankorkeus

Tee haluamasi muutokset ja tarkkaile niitä sovellettavan tekstiin sekunnin kuluttua myöhemmin.

CSS: n sankarifontti

Sitten voit palata takaisin ja määrittää kappaleen taustan – CSS Hero antaa taas sinulle täydellisen hallinnan. Voit lähettää mukautetun kuvan, valita värin tai määrittää kaltevuuden näytölle taustana.

CSS-sankarin taustagradientti

Sinulle annetaan samat vaihtoehdot myös kappaleiden reunuksille, täysin joustavasti reunustyyliin, leveyteen ja väriin.

CSS Hero Border Style

On jopa muutamia hienoja esiasetettuja tyylejä – esimerkiksi kääntämällä teksti painikkeeksi tai näyttämällä valmis tausta useilla hienoilla malleilla.

CSS Hero ReadyMade -tyylit

Jos et halua käsitellä muutoksia osiossa kerrallaan, voit myös valita kaikki vaihtoehdon, jossa luetellaan kaikki mukautusvaihtoehdot yhdellä kätevällä näytöllä.

Muutosten kumoaminen

Kun teet muutoksia tekstiin, CSS Hero ottaa ne käyttöön verkkosivustosi live-versiossa. Älä kuitenkaan ole huolissasi pysyvien muutosten tekemisestä tässä vaiheessa – ennen muutosten tekemistä sinulla on mahdollisuus poistaa ne napsauttamalla peruuttaa tai vahvistaa ne napsauttamalla tallenna-painiketta..

Jopa tallentamisen jälkeen, et kuitenkaan ole juuttunut ei-toivottuihin muutoksiin. Palataksesi alkuperäiseen, siirry takaisin CSS Hero -valikon ylimmälle tasolle, siirry työkaluosaan ja valitse sitten Palauta teeman oletusasetukset.

On myös mahdollista palauttaa yksittäinen elementti tehdasasetuksiin – napsauta vain elementtiä, jonka haluat palauttaa, ja napsauta sitten valikon oikealla puolella olevaa pientä R-palautuskuvaketta. Paina vahvistaa, ja roistoelementtisi palautetaan entiseen loistoonsa.

Kuten aiemmin mainitsin, kaikkia mukautuksia sovelletaan lisätyylitiedostoon. Jos pahinta tapahtuu, teeman alkuperäinen tyylisivu pysyy koskemattomana. Tämä tarkoittaa, että riippumatta siitä, mitä muutoksia teet CSS Hero -sovelluksella, mitään pitkäaikaista vahinkoa ei voida tehdä. Jos kaikki muut palautusvaihtoehdot epäonnistuvat, voit palauttaa oletusteeman ja nukkua helposti!

Muokkaa mitä tahansa elementtiä

Yksi CSS Hero -yrityksen vahvuuksista on, että sen avulla voit muokata mitä tahansa sivusi elementtiä – olipa se iso tai pieni.

Suuren kuvan perusteella voit muokata sivustosi taustakuvaa, sivupalkin tyyliä ja alatunnistetta.

Tämä saavutetaan käyttämällä samaa prosessia, jota käytettiin kappaleen muokkaamiseen, mutta osoittaa, että CSS Hero -sovellusta voidaan käyttää perustavanlaatuisten muutosten tekemiseen sivustosi esteettisyyteen. Katso alla oleva kuvakaappaus, jossa olen vaihtanut sivupalkin taustaa, muuttanut widget-otsikkotyyliä ja määrittänyt myös välilyönnit. Tässä on perus ennen laukausta:

CSS Hero ennen kuvakaappausta

Ja täällä se on mukautumiseni jälkeen – en tosin ole suunnittelija, mutta tämän saavuttaminen kesti vain muutaman sekunnin.

CSS Hero ruudunkaappauksen jälkeen

Voit myös mukauttaa pieniä sisältöelementtejä, kuten kuvia, linkin värejä ja luettelotyylejä. Listatyylit ovat erityisen mielenkiintoisia, koska sinun on valittava mukautetut luettelot omistettujen luettelojen osiosta. Tuettuja kuutta hienoa valmiiksi rakennettua luotea – mukaan lukien neliöt, desimaalit ja roomalaiset numerot – tai voit ladata omat mukautettuja kuvakkeita henkilökohtaisempaa kosketusta varten..

Toivottavasti tämä antaa sinulle kuvan siitä, kuinka voit tarkistaa sivustosi suunnittelun. WordPress-teemasi tarjoaa perustan, mutta CSS Hero -sovelluksen ansiosta voit säätää verkkosivustosi jokaisen pikselin mieleiseesi – koskettamatta koodiriviä.

Muut ominaisuudet

CSS Hero sisältää useita muita hienoja ominaisuuksia, joihin haluaisin kiinnittää huomionne.

Ensimmäinen on näkymänvaihdin. Kun reagoivaan suunnitteluun kiinnitetään yhä enemmän huomiota, on tärkeää, että verkkosivustosi toimii moitteettomasti kaiken muodon ja koon laitteissa. CSS Hero sisältää sisäänrakennetun ominaisuuden, jonka avulla voit katsella sivustoasi työpöydällä, tablet-laitteella ja mobiili-näkymässä.

Valitse vain haluamasi näkymä työkaluriviltä – se on toinen vaihtoehto alaspäin – ja anna CSS Hero -sovelluksen muuttaa näytön oikeaan kokoon. Tämä on loistava tapa testata muutoksia, jotka olet tehnyt pienempiin laitteisiin.

CSS Hero Tablet View

Seuraavaksi meillä on tärkeä historiaominaisuus. Aina kun painat tallennuspainiketta, CSS Hero tallentaa tilannekuvan verkkosivustostasi. Näitä kuvia voi katsella ja palauttaa yhdellä napin painalluksella, mikä tarkoittaa, että kovaa työtäsi ei koskaan menetetä – voit vain hypätä eteenpäin ja taaksepäin ajoissa.

Viimeinkin meillä on Vie CSS-vaihtoehto, joka on saatavana työkaluosasta. Tämä antaa sinulle mahdollisuuden viedä muokattu CSS toiseen verkkosivustoon tai vain nostaa se näytölle tutkimaan tekemiäsi muutoksia (yksi parhaista tavoista oppia CSS).

Inspector Pro -lisäosa

Ne, jotka päivitit henkilökohtaisiin tai pro-suunnitelmiin, saavat lisenssisi mukana myös CSS Hero -apuohjelman Inspector Pron.

Inspector Pro julkistettiin toukokuussa 2015 ja äskettäin beta-tilassa. Se on tarkoitettu edistyneemmille CSS-käyttäjille. Vaikka CSS Hero on työkalu, joka ei vaadi mitään CSS-taitoja, Inspector Pro on kehitetty niille, jotka haluavat muokata sivustoaan säätämällä CSS: ää suoraan.

Inspector Pro näyttää teeman CSS: n reaaliaikaisen esikatselun alla. Voit muokata tätä koodia haluamallasi tavalla, ja kun teet niin, muutokset näkyvät esikatselussa. Antamalla sinulle mahdollisuuden muokata CSS: ää suoraan, tämä laajennus antaa sinulle täydellisen hallinnan mukautuksista, pikseli kerrallaan.

CSS Hero Inspector Pro

Inspector Pro tarjoaa kuitenkin myös hyödyllisiä toimintoja, joten et ole koskaan yksin. Voit esimerkiksi siirtyä tietylle riville hyödyllisen hakutoiminnon avulla tai poistaa käytöstä tietyt tyylirivit, jotta päällekkäiset elementit eivät pääse tielle.

Jos kirjoitat CSS: n tyhjästä, tulet rakastamaan tätä lisäosaa, koska se tarkoittaa, että sinun ei enää tarvitse selailla ikkunoiden välillä – voit tehdä ja katsella kaikkia muokkauksia yhdellä näytöllä. Kätevä!

CSS Hero -tuki

Heti kun kirjaudut sisään CSS Hero -hallintapaneeliin, voit nähdä, että kehittäjät ovat tuskallisia auttamaan sinua saamaan kaiken hyödyn heidän laajennuksestaan.

Olen jo käsitellyt laajaa dokumentaatiota ja CSS Hero Academy (akatemia on vasta alkuvaiheessa, mutta laajentumisen jatkamiseksi on konkreettisia suunnitelmia).

Nämä kaksi osaa ovat uskomattoman perusteellisia, ja akatemia sisältää hyödyllisiä video-oppaita. CSS Hero voi tuntea olonsa aluksi vaikeaksi käyttää, joten pidin nämä lyhyet video-oppaat hyödyllisinä jalkojen löytämisessä – minkä jälkeen plugin tuntui suhteellisen suoraviivaiselta..

CSS Hero Academy

Siellä on myös kehittyneempi dokumentointiosa, joka tunnetaan nimellä Developers Knowledge Base. Tämä on suunnattu laajennus- / teemakehittäjille, jotka käyvät läpi vaiheet varmistaakseen, että heidän tuotteensa ovat täysin CSS Hero -yhteensopivia – aka, sankarivalmis.

Niille, jotka eivät edelleenkään pysty ratkaisemaan ongelmiaan perusteellisesta dokumentoinnista huolimatta, on myös tukifoorumi. CSS Hero -tuen henkilökunta on valmiina vastaamaan kaikkiin kysymyksiin – yleensä muutamassa tunnissa. Lisenssi antaa sinulle yhden vuoden käyttöoikeuden foorumiin ja tukitiimiin.

CSS-tukifoorumi

Kaiken kaikkiaan CSS Heroa ei voida syyttää tukitoimistaan. Valmiiksi kirjoitetut ja tallennetut opetusohjelmat ovat todella hyödyllisiä, ja ne on pistetty koko käyttökokemuksen kohtiin kohdissa, joissa niitä todennäköisimmin tarvitaan.

Kun WordPress-laajennukset muuttuvat entistä kehittyneemmiksi, haluaisin nähdä enemmän kehittäjiä seuraamaan CSS Hero -yrityksen esimerkkiä tarjoamalla kehittynyttä tukea heti laatikosta, jotta kokemattomat käyttäjät eivät koskaan tunteisi syvyyttään.

Lopulliset ajatukset

Kaiken kaikkiaan olin todella vaikuttunut CSS Hero -tapahtumasta. Tällaisella rajoittamattomalla mukauttamispotentiaalilla tämä laajennus olisi voinut olla helposti ylivoimainen – älykkään, intuitiivisen käyttöliittymän (ja hyödyllisten oppaan) takia se on kuitenkin ollut helppo käyttää kaikkialla.

Mukautusvaihtoehdot ovat rajattomat, joten voit säätää teemaasi millään tavalla tahansa. Tämän avulla voit luoda hienoja, alkuperäisiä malleja teeman perustan avulla ja kaiken ilman, että kädet likaantuvat koodilla.

CSS Hero ei kuitenkaan ole vain amatööri-koodereille. Inspector Pro on jännittävä työkalu kokeneille kehittäjille, jotka haluavat rakentaa verkkosivun alusta alkaen.

Lisäosan avulla on täysin mahdollista, että voit rakentaa sivuston tyhjästä katsomassa luomuksesi heräävän koodille rivi riviltä. Realistisempana se kuitenkin vie arvaukset teeman räätälöinnistä, mikä säästää valtavasti aikaa asiakastyötä tekeville kehittäjille..

Kaiken kaikkiaan CSS Hero on suosituin laajennus, ja sen pitäisi todella vedota kaikkien taitotasojen WordPress-käyttäjiin. Jos et vielä ole, tarkista se!

(päivitys – 16. maaliskuuta – Tämän viestin kirjoittamisen jälkeen CSS Hero on ystävällisesti antanut meille erityisen alennuskupongin koodi joka antaa WinningWP-lukijoille oikeuden jopa 40% alennus Näytä kuponki.

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