Si quieres tener la capacidad de personalizar completamente el diseño de tu tema o plugins de WordPress tienes que saber o por lo menos tener conocimientos de CSS. Probablemente si estás empezando aún no tengas los conocimientos avanzados necesarios para poder cambiarlo todo a tu gusto.
CSS Hero resuelve este problema al brindarte una interfaz visual, sin código donde puedes cambiar el estilo de cualquier elemento en tu sitio, ya sea de tu tema o de cualquier plugin.
Básicamente, CSS Hero te da acceso a todo el poder de modificar lo que quieras utilizando CSS personalizado pero a través de una interfaz no técnica que lo hace accesible incluso si no comprendes el CSS.
Introducción CSS HERO
En pocas palabras, CSS Hero te permite personalizar completamente el diseño / apariencia de tu sitio usando las ediciones CSS que realizas a través de la interfaz visual y amigable para principiantes de CSS Hero.
Obtienes la flexibilidad de CSS personalizado pero con la simplicidad de un editor visual .
Para realizar tus ediciones todo lo que necesitas es hacer clic en el elemento que quieres editar y manipular los controles para realizar los cambios que necesites y adaptar el diseño a tu gusto.
Tendrás funcionalidades y características como:
- Ediciones responsive (dispositivos móviles).
- Inspector CSS y editor de código.
- Variables CSS.
- Editor de JavaScript.
- Consultas de medios.
¿Cómo utilizar CSS HERO?
Ahora que ya sabes lo que CSS Hero tiene para ofrecer es hora de conocer su interfaz y como funciona.
Interfaz
CSS Hero no tiene un área de configuración separada por lo que harás todo desde la interfaz. Puedes iniciar la interfaz haciendo clic en la opción CSS Hero en la barra de herramientas de WordPress.
La mayor parte de la interfaz es una vista previa en vivo de tu sitio. Además de eso, obtendrás una barra lateral, una barra superior y una barra inferior, donde puedes acceder a la configuración de CSS Hero.
Si quieres editar el diseño de cualquier elemento de tu sitio todo lo que debes hacer es colocar el cursor sobre él, en la vista previa en vivo. Eso mostrará el selector que puedes usar para elegir el elemento correcto.
Una vez que selecciones un elemento verás un montón de opciones en la barra lateral para personalizar el CSS de ese elemento.
Para tener más control sobre el elemento que seleccionas puedes hacer clic con el botón derecho en él en lugar de hacer clic con el botón izquierdo.
Esto abre algunas opciones nuevas donde puedes ver el árbol DOM o alternativas.
Por ejemplo, en lugar de seleccionar el botón en sí, es posible que quieras seleccionar el div en el que se encuentra el botón. Si haces clic con el botón derecho y abres la vista de árbol puedes seleccionar el div correcto.
Opciones de personalización
Cuando seleccionas un elemento para personalizar, las opciones de CSS se dividen en doce categorías principales:
- Fondo
- Tipografía
- Bordes
- Borde-Radio
- Espacios
- Transformar
- Filtros
- Lista Estilos
- Pantalla
- Extra
- Medidas
- Posición
Por ejemplo, si quieres cambiar el color de fondo del botón, tienes que expandir la pestaña para la configuración ‘Fondo’ . Luego, puedes usar un selector de color para cambiarlo.
A medida que seleccionas diferentes colores verás instantáneamente el cambio reflejado en la vista previa.
Si tienes dificultades para encontrar la configuración correcta también puedes usar el cuadro de búsqueda. Por ejemplo, si buscas «color», puedes ver todas las diferentes propiedades CSS relacionadas con el color para cambiar el fondo, el color del texto, el borde, etc.
Cuando empieces a entender el CSS podrás realizar ediciones directas a través del editor de código que aparece en la barra lateral. Si no te sientes cómodo trabajando con código puedes simplemente contraer el editor de código para tener más espacio en la barra lateral.
También hay una opción para elegir entre los estados «Activo» y «Hover». Si cambias a «Hover», obtendrás las mismas opciones de CSS solo que se aplicarán si el usuario pasa el ratón sobre el elemento que estás editando.
Vistas previas responsive y ediciones específicas del dispositivo
Es posible que quieras utilizar diferentes opciones de diseño según el dispositivo desde el que esté navegando una persona. Es decir, dependiendo de si un usuario está usando un ordenmador de escritorio, una tablet o un móvil.
Para ayudar con el diseño responsive CSS Hero viene con algunas características diferentes.
Puedes usar la opción en la parte superior para elegir rápidamente entre cinco modos de edición / vista previa predefinidos:
- Todos ( Escritorio).
- Tablet horizontal.
- Tablet vertical.
- Móvil horizontal.
- Mñovil vertical.
Si realizas un cambio mientras estás en uno de los modos de edición responsive, ese cambio solo se aplicará a esa vista previa y a todos los tamaños de pantalla más pequeños que esa vista previa . Esos cambios no se aplicarán a ningún tamaño de pantalla mayor que la vista previa.
Por ejemplo, si realizas un cambio en la vista previa «Todos» se aplicará a todos los dispositivos. Por otro lado, si realizas un cambio mientras estás en la vista previa de la tablet, ese cambio solo se aplicará a la tablet y los dispositivos móviles ( porque los dispositivos móviles son más pequeños que las tabletas ). Y si realizas un cambio en la vista previa móvil, solo se aplicará a los dispositivos móviles.
El cambio más específico siempre tendrá prioridad. Por ejemplo, si realizas un cambio en las vistas previas de la tablet y del móvil, los dispositivos móviles usarán la configuración de la vista previa del móvil porque eso es más específico.
Otra característica de vista previa de diseño responsive es la nueva vista previa móvil de código QR. Con esta función puedes mostrar un código QR que puedes escanear en tu teléfono. Una vez que escanees ese código QR, podrás ver una vista previa en vivo de tus ediciones en tu dispositivo móvil (antes de publicar esos cambios en tu sitio en vivo).
Es una función pequeña, pero creo que es bastante útil ya que te permite ver cómo funcionarán tus cambios en un teléfono o tablet real.
Herramienta Inspector
La herramienta Inspector es otra opción útil para usuarios más avanzados. Básicamente te brinda acceso al código CSS subyacente completo para tu página en lugar de tener que pasar por la interfaz CSS Hero.
Para usarlo todo lo que debes hacer es cambiar a la pestaña ‘Inspector’ . Luego, puedes hacer clic en el elemento que quieres editar para completar instantáneamente su selector de CSS en el editor de código donde puedes hacer tus adiciones directas de código.
Compatibilidad con variables CSS
Ésta es otra característica avanzada. Pero si deseas realizar muchas ediciones te gustará que CSS Hero admita variables CSS.
Si no estás familiarizado con las variables CSS, te ayudarán a crear diseños cohesivos y a aplicar fácilmente ciertos cambios. Por ejemplo, supongamos que quieres que todos los botones principales de tu sitio tengan un color de código hexadecimal. En lugar de aplicar manualmente ese color, puedes definir una variable CSS de «Botón principal» como ese color. Luego, cuando editas un botón estableces su color igual a la variable «CSS principal» en lugar de codificarlo en el código hexadecimal.
La ventaja de hacer las cosas de esta manera es que si alguna vez quieres cambiar el color de tu botón principal, todo lo que necesitas hacer es editar la variable y ese cambio se aplicará instantáneamente en todos los lugares donde aplicaste esa variable.
Puedes definir tus variables desde el menú Proyecto.
Para insertar una variable simplemente haz clic en el símbolo @ en la barra lateral de configuración. (También puedes guardar una configuración existente como una nueva variable).
Deshacer / Rehacer e Historial de revisiones
Para ayudarte a corregir errores, CSS Hero incluye botones de deshacer / rehacer, así como un historial de revisión completo.
También hay un navegador de ediciones que le permite ver rápidamente una lista de todos los cambios que ha realizado, divididos por consulta de medios.
Editor de JavaScript e inspector de página
A partir de CSS Hero 5, ya no es solo para CSS. CSS Hero ahora también incluye su propio editor de JavaScript. Además de permitirte agregar tu propio código el editor de JavaScript también puede ayudarte a integrar bibliotecas populares. Junto al editor de JavaScript, también puede habilitar el Inspector de página , que le permite ver el HTML subyacente de su página ( aunque no puede editar HTML ).
Integraciones Unsplash y Coverr
La última característica específica son las integraciones de medios de CSS Hero.
Si necesitas insertar medios en tus diseños CSS Hero tiene dos integraciones útiles:
Así de fácil es insertar un fondo de video desde Coverr:
CSS Hero Performance
Después de ver todo lo que CSS Hero puede hacer es posible que te preguntes si CSS Hero ralentizará tu sitio con todas esas nuevas opciones de diseño.
La respuesta es no. La huella de CSS Hero es lo más pequeña posible. Solo agrega un único archivo CSS estático a la interfaz de tu sitio que solo está allí porque necesita ese archivo para agregar realmente tus personalizaciones de CSS.
Si todavía te preocupa el rendimiento de CSS Hero, puedes deshabilitar el plugin una vez que hayas terminado de usarlo y aún así conservarás todos sus cambios.
¿Cómo funciona?
CSS Hero te permite exportar todas tus personalizaciones de CSS como código sin formato. Esto significa que puedes:
- Utilizar la interfaz visual de CSS Hero para personalizar tu sitio tanto como quieras.
- Exportar tu código CSS (una vez que hayas terminado).
- Desactivar el plugin CSS Hero.
- Agregar el CSS a tu sitio usando el método que quieras, ya sea la hoja de estilo CSS en tu tema hijo, en el personalizador de WordPress ‘CSS adicional’ , etc.
Esta forma de hacerlo es especialmente útil si eres un diseñador que creas sitios para clientes. ¿Por qué? Porque puedes usar CSS Hero para acelerar tu flujo de trabajo pero luego puedes entregar el sitio a tu cliente sin ningún rastro del plugin.
Preguntas Frecuentes sobre CSS HERO
¿CSS Hero funciona con todos los tema de WordPress?
Sí. CSS Hero debería funcionar con todos los temas de WordPress bien codíficados y que cumplan los estándares de WordPress. Para que te hagas una idea, el plugin se ha probado específicamente con temas populares como Kadence, Phlox, Astra, OceanWP, GeneratePress, Divi, Avada y otros.
¿CSS Hero funciona con constructores visuales como Elementor?
Sí. CSS Hero funciona con la mayoría de los plugins de creación de páginas web con WordPress. El plugin se ha probado con Elementor, Visual Composer y Beaver Builder entre otros.
¿CSS Hero funciona con WooCommerce?
Sí. CSS Hero ha sido probado específicamente con WooCommerce y funciona muy bien. Puedes personalizar fácilmente tus productos individuales, las páginas de la tienda y el carrito, pago, etc.
¿CSS Hero realmente cambia el tema?
No. CSS Hero no realiza ningún cambio real en tus archivos del tema de WordPress (o archivos de plugins). En su lugar, agrega un solo archivo CSS estático nuevo que contiene todos los cambios que hiciste.
Si desactivas el plugin tu sitio volverá a ser exactamente igual a como estaba antes de usar CSS Hero (a menos que exportes el código y lo agregues manualmente, como vimos anteriormente).
¿CSS Hero es gratuito?
No. CSS Hero solo viene en una versión premium.
¿Existen buenas alternativas de CSS Hero?
Hay algunas alternativas a CSS Hero. En términos de un editor de estilo CSS visual como CSS Hero, una de las alternativas más populares es YellowPencil. (tiene una versión gratuita limitada).
SiteOrigin CSS también es una alternativa gratuita popular aunque carece de algunas funciones avanzadas y la interfaz no es tan agradable.
Precios CSS HERO
CSS Hero solo viene en una versión premium, pero es bastante asequible, especialmente si solo lo necesitas en un solo sitio.
Por un año de soporte y actualizaciones automáticas:
- 1 sitio – $ 29
- 5 sitios – $ 59
- 999 sitios – $ 99
También hay un plan de pago único que ofrece soporte y actualizaciones de por vida y se usa hasta 999 sitios para $ 599.
CSS Hero es unos de los mejores por no decir el mejor editor visual de CSS para WordPress junto con Yellow Pencil.
Tienes las mejores características, la mejor interfaz y todavía tienes un precio bastante asequible (aunque no tiene una versión gratuita como Yellow Pencil por ejemplo).
Deja tus opiniones o dudas en los comentarios.