Resumen en español del contenido en 250 palabras 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 héroe CSS plugin 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 plugins Todo principiante de WordPress debería probarlo. Nuestra revisión de CSS Hero CSS Hero es un WordPress premium plugin 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 resulta extremadamente útil para los 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. Si eres diseñador o desarrollador, encontrarás CSS Hero igualmente bueno. Funciona bien con todos los temas y marcos populares de WordPress. Puede cambiar 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 a creadores 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 junto con su tema de WordPress y le permite personalizar CSS sin escribir código CSS. Por otro lado, un creador de páginas de WordPress plugin le permite crear páginas de destino y personalizar su diseño de WordPress independientemente del tema de WordPress que esté utilizando. Consejo profesional: Si desea crear páginas de destino, páginas de ventas, páginas de productos y más, le recomendamos utilizar SemillaProd. Es el mejor creador de páginas de WordPress. pluginlo que le permite diseñar rápidamente páginas hermosas y de alta conversión para su sitio web. Cómo utilizar CSS Hero para personalizar su tema de WordPress Primero, necesitas instalar y activar CSS Hero. plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar WordPress. plugin. Es un WordPress premium plugin con precios a partir de $29 por un solo sitio (la inversión vale la pena, 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% de descuento. Si compras el plan PRO, con el mismo código obtendrás un enorme descuento del 40%. Serás redirigido para obtener tu clave de licencia CSS Hero tras la activación. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio con 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 mientras está conectado y verá 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 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, coloque 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 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 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 viene con algunos fragmentos listos para usar que puedes aplicar a diferentes elementos de tu sitio web. Simplemente cambie a la pestaña ‘Fragmentos’ en la columna de la izquierda. Verá un montón de elementos de columna enumerados allí. Haga clic para seleccionar un elemento y CSS Hero le mostrará diferentes variaciones de estilo. Haga clic en el botón ‘Establecer parámetros’ para editar el estilo que desee y luego haga clic en el botón ‘Aplicar’ para agregarlo a su tema. A medida que 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, debe hacer 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 volver a ese estado, simplemente guarde o reanude la edición desde ese punto. Esto no significa que los cambios que haya realizado después de ese punto desaparecerán. Seguirán almacenados y también podrás volver a esa hora. No hay nada más sencillo que eso. Pero ¿qué pasa si sólo deseas revertir los cambios que has realizado en un elemento en particular? En ese caso, no es necesario utilizar la herramienta de historial. Simplemente haga clic en el elemento que desea volver a una versión anterior y luego haga clic en el botón ‘Restablecer’. Esto cambiará el elemento a la configuración predeterminada definida por su tema de WordPress. Personalizando 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 impresionante en todos los dispositivos y tamaños de pantalla. Los diseñadores web utilizan varias 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 elija entre dispositivos móviles, tabletas y de escritorio en la barra de herramientas superior. El área de vista previa cambiará a su dispositivo seleccionado. También puede alternar entre los modos ‘Editar’ y ‘Navegar’ 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 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 Rocket. Si utiliza un tema que no está incluido en la lista de compatibilidad de temas, CSS Hero comenzará a utilizar automáticamente el modo Rocket. El modo Rocket intenta adivinar los selectores CSS de tu tema. 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 puedes ponerte en contacto con el desarrollador de tu tema y pedirle que te proporcione compatibilidad con CSS Hero. ¿Qué complementos son compatibles con CSS Hero? CSS Hero se prueba periódicamente con los mejores WordPress plugins por compatibilidad. Estos incluyen formulario de contacto. pluginscreadores de páginas populares, WooCommerce y otros. Si estás usando WordPress plugin que genera una salida no editable por CSS Hero, entonces puedes preguntarle al plugin autor para arreglar eso. No necesitan hacer mucho para brindar compatibilidad con CSS Hero. Para obtener más detalles, consulte nuestra guía sobre cómo solicitar soporte de WordPress correctamente y obtenerlo. Esperamos que nuestra revisión de CSS Hero le haya resultado…
El héroe CSS plugin 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 plugins Todo principiante de WordPress debería probarlo.
Nuestra revisión de CSS Hero
CSS Hero es un WordPress premium plugin 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 resulta extremadamente útil para los 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.
Si eres diseñador o desarrollador, encontrarás CSS Hero igualmente bueno. Funciona bien con todos los temas y marcos populares de WordPress. Puede cambiar 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 a creadores 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 junto con su tema de WordPress y le permite personalizar CSS sin escribir código CSS.
Por otro lado, un creador de páginas de WordPress plugin le permite crear páginas de destino y personalizar su diseño de WordPress independientemente del tema de WordPress que esté utilizando.
Consejo profesional: Si desea crear páginas de destino, páginas de ventas, páginas de productos y más, le recomendamos utilizar SemillaProd. Es el mejor creador de páginas de WordPress. pluginlo que le permite diseñar rápidamente páginas hermosas y de alta conversión para su sitio web.
Cómo utilizar CSS Hero para personalizar su tema de WordPress
Primero, necesitas instalar y activar CSS Hero. plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar WordPress. plugin.
Es un WordPress premium plugin con precios a partir de $29 por un solo sitio (la inversión vale la pena, 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% de descuento. Si compras el plan PRO, con el mismo código obtendrás un enorme descuento del 40%.
Serás redirigido para obtener tu clave de licencia CSS Hero tras la activación. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio con 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 mientras está conectado y verá 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 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, coloque 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 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 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 viene con algunos fragmentos listos para usar que puedes aplicar a diferentes elementos de tu sitio web.
Simplemente cambie a la pestaña ‘Fragmentos’ en la columna de la izquierda. Verá un montón de elementos de columna enumerados allí.
Haga clic para seleccionar un elemento y CSS Hero le mostrará diferentes variaciones de estilo.
Haga clic en el botón ‘Establecer parámetros’ para editar el estilo que desee y luego haga clic en el botón ‘Aplicar’ para agregarlo a su tema.
A medida que 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, debe hacer 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 volver a ese estado, simplemente guarde o reanude la edición desde ese punto.
Esto no significa que los cambios que haya realizado después de ese punto desaparecerán. Seguirán almacenados y también podrás volver a esa hora. No hay nada más sencillo que eso.
Pero ¿qué pasa si sólo deseas revertir los cambios que has realizado en un elemento en particular?
En ese caso, no es necesario utilizar la herramienta de historial. Simplemente haga clic en el elemento que desea volver a una versión anterior y luego haga clic en el botón ‘Restablecer’.
Esto cambiará el elemento a la configuración predeterminada definida por su tema de WordPress.
Personalizando 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 impresionante en todos los dispositivos y tamaños de pantalla.
Los diseñadores web utilizan varias 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 elija entre dispositivos móviles, tabletas y de escritorio en la barra de herramientas superior. El área de vista previa cambiará a su dispositivo seleccionado. También puede alternar entre los modos ‘Editar’ y ‘Navegar’ 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 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 Rocket. Si utiliza un tema que no está incluido en la lista de compatibilidad de temas, CSS Hero comenzará a utilizar automáticamente el modo Rocket.
El modo Rocket intenta adivinar los selectores CSS de tu tema. 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 puedes ponerte en contacto con el desarrollador de tu tema y pedirle que te proporcione compatibilidad con CSS Hero.
¿Qué complementos son compatibles con CSS Hero?
CSS Hero se prueba periódicamente con los mejores WordPress plugins por compatibilidad. Estos incluyen formulario de contacto. pluginscreadores de páginas populares, WooCommerce y otros.
Si estás usando WordPress plugin que genera una salida no editable por CSS Hero, entonces puedes preguntarle al plugin autor para arreglar eso. No necesitan hacer mucho para brindar compatibilidad con CSS Hero.
Para obtener más detalles, consulte nuestra guía sobre cómo solicitar soporte de WordPress correctamente y obtenerlo.
Esperamos que nuestra revisión de CSS Hero le haya resultado útil. Es posible que también desee ver nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress para principiantes y nuestras selecciones de expertos para los mejores creadores de páginas de WordPress para diseñar su tema y páginas de sitio web sin usar CSS.
visto en: wpbeginner