Prylar, Mobiler, Appnedladdningar, Android Apps recensioner

CSS Hero Review: Det Àr enkelt att anpassa WordPress-temat!

NĂ€r det gĂ€ller att fĂ„ en webbplats att se exakt ut som du vill ha det, Ă€r det stora antalet tillgĂ€ngliga WordPress-teman en riktig vĂ€lsignelse! Och om du spenderar tillrĂ€ckligt med tid med att söka kan du hitta ett tema som Ă€r perfekt för din webbplats. Det finns emellertid en chans att Ă€ven om du kommer nĂ€ra det du vill Ă€r du förmodligen fortfarande lite i kontakt. Kan ett fördefinierat tema verkligen tillgodose individens behov upp till en T? …

Vad gör du om du har hittat ett Àmne som passar dina behov men ÀndÄ behöver göra nÄgra förÀndringar? Naturligtvis Àr det inte ett problem att ha fÀrdigheterna, du kan Àndra det som du vill. Men tÀnk om du inte har förtroende för att Àndra nödvÀndiga filer sjÀlv?

Idag vill jag presentera ett mycket anvÀndbart plugin: CSS Hero, ett plugin som lÄter dig göra smÄ eller till och med relativt stora visuella justeringar: utan att behöva röra vid en enda rad kod!

Vad Àr CSS Hero?

CSS Hero Àr ett plugin för temaanpassning (se egenskaper)

DÀrför tar det utrymme som liknar dra-och-slÀpp-plugins för sidskaparen. Men om sidbyggare uppmuntrar dig att skapa en anpassad layout frÄn början kan du anvÀnda CSS Hero för att anpassa ditt befintliga WordPress-tema efter din önskan.

PÄ det hÀr sÀttet kan du spela som utvecklare utan de allmÀnna utvecklarfÀrdigheterna. FortsÀtt anvÀnda ditt professionellt utformade, sakkunnigt skapade WordPress-tema, inte nÄgon som startar slumpmÀssiga moduler och plugins för att skapa sidor och göra mindre Àndringar i dina behov.

Artiklar pÄ webbplatsen Àr inte förbjudna; du kan anpassa allt och allt. CSS Hero konverterar dina anpassningar till rÀtt CSS-kod, som sedan anvÀnds i ett nytt CSS-formatmall (det ursprungliga formatmallen bevaras för att undvika framtida problem).

CSS Hero fungerar ocksÄ med alla WordPress-teman. De som har testats omfattande för kompatibilitet kommer att namnges, medan otestade teman fortsÀtter att vara kompatibla.

priser

CSS Hero Àr ett prisvÀrt premium-plugin. Att Äterspegla din kompetens Àr prissatta i nivÄ med de mest populÀra Page Builder-plugins.

En grundlicens kostar bara $ 29 och ger dig tillgÄng till hela CSS Hero-plugin (Àven om du bara kan anvÀnda den pÄ en webbplats).

Om du vill anvÀnda CSS Hero pÄ mer Àn en webbplats kan du:

Som du kan förestÀlla dig riktar licensen sig till kreativa byrÄer och professionella utvecklare. BÄde licensen och licensen inkluderar ocksÄ Ätkomst till Inspector Pro premium-plugin. Vi kommer att tÀcka detta mer detaljerat senare pÄ denna sida.

Alla tre CSS Hero-licenser Àr giltiga i ett Är, ger tillgÄng till uppdateringar och support under ett Är och kommer med en 30-dagars pengarna tillbaka-garanti.

tidigt

Efter köpet kommer du att omdirigeras till CSS Hero-kontrollpanelen. DÀrifrÄn kan du komma Ät den omfattande dokumentationen av plugin, utöver den imponerande CSS Hero Academy. Akademin Àr en fin touch med en serie handledningsvideor för nybörjare som hjÀlper dig att fÄ ut det bÀsta av ditt nya plugin (jag skulle gÀrna se andra avancerade plugins som följer detta exempel).

Panelen utför en annan viktig funktion: hÀr laddar du ner CSS Hero och beroende pÄ licensnivÄn Inspector Pro-plugins.

Logga in pÄ din WordPress-instrumentpanel för fullstÀndiga nedladdningar. GÄ till >> och följ instruktionerna för att ladda ZIP-filer för plugin och aktivera plugin. Om du redan har installerat ett WordPress-plugin Àr du mycket bekant med allt detta.

Att installera CSS Hero krĂ€ver dock ytterligare ett steg: verifiering. Klicka pĂ„ den blĂ„ knappen och följ instruktionerna medan du registrerar en av dina licenser. Än sĂ„ lĂ€nge Ă€r allt bra.

CSS Hero Àr nu ett verktyg och redigeras som sÄdan pÄ framsidan dÀr du kan se förÀndringarna i realtid. NÀr du öppnar framsidan av din webbplats visas en ny blÄ ikon i skÀrmens övre högra hörn. Klicka hÀr för att anvÀnda ditt nya plugin.

CSS hjÀlteikon

CSS Hero Editor

NÀr du har klickat pÄ den blÄ ikonen, vÀnta nÄgra sekunder tills CSS Hero slÄs pÄ. NÀr plugin Àr aktiverat kan du nu börja designa och anpassa din webbplats.

Klicka först pÄ den blÄ ikonen högst upp pÄ alternativknappen. Om du inte Àr sÀker pÄ hur du ska gÄ vidare ger plugin anvÀndbara lÀnkar till alla grunderna. Men nÀr du Àr redo att dyka in kan du börja finjustera och redigera alla element pÄ din sida.

BlÀddra över Àmnet du vill redigera och klicka sedan pÄ (lÄt oss börja med ett relativt enkelt innehÄllsavsnitt, som visas i följande skÀrmdump). Efter att ha klickat lÄser CSS Hero ditt objekt sÄ att du kan börja anpassa det.

CSS Hero Target Element

För att göra processen sÄ enkel som möjligt erbjuder CSS Hero dig en lista med anpassningsalternativ beroende pÄ vilken typ av objekt du har valt. NÀr du har valt ett stycke kan du Àndra teckensnitt, bakgrunder och ramar och stÀlla in fyllningen runt texten.

Elementen Àr lÀtta att redigera eftersom allt styrs genom menyraden till höger och Àndringarna visas i realtid. Först bestÀmde jag mig för att fokusera pÄ textens egenskaper. NÀr detta alternativ Àr valt, visar CSS Hero alla tillgÀngliga alternativ för textkonfiguration, inklusive:

Teckensnitt: vÀlj bland alla tillgÀngliga Google-teckensnitt TeckensnittsfÀrg teckensnittstorlek teckenvikt textjustering Textomvandling: t.ex. stora bokstÀver OrdavstÄnd radhöjd

Gör önskade Àndringar och se hur texten tillÀmpas en brÄkdel av en sekund senare.

CSS Hero typsnitt

Sedan kan du gĂ„ tillbaka och stĂ€lla in en bakgrund för ditt avsnitt. Även hĂ€r ger CSS Hero dig full kontroll. Du kan ladda upp en anpassad bild, vĂ€lja en fĂ€rg eller stĂ€lla in en lutning som ska visas som bakgrund.

CSS Hero Background Gradient

Den har ocksÄ samma marginalinstÀllning med full flexibilitet i ramstil, bredd och fÀrg.

CSS helt grÀnsstil

Det finns till och med nÄgra coola förinstÀllda stilar, som att vÀnda text till en knapp eller visa en fÀrdig bakgrund i olika coola layouter.

CSS Hero ReadyMade Styles

Om du inte vill arbeta med Àndringar i ett avsnitt samtidigt kan du ocksÄ vÀlja alternativet som visar alla anpassningsalternativ pÄ en bekvÀm skÀrm.

Ångra Ă€ndringar

NÀr du gör Àndringar i texten tillÀmpar CSS Hero dem pÄ den liveversionen av din webbplats. Oroa dig inte för permanenta Àndringar just nu: Innan du anvÀnder Àndringar kan du ta bort dem genom att klicka pÄ dem eller trycka pÄ knappen.

Men Àven efter att ha slagit fastnar du inte pÄ oönskade förÀndringar. För att gÄ tillbaka till originalet, gÄ tillbaka till översta nivÄn pÄ CSS Hero-menyn, navigera till avsnittet och vÀlj alternativet.

Det Ă€r ocksĂ„ möjligt att Ă„terstĂ€lla ett enda objekt till fabriksinstĂ€llningar: klicka bara pĂ„ det objekt du vill Ă„terstĂ€lla och klicka sedan pĂ„ den lilla ikonen "ÅterstĂ€ll" till höger om menyn. Tryck pĂ„ BekrĂ€fta och ditt rebelliska element kommer att Ă„terstĂ€llas till sin tidigare Ă€ra.

Som redan nÀmnts tillÀmpas alla instÀllningar pÄ ett formatmall. I vÀrsta fall bevaras det ursprungliga formatmallen för din artikel. Det betyder att oavsett vilka förÀndringar du gör med CSS Hero, kan ingen lÄngsiktig skada göras. Om alla andra ÄterstÀllningsinstÀllningar misslyckas kan du ÄterstÀlla ditt standardtema och sova enkelt.

Redigera ett tema

En av styrkorna med CSS Hero Àr att du kan redigera alla element pÄ din sida, oavsett hur stor eller liten det Àr.

Genom att titta pÄ den övergripande bilden kan du redigera bakgrundsbilden, sidfÀltstil och sidfotomrÄdet pÄ din webbplats.

Detta görs med samma process som vi anvÀnder för att bearbeta vÄrt avsnitt. Men det visar att CSS Hero kan anvÀndas för att göra grundlÀggande förÀndringar av din webbplats. Se skÀrmdumpen nedan dÀr jag Àndrade bakgrunden till min sidofÀlt, Àndrade widgethuvudformaten och konfigurerade omomrÄdet. HÀr Àr grundbilden:

CSS Hero Before SkÀrmdump

Och hÀr Àr min passform: Jag Àr inte en designer, jag erkÀnner det, men det tog bara nÄgra sekunder.

CSS Hero After-skÀrmdump

Du kan ocksÄ anpassa teman med litet innehÄll, till exempel bilder, lÀnkfÀrger och liststilar. Liststilar Àr sÀrskilt intressanta eftersom du kan vÀlja anpassade bollar i motsvarande avsnitt. Sex coola premade kulor stöds, inklusive rutor, decimaler och romerska siffror. Du kan ocksÄ ladda upp dina egna anpassade ikoner för en mer personlig look. Note att fÄ.

Förhoppningsvis kommer detta att ge dig en uppfattning om hur du kontrollerar designen pÄ din webbplats. Ditt WordPress-tema Àr grunden, men tack vare CSS Hero kan du anpassa varje pixel pÄ din webbplats efter din smak utan att röra vid en kodrad.

Flera funktioner

CSS Hero har nÄgra andra coola funktioner som jag vill uppmÀrksamma.

Det första Àr det. Med ett vÀxande fokus pÄ lyhörd design Àr det viktigt att din webbplats fungerar sömlöst pÄ enheter i alla former och storlekar. CSS Hero har en inbyggd funktion som lÄter dig se din webbplats pÄ stationÀra, surfplatta och mobila enheter.

VÀlj bara önskad vy frÄn verktygsfÀltet (detta Àr det andra alternativet) och lÄt CSS Hero Àndra storleken pÄ din skÀrm till lÀmplig storlek. Detta Àr ett bra sÀtt att testa de Àndringar du har gjort pÄ mindre enheter.

CSS Hero surfplatta

DÀrefter har vi den viktiga funktionen. Varje gÄng du trycker pÄ knappen sparar CSS Hero en stillbild av din webbplats. Dessa ögonblicksbilder kan ses och ÄterstÀllas med en knapptryckning, vilket innebÀr att ditt hÄrda arbete aldrig slösas bort. Du kan hoppa fram och tillbaka i tid.

Slutligen har vi alternativet tillgÀngligt i avsnittet. Detta gör att du kan exportera din redigerade CSS för anvÀndning nÄgon annanstans, eller helt enkelt ladda upp den till skÀrmen för att undersöka de Àndringar du har gjort (ett av de bÀsta sÀtten att lÀra sig CSS).

Inspector Pro Plugin

De av er som har uppdaterat sina planer eller har inkluderat CSS Hero Inspector Pro-plugin i sin licens.

Inspector Pro tillkÀnnagavs i maj 2015 och tappade nyligen betaversionen. Det Àr avsett för avancerade CSS-anvÀndare. Medan CSS Hero Àr ett verktyg som inte krÀver nÄgon CSS-kunskap, Àr Inspector Pro designad för dem som vill anpassa sin webbplats genom att direkt anpassa CSS.

Inspector Pro visar CSS för ditt tema under direktförhandsvisningen. Du kan redigera den hÀr koden som du vill och dina Àndringar visas. Att kunna redigera CSS direkt ger dig full kontroll över dina instÀllningar, pixel för pixel, med detta plugin.

CSS Hero Inspector Pro

Inspector Pro erbjuder dock ocksÄ nÄgra anvÀndbara funktioner sÄ att du aldrig Àr ensam. Du kan till exempel anvÀnda den praktiska sökfunktionen för att hoppa till en specifik rad eller inaktivera vissa typrader sÄ att överlappande element inte Àndras.

Om du skriver om din CSS frÄn grunden kommer du att Àlska det hÀr insticksprogrammet eftersom du inte lÀngre behöver byta frÄn ett fönster till ett annat; du kan göra och visa alla dina Àndringar pÄ en skÀrm. Praktiskt taget!

CSS Hero Support

FrÄn det ögonblick du loggar in pÄ CSS Hero-instrumentpanelen kan du se hur utvecklare försöker hjÀlpa dig att fÄ ut mesta möjliga av din plugin.

Jag har redan nÀmnt den omfattande dokumentationen och CSS Hero Academy (akademin Àr fortfarande i sin barndom, men det finns konkreta planer för att fortsÀtta utvidgningen).

Dessa tvÄ avsnitt Àr oerhört omfattande, och akademin innehÄller anvÀndbara videoklipp. CSS Hero verkar svÄrt vid första anblicken, sÄ dessa korta videohandböcker var till hjÀlp för att hitta mina fötter. SÄ plugin kÀndes relativt enkel.

CSS Hero Academy

Det finns ocksÄ ett utökat dokumentationsavsnitt som kallas. Detta Àr för plugin / temautvecklare som vidtar nödvÀndiga ÄtgÀrder för att se till att deras produkter Àr fullt kompatibla med CSS Hero, d.v.s. H. redo att vara hjÀltar.

Det finns ocksÄ ett supportforum för dem som fortfarande inte kan lösa sina problem trots detaljerad dokumentation. CSS Hero supportpersonal Àr ofta tillgÀngliga för att svara pÄ frÄgor inom nÄgra timmar. En licens ger dig tillgÄng till forumet och supportteamet under ett Är.

CSS supportforum

Totalt sett kan inte CSS Hero klandras för sina stödinsatser. Inspelade och förinspelade sjÀlvstudier Àr till stor hjÀlp och distribueras över hela anvÀndarupplevelsen dÀr det troligtvis behövs.

NÀr WordPress-plugins blir mer sofistikerade vill jag att fler utvecklare följer ledningen för CSS Hero och erbjuder omedelbart mer support sÄ att oerfarna anvÀndare aldrig kÀnner sig utom rÀckhÄll.

Sista tankar

Sammantaget var jag vÀldigt imponerad av CSS Hero. Med en obegrÀnsad anpassningspotential kan detta plugin lÀtt ha varit övervÀldigande. PÄ grund av det smarta och intuitiva anvÀndargrÀnssnittet (och anvÀndbara tutorials) var det emellertid lÀtt att anvÀnda hela tiden.

Anpassningsalternativen Àr oÀndliga och lÄter dig Àndra ditt tema pÄ vilket sÀtt som helst. PÄ det hÀr sÀttet kan du skapa nÄgra coola och originella mönster som anvÀnder grunderna i ditt tema och allt utan att göra hÀnderna smutsiga med koden.

CSS Hero Àr dock inte för hobbyprogrammerare. Inspector Pro Àr ett spÀnnande verktyg för erfarna utvecklare som vill skapa en webbplats frÄn grunden.

Plugin gör att du helt kan skapa en webbplats frÄn grunden och se hur din skapelse kommer till liv rad för rad. Det Àr emellertid mer realistiskt att förenkla gissningen genom att anpassa teman och spara mycket tid för utvecklare som gör kundarbete.

Sammantaget Àr CSS Hero en överlÀgsen plugin som verkligen bör tilltala WordPress-anvÀndare pÄ alla nivÄer. Om du inte redan har gjort det kan du prova det!

(Uppgradera – 16 mars – CSS Hero har vĂ€nligen försett oss en speciell sedan jag skrev detta inlĂ€gg Rabattkupongkod Auktorisera WinningWP-lĂ€sare till 40% rabatt – Se kvitto).