Revisi√≥n de CSS Hero: la personalizaci√≥n del dise√Īo de WordPress es f√°cil

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 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.

Revisión de CSS Hero

Nuestro CSS Hero Review

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).

Tiene la capacidad de deshacer cambios, lo cual 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 eres dise√Īador o desarrollador, entonces encontrar√°s a 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 realizar personalizaciones de dise√Īo.

Por lo general, somos muy esc√©pticos sobre los complementos de personalizaci√≥n de dise√Īo de apuntar y hacer clic debido a su tama√Īo hinchado. Sin embargo, CSS Hero realmente nos impresion√≥ desde el principio.

Si nos solicita una revisión honesta de CSS Hero, le daremos una calificación de 5 sobre 5 estrellas.

Cómo usar CSS Hero para personalizar tu 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 desde $ 29 para un solo sitio (vale la pena la inversión teniendo en cuenta el tiempo y las molestias que le ahorrará).

Use el código de cupón CSS Hero: WPBeginner 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, se le redirigirá para obtener su clave de licencia de CSS Hero. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio en 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.

Botón CSS Hero

Al hacer clic en el botón, su sitio se convertirá en la vista previa en vivo. Ahora podrá ver la barra de herramientas CSS Hero.

CSS Hero editor en vivo

Luego, 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.

Propiedades del elemento

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 utilizando una interfaz de usuario simple.

Edición de propiedades

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.

Edición de estilos para diferentes elementos usando CSS Hero

¬ŅTiene problemas para encontrar im√°genes libres de regal√≠as para su sitio web? CSS Hero viene con la integraci√≥n Unsplash incorporada que le permite navegar, buscar y usar hermosas fotograf√≠as en el dise√Īo de su sitio web.

Usar im√°genes libres de regal√≠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 izquierda.

Fragmentos preparados de CSS hero

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.

Guarda y publica tus cambios

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 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.

Historia de CSS Hero

Puede hacer clic en una fecha y hora para ver qué aspecto tení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 que realizó después de ese punto desaparecerán. Todavía se almacenarían, 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.

Restablecer un solo elemento

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

Personalizar su sitio para dispositivos móviles en CSS Hero

El aspecto m√°s desafiante del dise√Īo web es la compatibilidad del dispositivo. 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 incorporada.

Simplemente haga clic en el icono 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.

Edición en diferentes modos de dispositivo

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 CSS Hero Theme

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 en modo cohete. Si está utilizando un tema no incluido en la lista de compatibilidad de temas, CSS Hero comenzará automáticamente a utilizar el modo cohete.

El modo cohete intenta adivinar los selectores CSS de su tema por sí solo. Esto funciona perfectamente la mayor parte del tiempo. Si su tema sigue los estándares de codificación de WordPress, podrá editar casi todo.

También puede ponerse en contacto con su desarrollador de temas y pedirles que proporcionen compatibilidad con CSS Hero.

¬ŅQu√© complementos son compatibles con CSS Hero?

CSS Hero se prueba regularmente con los mejores complementos de WordPress para la compatibilidad. Esto incluye complementos de formulario de contacto, creadores de p√°ginas populares, WooCommerce y otros.

Si est√° utilizando un complemento de WordPress que genera una salida no editable por CSS Hero, puede solicitar al autor del complemento que lo corrija. Realmente no necesitan hacer mucho para proporcionar 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 gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.