CSS Hero Review: WordPress Theme Customization Made Easy!

WordPress-tilbud


Når det kommer til at få et websted, der ser nøjagtigt ud, som du gerne vil have det, er det store væld af forskellige tilgængelige WordPress-temaer en rigtig velsignelse! Og hvis du bruger længe nok på at se, kan du faktisk være i stand til at finde et tema, der vil være helt perfekt til dit websted. En chance er imidlertid, at selvom du vil være i stand til at komme tæt på det, du ønsker, vil du stadig sandsynligvis være en lille vej fra perfektion. Tross alt, kan et forudbygget tema nogensinde virkelig passe et individs behov ned til et T? …

Så hvad skal jeg gøre, hvis du har formået at finde et tema, der er tæt på det, du ønsker, men stadig har brug for at foretage et par ændringer? Nå, hvis du selvfølgelig har de krævede færdigheder, er det ikke noget problem: du kan ændre det, som du vil. Men hvad nu hvis du ikke har tillid til at gå ind og foretage dine egne ændringer til de nødvendige filer?

I dag vil jeg gerne introducere dig til et meget praktisk plugin: CSS Hero – et plugin, der giver dig mulighed for selv at foretage små – eller måske endda relativt store – visuelle tilpasninger: uden at skulle røre ved en enkelt kodelinje!

Hvad er CSS Hero?

CSS Hero er et tematilpasningsplugin (se funktioner.

CSS Hero

Som sådan optager den en lignende plads som træk-og-slip-side-builder-plugins. Hvor sidebyggerne opfordrer dig til at oprette et tilpasset design fra bunden, giver CSS Hero dig imidlertid mulighed for at finpusse dit eksisterende WordPress-tema på enhver måde, du kan lide.

Dette giver dig mulighed for at spille udvikler, uden at du nødvendigvis besidder nogen af ​​de udviklerfærdigheder, der normalt er involveret. Du fortsætter med at bruge dit professionelt designede WordPress-tema – du ved, det, der er bygget af en ekspert, ikke af nogen, der kaster tilfældige moduler sammen, à la page builder-plugins – mens du foretager mindre justeringer, der passer til dine behov.

Intet sted på stedet er uden for grænserne: Du kan tilpasse noget og alt. CSS Hero konverterer dine tilpasninger til den relevante CSS-kode, der derefter bruges til et nyt CSS-stilark (det originale typografiark forbliver uberørt, hvilket undgår problemer nede på linjen).

CSS Hero fungerer også med ethvert WordPress-tema. De, der er omfattende testet for kompatibilitet, kaldes Hero-klar, mens ikke-testede temaer stadig understøttes i Rocket Mode.

priserne

CSS Hero er et overkommelig premium-plugin. For at afspejle dens konkurrence er det pris på niveau med de mest populære sidebygger plugins.

En grundlæggende startlicens koster kun $ 29 og giver dig adgang til det fulde CSS Hero-plugin (skønt du er begrænset til at bruge på kun et websted).

Hvis du vil bruge CSS Hero på mere end et websted, er dine muligheder:

  • Personlig licens ($ 59) – op til fem steder
  • Pro-licens ($ 199) – op til 999 sider

Som du kan forestille dig, er pro-licensen rettet mod kreative agenturer og karriereudviklere. Både de personlige og pro-licenser har også adgang til premium-tilføjelsen, Inspector Pro – vi vil dække dette mere detaljeret længere nede på siden.

Alle tre CSS Hero-licenser er gyldige i et år, giver adgang til et års opdateringer og support og kommer med en 30-dages pengene-tilbage-garanti.

Kom godt i gang

Når du har foretaget dit køb, føres du til CSS Hero-betjeningspanelet. Derfra kan du få adgang til plugins omfattende dokumentation plus det fantastiske CSS Hero Academy. Akademiet er et dejligt touch, der indeholder en række begyndervenlige videotutorials designet til at hjælpe dig med at få mest muligt ud af dit nye plugin (jeg ville meget gerne se andre avancerede plugins efter dragt).

CSS Hero Dashboard

Dashboardet udfører en anden vigtig funktion: Det er her du downloader CSS Hero og – afhængigt af dit licensniveau – Inspector Pro-plugins.

Når downloads er gennemført, skal du logge ind på dit WordPress-dashboard. Naviger til plugins > Tilføj ny > Upload plugin, og følg derefter instruktionerne for at uploade plugin-zip-filer og aktivere plugin. Hvis du nogensinde har installeret et WordPress-plugin før, vil dette alle føles meget kendt.

CSS Hero-installationen kræver dog et ekstra trin: Bekræftelse. Klik på den blå knap, og følg derefter instruktionerne, mens du registrerer en af ​​dine licenser. Så langt så godt.

Nu er CSS Hero et tema-redigeringsværktøj, og som sådan udføres redigeringen i frontend, hvor du kan se ændringer i realtid. Få adgang til dit websteds frontend, og du vil se et nyt blåt ikon i øverste højre hjørne af skærmen. Klik på dette for at begynde at bruge dit nye plugin.

CSS Helt Ikon

CSS Hero Editor

Når du har klikket på det blå ikon, bliver du nødt til at vente et par sekunder på, at CSS Hero tændes. Når plugin er aktiveret, kan du nu starte styling og tilpasse dit websted.

For at begynde skal du blot klikke på det blå ikon øverst i indstillingspanelet. Hvis du ikke er sikker på, hvordan du går frem, giver plugin dig praktiske links, der dækker alle de grundlæggende. Hvis du imidlertid er klar til at dykke direkte ind, kan du begynde at målrette og redigere ethvert element på din side.

Hold markøren over det element, du vil redigere, og klik derefter på (vi vil starte med at se på et relativt grundlæggende indholdsafsnit, som det ses på skærmbilledet nedenfor). Når der er klikket på, låses CSS Hero dit element, hvilket betyder, at du er fri til at begynde at tilpasse.

CSS Hero Target Element

For at gøre processen så enkel som muligt giver CSS Hero dig en liste over tilpasningsmuligheder, afhængigt af hvilken type element du valgte. Efter at have valgt et afsnit inkluderer mine indstillinger ændring af skrifttyper, baggrunde og rammer og konfiguration af polstring omkring teksten.

Redigering af elementerne er let, med alt kontrolleret fra højre menulinje plus ændringer, der er vist i realtid. For at starte har jeg besluttet at fokusere på tekstegenskaber. Når denne indstilling er valgt, viser CSS Hero alle tilgængelige indstillinger til konfiguration af teksten, herunder:

  • Skrifttype – med alle Google-skrifttyper, der kan vælges
  • Skrift farve
  • Skriftstørrelse
  • Skriftvægt
  • Tekstjustering
  • Teksttransformation – for eksempel store bogstaver
  • Ordafstand
  • Linjehøjde

Foretag de ønskede ændringer, og se dem anvendt på teksten et opdelte sekund senere.

CSS Hero Font Style

Du kan derefter gå tilbage og konfigurere en baggrund for dit afsnit – igen overleverer CSS Hero total kontrol over dig. Du kan uploade et brugerdefineret billede, vælge en farve eller konfigurere en gradient til at vises som din baggrund.

CSS Hero Baggrundsgradient

Du har også de samme muligheder for afsnitgrænser med fuld fleksibilitet i kantstil, bredde og farve.

CSS Hero Border Style

Der er endda et par seje forudkonfigurerede stilarter – for eksempel at omdanne din tekst til en knap eller vise en færdiglavet baggrund i en række seje designs.

CSS Hero ReadyMade Styles

Hvis du foretrækker ikke at arbejde gennem dine ændringer et afsnit ad gangen, kan du også vælge indstillingen alle, der viser alle tilpasningsmuligheder på en praktisk skærm.

Fortrydning af ændringer

Når du foretager ændringer i teksten, anvender CSS Hero dem på den levende version af dit websted. Du skal dog ikke bekymre dig om at foretage permanente ændringer på dette tidspunkt – inden ændringerne anvendes, har du muligheden for at slette dem ved at klikke på Annuller eller for at bekræfte dem ved at trykke på Gem-knappen.

Selv efter at have ramt gem, vil du dog ikke sidde fast med uønskede ændringer. For at vende tilbage til originalen skal du gå tilbage til det øverste niveau i CSS Hero-menuen, navigere til værktøjsafsnittet og derefter vælge nulstillingsindstillinger til standardindstilling for tema.

Det er også muligt at gendanne et individuelt element til standardfabriksindstillingerne – bare klik på det element, du gerne vil gendanne, og klik derefter på det lille ‘R’ nulstillingsikon til højre for menuen. Tryk på bekræft, og dit useriøse element gendannes til sin tidligere herlighed.

Som jeg nævnte før, anvendes alle tilpasninger på et ekstra typografiark. Hvis det værste sker, forbliver dit temas originale typografiark uberørt. Det betyder, uanset hvilke ændringer du foretager ved hjælp af CSS Hero, kan der ikke gøres nogen langvarig skade. Hvis alle de andre gendannelsesindstillinger mislykkes, kan du gendanne dit standardtema og sove let!

Rediger ethvert element

En af CSS Heros styrker er, at det giver dig mulighed for at redigere ethvert element på din side – uanset hvor stor eller lille.

Når du ser på det store billede, kan du redigere dit websteds baggrundsbillede, sidefeltstil og sidefodssektion.

Dette opnås ved hjælp af den samme proces, som vi brugte til at redigere vores afsnit, men viser, at CSS Hero kan bruges til at foretage grundlæggende ændringer i dit websteds æstetik. Tjek skærmbilledet nedenfor, hvor jeg har ændret min sidebarens baggrund, ændret widget-headerformaterne og konfigurerede også afstanden. Her er det grundlæggende før skud:

CSS Hero Before Screenshot

Og her er det efter min finjustering – jeg er riktignok ikke en designer, men det tog bare et par sekunder at opnå.

CSS Hero After Screenshot

Du kan også tilpasse bittesmå indholdselementer, såsom billeder, linkfarver og listestilarter. Listestiler er især interessante, fordi du får valgt tilpassede kugler fra afsnittet om dedikerede lister. Der understøttes seks kølige forudbyggede kugler – inklusive firkanter, decimaler og romertal – eller du kan uploade dine egne brugerdefinerede ikoner for et mere personligt touch.

Forhåbentlig giver dette dig en idé om, hvordan du kan gennemgå dit websteds design. Dit WordPress-tema giver grundlaget, men takket være CSS Hero kan du finjustere hver pixel på dit websted efter din smag – uden at røre ved en kodelinie.

Andre funktioner

CSS Hero besidder flere andre seje funktioner, som jeg gerne vil henlede opmærksomheden på.

Først er visningsskifteren. Med en voksende vægt på lydhørt design er det vigtigt, at dit websted fungerer fejlfrit på enheder i alle former og størrelser. CSS Hero kommer med en indbygget funktion, der giver dig mulighed for at se dit websted i desktop, tablet og mobilvisning.

Vælg blot din foretrukne visning fra værktøjslinjen – det er den anden mulighed nede – og lad CSS Hero omdanne din skærm til den passende størrelse. Dette er en fantastisk måde at prøvekøre de ændringer, du har brugt på mindre enheder.

CSS Hero Tablet View

Dernæst har vi den vigtige historiefunktion. Hver gang du trykker på Gem-knappen, gemmer CSS Hero et øjebliksbillede af dit websted. Disse snapshots kan ses og gendannes med et enkelt klik på en knap, hvilket betyder, at dit hårde arbejde aldrig går tabt – du kan bare hoppe frem og tilbage i tiden.

Endelig har vi muligheden Eksport CSS, tilgængelig fra værktøjssektionen. Dette giver dig en mulighed for at eksportere din redigerede CSS til brug på et andet websted, eller bare få det op på skærmen for at studere de ændringer, du har foretaget (en af ​​de bedste måder at lære CSS).

Inspector Pro-tilføjelse

De af jer, der opgraderede til de personlige planer eller pro-planer, får også CSS Hero add-on Inspector Pro inkluderet i din licens.

Inspector Pro blev annonceret i maj 2015 og for nylig ud af betatilstand og er rettet mod mere avancerede CSS-brugere. Mens CSS Hero er et værktøj, der absolut ikke kræver nogen CSS-færdigheder, er Inspector Pro blevet udviklet til dem, der ønsker at tilpasse deres site ved at finpusse CSS direkte.

Inspector Pro viser dit temas CSS under live preview. Du kan redigere denne kode, som du vil, og som du gør det, afspejles dine ændringer i eksempelvisningen. Ved at give dig muligheden for at redigere CSS direkte giver dette plugin dig absolut kontrol over dine tilpasninger, pixel efter pixel.

CSS Hero Inspector Pro

Inspector Pro tilbyder dog også nogle nyttige funktioner, så du er aldrig på egen hånd. For eksempel kan du hoppe til en bestemt linje ved hjælp af den hjælpsomme søgefunktion eller deaktivere specifikke stillinjer, så overlappende elementer ikke kommer i vejen.

Hvis du skriver din CSS fra bunden, vil du elske denne tilføjelse, da det betyder, at du ikke længere behøver at bladre mellem windows – du kan foretage og se alle dine redigeringer på en skærm. Praktisk!

CSS Hero Support

Fra det øjeblik, du logger ind på CSS Hero-instrumentbrættet, kan du se, at udviklerne har svært ved at hjælpe dig med at få mest muligt ud af deres plugin.

Jeg har allerede berørt den omfattende dokumentation og CSS Hero Academy (akademiet er i sin spædbarn, men der er konkrete planer om at fortsætte dens udvidelse).

Disse to sektioner er utroligt grundige, og akademiet inkluderer nyttige video-tutorials. CSS Hero kan føles vanskelig at bruge til at begynde med, så jeg fandt, at disse korte videotutorials var nyttige til at finde mine fødder – hvorefter plugin føltes relativt ligetil.

CSS Hero Academy

Der er også et mere avanceret dokumentationsafsnit, kendt som Developers Knowledge Base. Dette er rettet mod plugin / temaudviklere, der gennemgås trinnene i at sikre, at deres produkter er fuldt ud CSS Hero-kompatible – alias, helteklar.

For dem, der stadig ikke er i stand til at løse deres problemer, på trods af en dybtgående dokumentation, er der også et supportforum. Medlemmer af CSS Hero-supportpersonalet er klar til at besvare eventuelle spørgsmål – normalt inden for få timer. En licens giver dig et års adgang til forum og supportteam.

CSS Support Forum

Generelt kan CSS Hero ikke have nogen skyld i sin supportindsats. De forbeskrevne og indspillede tutorials er virkelig nyttige, og de er prikket gennem brugeroplevelsen på steder, hvor det mest sandsynligt er nødvendigt..

Efterhånden som WordPress-plugins bliver mere sofistikerede, vil jeg gerne se flere udviklere, der følger CSS Heros eksempel, der giver avanceret support lige ud af boksen, så uerfarne brugere aldrig føler sig ud af deres dybde.

Afsluttende tanker

Alt i alt var jeg virkelig imponeret over CSS Hero. Med et sådant ubegrænset tilpasningspotentiale kunne dette plugin let have været overvældende – men på grund af den smarte, intuitive interface (og nyttige tutorials) har det forblevet let at bruge i hele.

Tilpasningsmulighederne er uendelige, så du kan finjustere dit tema på enhver måde, du kan forestille dig. Dette giver dig mulighed for at oprette nogle seje, originale designs ved hjælp af dit temas fundament og alt uden at få dine hænder beskidte med koden.

CSS Hero er dog ikke kun for amatørkodere. Inspector Pro er et spændende værktøj for erfarne udviklere, der ønsker at oprette et websted fra bunden af.

Tilføjelsen gør det helt muligt, at du kan bygge et websted fra bunden og se, hvordan din oprettelse kommer til live, mens du koder linie for linje. Mere realistisk tager det imidlertid gætteriet ud fra tematilpasning, hvilket sparer enorme mængder tid for udviklere, der foretager klientarbejde.

Samlet set er CSS Hero en top-plugin, og en, der virkelig burde appellere til WordPress-brugere på alle niveauer. Hvis du ikke allerede har gjort det, så tjek det ud!

(opdatering – 16. marts – siden jeg skrev dette indlæg, har CSS Hero venligt forsynet os med en speciel rabatkuponkode der giver WinningWP-læsere ret til op til 40% rabat – se kupon.

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