Personalización simplificada del diseño de WordPress

Si usted es uno de los muchos novatos que quiere personalizar el diseño de su sitio de WordPress sin tocar CSS, entonces está de suerte. El plugin 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 plugins que todo novato de WordPress debería probar.

Nuestra revisión de CSS Hero

CSS Hero es un plugin 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 o CSS). Tiene la opción de deshacer los cambios, lo cual es extremadamente útil para 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 eres diseñador o desarrollador, encontrarás CSS Hero 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 frustración a la hora de personalizar el diseño. Por lo general, somos muy escépticos con respecto a los plugins 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 solicita una revisión honesta de CSS Hero, le daremos 5 de 5 estrellas.

Cómo usar CSS Hero para personalizar su tema de WordPress

Primero debe instalar y activar el plugin CSS Hero. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Este es un plugin premium de WordPress con precios a partir de $ 29 por un solo sitio (vale la pena la inversión considerando el tiempo y las molestias que le ahorrará). Utilice el código de cupón de CSS Hero: MundoCMS para obtener un descuento especial del 34%. Si compra el plan PRO, el mismo código le dará un gran descuento del 40%. Tras la activación, se le redirigirá para obtener su clave de licencia de CSS Hero. Simplemente siga las instrucciones en pantalla y será llevado a su sitio con solo unos pocos clics. El propósito de CSS Hero es proporcionarle una interfaz WYSIWG (lo que ve es lo que obtiene) para editar su tema. Simplemente visite su sitio web cuando haya iniciado sesión y verá el botón CSS Hero en la barra de administración de WordPress.

Haga clic en el botón para convertir su sitio en una vista previa en vivo. Ahora podrá ver la barra de herramientas CSS Hero.

Luego, simplemente haga clic en cualquier elemento de su sitio web y CSS Hero le mostrará las propiedades CSS que usa su tema para ese elemento en particular.

Estos incluirán las propiedades CSS comunes para el elemento seleccionado como fondo, tipografía, bordes, espaciado, etc. Puede hacer clic en cualquier elemento para expandirlo y luego editar las propiedades de 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 derechos para su sitio web? CSS Hero viene con una integración Unsplash incorporada que le permite navegar, buscar y usar hermosas fotografías en el diseño de su sitio web.

CSS Hero también viene con fragmentos de código listos para usar que puede aplicar a diferentes elementos de su sitio web. Simplemente vaya a la pestaña Fragmentos en la columna de la izquierda.

A medida que realiza cambios en su sitio web, CSS Hero guarda automáticamente esos cambios pero no los publica. 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 era su sitio en ese momento. Si desea volver a este estado, simplemente guarde o reanude la edición desde allí. Esto no significa que los cambios que haya realizado después de este punto desaparecerán. Todavía se almacenarían y también puede volver a ese momento. No hay nada más fácil que eso. Pero, ¿qué sucede si solo desea deshacer los cambios que ha realizado en un elemento en particular? En este caso, no es necesario utilizar la herramienta de historial. Simplemente haga clic en el elemento que desea restaurar y luego haga clic en el botón de reinicio.

Esto revertirá el elemento a la configuración predeterminada establecida por su tema de WordPress.

Personalización de su sitio para dispositivos móviles en CSS Hero

El aspecto más difícil del diseño web es la compatibilidad de dispositivos. Debe asegurarse de que su sitio se vea igualmente impresionante en todos los dispositivos y todos los tamaños de pantalla. Los diseñadores web utilizan varias herramientas para probar la compatibilidad de navegadores y dispositivos. Por suerte para ti, CSS Hero viene con una herramienta de vista previa incorporada. Simplemente haga clic en el icono del escritorio en la barra de herramientas de CSS Hero, luego haga clic en un tipo de dispositivo. Puede elegir entre dispositivos móviles, tabletas y computadoras de escritorio. El área de vista previa cambia a su dispositivo seleccionado.

Ahora puede editar su sitio mientras obtiene una vista previa para dispositivos móviles. Esta herramienta es especialmente útil para ajustar el diseño de su tema para móviles y tabletas.

Compatibilidad del tema CSS Hero

El sitio web oficial de CSS Hero tiene una lista cada vez mayor de temas compatibles. Esta lista incluye varios de los mejores temas gratuitos de WordPress. También contiene los temas premium más populares de tiendas como CSSIgniter, Themify, StudioPress, etc.

¿Qué pasa con los temas que no están en la Lista de compatibilidad de temas?

CSS Hero viene con una función llamada Auto-Detect Rocket Mode. Si está utilizando un tema que no está incluido en la lista de compatibilidad de temas, CSS Hero automáticamente comenzará a usar el modo cohete. El modo cohete intenta adivinar los selectores CSS de su tema por sí solo. Funciona bien la mayor parte del tiempo. Si su tema sigue los estándares de codificación de WordPress, podrá editar casi cualquier cosa. También puede ponerse en contacto con el desarrollador de su tema y pedirle que proporcione compatibilidad con CSS Hero.

¿Qué plugins son compatibles con CSS Hero?

CSS Hero se prueba regularmente con los mejores plugins de WordPress para verificar su compatibilidad. Esto incluye plugins de formularios de contacto, creadores de páginas populares, WooCommerce y otros. Si está utilizando un plugin de WordPress que genera una salida que no puede ser editada por CSS Hero, puede pedirle al autor del plugin que corrija esto. Realmente no necesitan hacer mucho para garantizar la compatibilidad con CSS Hero. Esperamos que haya encontrado útil nuestra revisión de CSS Hero. También puede consultar nuestra guía definitiva para mejorar la velocidad y el rendimiento de WordPress para principiantes. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.