Si usted es uno de los muchos principiantes que quieren personalizar el diseño de su sitio de WordPress sin tocar CSS, entonces estás de suerte.
El plugin CSS Hero para WordPress permite personalizar el diseño sin tocar una sola línea de código.
En esta reseña 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 principiante de WordPress debería probar.
Our CSS Hero Reseña / valoración
CSS Hero es un plugin premium para WordPress que le permite diseñar su propio tema de WordPress sin escribir una sola línea de código (no es obligatorio HTML o CSS).
Puedes deshacer los cambios rápidamente, lo que resulta muy útil para los principiantes. Todos los cambios se guardan como una hoja de estilos adicional, por lo que puede actualizar su tema de WordPress sin preocuparse de perder los cambios.
Encontrará CSS Hero igualmente bueno si usted es un diseñador o desarrollador. Funciona bien con todos los temas y frameworks populares de WordPress. Puedes cambiar rápidamente un tema o tema hijo y exportarlo al sitio web de un cliente.
CSS Hero puede ahorrarle tiempo y frustración a la hora de personalizar el diseño.
CSS Hero vs. Maquetadores 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 hacer un tema de WordPress personalizado desde cero.
Funciona con su tema de WordPress y le permite personalizar CSS sin escribir código CSS.
Por otro lado, un plugin WordPress page builder le permite crear páginas de destino y personalizar disposiciones independientemente del tema de WordPress que esté utilizando.
Pro Tip: Si quieres hacer páginas de destino, páginas de venta, páginas de producto y más, te recomendamos usar SeedProd. Es el mejor plugin WordPress maquetador de páginas, lo que le permite diseñar páginas de alta conversión y hermosas para su sitio web rápidamente.
Cómo usar CSS Hero para personalizar tu tema de WordPress
En primer lugar, debes 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.
Se trata de un plugin premium para WordPress con precios a partir de 29 $ para un solo sitio (merece totalmente la pena la inversión, teniendo en cuenta el tiempo y las molestias que le ahorrará).
Puedes usar el código del cupón CSS Hero: WPBEGINNER para obtener un descuento especial del 34%. Si compras el plan PRO, el mismo código te dará un 40% de descuento.
Serás redirigido para obtener tu clave de licencia de CSS Hero una vez activado. Siga las instrucciones en pantalla y será redirigido a su sitio en unos pocos clics.
CSS Hero pretende ofrecerte una interfaz WYSIWYG (lo que ves es lo que obtienes) para editar tu tema.
Simplemente visita tu sitio web WordPress mientras estás conectado, y verás el botón CSS Hero en la barra de administrador de WordPress.
Al hacer clic en el botón, su sitio se convertirá en una vista previa en directo.
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 tu sitio web.
A continuación, sitúe el ratón sobre un elemento que desee editar y CSS Hero lo resaltará para indicarle 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.
Incluirán propiedades CSS comunes para el elemento seleccionado, como el fondo, la tipografía, los bordes, el espaciado, etc.
Puede hacer clic en cualquier elemento para expandirlo y, a continuación, editar las propiedades CSS mediante una sencilla interfaz de usuario.
A medida que realizas cambios, el CSS personalizado aparece mágicamente debajo.
Si estás aprendiendo CSS, te resultará útil ver cómo se aplican los diferentes cambios de CSS con el resultado en la vista previa en vivo.
¿Le cuesta encontrar imágenes libres de derechos para su sitio web?
CSS Hero también tiene una integración con Unsplash, lo 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 de código listos para usar que puedes aplicar a diferentes elementos de tu sitio web.
Cambie a la pestaña “Fragmentos de código” en la columna de la izquierda y verá un montón de elementos comunes allí listados.
Puedes hacer clic para seleccionar un elemento, y CSS Hero te mostrará diferentes variaciones de estilo.
Haga clic en el botón “Establecer parámetros” para editar un estilo que le guste y, a continuación, haga clic en el botón “Aplicar” para añadirlo a su tema.
A medida que realices cambios en tu sitio web, CSS Hero los autoguardará pero no los publicará.
Para aplicar estos cambios a su sitio web, haga clic en el botón “Guardar y publicar” situado 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 posibilidad de deshacer cualquier cambio que hagas en cualquier momento.
CSS Hero mantiene un historial de todos los cambios que haces en tu tema. Simplemente haz clic en el botón del historial en la barra de herramientas de CSS Hero para ver la lista de cambios. Este botón se parece a un pequeño reloj.
Puede hacer clic en una fecha y hora para ver cómo era su sitio en ese momento. Si quieres volver a ese estado, guarda o reanuda la edición desde ese punto.
Esto no significa que los cambios que hagas después de ese momento desaparezcan. Seguirán almacenados; también puedes volver a ese momento. No hay nada más sencillo.
Pero, ¿y si solo quieres revertir los cambios que hiciste en un elemento / artículo concreto?
En ese caso, no necesitas utilizar la herramienta de historial. Haz clic en el elemento que quieras revertir a una versión anterior y, a continuación, haz clic en el botón “Restablecer”.
Esto cambiará el elemento de nuevo a los ajustes por defecto definidos por su tema de WordPress.
Personaliza tu sitio para dispositivos móviles con CSS Hero
El aspecto más difícil del diseño web es la compatibilidad de dispositivos. Hay que asegurarse de que el sitio sea igual de impresionante en todos los dispositivos y tamaños de pantalla.
Los diseñadores web utilizan varias herramientas para comprobar la compatibilidad de navegadores y dispositivos. Por suerte para ti, CSS Hero viene con una herramienta de vista previa integrada.
Sólo tienes que elegir entre dispositivos móviles, tabletas y ordenadores de sobremesa en la barra de herramientas superior. El área de vista previa cambiará al dispositivo seleccionado. También puedes conmutar entre los modos “Editar” y “Navegar” para ocultar otras barras de herramientas.
Cambiar al modo “Editar” te permitirá modificar tu sitio mientras lo previsualizas para dispositivos móviles. Esta herramienta es muy útil para retocar el diseño de tu tema para móviles y tabletas.
Compatibilidad del tema CSS Hero
El sitio web oficial de CSS Hero tiene una creciente lista de temas compatibles. Esta ficha incluye muchos de los mejores temas gratuitos de WordPress.
También tiene los temas premium más populares de tiendas como Astra, Divi, 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 característica llamada Auto-detección de Rocket Mode. Si utilizas un tema no incluido en la lista de compatibilidad de temas, CSS Hero empezará a utilizar automáticamente el Modo Cohete.
Rocket Mode intenta adivinar los selectores CSS de tu tema. Esto funciona perfectamente la mayoría de las veces. Si tu tema sigue los estándares de código de WordPress, entonces podrás 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é plugins son compatibles con CSS Hero?
CSS Hero se prueba regularmente con los mejores plugins de WordPress para comprobar su compatibilidad.
Estos incluyen plugins de formularios de contacto, maquetadores de páginas populares, WooCommerce y otros.
Si estás usando un plugin de WordPress que genera una salida que no es editable por CSS Hero, entonces puedes pedir al autor del plugin que lo corrija. No necesitan hacer mucho para proporcionar compatibilidad con CSS Hero.
Para más detalles, consulte nuestra guía sobre cómo solicitar soporte de WordPress correctamente y obtenerlo.
Esperamos que nuestra reseña sobre CSS Hero te haya resultado útil. Puede que también quieras ver nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress para principiantes y nuestra comparativa de los mejores maquetadores de páginas de WordPress para diseñar tu tema y las páginas de tu sitio web sin usar CSS.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
THANKGOD JONATHAN says
Thank you the post. You have made it really simple with this plugin to customize WordPress site. I will really try CSS Hero sometime.
Ralph says
I had 3 websites for over 10 years on wordpress and I never touched CSS. I tried as I had to fix something that i couldn’t do in theme builder but that never turned around good. All tutorials were super complex and didn’t really help people who are not familiar with coding.
Good to know there are alternatives now that can help less tech savy people to do what they just want to do, without learning new skill just to fix few small thing.
WPBeginner Support says
Glad we could share this plugin with you
Administrador
Frank Biganski says
I have nearly ten years’ experience with WordPress and somewhat knowledgabe with CSS. I cannot write it but I can implement it with help.
I purchased the CSS Hero plugin as they state it will work with LearnPress LMS plugin. However, after giving it a go, I found the plugin does not work with the LMS.
I spoke with my very experienced theme developer (WPExplorer) and he stated, in short terms, the LearnPress plugin is complexly and somewhat poorly written, which will make the CSS Hero plugin not function properly.
CSS Hero states a 30 day money back guarantee however after contacting them twice, and two weeks later, I still have not heard back from anyone at CSS Hero.
Just beware about the warranty as it seem I will have to try and contact my credit card company and try to cancel.
WPBeginner Support says
Thank you for sharing your experience, just to be safe please be sure that any messages they may have sent are not caught in your spam folder.
Administrador
Claire Smith says
Hi there,
Does CSS Hero work with the Simple Membership plugin do you know? Many thanks
WPBeginner Support says
You would want to check with CSS Hero for any questions about current conflicts.
Administrador
Richard says
I just started up a new website and have been crazy frustrated with the inability to customize themes very much. A lot of the controls are locked behind paying for a theme, but I’m not even sure if I like the theme enough to risk paying for it because I can’t edit everything enough. Will CSS Hero let me sidestep buying themes and edit the free versions?
WPBeginner Support says
It would depend on the customizations you are looking for, CSS hero will certainly help you customize your site without the need for a paid theme. You may want to take a look at their demo page on their site to see what the plugin is able to do.
Administrador
Michael says
Amazing how good this is in the review. Maybe it’s got something to do with all of the affiliate links that you’ve got peppered throughout it to make referral money from it?
I’m not saying that the plugin isn’t good, but these sort of reviews are hard to take seriously. If it was really good you could say so, but saying that it’s good on the same page as trying to make money from selling it makes it seem like a very big paid editorial advertisement for this plugin.
WPBeginner Support says
Hi Michael,
At WPBeginner, we only recommend products that we have used and tested. Please see our disclaimer page to learn more about how we make money on this website.
Administrador
Art says
I’m a little confused as to why you would use CSS Hero with a theme builder like Elementor or Divi other than seeing the code that is use for a certain element. Am I missing something?
Jon Seager says
Hi thanks for letting me be the first questiner. Still have broblems showing them w/o the image box on the main page but on the single product page I was able to ditch the image then sqoosh the placehold off the screen to the left. It didn’t really squoosh but it did allow the text to start at a more respectable starting point.
I would still love to speak to someone that has enough free time to allow me to hire on a task based relationship. I could use some help making a better searchbar with to and from date and then some plus much more work to do and could use a partner to divie up the tasks and work together.
Samuel Lin says
Hi, found wpbeginner is really helpful for beginner as I am.
One of the subsite under my multisite had installed with Affinity theme which we love very much.
But when we added Buddypress plugin, the display of buddypress group admins and mods is wasting a lot of space especially on mobile
Can we modify the layout of BP under Affinity using CSS Hero?
Thanks,
Sam
WPBeginner Support says
Hi Samuel,
We are not sure, please contact the plugin author to learn if someone has tried it with BuddyPress and Affinity.
Administrador
Erik says
Hello there,
is this plugin compatible with Slider revolution (5.4) and Visual Composer?
It could be a faster way in working with this – than with the others… in some cases.
Love to hear from you!
Erik
Louis says
Can’t find CSS HERO in the plugins
WPBeginner Support says
Hey Louis,
CSS Hero is a paid plugin available from its own website.
Administrador
AnnaD says
Hello
I’ve perchased this plugin but can’t use it: CSS Hero isn’t active
but I can’t finf the way where can I activate it …
Enn says
Hi,
Very nice overview and the plugin itself looks really useful. I have downloaded the CSS Hero, but not able to start it up on my computer. Is this plugin meant for Mack only?
Regards,
Enn
WPBeginner Support says
Hi Enn,
No, it is a WordPress plugin and would work on any WordPress installation.
Administrador
Jerry says
I just recently discovered WPB. Though I have been a WP site maintainer for several years i find that I am learning something new every time i view one of your tutorials. Thanks. I appreciate your efforts.
WPBeginner Support says
Hi Jerry,
Thank you for kind words. Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Administrador
Al says
Will this plug in remove the menus on a Pavillioin theme, one of the standard WordPress themes? I see how it is kind of like firebug in that you can identify the part of the code you want to change but this plug in will actually allow you to change it without knowing code, right? But will it remove the menu instead of changing color or location or whatever.
Thanks
Anthony says
Hi,
I purchased a wordpress theme from theme forest and uploaded the theme to my wordpress builder. The site is being hosted by inmotion hosting. My question is, since i am using the wordpress site builder to work on my site, after I install the plug in for CSS Hero, will that button still appear on the top right of my site so i can edit the content when im using the wordpress web builder? or do i have to host my site to have that capability? i dont think it matters if someone else is hosting my site correct? as long as im using the wordpress builder? little ignorant to this and so im learning as I go. Thanks
WPBeginner Support says
Hi Anthony,
If your theme follows the standard WordPress coding best practices then you will be able to use it with CSS Hero without any problems. If you cannot, then please contact your theme’s support.
Administrador
Derek says
I have have just returned to a wordpress site to update but the CSSHERO plugin does not work even though it is visible on the page. Nothing happens when I hover over content even though CSSHero seems to be active. The plug in active (V 2.1) but I noticed that the current version is 2.3 but no notice to update?
WPBeginner Support says
Hi Derek,
Please contact the plugin’s support team. For a quick work around, you can manually upload the plugin’s zip file.
Administrador
THE VIP says
Isn’t it is same as Chrome Dev Tools….I didn’t found any considerable differences b/w CDT n CSS hero….
BTW coupon code is not working for me too ???
Jitka Hruzova says
I have Yuuta free theme. atm, I need this to be able to modify size, of my logo on the website ( using jetpack is terrible, it inserts the logo but it is a small and I can modify size or anything) is it going to work for me?
Phermiki Phawa says
How to make my blog become friendly with mobiles?
Bhaskar Dhiman says
sir how we can compress the theme coding manually ? i am using newspaper 7.
Darshan Gajara says
Wow! It’s a real hero.
Andy V. says
Can CSS Hero be used with premium themes purchased on WordPress.com?
WPBeginner Support says
No it cannot be used on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrador
Juergen | webbeetle says
I followed the link and came to page with “Pricing Plans”… A big no-no for me! I understand that this is the most efficient way for any business to make money, but I have no plans to subscribe to any “plan” – other than my website hosting (where I stopped to be a “loyal customer” when the service and load times aren’t right).
CSS Hero says
There is no automatic subscription – you can renew every year if you want plugin updates – but the product WILL continue to work where it was installed – without paying each year.
Tom says
Purchased your plugin, the first site i tried it on WordPress Stella Magazine Theme……didn’t fly.
I’m disappointed
What can we do ?
WPBeginner Support says
Please contact CSS Hero support.
Administrador
Tom Tortorici says
If you’re changing the properties of, say, h2, can you change it for just one instance or one page, or can it only change all the h2’s throughout the site?
WPBeginner Support says
It can do both. For example you can create a custom class for h2 tags on a particular page.
Administrador
Juliette says
Amazing! It’s really what I need.
Working like a charm with DIVI and GENESIS!
Monnie says
Hi, the discount code doesn’t seem to be working.
Editorial Staff says
I just tried it, and it seems to be loading just fine. Can you please try again
Administrador
Louise Findlay says
Yes. I have been looking for something like this for a while.
Saurabh Chatterjee says
Is it free ? if not, is there is any other visual css editor like this , which is free of cost ?
Editorial Staff says
This is not free as stated in the article. No you will not find any free visual editor like this one.
Administrador