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)

 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.

Compártelo si crees que puede ser de utilidad para otros. ¡Gracias!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

Una pregunta rápida...

¿TIENES YA UNA PÁGINA WEB O BLOG?

Para comenzar a ayudarte y darte los recursos adecuados, me gustaría saber si ya tienes un proyecto web en marcha o si aún no tienes la página creada.

Herramientas y cursos
para emprendedores online

Si aún no has visto en qué consiste mi formación en Titanes Warpress...

TIENES QUE VERLO

No te vayas sin dejar tu comentario...

19 comentarios en “CSS Hero: cómo personalizar tu theme sin tocar código CSS”

  1. Es justo lo que estaba necesitando; soy bloggero y me encanta publicar; también me gusta un buen diseño de blog, pero de HTML o de CSS ni papa.
    Como puedo saber si mi actual TEMA activo, que es AMADEUS, admite CSS HERO.

    1. Omar de la Fuente

      Hola Raúl,
      en principio CSS Hero te vale para cualquier theme, pero supongo que si quieres asegurarte 10%, tendrías que preguntar directamente a través de la página web de CSS Hero.
      Decirte eso sí que este artículo mio tiene muuuucho tiempo, es decir, que lo que veas en este vídeo no corresponde con la versión actual de CSS Hero que seguramente a día de hoy sea muy distinta.
      Mejor básate en lo que veas en su página web oficial.
      Un saludo!

  2. Hola Omar, buenas tardes, la verdad que el plugin tiene muy buena pinta, ya lo he comprado y he empezado a toquetear, pero tengo un problemita, estoy usando el tema divi, con un menu con el logo en grande, y cuando hago scrol ya se me coloca a un tamaño adecuado de una manera fija en la parte de arriba, sin embargo si edito el logo con el css hero y lo hago un poco mas grande por ejemplo, ya cuando hago scrol se me queda en el mismo tamaño y no se me hace mas pequeño mientras que el resto del menu si se me reduce, realmente con esto no tengo problema, lo puedo tocar bien desde el menu de divi y ya esta, pero me preocupa tener el mismo problema con otras cosas de la web donde tengan movimiento al hacer scrol, ¿ Tienes idea porque puede ser?, Muchas gracias de antemano

    1. Omar de la Fuente

      Hola Daniel,
      lo lamento pero tiene toda la pinta de ser algo entre el CSS que modificas con Hero y el propio theme, lo que pasa que yo no he trabajado nunca con DIVI y no te puedo decir…
      Ya lo siento 🙁 Un saludo.

  3. Nada ya esta solucionado Omar

    /* ## Secondary Navigation
    ——————————————— */

    .nav-secondary {
    background-color: #FACDCE;
    text-align: right;
    height: 47px;
    margin-top: 0px;
    margin-left: -20px;
    margin-right: -20px;
    }

    .nav-secondary .wrap {
    border-bottom: 0px solid #F7F5EE;
    margin: 0;

    }

    Lo he puesto así second navigation

    gracias de todas formas

  4. Ok Omar no pasa nada

    Lo único si me pudieras decir que linea de style.css toca cambiar para poner fondo de menu secundario con un color fijo te lo agradecería

    estilo que el fondo cuadrado tenga color fijo

    como tiene en el genesis el el menu general

    Gracias de antemano

  5. Me he comprado el plugin

    Y ahora por ejemplo quiero poner color de imagen de fondo fijo en el menu secundario

    Al estilo que tienen los genesis

    pero en mi caso estoy haciendo una tienda con un child theme genesis que al parecer no tiene esa opción

    con css hero me aparece la opción hover…

    pero para poner barra de menu entera de un color fijo?

    y tambien la del footer necesito

    también necesito varias cosas ya más avanzada de css pero creo que con css hero no va a ser posible

    os explico:

    http://shop.beautifulbluebrides.com/

    necesito saber como se hacen dibujitos en css como tiene esa tienda con el fondo del menu

    y cuando pasa el cursor sobre una opción de menu poner algun iconito…

    puedes ayudarme Omar?

    1. Omar de la Fuente

      No Juan, la verdad es que no puedo ayudarte más allá del vídeo que tengo grabado explicando algunas cosas.

      Para lo que no venga ahí o cosas que veas de otras web, tendrás que utilizar el soporte de ellos, el del plugin vaya.

      Te lo digo así abiertamente, entiende que tendría que invertir un tiempo no remunerado del cual ahora mismo ni dispongo. Epero que lo comprendas.

      Un saludo.

  6. Hola Omar
    Muy buen artículo
    una pregunta este plugin tiene licencia solo durante un año?

    La duda que me queda es si despues de un año no renuevas todos los cambios realizado a nivel de css al no ser permanentes los pierdes?

    saludos

    1. Omar de la Fuente

      Yo pienso que cuando se termina una licencia lo que se pierde es el soporte técnico y las actualizaciones, pero los cambios de código van en los propios archivos y si no los borras no debería haber problema.
      Pero para quedarte 100% seguro, yo les preugntaría directamente a los creadores del plugin.
      Un saludo!

  7. Eduardo Reyes

    Hola Omar, estoy usando el CSS Hero y me ha ayudao muchisimo. Pero he notado que los iconos de redes sociales me los cambio por unos simbolos raros. He tratado de solucionar esto y me doy cuenta de que si reseteo el historial vuelven a aparecer correctos, pero en cuanto hago algun cambio en cualquier parte vuelven de nuevo a aparecer los simbolos raros. Tu sabes como solucionar esto?
    Saludos.

    1. Omar de la Fuente

      Hola Eduardo,
      pues no me ha dado nunca ese error, la verdad es que no sabría decirte por qué ocurre.
      Prueba si te ocurre igual en distintos navegadores, para descartar que sea tu navegador, y sino de últimas escribe al soporte del plugin, no queda otra..
      Un saludo.

  8. Josue Zarco

    Buenas!
    Pues después de 3 días de uso intensivo para dejar la web lista, al final no me ha quedado otra que recibir la ayuda de Omar. El plugin lo hace infinitamente mas fácil todo pero si no se tiene un mínimo de conocimiento de lo que se trastea es complicado que queden ciertas cosas perfectas tal y como las queremos.
    En mi caso hice 4-5 cambios:
    El primero agrandar el espacio donde va el logo. Y pe
    El segundo cambio fue en el footer, sobre los links, y también perfecto
    El resto de cambios los hice en el sidebar, y hay es donde entro Omar para terminar de perfilar un par de cambios de diseño que quería, sin sus conocimientos de CSS, yo solo con el programa ya podía tocar que me da que la cosa iba cada vez a peor 🙂

    Así que desde mi punto de vista que no tengo esos conocimientos, el plugin va genial, pero con cuidadito y poco a poco. Si es con ayuda mejor que mejor

    Saludos!

  9. La verdad es que un plugin muy útil, pero teniendo en cuenta que los cambios son en CSS, probablemente ralentice la web, no es así?
    Yo en algunos casos donde he utilizado CSS me ha ralentizado la carga de la web bastante, aunque quizá este plugin lo cargue mejor, es así?

    Por cierto, te recomiendo que uses pretty link y que avises de que eres afiliado (como hago yo), de modo que tengas acceso a estadísticas y pongas automáticamente los links nofollow (aunque lo puedas hacer manualmente, es un coñazo) :).

    Un saludo

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.

Ir arriba
ebook-Siete-Claves_HEA

Tengo cuatro regalos para ti, para mejorar tu sitio web.

DESCARGA ESTE EBOOK GRATUITO

+

BONUS: Acceso a tres clases de mi escuela online

  • Radiografía de un post con el SEO bien cuidado.
  • Popups en Elementor con su formulario de suscripción.
  • Páginas que necesitas para un webinar automatizado.
Guia-paso-a-paso-para-crear-tu-blog

Tengo cuatro regalos para ti, para que puedas crear tu web.

DESCARGA LA GUÍA GRATUITA

+

BONUS: Acceso a tres clases de mi escuela online

  • Cómo contratar (bien) un hosting y un dominio.
  • Cómo instalar WordPress en apenas un par de clicks.
  • Qué plantillas te recomiendo y cómo instalar la tuya.
megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos

¿Ya tienes que irte?

Ok, pero échale un vistazo a esto, aún estás a tiempo.

VIDEO #1 [01/09/2020]

La gran oportunidad que nos ofrece hoy en día Internet
(sabiendo cómo aprovecharlo)

VIDEO #2 [03/09/2020]

Por qué parece tan complicado tener una web y un proyecto
(y porqué no debería serlo)

VIDEO #3 [07/09/2020]

El camino se hace mucho más sencillo si estás acompañado
(montamos el puzzle de tu web)

Cómo tener una web efectiva que convierta a tus lectores en suscriptores y clientes

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos
foto_Omar_Zoom

¿Tienes que irte ya?

Ok… pero no te vayas con las manos vacías.

Tengo un regalo para ti.

Antes, sólo una pregunta muy sencilla:

¿TIENES YA UNA PÁGINA WEB O UN BLOG?