Seguro que te ha pasado muchas veces que, has querido cambiar algún estilo de algún elemento de tu web, pero no has tenido ni papa de cómo hacerlo, y si le has preguntado a alguien, su respuesta ha sido: “tienes que hacerlo añadiendo código CSS en WordPress”, o similar.
A lo mejor, has querido cambiar el tamaño de una imagen, cambiar el color de letra, poner un color de fondo, añadir espacio entre elementos… pero no tienes ni idea de cómo editar CSS en tu web.
Puede que ni siquiera sepas qué es el código CSS. Si ese es tu caso, aquí te lo explico.
Sí, hay temas que te permiten personalizar muchos aspectos de tu web, como Divi, por ejemplo, pero siempre hay algo que se escapa de las personalizaciones del tema y que te gustaría modificar, pero te encuentras con que tienes que tocar el código CSS.
Y, por supuesto, también hay muchísimos temas que no tienen demasiadas opciones de personalización, y a la mínima que quieras cambiar algún estilo, tienes que hacerlo mediante CSS sí o sí.
Y tú, que el código CSS te resulta igual de comprensible que el chino mandarín, te quedas con cara de tonto porque no puedes dejar tu web a tu gusto por culpa de esto.
Pues hoy vengo a traerte la mejor de las soluciones para todos aquellos que quieran modificar cualquier estilo de su web sin tener ni idea. Voy a hablarte del plugin CSS Hero, una herramienta con la que podrás modificar cualquier estilo de tu web sin tocar ni una sola línea de código 😉
CSS Hero, el mejor plugin para modificar el CSS en WordPress
CSS Hero es un plugin bueno y práctico que te permite modificar cualquier estilo de tu web hecha con WordPress, de una manera muy visual y sencilla. Por lo pronto, te dejo con este enlace, donde puedes probar varias demos del plugin en diferentes temas populares de WordPress.
Puedes cambiar tipografías, colores, márgenes y rellenos, bordes, listados, tamaños, estilos de los botones, añadir sombras, filtros a las imágenes, divisores a las secciones, iconos, efectos al pasar el ratón, efectos al cargar la página, etc, etc.
Vamos, que viene con un set de opciones de estilos muy completo que puedes asignar a cualquier elemento de tu web.
Por si fuera poco, puedes modificar estos estilos para diferentes tamaños de dispositivos: para ordenador, para tablets y para móviles, tanto en vertical, como en horizontal.
Otra ventaja de CSS Hero es que puedes elegir si modificar un elemento para toda la web, únicamente para la página que estás editando, o únicamente para el elemento que has seleccionado.
Para que entiendas mejor esto último, voy a ponerte un ejemplo.
Imagina que seleccionas el título de una página. Por defecto, al modificar el CSS del título de la página, lo editas para todas las páginas de la web. Es decir, los cambios que hagas en ese título, servirán para todos los títulos de la web.
Pero, si por el contrario, solo quieres modificar ese título de esa página, puedes hacerlo sin afectar al resto de títulos. Y lo mismo en el caso de que solo quieras modificarlo a lo largo de esa página que estás editando.
De verdad, una maravilla para cualquier persona que quiera personalizar al detalle su web sin necesidad de tocar una sola línea de código. Te animo a probar cualquiera de sus demos para comprobar su funcionamiento por ti mismo.
Cómo funciona CSS Hero
Una vez instalado y activado CSS Hero en tu web, solo tienes que dirigirte a la página que quieres editar (si lo que quieres editar es un elemento estructural de la web, como la cabecera, menú, logo, etc, te vale con ir a cualquier página) y hacer clic en el botón “CSS HERO” que aparece en la barra superior de la web.
Cargará el modo de edición de CSS Hero y verás algo similar a esto:
A la vez que vas pasando el ratón por cada uno de los elementos de la web, va apareciendo un recuadro que delimita el área de los elementos.
En la columna de la izquierda, aparecen todas las opciones de estilos que puedes modificar. Si has utilizado Elementor, la apariencia te resultará familiar.
Imaginemos que quiero cambiar el CSS del título de cada entrada en la página blog. Haría clic encima del título que aparece en la captura, y selecciono “Typography” en las opciones de CSS Hero.
A medida que voy modificando los estilos, voy viendo en directo cómo cambia el título en la página. Si te fijas, en la parte inferior izquierda, aparece un editor de código con el código CSS que se va a generar una vez publiques los cambios que hagas.
Aunque tú estés editando los estilos de manera visual, lo que hace el plugin es generar el CSS necesario para que esos estilos se vean reflejados en la web.
Del mismo modo que he cambiado la tipografía, podría añadirle un fondo, márgenes, sombras, y el largo etcétera que permite CSS Hero. Podría explicar cada una de las opciones que tiene, pero el post se haría interminable, y es mejor que lo pruebes tú mismo desde aquí para que veas todas sus posibilidades.
En la parte superior, hay una barra lateral desde la que puedes seleccionar el tamaño de dispositivo para el que quieres realizar los cambios.
De esta manera, puedes asignar unos estilos para ordenador, y otros estilos diferentes para móvil, por ejemplo. Esto es ideal para adaptar los tamaños de los elementos y conseguir un buen diseño para smartphones.
Ejemplo de antes y después con CSS Hero
Para que veas un ejemplo de para qué puede ser útil CSS Hero, he preparado un ejemplo rápido de un cambio de estilo para la página “Carrito” de WooCommerce.
Muchos temas permiten algunas personalizaciones a la hora de mostrar los productos y para la página de producto, pero casi ninguno te deja personalizar todos y cada uno de los estilos de los elementos de WooCommerce.
Con este plugin, puedes hacer virguerías en cuestión de pocos minutos y unos cuantos clics. Como ejemplo, te enseño cómo he modificado el carrito en cinco minutos.
Esto sería el punto de partida, tal y como viene por defecto con el tema:
Y así quedaría después de editarla con CSS Hero:
Como ves, en menos de 5 minutos se pueden conseguir cambios notables en el diseño de cualquier página, por lo que, tanto si no controlas CSS, como si tienes conocimientos, pero te lleva mucho rato realizar los cambios, CSS Hero te puede solucionar la vida 🙂
Precios de CSS Hero
Seguramente te lo estabas preguntando, y sí, CSS Hero es un plugin de pago. Sería raro que un plugin tan completo fuera gratuito, pero lo bueno es que tiene un precio muy asequible para cualquier bolsillo.
Como es habitual, tiene varios planes de precios, por lo que según tus necesidades, te convendrá comprar uno u otro.
Cabe mencionar que este plugin no se puede utilizar sin tener la licencia activa, por lo que no vale lo de comprar la licencia para una web e instalarla en varias. Si necesitas usarlo en varias webs, tendrás que comprar licencia multisitio.
Estos son los precios:
- Starter: 29$ al año para un sitio.
- Personal: 59$ al año para cinco sitios.
- Pro: 199$ al año para 999 sitios.
- Lifetime Pro: 599$ en un único pago para 999 sitios.
Aunque esos sean los precios oficiales, siempre están haciendo ofertas y los puedes encontrar por mucho menos, por lo que aprovéchalas. Aquí puedes ver los precios y las ofertas.
Conclusión
Bien, pues ya ves qué fácil que es modificar CSS en WordPress con CSS Hero. Sin duda, es un plugin que recomendaría a todo aquel que quiera personalizar cada aspecto de su web, sin importar si tiene conocimientos en CSS, solo por el tiempo que se ahorra en hacer todos los cambios.
Puedes ver todas las características del plugin y comprarlo en su web oficial, es el único sitio donde lo vas a poder adquirir de manera fiable, por sus restricciones para usarlo sin licencia.
Personalizar tu web ya no será una pesadilla a partir de ahora 😉 Y si te animas a probarlo, ¡te invito a contar tus impresiones en los comentarios de esta página!
