Si eres uno de los muchos principiantes que quieren personalizar el diseño de tu sitio de WordPress sin tocar CSS, estás de suerte. El complemento CSS Hero para WordPress le 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 le permite diseñar su propio tema de WordPress sin escribir una sola línea de código (no se requiere HTML ni CSS).
Tiene la capacidad de deshacer los cambios, lo que es extremadamente útil para los principiantes. Todos los cambios se guardan como una hoja de estilo adicional, lo que significa que puede actualizar su tema de WordPress sin preocuparse por perder los cambios.
Si es diseñador o desarrollador, encontrará que CSS Hero es igual de bueno. Funciona bien con todos los temas y marcos populares de WordPress. Puede realizar cambios rápidamente en un tema secundario y luego exportarlo para usarlo en el sitio web de un cliente.
CSS Hero puede ahorrarle mucho tiempo y frustraciones cuando se trata de personalizar el diseño.
Por lo general, somos muy escépticos acerca de los complementos de personalización de diseño de apuntar y hacer clic debido a su tamaño inflado. Sin embargo, CSS Hero realmente nos impresionó desde el principio.
Si nos pidiera una revisión honesta de CSS Hero, le daremos un 5 de 5 estrellas.
Cómo usar CSS Hero para personalizar su tema de WordPress
Primero debe 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 desde $ 29 por un solo sitio (vale la pena la inversión considerando el tiempo y la molestia que le ahorrará).
Use el código de cupón CSS Hero: WPPrincipiante para obtener un descuento especial del 34% de descuento. Si está comprando el plan PRO, entonces el mismo código le dará un enorme descuento del 40%.
Tras la activación, será redirigido para obtener su clave de licencia CSS Hero. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio con unos pocos clics.
El objetivo de CSS Hero es proporcionarle una interfaz WYSIWG (lo que ve es lo que obtiene) para editar su tema. Simplemente visite su sitio web mientras está conectado y notará el botón CSS Hero en la barra de administración de WordPress.
Al hacer clic en el botón, su sitio se convertirá en la vista previa en vivo. Ahora podrá ver la barra de herramientas de CSS Hero.
A continuación, simplemente haga clic en cualquier elemento de su sitio web y CSS Hero le mostrará las propiedades CSS utilizadas por su tema para ese elemento en particular.
Estos incluirán propiedades CSS comunes para el elemento seleccionado, como el fondo, la tipografía, los bordes, el 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 realice cambios, notará que 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 regalías para su sitio web? CSS Hero viene con la integración incorporada de Unsplash que le permite navegar, buscar y usar hermosas fotografías en el diseño de su sitio web.
CSS Hero también viene con algunos fragmentos listos para usar que puede aplicar a diferentes elementos en su sitio web. Simplemente cambie a la pestaña Fragmentos en la columna de la izquierda.
A medida que realice cambios en su sitio web, CSS Hero guardará automáticamente esos cambios pero no los publicará. Para aplicar estos cambios a su sitio web en vivo, debe hacer clic en el botón Guardar y publicar.
Cómo deshacer cambios en CSS Hero
Una de las mejores características de CSS Hero es la capacidad de deshacer los cambios que realice en cualquier momento. CSS Hero mantiene un historial de todos los cambios que realiza en su tema. Simplemente haga clic en el botón de historial en la barra de herramientas de CSS Hero para ver la lista de cambios.
Puede hacer clic en una fecha y hora para ver cómo se veía su sitio en ese momento. Si desea volver a ese estado, simplemente guarde o reanude la edición desde ese punto.
Esto no significa que los cambios realizados después de ese punto desaparecerán. Todavía estarían almacenados, y también puede volver a ese momento. No hay nada más simple que eso.
Pero, ¿qué sucede si solo desea revertir los cambios que realizó en un elemento en particular?
En ese caso, no necesita usar la herramienta de historial. Simplemente haga clic en el elemento que desea revertir y luego haga clic en el botón de reinicio.
Esto cambiará el elemento a la configuración predeterminada definida por su tema de WordPress.
Personalización de su sitio para dispositivos móviles en CSS Hero
El aspecto más desafiante del diseño web es la compatibilidad de dispositivos. Debe asegurarse de que su sitio se vea igualmente deslumbrante en todos los dispositivos y tamaños de pantalla. Los diseñadores web usan una variedad de herramientas para probar la compatibilidad del navegador y el dispositivo. Por suerte para ti, CSS Hero viene con una herramienta de vista previa integrada.
Simplemente haga clic en el ícono del escritorio en la barra de herramientas de CSS Hero y luego haga clic en un tipo de dispositivo. Puede elegir entre dispositivos móviles, tabletas y computadoras de escritorio. El área de vista previa cambiará a su dispositivo seleccionado.
Ahora puede editar su sitio mientras lo previsualiza para dispositivos móviles. Esta herramienta es particularmente útil para modificar el diseño de su 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 tiene los temas premium más populares de tiendas como CSSIgniter, Themify, StudioPress y más.
¿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 está utilizando un tema que no está incluido en la lista de compatibilidad de temas, CSS Hero comenzará automáticamente a usar el modo cohete.
Rocket Mode intenta adivinar los selectores CSS de tu tema por sí solo. Esto funciona perfectamente la mayor parte del tiempo. Si su tema sigue los estándares de codificación de WordPress, entonces podrá editar casi todo.
También puede ponerse en contacto con el desarrollador de su tema y pedirle que proporcione compatibilidad con CSS Hero.
¿Qué complementos son compatibles con CSS Hero?
CSS Hero se prueba periódicamente con los principales complementos de WordPress para comprobar su compatibilidad. Esto incluye complementos de formularios de contacto, creadores de páginas populares, WooCommerce y otros.
Si está utilizando un complemento de WordPress que genera una salida que CSS Hero no puede editar, puede solicitar al autor del complemento que lo arregle. Realmente no necesitan hacer mucho para brindar compatibilidad con CSS Hero.
Esperamos que haya encontrado útil nuestra revisión de CSS Hero. También puede consultar nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress para principiantes.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.