CSS Hero: cómo personalizar tu theme sin tocar código CSS

Existen unos cuantos plugins para personalizar tu theme sin tocar el código CSS.

Normalmente, son de pago.

He probado varias opciones ultimamente y hoy me gustaría hablarte de CSS Hero.

Como veremos, usar un plugin de estos hace que no tengas que escribir código, pero no significa que no debas conocer absolutamente nada de CSS.

Eso sí, desde luego es mucho más sencillo que la opción «manual».

Vamos por partes.

css-hero-modificar-css-sin-codigo

 icon-trophy ¿Por qué elegir CSS Hero frente a otros?

Te puedo dar 3 razones por las que me decantaría por este plugin:

  1. Es bastante económico.
  2. Es sencillo de usar.
  3. Va al grano, no se complica tanto como otros.

En cuando al precio, tienes tres opciones o licencias:

  • Para un único sitio web (29$)
  • Para 5 webs (59$)
  • Para sitios ilimitados (199$)

¿A qué me refiero con que va al grano y es más sencillo que otros?

He probado opciones como la que ofrece Genesis Extender, sinceramente este me parece más fácil que el panel de control de Extender.

Bien es cierto que te da opciones mediante PHP y el uso de shortcodes para modificar la estructura más a fondo pero, si lo que necesitas es cambiar tipos de letra, colores de fonde, bordes, márgenes, etc… sin duda me quedaría con CSS Hero antes que con Genesis Extender.

 icon-gear ¿Cómo se utiliza?

Primero de todo, tendrías que comprarlo. (Soy afiliado)

Pequeño kit-kat: nunca he usado ni usaré lo de «prettylinks» para ocultar o maquillar los enlaces. Prefiero decir abiertamente que soy afiliado. Así, el que quiera ayudarme a mí por la ayuda previa aportada, genial. Y al que le moleste ese hecho, pues que no lo compre a través de mí. Sin más.

Cuando lo compras, te haces una cuenta gratuita de cliente con CSS Hero y te facilitan un archivo comprimido.

En ese archivo, tienes dentro otros tres:

  • El propio .ZIP con el plugin.
  • Un .TXT con tu usuario y contraseña.
  • Un PDF con instrucciones para activarlo.

Básicamente el el proceso de logearse con ellos y ahí te dan tu «License Key«.

Después, manos a la obra.

En la administración de tu Wordpress te saldrá una nueva opción en la parte izquiera llamada «CSS Hero – Export/import«.

Esto es porque realmente desde ahí podrás exportar los cambios de CSS que realices o bien importar los que ya hubieras realizado en otro proyecto.

Pero lo cambios en sí los harás «en vivo», directamente sobre la web.

 icon-bolt ¿Cómo es eso de directamente sobre mi web?

Pues sí. Aparecerá un icono de un rayo arriba a la derecha, cuando estés viendo tu web. Obviamente solo a ti porque estás logeado, a los usuarios normales que vean tu web no les aparecerá.

Una vez haces click en dicho icono, se abre una barra de herramientas donde podrás hacer diferentes cosas.

En el video lo verás todo, pero básicamente lo importante es hacer los cambios.

Haces click en el primer icono y después seleccionas el elemento sobre el que quieres hacer algún cambio.

En la parte derecha, se muestran las propiedades que puedes modificar de cada cosa.

Son muchísimas las opciones que da, incluso en el video ya te adelanto que no entro a fondo porque realmente sólo podrás comprobar el potencial trasteando mucho con él.

Aquí te dejo el video: (recomiendo pantalla completa y a 720p)

YouTube video

 icon-question-circle ¿Pero esto sustituye a mi style.css?

No.

El archivo style.css de tu theme seguirá igual.

Digamos que los cambios de CSS que se aplican con este plugin, se guardan en otro archivo propio de este plugin y se «imponen» a las propiedad y atributos de tu style.css cuando corresponde, para que se vean los cambios.

De ahí que si lo eliminamos o reseteamos los cambios aun con el plugin activo, todo vuelva a estar como antes, porque lo sigue controlando el archivo css de tu theme.

Buff qué bien, ya me puedo olvidar por completo del CSS

Tampoco te calientes 😉

Como digo reiteradamente en el video, siempre es MUY RECOMENDABLE aprender algo de CSS y de HTML, aunque sea lo más básico.

Ya no solo para usar este plugin mejor, sino para cualquier cosa que requiera echar un vistazo al código o simplemente manejándote en la pestaña de texto de tus entradas o creando un widget de texto/código.

Insisto: esto ayuda y bastante, pero sin que conozcas un poco la terminología de «cómo se llaman las cosas» (margin, padding, border, background…) no te enterarás bien del todo y se te escaparán algunas opciones.

Para poner solución a esto, te pongo tres enlaces:

  • Un poco de CSS básico para mejorar tu sitio web
  • Más CSS en Genesis, personalizando tu theme sin agobios
  • El HTML básico que todo el mundo debería conocer

Ese mínimo de formación, si le echas un rato, marcará una diferencia brutal entre la frustación de no saber ni por dónde empezar a tocar tu theme o bien conseguir modificar lo que deseas cambiar de él.

Nada más por mi parte, espero que te guste el plugin CSS Hero o bien que te animes a comentar si utilizas alguna otra alternativa similar.

5/5 - (5 votos)

¿Te gustaría autoemplearte y trabajar desde casa pero no sabes por dónde empezar?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Scroll al inicio

UNA PREGUNTA RÁPIDA

¿Tienes ya una página web propia?