Se você é um dos muitos iniciantes que desejam personalizar o design do seu site WordPress sem tocar em CSS, então está com sorte.
O plug-in CSS Hero para WordPress permite que você personalize o design sem tocar em uma única linha de código.
Nesta análise atualizada do CSS Hero, mostraremos como usar o CSS Hero para personalizar seu site e por que acreditamos que ele é um dos plug-ins que todo iniciante em WordPress deve experimentar.
Análise do nosso herói do CSS
OCSS Hero é um plug-in premium para WordPress que permite criar seu próprio tema para WordPress sem escrever uma única linha de código (não é necessário HTML ou CSS).
Você pode desfazer as alterações rapidamente, o que é extremamente útil para iniciantes. Todas as alterações são salvas como uma folha de estilo adicional, de modo que você pode atualizar o tema do WordPress sem se preocupar com a perda das alterações.
O CSS Hero será igualmente bom se você for um designer ou desenvolvedor. Ele funciona bem com todos os temas e estruturas populares do WordPress. Você pode alterar rapidamente um tema ou tema filho e exportá-lo para o site de um cliente.
O CSS Hero pode lhe poupar tempo e frustração ao fazer personalizações de design.
CSS Hero vs. Construtores de páginas do WordPress
O CSS Hero é uma ferramenta de design e não uma solução ideal para criar páginas de destino ou criar um tema WordPress personalizado do zero.
Ele funciona com seu tema do WordPress e permite que você personalize o CSS sem escrever código CSS.
Por outro lado, um plug-in do construtor de páginas do WordPress permite que você crie páginas de destino e personalize layouts, independentemente do tema do WordPress que estiver usando.
Dica profissional: se você quiser criar páginas de destino, páginas de vendas, páginas de produtos e muito mais, recomendamos o uso do SeedProd. Ele é o melhor plugin de criação de páginas do WordPress, permitindo que você crie rapidamente páginas bonitas e de alta conversão para o seu site.
Como usar o CSS Hero para personalizar seu tema do WordPress
Primeiro, você precisa instalar e ativar o plug-in CSS Hero. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
É um plug-in premium para WordPress com preços a partir de US$ 29 para um único site (o investimento vale totalmente a pena, considerando o tempo e o incômodo que ele poupará).
Você pode usar o código de cupom CSS Hero: WPBEGINNER para obter um desconto especial de 34%. Se você comprar o plano PRO, o mesmo código lhe dará um desconto de 40%.
Você será redirecionado para obter sua chave de licença do CSS Hero após a ativação. Siga as instruções na tela e você será redirecionado de volta ao seu site com apenas alguns cliques.
O CSS Hero tem como objetivo fornecer a você uma interface WYSIWYG (o que você vê é o que você obtém) para editar o tema.
Basta acessar seu site do WordPress enquanto estiver conectado e você verá o botão CSS Hero na barra de administração do WordPress.
Ao clicar no botão, seu site será convertido em uma visualização ao vivo.
Agora você poderá ver o editor CSS Hero. Ele tem uma barra de ferramentas superior e inferior, uma coluna esquerda e uma visualização ao vivo do seu site.
Em seguida, passe o mouse sobre um elemento que deseja editar, e o CSS Hero o destacará para indicar onde você está.
Ao clicar nele, o elemento será selecionado e suas propriedades serão exibidas na coluna da esquerda.
Elas incluirão propriedades CSS comuns para o elemento selecionado, como plano de fundo, tipografia, bordas, espaçamento e muito mais.
Você pode clicar em qualquer item para expandi-lo e, em seguida, editar as propriedades CSS usando uma interface de usuário simples.
À medida que você faz alterações, o CSS personalizado aparece magicamente abaixo.
Se estiver aprendendo CSS, será útil ver como diferentes alterações de CSS são aplicadas com o resultado na visualização ao vivo.
Está tendo problemas para encontrar imagens livres de royalties para seu site?
O CSS Hero também tem uma integração integrada com o Unsplash, permitindo que você navegue, pesquise e use belas fotografias no design do seu site.
O CSS Hero também vem com alguns snippets prontos que você pode aplicar a diferentes elementos do seu site.
Alterne para a guia “Snippets” na coluna da esquerda e você verá vários elementos comuns listados lá.
Você pode clicar para selecionar um elemento, e o CSS Hero mostrará diferentes variações de estilo.
Clique no botão “Set Params” (Definir parâmetros) para editar um estilo de sua preferência e, em seguida, clique no botão “Apply” (Aplicar) para adicioná-lo ao seu tema.
À medida que você fizer alterações em seu site, o CSS Hero salvará automaticamente essas alterações, mas não as publicará.
Para aplicar essas alterações ao seu site ativo, clique no botão “Save and Publish” (Salvar e publicar) no canto inferior direito da tela.
Como desfazer alterações no CSS Hero
Um dos melhores recursos do CSS Hero é a capacidade de desfazer as alterações feitas a qualquer momento.
O CSS Hero mantém um histórico de todas as alterações que você faz em seu tema. Basta clicar no botão de histórico na barra de ferramentas do CSS Hero para ver a lista de alterações. Esse botão se parece com um pequeno relógio.
Você pode clicar em uma data e hora para ver como era o site naquele momento. Se você quiser voltar a esse estado, salve ou retome a edição a partir desse ponto.
Isso não significa que as alterações feitas após esse ponto desaparecerão. Elas ainda serão armazenadas; você também pode reverter para esse momento. Não há nada mais simples do que isso.
Mas e se você quiser reverter apenas as alterações feitas em um item específico?
Nesse caso, não é necessário usar a ferramenta de histórico. Clique no elemento que deseja reverter para uma versão anterior e, em seguida, clique no botão “Redefinir”.
Isso alterará o item de volta para as configurações padrão definidas pelo tema do WordPress.
Personalizando seu site para dispositivos móveis com CSS Hero
O aspecto mais desafiador do web design é a compatibilidade de dispositivos. Você precisa garantir que seu site tenha a mesma aparência em todos os dispositivos e tamanhos de tela.
Os web designers usam várias ferramentas para testar a compatibilidade de navegadores e dispositivos. Para sua sorte, o CSS Hero vem com uma ferramenta de visualização integrada.
Basta escolher entre dispositivos móveis, tablets e desktops na barra de ferramentas superior. A área de visualização será alterada para o dispositivo selecionado. Você também pode alternar entre os modos “Editar” e “Navegar” para ocultar outras barras de ferramentas.
Mudar para o modo “Edit” permitirá que você edite seu site enquanto o visualiza em dispositivos móveis. Essa ferramenta é útil para ajustar o design do seu tema para celulares e tablets.
Compatibilidade com o tema CSS Hero
O site oficial do CSS Hero tem uma lista cada vez maior de temas compatíveis. Essa lista inclui muitos dos melhores temas gratuitos do WordPress.
Ele também tem os temas premium mais populares de lojas como Astra, Divi, CSSIgniter, Themify, StudioPress e muito mais.
E quanto aos temas que não estão na lista de compatibilidade de temas?
O CSS Hero vem com um recurso chamado Rocket Mode Auto-detection (Detecção automática do modo Rocket). Se você usar um tema não incluído na lista de compatibilidade de temas, o CSS Hero começará a usar automaticamente o Rocket Mode.
O Rocket Mode tenta adivinhar os seletores CSS do seu tema. Isso funciona perfeitamente na maioria das vezes. Se o seu tema seguir os padrões de codificação do WordPress, você poderá editar quase tudo.
Também é possível entrar em contato com o desenvolvedor do tema e pedir que ele forneça compatibilidade com o CSS Hero.
Quais plug-ins são compatíveis com o CSS Hero?
O CSS Hero é testado regularmente com os principais plug-ins do WordPress para verificar a compatibilidade.
Isso inclui plug-ins de formulário de contato, criadores de páginas populares, WooCommerce e outros.
Se estiver usando um plug-in do WordPress que gera uma saída que não pode ser editada pelo CSS Hero, você pode pedir ao autor do plug-in para corrigir isso. Eles não precisam fazer muito para oferecer compatibilidade com o CSS Hero.
Para obter mais detalhes, consulte nosso guia sobre como solicitar corretamente o suporte do WordPress e obtê-lo.
Esperamos que você tenha achado útil nossa análise do CSS Hero. Talvez você também queira ver nosso guia definitivo sobre como melhorar a velocidade e o desempenho do WordPress para iniciantes e nossa comparação dos melhores criadores de páginas do WordPress para projetar o tema e as páginas do site sem usar CSS.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no 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