¿Quieres hacer ajustes de diseño que el personalizador integrado de WordPress o incluso los constructores de páginas no ofrecen? El plugin CSS Hero te permite personalizar estos elementos difíciles de alcanzar sin tocar ningún código.
A menudo usamos CSS Hero nosotros mismos cuando necesitamos ajustar elementos de diseño específicos, como efectos al pasar el ratón, espaciado complejo o animaciones sutiles, que normalmente requieren CSS personalizado. Es perfecto para esos ajustes visuales que parecen sencillos pero que normalmente requieren conocimientos de codificación.
En esta reseña de CSS Hero, te mostraremos cómo usar CSS Hero para personalizar fácilmente la apariencia de tu sitio web. Ya sea que estés ajustando estilos de botones o modificando diseños complejos, esta herramienta hace que la personalización avanzada sea accesible para todos.
Aquí tienes un resumen de los temas que cubriremos:
- ¿Qué es CSS Hero?
- ¿Es CSS Hero un constructor de páginas de WordPress?
- Cómo usar CSS Hero para personalizar tu tema de WordPress
- Cómo deshacer cambios en CSS Hero
- Personalizar tu sitio para dispositivos móviles en CSS Hero
- ¿Es CSS Hero compatible con todos los temas de WordPress?
- ¿Qué plugins son compatibles con CSS Hero?
¿Qué es CSS Hero?
CSS Hero es un plugin 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).
Puedes deshacer cambios en el diseño de tu WordPress rápidamente, lo que lo hace extremadamente útil para principiantes. Todos los cambios se guardan como una hoja de estilo adicional, por lo que puedes actualizar tu tema de WordPress sin preocuparte por perder los cambios.
Encontrarás que CSS Hero es igualmente bueno si eres diseñador o desarrollador. Funciona bien con todos los temas populares de WordPress y frameworks. Puedes cambiar rápidamente un tema o tema hijo y exportarlo al sitio web de un cliente.
Cómo usamos y probamos CSS Hero
De hecho, ya hemos estado usando CSS Hero en muchos de nuestros tutoriales de WordPress. Se ha convertido en nuestra solución preferida cuando los lectores necesitan hacer ajustes de diseño específicos sin codificar.
Aquí tienes algunos ejemplos:
- Cómo agregar estilos personalizados a los widgets de WordPress
- Cómo estilizar menús de navegación de WordPress (Actualizado)
- Cómo dar estilo a categorías individuales de forma diferente en WordPress
Para esta reseña, dimos un paso adicional e instalamos CSS Hero en un sitio de prueba nuevo. Revisamos cada función y aplicamos varias personalizaciones. Estas pruebas exhaustivas nos ayudan a detectar cualquier capacidad o limitación nueva que podríamos haber pasado por alto en nuestro uso diario.
¿Por qué confiar en WPBeginner? 📣
Hemos estado rastreando herramientas de personalización de WordPress desde 2009, probando cada solución importante que entra al mercado. Con tantos plugins disponibles, entendemos lo abrumador que puede ser elegir el adecuado para tu sitio web.
Nuestras recomendaciones provienen de pruebas reales y experiencia práctica. Lo más importante es que actualizamos constantemente nuestro conocimiento a medida que WordPress evoluciona. Cuando herramientas como CSS Hero lanzan nuevas funciones o actualizaciones, las evaluaremos y compartiremos nuestros hallazgos contigo.
Para más información, puedes consultar nuestras directrices editoriales.
¿Es CSS Hero un constructor de páginas de WordPress?
No – CSS Hero y los constructores de páginas cumplen propósitos diferentes. CSS Hero está diseñado específicamente para hacer ajustes de estilo a los elementos de tu tema existente, mientras que los constructores de páginas sirven para crear diseños de página completamente nuevos.
Piensa en CSS Hero como una herramienta de personalización de diseño. Te permite ajustar esquemas de color, espaciado, tipografía y otros elementos visuales sin tocar el código, pero no te ayudará a crear páginas nuevas desde cero.
Para crear diseños personalizados, páginas de destino o páginas de ventas, querrás un constructor de páginas adecuado como SeedProd. Es nuestra solución recomendada que te permite construir cualquier tipo de página utilizando bloques de arrastrar y soltar, plantillas prefabricadas y potentes controles de diseño.
Puedes consultar nuestra reseña de SeedProd para obtener más información.
Cómo usar CSS Hero para personalizar tu tema de WordPress
Primero, necesitas instalar y activar el plugin CSS Hero. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Dado que CSS Hero es un plugin premium de WordPress, necesitas pagar $29 por un solo sitio. Dicho esto, creemos que el precio vale totalmente la inversión, considerando el tiempo y las molestias que te ahorrará.
Puedes usar el código de cupón de CSS Hero WPBEGINNER para obtener un descuento especial del 34% de descuento. Si compras el plan PRO, el mismo código te dará un 40% de descuento.
Tras la activación, serás redirigido para obtener tu clave de licencia de CSS Hero. Sigue las instrucciones en pantalla y serás redirigido de vuelta a tu sitio en unos pocos clics.
CSS Hero tiene como objetivo proporcionarte una interfaz WYSIWYG (lo que ves es lo que obtienes) para editar tu tema.
Simplemente visita tu sitio web de WordPress mientras estás conectado, y notarás el botón de CSS Hero en la barra de administración de WordPress.
Al hacer clic en el botón, tu sitio se convertirá en una vista previa en vivo.
Ahora podrás ver el editor de CSS Hero. Tiene una barra de herramientas superior e inferior, una columna izquierda y una vista previa en vivo de tu sitio web.
A continuación, pasa el ratón sobre un elemento que quieras editar, y CSS Hero lo resaltará para indicar dónde estás.
Al hacer clic en él, se seleccionará ese elemento y se mostrarán sus propiedades en la columna izquierda.
Estas incluirán propiedades CSS comunes para el elemento seleccionado, como el fondo, la tipografía, los bordes, el espaciado y más.
Puedes hacer clic en cualquier elemento para expandirlo y luego editar las propiedades CSS utilizando una interfaz de usuario sencilla.
A medida que realices cambios, el CSS personalizado aparecerá mágicamente debajo.
Si estás aprendiendo CSS, te será útil ver cómo se aplican los diferentes cambios de CSS con el resultado en la vista previa en vivo.
¿Tienes problemas para encontrar imágenes libres de derechos para tu sitio web?
CSS Hero también tiene una integración incorporada con Unsplash, lo que te permite buscar y usar hermosas fotografías en el diseño de tu sitio web.
CSS Hero también viene con algunos fragmentos prefabricados que puedes aplicar a diferentes elementos de tu sitio web.
Cambia a la pestaña 'Fragmentos' en la columna izquierda y verás una gran cantidad de elementos comunes listados allí.
Puedes hacer clic para seleccionar un elemento, y CSS Hero te mostrará diferentes variaciones de estilo.
Haz clic en el botón 'Establecer parámetros' para editar un estilo que te guste, y luego haz clic en el botón 'Aplicar' para agregarlo a tu tema.
Otra cosa genial que CSS Hero puede hacer es personalizar un elemento específico en publicaciones individuales o ciertos tipos de plantillas. Para hacer esto, navega a la configuración 'Modo de selección' en la parte superior izquierda de la pantalla. Esto determina cuán ampliamente se aplicarán tus personalizaciones:
- Normal: Tus cambios afectan a todas las instancias de ese elemento en tu sitio.
- Solo este: Los cambios se aplican solo al elemento específico que estás editando.
- Tipos de plantilla/archivo: Los cambios se aplican a todas las páginas que usan esa plantilla (como las páginas de categorías).
Esta flexibilidad te permite realizar cambios de diseño específicos exactamente donde los necesitas, sin afectar otras partes de tu sitio.
A medida que realices cambios en tu sitio web, CSS Hero guardará automáticamente esos cambios, pero no los publicará.
Para aplicar estos cambios a tu sitio web en vivo, haz 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 realices en cualquier momento.
CSS Hero mantiene un historial de todos los cambios que realices en tu tema. Simplemente haz 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.
Puedes hacer clic en una fecha y hora para ver cómo se veía tu sitio en ese momento. Si deseas revertir a ese estado, guarda o reanuda la edición desde ese punto.
Esto no significa que los cambios que hiciste después de ese punto desaparecerán. Seguirán almacenados; también puedes revertir a ese momento. No hay nada más simple que eso.
¿Pero qué pasa si solo quieres revertir los cambios que hiciste en un elemento en particular?
En ese caso, no necesitas usar la herramienta de historial. Haz clic en el elemento al que quieres revertir a una versión anterior y luego haz clic en el botón 'Restablecer'.
Esto cambiará el elemento de vuelta a la configuración predeterminada definida por tu tema de WordPress.
Personalizar tu sitio para dispositivos móviles en CSS Hero
El aspecto más desafiante del diseño web es la compatibilidad con dispositivos. Debes asegurarte de que tu sitio se vea igual de impresionante en todos los dispositivos y tamaños de pantalla.
Los diseñadores web utilizan varias herramientas para probar la compatibilidad con navegadores y dispositivos. Por suerte para ti, CSS Hero viene con una herramienta de vista previa integrada.
Selecciona un dispositivo móvil, tableta o de escritorio en la barra de herramientas superior. El área de vista previa cambiará a ese dispositivo. También puedes alternar entre los modos 'Editar' y 'Navegar' para ocultar otras barras de herramientas.
Cambiar al modo 'Editar' te permitirá editar tu sitio mientras lo previsualizas para dispositivos móviles. Esta herramienta es útil para ajustar el diseño de tu tema para móviles y tabletas.
¿Es CSS Hero compatible con todos los temas de WordPress?
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 Divi, CSSIgniter, Themify, StudioPress, Astra, 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 usas 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 Rocket intenta adivinar los selectores CSS de tu tema. Esto funciona perfectamente la mayor parte del tiempo. Si tu tema sigue los estándares de codificación de WordPress, podrás editar casi todo.
También puede que desees contactar al desarrollador de tu 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 garantizar la compatibilidad.
Estos incluyen plugins de formularios de contacto, constructores de páginas populares, WooCommerce y otros.
Si estás utilizando un plugin de WordPress que genera una salida que CSS Hero no puede editar, entonces puedes pedirle al autor del plugin que lo solucione. No necesitan hacer mucho para proporcionar compatibilidad con CSS Hero.
Para más detalles, consulta nuestra guía sobre cómo pedir soporte de WordPress correctamente y obtenerlo.
Esperamos que hayas encontrado útil nuestra reseña de CSS Hero. También te puede interesar nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress para principiantes y nuestra comparación de los mejores constructores de temas de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
¡Esta reseña de CSS Hero es increíblemente completa y útil! Aprecio particularmente la explicación detallada de cómo se diferencia de los constructores de páginas como SeedProd. Como alguien que ha tenido problemas con la personalización de CSS en el pasado, la capacidad de hacer cambios sin codificar y deshacerlos fácilmente es un gran avance.
La integración integrada de Unsplash y la vista previa de compatibilidad de dispositivos son características fantásticas que me gustaría probar.
Esta reseña me ha convencido de darle una oportunidad a CSS Hero.
¡Gracias por una reseña tan informativa y bien estructurada!
Jiří Vaněk
Esta es una herramienta muy útil. A veces, cuando necesitaba modificar algo en mi sitio web, solía tener problemas para usar la herramienta de inspección de Firefox o varias herramientas de desarrollador de otros navegadores para encontrar la clase CSS que necesitaba ajustar, lo que a menudo tomaba mucho tiempo. Luego, tenía que recurrir a la edición de CSS asistida por IA porque yo mismo no entiendo CSS. Esto cambia completamente el juego para tales modificaciones y simplifica enormemente todo. ¡Gran herramienta!
GRACIAS A DIOS JONATHAN
Gracias por la publicación. Has hecho que sea realmente simple con este plugin personalizar un sitio de WordPress. Realmente probaré CSS Hero alguna vez.
Ralph
Tuve 3 sitios web durante más de 10 años en WordPress y nunca toqué CSS. Lo intenté porque tenía que arreglar algo que no podía hacer en el constructor de temas, pero eso nunca salió bien. Todos los tutoriales eran súper complejos y realmente no ayudaban a las personas que no están familiarizadas con la codificación.
Es bueno saber que ahora existen alternativas que pueden ayudar a las personas menos expertas en tecnología a hacer lo que solo quieren hacer, sin aprender una nueva habilidad solo para arreglar algunas cosas pequeñas.
Soporte de WPBeginner
Glad we could share this plugin with you
Administrador
Frank Biganski
Tengo casi diez años de experiencia con WordPress y algo de conocimiento de CSS. No puedo escribirlo, pero puedo implementarlo con ayuda.
Compré el plugin CSS Hero ya que afirman que funcionará con el plugin LearnPress LMS. Sin embargo, después de intentarlo, descubrí que el plugin no funciona con el LMS.
Hablé con mi desarrollador de temas con mucha experiencia (WPExplorer) y él declaró, en términos generales, que el plugin LearnPress está escrito de forma compleja y algo deficiente, lo que hará que el plugin CSS Hero no funcione correctamente.
CSS Hero indica una garantía de devolución de dinero de 30 días, sin embargo, después de contactarlos dos veces, y dos semanas después, todavía no he recibido respuesta de nadie en CSS Hero.
Solo ten cuidado con la garantía, ya que parece que tendré que intentar contactar a la compañía de mi tarjeta de crédito e intentar cancelar.
Soporte de WPBeginner
Gracias por compartir tu experiencia, solo para estar seguro, asegúrate de que los mensajes que te hayan enviado no estén en tu carpeta de spam.
Administrador
Claire Smith
Hola,
¿CSS Hero funciona con el plugin Simple Membership, lo sabes? Muchas gracias.
Soporte de WPBeginner
Deberías consultar con CSS Hero cualquier pregunta sobre conflictos actuales.
Administrador
Richard
Acabo de empezar un sitio web nuevo y he estado muy frustrado con la incapacidad de personalizar mucho los temas. Muchos de los controles están bloqueados detrás de un pago por un tema, pero ni siquiera estoy seguro de si me gusta el tema lo suficiente como para arriesgarme a pagar por él porque no puedo editarlo todo lo suficiente. ¿CSS Hero me permitirá evitar comprar temas y editar las versiones gratuitas?
Soporte de WPBeginner
Dependería de las personalizaciones que busques, CSS Hero ciertamente te ayudará a personalizar tu sitio sin necesidad de un tema de pago. Quizás quieras echar un vistazo a su página de demostración en su sitio para ver de lo que es capaz el plugin.
Administrador
Michael
Increíble lo bueno que es esto en la reseña. ¿Quizás tenga algo que ver con todos los enlaces de afiliados que has salpicado por todas partes para ganar dinero de referencia con ello?
No estoy diciendo que el plugin no sea bueno, pero este tipo de reseñas son difíciles de tomar en serio. Si realmente fuera bueno, podrías decirlo, pero decir que es bueno en la misma página que intentar ganar dinero vendiéndolo hace que parezca un anuncio editorial pagado muy grande para este plugin.
Soporte de WPBeginner
Hola Michael,
En WPBeginner, solo recomendamos productos que hemos usado y probado. Por favor, consulta nuestra página de exención de responsabilidad para obtener más información sobre cómo ganamos dinero en este sitio web.
Administrador
Art
Estoy un poco confundido sobre por qué usarías CSS Hero con un constructor de temas como Elementor o Divi, aparte de ver el código que se usa para un elemento determinado. ¿Me estoy perdiendo algo?
Jon Seager
Hola, gracias por dejarme ser el primer preguntador. Todavía tengo problemas para mostrarlos sin la caja de imagen en la página principal, pero en la página de producto individual pude quitar la imagen y luego aplastar el marcador de posición fuera de la pantalla hacia la izquierda. Realmente no lo aplasté, pero permitió que el texto comenzara en un punto de partida más respetable.
Todavía me encantaría hablar con alguien que tenga suficiente tiempo libre para permitirme contratarlo en una relación basada en tareas. Podría usar algo de ayuda para hacer una mejor barra de búsqueda con fecha de inicio y fin, y luego mucho más trabajo por hacer y podría usar un socio para dividir las tareas y trabajar juntos.
Samuel Lin
Hola, encontré que wpbeginner es realmente útil para principiantes como yo.
Uno de los sub-sitios de mi multisitio tenía instalado el tema Affinity, el cual nos encanta mucho.
Pero cuando agregamos el plugin Buddypress, la visualización de los administradores y moderadores de grupos de Buddypress desperdicia mucho espacio, especialmente en dispositivos móviles.
¿Podemos modificar el diseño de BP bajo Affinity usando CSS Hero?
Gracias,
Sam
Soporte de WPBeginner
Hola Samuel,
No estamos seguros, por favor contacta al autor del plugin para saber si alguien lo ha probado con BuddyPress y Affinity.
Administrador
Erik
Hola,
¿Es este plugin compatible con Slider Revolution (5.4) y Visual Composer?
Podría ser una forma más rápida de trabajar con esto, que con los otros... en algunos casos.
¡Me encantaría saber de ti!
Erik
Louis
No puedo encontrar CSS HERO en los plugins
Soporte de WPBeginner
Hola Louis,
CSS Hero es un plugin de pago disponible en su propio sitio web.
Administrador
AnnaD
Hola
Compré este plugin pero no puedo usarlo: CSS Hero no está activo
pero no encuentro la forma de activarlo...
Enn
Hola,
Muy buena descripción general y el plugin en sí parece muy útil. Descargué CSS Hero, pero no puedo iniciarlo en mi computadora. ¿Este plugin es solo para Mac?
Saludos,
Enn
Soporte de WPBeginner
Hola Enn,
No, es un plugin de WordPress y funcionaría en cualquier instalación de WordPress.
Administrador
Jerry
Descubrí WPB recientemente. Aunque he sido mantenedor de sitios WP durante varios años, me doy cuenta de que aprendo algo nuevo cada vez que veo uno de sus tutoriales. Gracias. Aprecio sus esfuerzos.
Soporte de WPBeginner
Hola Jerry,
Gracias por tus amables palabras. No olvides unirte a nosotros en Twitter para más consejos y tutoriales de WordPress.
Administrador
Al
¿Este plugin eliminará los menús en un tema Pavillioin, uno de los temas estándar de Wordpress? Veo que es algo así como Firebug, en el sentido de que puedes identificar la parte del código que quieres cambiar, pero este plugin realmente te permitirá cambiarlo sin saber código, ¿verdad? Pero, ¿eliminará el menú en lugar de cambiar el color o la ubicación o lo que sea?
Gracias
Anthony
Hola,
Compré un tema de WordPress en Theme Forest y subí el tema a mi constructor de WordPress. El sitio está alojado por InMotion Hosting. Mi pregunta es, dado que estoy usando el constructor de sitios de WordPress para trabajar en mi sitio, después de instalar el plugin para CSS Hero, ¿seguirá apareciendo ese botón en la parte superior derecha de mi sitio para que pueda editar el contenido cuando esté usando el constructor web de WordPress? ¿O tengo que alojar mi sitio para tener esa capacidad? No creo que importe si alguien más está alojando mi sitio, ¿correcto? ¿Siempre y cuando esté usando el constructor de WordPress? Soy un poco ignorante en esto y estoy aprendiendo sobre la marcha. Gracias.
Soporte de WPBeginner
Hola Anthony,
Si tu tema sigue las mejores prácticas de codificación estándar de WordPress, podrás usarlo con CSS Hero sin ningún problema. Si no puedes, ponte en contacto con el soporte de tu tema.
Administrador
Derek
Acabo de regresar a un sitio de WordPress para actualizar, pero el plugin CSSHERO no funciona a pesar de que es visible en la página. No sucede nada cuando paso el cursor sobre el contenido, aunque CSSHero parece estar activo. El plugin está activo (V 2.1), pero noté que la versión actual es 2.3, ¿pero no hay aviso para actualizar?
Soporte de WPBeginner
Hola Derek,
Por favor, contacta al equipo de soporte del plugin. Como solución rápida, puedes subir manualmente el archivo zip del plugin.
Administrador
EL VIP
¿No es lo mismo que las Herramientas de desarrollador de Chrome? No encontré diferencias considerables entre CDT y CSS Hero...
Por cierto, el código de cupón tampoco me funciona???
Jitka Hruzova
Tengo el tema gratuito Yuuta. Actualmente, necesito poder modificar el tamaño de mi logo en el sitio web (usar Jetpack es terrible, inserta el logo pero es pequeño y no puedo modificar el tamaño ni nada). ¿Funcionará para mí?
Phermiki Phawa
¿Cómo hago que mi blog sea compatible con móviles?
Bhaskar Dhiman
Señor, ¿cómo podemos comprimir el código del tema manualmente? Estoy usando Newspaper 7.
Darshan Gajara
¡Guau! Es un verdadero héroe.
Andy V.
¿Se puede usar CSS Hero con temas premium comprados en WordPress.com?
Soporte de WPBeginner
No, no se puede usar en WordPress.com. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com.
Administrador
Juergen | webbeetle
Seguí el enlace y llegué a una página con "Planes de precios"… ¡Un gran no-no para mí! Entiendo que esta es la forma más eficiente para que cualquier negocio gane dinero, pero no tengo planes de suscribirme a ningún "plan", aparte de mi alojamiento web (donde dejé de ser un "cliente leal" cuando el servicio y los tiempos de carga no son correctos).
CSS Hero
No hay suscripción automática; puedes renovar cada año si deseas actualizaciones del plugin, pero el producto CONTINUARÁ funcionando donde se instaló, sin pagar cada año.
Tom
Compré tu plugin, el primer sitio en el que lo probé con el tema Wordpress Stella Magazine... no funcionó.
Estoy decepcionado.
¿Qué podemos hacer?
Soporte de WPBeginner
Por favor, contacta con el soporte de CSS Hero.
Administrador
Tom Tortorici
Si estás cambiando las propiedades de, digamos, h2, ¿puedes cambiarlo solo para una instancia o una página, o solo puede cambiar todos los h2 en todo el sitio?
Soporte de WPBeginner
Puede hacer ambas cosas. Por ejemplo, puedes crear una clase personalizada para las etiquetas h2 en una página en particular.
Administrador
Juliette
¡Increíble! Es justo lo que necesito.
¡Funciona a la perfección con DIVI y GENESIS!
Monnie
Hola, el código de descuento no parece estar funcionando.
Personal editorial
I just tried it, and it seems to be loading just fine. Can you please try again
Administrador
Louise Findlay
Sí. He estado buscando algo como esto durante un tiempo.
Saurabh Chatterjee
¿Es gratis? si no, ¿hay algún otro editor visual de CSS como este, que sea gratuito?
Personal editorial
Esto no es gratis como se indica en el artículo. No encontrarás ningún editor visual gratuito como este.
Administrador