CSS Hero Review: personalització del tema de WordPress.

Ofertes de WordPress


Quan es tracta d’aconseguir que un lloc web tingui una aparença exacta tal com t’agradaria, l’absoluta riquesa de diferents temes de WordPress disponibles és una veritable gràcia. I si dediqueu prou temps a buscar, és possible que pugueu trobar un tema absolutament perfecte per al vostre lloc. No obstant això, hi ha probabilitats que, encara que podreu acostar-vos a allò que voleu, segurament podreu trobar una mica de la perfecció. Al capdavall, pot un tema preconstruït adaptar-se realment a les necessitats d’un individu fins a una T? …

Què heu de fer si heu aconseguit trobar un tema més proper al que voleu, però encara heu de fer alguns canvis? Doncs bé, si teniu les habilitats necessàries, és clar, podreu modificar-lo com vulgueu. Però, si no teniu la confiança per entrar i fer els vostres canvis als fitxers necessaris?

Avui, vull presentar-vos un complement molt útil: CSS Hero, un connector que us permetrà fer personalitzacions visuals petites, o potser fins i tot relativament grans: sense haver de tocar una sola línia de codi!

Què és CSS Hero?

CSS Hero és un complement de personalització de temes (veure funcions.

CSS Hero

Per tant, ocupa un espai semblant als plugins del creador de pàgines arrossegar i deixar anar. Tanmateix, quan els creadors de pàgines us animen a crear un disseny personalitzat des de zero, CSS Hero us permet modificar el tema de WordPress existent de la manera que vulgueu.

Això permet jugar a desenvolupador, sense necessàriament tenir cap de les habilitats del desenvolupador que solen participar-hi. Continua utilitzant el tema de WordPress dissenyat professionalment, ja ho sabeu, el que va crear un expert, no algú que junti mòduls aleatoris als connectors del creador de pàgines, mentre que es fan petits ajustaments per adaptar-se als vostres requisits..

Cap element al lloc està fora de límits: podeu personalitzar qualsevol cosa i tot. CSS Hero converteix les teves personalitzacions en el codi CSS pertinent, que s’aplica després a una nova fulla d’estils CSS (el full d’estil original continua sense tocar-se, evitant cap problema a l’altura de la línia)..

CSS Hero també funciona amb qualsevol tema de WordPress. A les àmplies proves de compatibilitat es coneix amb el nom de Hero-ready, mentre que els temes no provats continuen sent compatibles amb el mode Rocket.

Preus

CSS Hero és un complement premium i assequible. Per reflectir la seva competència, té el mateix preu amb els més populars connectors del creador de pàgines.

Una llicència d’inici bàsic té un cost de només 29 dòlars i us permet accedir al connector complet CSS Hero (encara que esteu restringits a l’ús en un sol lloc web).

Si voleu utilitzar CSS Hero en més d’un lloc web, les vostres opcions són:

  • Llicència personal ($ 59): fins a cinc llocs
  • Llicència Pro ($ 199): fins a 999 llocs

Com podeu imaginar, la llicència professional està dirigida a agències creatives i desenvolupadors de carrera. Tant les llicències personals com les pro també ofereixen accés al complement premium, Inspector Pro, anem a tractar-ho amb més detall més avall a la pàgina..

Les tres llicències CSS Hero són vàlides durant un any, atorguen accés a les actualitzacions i assistència d’un any i disposen d’una garantia de devolució de 30 dies..

Començant

Un cop realitzada la compra, sereu dirigits al tauler de control de CSS Hero. Des d’allà, podreu accedir a l’àmplia documentació del complement, a més de l’impressionant CSS Hero Academy. L’acadèmia és un toc agradable, que inclou una sèrie de tutorials de vídeo que serveixen per a principiants dissenyats per ajudar-vos a treure el màxim partit del vostre nou complement (m’agradaria veure altres complements avançats seguint el mateix exemple).

Tauler de control CSS Hero

El tauler de control realitza una altra funció important: és allà on descarregueu el CSS Hero i, segons el vostre nivell de llicència, els connectors Inspector Pro.

Amb les descàrregues completades, inicieu la sessió al vostre tauler de control de WordPress. Desplaceu-vos a connectors > Afegir nou > Pengeu el complement i, a continuació, seguiu les instruccions per penjar els fitxers zip del complement i activeu-lo. Si abans havíeu instal·lat un complement de WordPress, tot això se sentirà molt familiar.

Tanmateix, la instal·lació CSS ​​Hero necessita un pas addicional: verificació. Feu clic al botó blau i seguiu les instruccions mentre registreu una de les vostres llicències. Fins ara, tot bé.

Ara, CSS Hero és una eina d’edició de temes i, com a tal, l’edició es fa a la portada, on podeu veure els canvis en temps real. Accediu a la portada del vostre lloc i veureu una icona blava nova a la part superior dreta de la pantalla. Feu clic aquí per començar a utilitzar el nou complement.

Icona heroi CSS

Editor de Herois CSS

Després de fer clic a la icona blava, haureu d’esperar uns segons perquè s’activi CSS Hero. Amb el complement activat, ja podeu començar a dissenyar i personalitzar el vostre lloc web.

Per començar, simplement feu clic a la icona blava situada a la part superior del tauler d’opcions. Si no esteu segurs de com procedir, el connector us proporcionarà enllaços útils sobre tots els fonaments bàsics. Si, però, esteu preparat per endinsar-vos directament, podeu començar a orientar i editar qualsevol element de la pàgina.

Passa el ratolí sobre l’element que vols editar i, a continuació, fes clic (comencem per mirar un paràgraf de contingut relativament bàsic, com es pot veure a la captura de pantalla de sota). Un cop fet clic, CSS Hero es bloquejarà a l’element, cosa que significa que no podreu començar a personalitzar-vos.

Element de destinació de l'heroi de CSS

Per fer el procés el més senzill possible, CSS Hero us oferirà una llista d’opcions de personalització, segons el tipus d’element que vau triar. Després d’haver seleccionat un paràgraf, les meves opcions inclouen canviar tipus de lletra, fons i sanefes i configurar el rellotge al voltant del text.

Editar els elements és fàcil, amb tot controlat des de la barra de menús de la dreta, a més dels canvis previsualitzats en temps real. Per començar, he decidit centrar-me en les propietats del text. Amb aquesta opció seleccionada, CSS Hero mostra totes les opcions disponibles per configurar el text, incloses:

  • Cara de la font: amb tots els tipus de lletra disponibles per a la seva selecció
  • Color de la lletra
  • Mida de la font
  • Pes del tipus de lletra
  • Alineació del text
  • Transformació de text: per exemple, en majúscules
  • Espai de paraula
  • Alçada de la línia

Feu els canvis que vulgueu i mireu-los aplicats al text un parcialment més endavant.

Estil de tipus de font CSS Hero

A continuació, podeu tornar enrere i configurar un fons per al vostre paràgraf; de nou, CSS Hero us dóna el control total. Podeu penjar una imatge personalitzada, seleccionar un color o configurar un degradat que es mostri com a fons.

CSS Hero Background Gradient

També us ofereixen les mateixes opcions per als bordes dels paràgrafs, amb una flexibilitat completa en l’estil, l’amplada i el color de la vora.

Estil de frontera heroi CSS

Hi ha fins i tot uns quants estils preconfigurats fantàstics, per exemple, convertir el text en un botó o mostrar un fons preparat ja en diversos dissenys fantàstics..

Estils de preparació per a herois de CSS

Si preferiu no treballar els canvis d’una secció alhora, també podeu seleccionar tota l’opció, que enumera totes les opcions de personalització en una pantalla convenient..

Desfés els canvis

A mesura que facis canvis al text, CSS Hero els aplicarà a la versió en directe del lloc web. Tanmateix, no us preocupeu de fer cap canvi permanent en aquest moment: abans que s’apliquin els canvis, podeu optar per esborrar-los fent clic a cancel·lar o per confirmar-los fent clic al botó de desar..

Tanmateix, fins i tot després de col·locar l’estalvi, no us deixaran quedar amb canvis indesitjats. Per tornar a l’original, torneu al nivell superior del menú Herois CSS, aneu a la secció d’eines i, a continuació, seleccioneu l’opció de restabliment de l’opció predeterminada del tema..

També és possible restaurar un element individual a la configuració de fàbrica predeterminada. Feu clic a l’element que voleu restaurar i, a continuació, feu clic a la petita icona de restabliment “R” a la dreta del menú. Premeu confirmació i el vostre element canalla es restablirà a la seva antiga glòria.

Com he comentat abans, totes les personalitzacions s’apliquen a un full d’estil addicional. En cas que passi el pitjor, el full d’estil original del vostre tema romandrà intacte. Això vol dir que, independentment dels canvis que feu mitjançant CSS Hero, no es poden fer danys a llarg termini. Si totes les altres opcions de restauració fallen, podeu restaurar el tema predeterminat i dormir fàcilment!

Edita qualsevol element

Un dels punts forts de CSS Hero és que permet editar qualsevol element de la vostra pàgina, per molt gran que sigui.

Si veieu la imatge gran, podeu editar la imatge de fons, l’estil de la barra lateral i la secció de peu de pàgina.

Això s’aconsegueix mitjançant el mateix procés que vam utilitzar per editar el nostre paràgraf, però demostra que CSS Hero es pot utilitzar per fer canvis fonamentals en l’estètica del vostre lloc. Consulteu la captura de pantalla de sota, on he canviat el fons de la meva barra lateral, he canviat els estils de capçalera de widget i també he reconfigurat l’espai. Aquí teniu el bàsic abans de disparar:

CSS Hero Before Captura de pantalla

I aquí és després de la meva retocació: no sóc dissenyador, certament, però només han trigat pocs segons en aconseguir-ho.

CSS Hero After Captura de pantalla

També podeu personalitzar elements de contingut minúsculs, com ara imatges, colors d’enllaç i estils de llista. Els estils de llista són especialment interessants, perquè podeu triar vinyetes personalitzades a la secció de llistes dedicades. S’ofereixen sis excel·lents bales preconstruïdes (incloent quadrats decimals i números romans) o podeu carregar les vostres pròpies icones personalitzades per obtenir un toc més personal.

Tant de bo això us doni una idea de com podeu revisar el disseny del vostre lloc. El tema de WordPress proporciona les bases, però, gràcies a CSS Hero, podeu ajustar tots els píxels del vostre lloc web al vostre gust, sense tocar cap línia de codi..

Altres característiques

CSS Hero té altres funcions fantàstiques a les quals vull cridar l’atenció.

Primer és el canviador de visions. Amb un èmfasi creixent en el disseny sensible, és important que el vostre lloc web funcioni perfectament en dispositius de totes formes i mides. CSS Hero inclou una funció integrada que us permet visualitzar el vostre lloc des de la pantalla, la tauleta i la vista per a mòbils.

Simplement seleccioneu la vista preferida de la barra d’eines (és la segona opció a baix) i deixeu que CSS Hero transformi la pantalla a la mida adequada. Aquesta és una manera excel·lent de provar els canvis que heu aplicat en dispositius més petits.

Vista de tauleta CSS Hero

A continuació, tenim la característica d’historial important. Cada cop que feu clic al botó de desa, CSS Hero emmagatzema una instantània del vostre lloc web. Aquestes instantànies es poden veure i restaurar amb un clic de botó, el que significa que el vostre treball dur no es perd mai, només podeu saltar cap endavant i enrere en el temps..

Finalment, tenim l’opció Exportar CSS, disponible a la secció d’eines. Això us dóna l’oportunitat d’exportar el vostre CSS editat per utilitzar-lo en un altre lloc web, o simplement augmentar-lo a la pantalla per estudiar els canvis que heu fet (una de les millors maneres d’aprendre CSS).

Complement Inspector Pro

Els que vau actualitzar els plans personals o professionals també rebran el complement CSS Hero Inspector Pro inclòs amb la vostra llicència.

Anunciat el maig de 2015 i recentment fora del mode beta, Inspector Pro està dirigit a usuaris CSS més avançats. Si bé CSS Hero és una eina que no requereix absolutament habilitats CSS, Inspector Pro s’ha desenvolupat per a aquells que vulguin personalitzar el seu lloc mitjançant l’adaptació directa del CSS.

Inspector Pro mostra el CSS del vostre tema a la vista prèvia en directe. Podeu editar aquest codi si us plau i, mentre ho feu, els canvis es reflecteixen a la vista prèvia. En proporcionar-vos la possibilitat d’editar directament el CSS, aquest complement us dóna un control absolut sobre les vostres personalitzacions, píxel per píxel.

CSS Hero Inspector Pro

Tot i això, Inspector Pro també ofereix algunes funcionalitats útils, de manera que mai no ets pel vostre compte. Per exemple, podeu saltar a una línia específica mitjançant la funció de cerca útil o desactivar les línies d’estil específiques de manera que els elements superposats no s’obtinguin.

Si escriviu el vostre CSS des de zero, us encantarà aquest complement, ja que vol dir que ja no haureu de parpellejar entre les finestres: podeu fer i veure totes les vostres modificacions en una sola pantalla. Pràctic!

Suport per a l’heroi de CSS

Des del moment en què inicieu la sessió al tauler de control de CSS Hero, podreu veure que els desenvolupadors no poden perdre el màxim rendiment del seu complement..

Ja he tocat la documentació extensa i la CSS Hero Academy (l’acadèmia està a la seva infància, però hi ha plans concrets per continuar amb la seva expansió).

Aquestes dues seccions són increïblement minucioses i l’acadèmia inclou vídeo tutorials útils. Al principi CSS es pot sentir difícil d’utilitzar, de manera que vaig trobar aquests breus tutorials de vídeo útils per trobar els meus peus; després, el complement es va sentir relativament senzill..

CSS Hero Academy

També hi ha una secció de documentació més avançada, coneguda com a Base de coneixement de desenvolupadors. Aquest objectiu està dirigit als desenvolupadors de complements / temes, que passen pels passos implicats per garantir que els seus productes siguin completament compatibles amb l’heroi CSS – aka, preparat per a herois.

Per a aquells que encara no puguin resoldre els seus problemes, malgrat la documentació en profunditat, també hi ha un fòrum de suport. Els membres del personal de suport de CSS Hero us poden respondre a qualsevol consulta, normalment en qüestió d’hores. Una llicència us permet accedir un any al fòrum i a l’equip d’assistència.

Fòrum d'assistència CSS

En general, CSS Hero no pot tenir la culpa dels seus esforços de suport. Els tutorials preescrits i enregistrats són de gran ajuda i es recullen tota l’experiència de l’usuari en els punts en què és més probable que es necessitin..

A mesura que els complements de WordPress es tornen cada vegada més sofisticats, voldria veure més desenvolupadors seguint l’exemple de CSS Hero, proporcionant suport avançat fora de la caixa, de manera que els usuaris sense experiència mai se sentin fora de la seva profunditat..

Pensaments finals

En general, em va impressionar el CSS Hero. Amb un potencial de personalització sense restriccions, aquest complement podria haver estat fàcilment aclaparador, no obstant això, a causa de la intel·ligent i intuïtiva interfície (i tutorials útils), ha estat fàcil d’utilitzar durant tot.

Les opcions de personalització són infinites, el que permet ajustar el tema de la forma que pugueu imaginar. Això us permet crear alguns dissenys originals i originals, basant-vos en els fonaments del tema i tot sense embrutar-vos les mans amb el codi.

Tot i això, CSS Hero no és només per als codificadors amateurs. Inspector Pro és una eina emocionant per a desenvolupadors experimentats que busquen construir un lloc web des de la base.

El complement fa que sigui completament possible que puguis crear un lloc des de zero, veient que la teva creació cobra vida en clau, línia per línia. De manera més realista, però, es treu la suposició de la personalització del tema, cosa que estalviarà grans quantitats de temps per als desenvolupadors que realitzin treballs de client..

En general, CSS Hero és un plugin més excel·lent i un dels que realment hauria d’adreçar als usuaris de WordPress de tots els nivells d’habilitats. Si encara no ho heu fet, comproveu-ho!

(actualització – 16 de març – des de l’escriptura d’aquest post, CSS Hero ens ha proporcionat una especial atenció codi de cupó de descompte permetent als lectors de WinningWP un màxim de 40% de descompte – veure el cupó.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me