Si eres uno de los muchos principiantes que quieren personalizar el diseño de tu sitio de WordPress sin tocar CSS, entonces estás de suerte.
El complemento CSS Hero para WordPress te permite personalizar el diseño sin tocar una sola línea de código.
En esta revisión actualizada de CSS Hero, le mostraremos cómo usar CSS Hero para personalizar su sitio web y por qué creemos que es uno de los complementos que todo principiante de WordPress debería probar.
Nuestra revisión de CSS Hero
CSS Hero es un complemento premium de WordPress que te permite diseñar tu propio tema de WordPress sin escribir una sola línea de código (no se requiere HTML ni CSS).
Puede deshacer los cambios rápidamente, lo cual es extremadamente útil para principiantes. Todos los cambios se guardan como una hoja de estilo adicional, para que puedas actualizar tu tema de WordPress sin preocuparte por perder los cambios.
Encontrarás que CSS Hero es igual de bueno si eres diseñador o desarrollador. Funciona bien con todos los temas y marcos populares de WordPress. Puede editar rápidamente un tema o un tema secundario y exportarlo al sitio web de un cliente.
CSS Hero puede ahorrarle tiempo y frustración al realizar personalizaciones de diseño.
CSS Hero frente al creador de páginas de WordPress
CSS Hero es una herramienta de diseño y no una solución ideal para crear páginas de destino o crear un tema personalizado de WordPress desde cero.
Funciona con tu tema de WordPress y te permite personalizar CSS sin escribir código CSS.
Por otro lado, un complemento de creación de páginas de WordPress le permite crear páginas de destino y personalizar diseños independientemente del tema de WordPress que esté utilizando.
Cómo usar CSS Hero para personalizar tu tema de WordPress
Primero, necesitas instalar y activar el complemento CSS Hero. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Es un complemento premium de WordPress con precios que comienzan en $29 por un solo sitio (absolutamente vale la pena la inversión, considerando el tiempo y las molestias que le ahorrará).
Puede utilizar el código de cupón CSS Hero: WPBEGINNER para obtener un descuento especial del 34%. Si compras el plan PRO, el mismo código te dará derecho a un 40% de descuento.
Serás redirigido para obtener tu clave de licencia de CSS Hero tras la activación. Siga las instrucciones en pantalla y será redirigido a su sitio con solo unos pocos clics.
CSS Hero tiene como objetivo proporcionarte una interfaz WYSIWYG (lo que ves es lo que obtienes) para editar tu tema.
Simplemente visite su sitio web de WordPress después de iniciar sesión y verá el botón CSS Hero en su barra de administración de WordPress.
Al hacer clic en el botón, su sitio se convertirá en una vista previa en vivo.
Ahora podrás ver el editor CSS Hero. Tiene una barra de herramientas superior e inferior, una columna izquierda y una vista previa en vivo de su sitio web.
A continuación, mueva el mouse sobre el elemento que desea editar y CSS Hero lo resaltará para indicar dónde se encuentra.
Al hacer clic en él, se seleccionará ese elemento y se mostrarán sus propiedades en la columna de la izquierda.
Estos incluirán propiedades CSS comunes para el elemento seleccionado, como fondo, tipografía, bordes, espaciado y más.
Puede hacer clic en cualquier elemento para expandirlo y luego editar las propiedades CSS usando una interfaz de usuario simple.
A medida que realiza cambios, el CSS personalizado aparece mágicamente a continuación.
Si está aprendiendo CSS, le resultará útil ver cómo se aplican los diferentes cambios de CSS con el resultado en la vista previa en vivo.
¿Tiene problemas para encontrar imágenes libres de derechos para su sitio web?
CSS Hero también tiene una integración Unsplash incorporada, que le permite navegar, buscar y utilizar hermosas fotografías en el diseño de su sitio web.
CSS Hero también incluye algunos fragmentos listos para usar que puedes aplicar a diferentes elementos de tu sitio web.
Cambie a la pestaña Fragmentos en la columna de la izquierda y verá una serie de elementos comunes enumerados allí.
Puede hacer clic para seleccionar un elemento y CSS Hero le mostrará diferentes variaciones de estilo.
Haga clic en el botón Establecer parámetros para cambiar el estilo que desee, luego haga clic en el botón Aplicar para agregarlo al tema.
Cuando realiza cambios en su sitio web, CSS Hero los guardará automáticamente pero no los publicará.
Para aplicar estos cambios a su sitio web en vivo, haga clic en el botón Guardar y publicar en la esquina inferior derecha de la pantalla.
Cómo deshacer cambios en CSS Hero
Una de las mejores características de CSS Hero es la capacidad de deshacer cualquier cambio que realice en cualquier momento.
CSS Hero mantiene un historial de todos los cambios que realizas en tu tema. Simplemente haga clic en el botón de historial en la barra de herramientas de CSS Hero para ver la lista de cambios. Este botón parece un pequeño reloj.
Puede hacer clic en una fecha y hora para ver cómo se veía su sitio en ese momento. Si desea restaurar ese estado, guarde o reanude la edición desde ese punto.
Esto no significa que los cambios realizados después de ese momento desaparecerán. Seguirán archivados; También puedes regresar en ese momento. No podría ser más sencillo que esto.
Pero, ¿qué pasa si sólo deseas deshacer los cambios que has realizado en un elemento en particular?
En ese caso, no es necesario utilizar la herramienta de historial. Haga clic en el elemento que desea revertir a una versión anterior, luego haga clic en el botón Revertir.
Esto devolverá el elemento a la configuración predeterminada definida por el tema de WordPress.
Personaliza tu sitio móvil en CSS Hero
El aspecto más desafiante del diseño web es la compatibilidad de dispositivos. Debe asegurarse de que su sitio tenga el mismo impacto en todos los dispositivos y tamaños de pantalla.
Los diseñadores web utilizan varias herramientas para comprobar la compatibilidad del navegador y del dispositivo. Por suerte para ti, CSS Hero viene con una herramienta de vista previa incorporada.
Simplemente elija entre móvil, tableta y computadora de escritorio en la barra de herramientas de arriba. El área de vista previa cambiará al dispositivo seleccionado. También puede cambiar entre los modos Editar y Navegación para ocultar otras barras de herramientas.
Cambiar al modo Editar le permitirá editar su sitio mientras obtiene una vista previa para dispositivos móviles. Esta herramienta es útil para editar el diseño de tu tema para dispositivos móviles y tabletas.
Compatibilidad con el tema CSS Hero
El sitio web oficial de CSS Hero tiene una lista cada vez mayor de temas compatibles. Esta lista incluye muchos de los mejores temas gratuitos de WordPress.
También contiene los temas premium más populares de tiendas como Astra, Divi, CSSIgniter, Themify, StudioPress y otras.
¿Qué pasa con los temas que no están en la lista de compatibilidad de temas?
CSS Hero viene con una función llamada Detección automática del modo cohete. Si usa un tema que no está incluido en la Lista de compatibilidad de temas, CSS Hero comenzará a usar automáticamente el modo Rocket.
El modo cohete intenta adivinar los selectores CSS de tu tema. Funciona perfectamente la mayor parte del tiempo. Si tu tema sigue los estándares de codificación de WordPress, podrás cambiar casi cualquier cosa.
También puede ponerse en contacto con el desarrollador del tema y pedirle que le proporcione compatibilidad con CSS Hero.
¿Qué complementos son compatibles con CSS Hero?
CSS Hero se prueba periódicamente con los mejores complementos de WordPress para determinar su compatibilidad.
Estos incluyen complementos de formularios de contacto, creadores de páginas populares, WooCommerce y otros.
Si utiliza un complemento de WordPress que genera resultados no editables desde CSS Hero, puede pedirle al autor del complemento que solucione el problema. No tienen que hacer mucho para garantizar la compatibilidad con CSS Hero.
Para obtener más detalles, consulte nuestra guía sobre cómo solicitar correctamente el soporte de WordPress y obtenerlo.
Esperamos que nuestra revisión de CSS Hero le haya resultado útil. Es posible que también desee consultar nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress para principiantes y nuestra comparación de los mejores creadores de páginas de WordPress para diseñar su tema y páginas de sitio web sin usar CSS.
