Deseja fazer ajustes no design que o personalizador integrado do WordPress ou mesmo os criadores de páginas não oferecem? O plug-in CSS Hero permite que você personalize esses elementos de difícil acesso sem tocar em nenhum código.
Geralmente, nós mesmos usamos o CSS Hero quando precisamos ajustar elementos de design específicos, como efeitos de foco, espaçamento complexo ou animações sutis, que normalmente exigem CSS personalizado. Ele é perfeito para os ajustes visuais que parecem simples, mas que normalmente exigem conhecimento de codificação.
Nesta análise do CSS Hero, mostraremos a você como usar o CSS Hero para personalizar facilmente a aparência do seu site. Independentemente de você estar ajustando estilos de botões ou layouts complexos, essa ferramenta torna a personalização avançada acessível a todos.
Aqui está uma visão geral dos tópicos que abordaremos:
O que é CSS Hero?
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 rapidamente as alterações no design do WordPress, o que o torna 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.
Como usamos e testamos o CSS Hero
Na verdade, já estamos usando o CSS Hero em muitos de nossos tutoriais sobre WordPress. Ele se tornou nossa solução preferida quando os leitores precisam fazer ajustes específicos no design sem codificação.
Aqui estão alguns exemplos:
- Como adicionar estilos personalizados aos widgets do WordPress
- Como estilizar os menus de navegação do WordPress (atualizado)
- Como estilizar categorias individuais de forma diferente no WordPress
Para esta análise, demos um passo a mais e instalamos o CSS Hero em um novo site de teste. Examinamos todos os recursos e aplicamos várias personalizações. Esse teste minucioso nos ajuda a detectar quaisquer novos recursos ou limitações que possam ter passado despercebidos em nosso uso diário.
Por que confiar no WPBeginner? 📣
Estamos monitorando as ferramentas de personalização do WordPress desde 2009, testando todas as principais soluções que entram no mercado. Com tantos plug-ins disponíveis, entendemos como pode ser difícil escolher o correto para o seu site.
Nossas recomendações são resultado de testes reais e experiência prática. E o mais importante é que estamos constantemente atualizando nosso conhecimento à medida que o WordPress evolui. Quando ferramentas como o CSS Hero lançarem novos recursos ou atualizações, nós as avaliaremos e compartilharemos nossas descobertas com você.
Para obter mais informações, consulte nossas diretrizes editoriais.
O CSS Hero é um construtor de páginas do WordPress?
Não – o CSS Hero e os criadores de páginas têm finalidades diferentes. O CSS Hero foi projetado especificamente para fazer ajustes de estilo nos elementos existentes do tema, enquanto os construtores de páginas são para criar layouts de página totalmente novos.
Pense no CSS Hero como uma ferramenta de personalização de design. Ele permite que você ajuste os esquemas de cores, o espaçamento, a tipografia e outros elementos visuais sem tocar no código, mas não o ajudará a criar novas páginas do zero.
Para criar layouts personalizados, páginas de destino ou páginas de vendas, você precisará de um construtor de páginas adequado, como o SeedProd. É a nossa solução recomendada que permite criar qualquer tipo de página usando blocos de arrastar e soltar, modelos predefinidos e controles de design avançados.
Para obter mais informações, confira nossa análise do SeedProd.
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.
Como o CSS Hero é um plugin premium para WordPress, você precisa pagar US$ 29 por um único site. Dito isso, achamos que o preço vale totalmente o investimento, considerando o tempo e o incômodo que ele lhe poupará.
Você pode usar o código de cupom do 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%.
Após a ativação, você será redirecionado para obter sua chave de licença do CSS Hero. 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.
Outro recurso interessante que o CSS Hero pode fazer é personalizar um elemento específico em publicações individuais ou em determinados tipos de modelos. Para fazer isso, navegue até a configuração “Selection Mode” (Modo de seleção) no canto superior esquerdo da tela. Isso determina a abrangência da aplicação de suas personalizações:
- Normal: suas alterações afetam todas as instâncias desse elemento em seu site
- Somente isso: As alterações se aplicam apenas ao elemento específico que está sendo editado
- Tipos de modelo/arquivo: As alterações se aplicam a todas as páginas que usam esse modelo (como páginas de categoria)
Essa flexibilidade permite que você faça alterações de design direcionadas exatamente onde precisa delas, sem afetar outras partes do site.
À 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. É preciso 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.
Selecione um dispositivo móvel, tablet ou desktop na barra de ferramentas superior. A área de visualização será alterada para esse dispositivo. 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.
O CSS Hero é compatível com todos os temas do WordPress?
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 Divi, CSSIgniter, Themify, StudioPress, Astra 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.
Precisa de ajuda com o design de seu site? Dê uma olhada no nosso serviço de design de sites WordPress. Por uma pequena taxa, nossa equipe de desenvolvedores experientes em WordPress criará um design profissional que atenda às suas necessidades.
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 temas para WordPress.
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.
THANKGOD JONATHAN
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
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
Glad we could share this plugin with you
Admin
Frank Biganski
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
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.
Admin
Claire Smith
Hi there,
Does CSS Hero work with the Simple Membership plugin do you know? Many thanks
WPBeginner Support
You would want to check with CSS Hero for any questions about current conflicts.
Admin
Richard
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
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.
Admin
Michael
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
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.
Admin
Art
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
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
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
Hi Samuel,
We are not sure, please contact the plugin author to learn if someone has tried it with BuddyPress and Affinity.
Admin
Erik
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
Can’t find CSS HERO in the plugins
WPBeginner Support
Hey Louis,
CSS Hero is a paid plugin available from its own website.
Admin
AnnaD
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
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
Hi Enn,
No, it is a WordPress plugin and would work on any WordPress installation.
Admin
Jerry
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
Hi Jerry,
Thank you for kind words. Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Al
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
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
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.
Admin
Derek
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
Hi Derek,
Please contact the plugin’s support team. For a quick work around, you can manually upload the plugin’s zip file.
Admin
THE VIP
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
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
How to make my blog become friendly with mobiles?
Bhaskar Dhiman
sir how we can compress the theme coding manually ? i am using newspaper 7.
Darshan Gajara
Wow! It’s a real hero.
Andy V.
Can CSS Hero be used with premium themes purchased on WordPress.com?
WPBeginner Support
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.
Admin
Juergen | webbeetle
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
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
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
Please contact CSS Hero support.
Admin
Tom Tortorici
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
It can do both. For example you can create a custom class for h2 tags on a particular page.
Admin
Juliette
Amazing! It’s really what I need.
Working like a charm with DIVI and GENESIS!
Monnie
Hi, the discount code doesn’t seem to be working.
Editorial Staff
I just tried it, and it seems to be loading just fine. Can you please try again
Admin
Louise Findlay
Yes. I have been looking for something like this for a while.
Saurabh Chatterjee
Is it free ? if not, is there is any other visual css editor like this , which is free of cost ?
Editorial Staff
This is not free as stated in the article. No you will not find any free visual editor like this one.
Admin