Revisão do CSS Hero (2022): Plugin #1 do editor de temas ao vivo do WordPress
Publicados: 2022-03-17Um site é a ferramenta de marketing mais importante para uma empresa. É a primeira impressão que os potenciais clientes terão da sua empresa. Um site bem projetado pode ajudá-lo a atrair novos clientes e mantê-los voltando
Portanto, se você está procurando uma ótima maneira de melhorar a experiência do usuário do seu site, considere usar o CSS Hero.
É fácil entender que uma única linha de código incorreto ou a falta de uma vírgula pode arruinar seu site. Assim, com a maioria dos construtores de páginas, você pode personalizar facilmente seu site visualmente.
No entanto, nem todo mundo gosta de Elementor ou WP Bakery. Para eles, CSS é uma dor de cabeça, pois o tema WordPress pode não ter a capacidade de edição que eles exigem.
Para superar essas dificuldades, você pode usar o plugin CSS Hero WordPress . Ele gera automaticamente o código CSS para o seu site WordPress sem precisar tocar em uma linha de codificação.
Estou compartilhando meus pensamentos sobre esta ferramenta incrível aqui. Além disso, como aproveitar ao máximo.
Você pode ler CSS Hero Vs Yellow Pencil: The Best Comparado
Revisão do CSS Hero: Uma introdução rápida
CSS Hero é um editor visual de CSS que ajuda você a gerenciar e personalizar a aparência do tema do seu site. Ele fornece um conjunto de ferramentas para ajudá-lo a criar estilos personalizados e aplicá-los a elementos específicos em sua página, além de visualizar seus efeitos em tempo real.
As ferramentas que ele fornece são Classes CSS, que permitem adicionar estilos comuns e personalizados sem escrever nenhum código CSS. O CSS hero permite que você os ajuste de qualquer maneira, ao contrário de um construtor de páginas em que você cria ou edita elementos do zero.
O recurso de desfazer e refazer ajuda os iniciantes a atualizar qualquer tema do WordPress sem quebrá-lo. O editor visual permite que você clique em elementos e veja as alterações em uma visualização ao vivo.
O CSS Hero adiciona todos os códigos em um arquivo separado , para que você não precise se preocupar em perder as propriedades do CSS se alterar alguma coisa.
Além disso, você pode adicionar as alterações de propriedades CSS personalizadas em um tema filho e carregá-las a qualquer momento ou em qualquer outro site.
Visualização rápida dos principais recursos do CSS Hero
CSS Hero é um editor Visual CSS sem codificação. Tanto iniciantes quanto desenvolvedores de CSS experientes podem obter os benefícios disso. Então, para torná-lo utilizável para ambos, eles adicionaram muitos recursos. Aqui está uma lista desses.
- Interface de usuário simples
- Muita customização
- Estilos prontos
- Inspetor de Heróis CSS
- Estilo CSS Complexo
- Seletor de cores embutido
- Animador
- CSS gerado
- Pegada Leve
- Adicionar imagens de fundo
- Visualização móvel ao vivo com modo tablet
- Mais de 600 fontes
- Plano de fundo do vídeo para qualquer seção
- Editor Visual JS
- Visualizações ao vivo
- Fragmento embutido
- Biblioteca de paletas de cores
- Desentupimento para editar qualquer parte do site
- Projetar página de login
- Histórico do fluxo de trabalho
Junto com todos esses excelentes recursos, você também recebe alguns bônus com assinaturas premium.
- Media Query Manager: Permite definir diferentes mídias para diferentes dispositivos.
- Exportador de código CSS: Exporte códigos do site de palco para o site ao vivo.
- Modo Hover: Nova versão inclui visualização do modo hover.
Como usar o plugin CSS Hero?
CSS Hero é um plugin premium que você precisa instalar manualmente no site WordPress. Funciona como o construtor de páginas Elementor. Você deve abrir a página que deseja editar e clicar no botão “CSS Hero”.
Após clicar no botão, uma barra lateral esquerda aparecerá com a documentação. Você pode ler a documentação que explica os fundamentos do CSS hero.
Basicamente, diz que CSS Hero é um plugin WordPress de editor de CSS avançado WYSIWYG que ajuda você na personalização avançada de temas.
Clique em qualquer item e você verá opções personalizáveis no lado esquerdo e na parte inferior da tela. Então você pode alterar o plano de fundo, fontes, preenchimento, animação, gradiente, o que quiser.
Além disso, se você quiser criar um botão de herói para qualquer link, poderá usar o recurso de snippet. Você pode adicionar sombra projetada, divisor, ícones de botão e não apenas um botão.
Se desejar, você também pode adicionar animações aos elementos. Adicionar animação é super fácil com seu editor visual de CSS; clique em elementos, navegue até a barra lateral esquerda e adicione animação.
Uma visão básica da interface:
O CSS Hero não possui nenhuma área de configurações dedicada. Em vez disso, ele usa uma interface de front-end simples. A interface é principalmente a visualização ao vivo do site.
Depois de clicar no “ botão CSS Hero ” , você verá o Menu e a Ferramenta Inspetor à esquerda. Você obtém todas as ferramentas de visualização responsiva no centro superior, e o canto superior direito contém incluindo desfazer, refazer, histórico e ferramentas.
Você poderá encontrar o editor JS e a integração de vídeo na parte inferior com outros recursos. Além disso, passar o cursor sobre um elemento mostrará a área de conteúdo e clicar com o botão direito ou com o botão esquerdo abrirá as guias de configurações.
Em suma, a interface do usuário é muito amigável para iniciantes e não é demais para se perder nas configurações.
Revisão do CSS Hero: Visão geral dos recursos
Opções de personalização/Editor CSS Hero:
Você terá 3 configurações de personalização no menu CSS Hero: Properties, Snippets e Animation. As Propriedades contém a maioria dos recursos de edição. Você pode alterar a cor do plano de fundo, o estilo da fonte, a cor do plano de fundo e a transformação.
Adicionando preenchimento, bordas, espaçamento, exibir ou ocultar elementos, posicionamento e medidas, todas essas edições estão na guia de propriedades.
O Snippet contém botões pré-fabricados e sombras, divisores, artes de fundo, etc. Você pode adicionar vários designs a um único elemento.
Além disso, fazendo combinações de configurações diferentes, você pode criar novos designs. A guia de animação permite adicionar diferentes animações, como fade in, fade out e assim por diante.
Visualização responsiva:
CSS Hero tem 4 tipos de configurações de design responsivo . Você pode tornar seu site responsivo para todos os dispositivos, como desktop, tablet, configurações responsivas para dispositivos móveis.
Não apenas isso, você pode até editar de acordo com o modo paisagem e retrato para celular e tablet. Você também pode ocultar uma seção específica para qualquer dispositivo.
Por exemplo, você pode ocultar o vídeo da seção do herói para carregamento rápido no celular. Por outro lado, oculte o botão de chamada na área de trabalho.
Gerenciador de consultas de mídia:
O CSS Hero torna todo o código responsivo para diferentes dispositivos. No entanto, também oferece um Media Query Manager para edição manual.
Por exemplo, se você deseja que uma imagem apareça na área de trabalho, mas não no celular, você pode fazer isso aqui. Você também pode alterar a dimensão da imagem ou seção para celular.
Ferramenta CSS Hero Inspector:
A ferramenta CSS Hero inspector é um trunfo para desenvolvedores web. Você pode refinar seus códigos CSS aqui. A menos que você seja um dos bons seletores de CSS, isso pode não funcionar tão bem.
No entanto, esse recurso vem apenas no plano Pro e superior. A menos que você esteja super preocupado em manter o código CSS limpo, você não precisará dele.
Exportador de código CSS:
Este é um recurso incrível para desenvolvedores de sites. Você pode editar o site de demonstração ou de teste e exportar todo o código em um arquivo. Adicione esse arquivo que você pode importar para o site ativo e todo o CSS será corrigido sem manter o site em manutenção.
Histórico de revisões de desfazer/refazer:
Ao editar o site, você criará designs que não gostará primeiro, mas gostaria de reverter depois de fazer algumas alterações. Lá, o botão desfazer e refazer é útil.
Se você cometer um erro, por acaso, um clique no botão desfazer do herói CSS corrige tudo. Além disso, se você gosta de comparar as alterações, o recurso refazer, desfazer funciona como um encanto no editor CSS ao vivo.
Eu gosto mais do botão de histórico. Suponha que você queira ir para qualquer parte da edição enquanto verifica a melhoria. Assim, você pode clicar em qualquer parte dos seletores CSS e ver as alterações feitas até o final.
Integrações CSS Hero:
Após as novas atualizações na versão 5, o CSS Hero agora é mais do que um plugin do editor CSS do WordPress. Você pode manipular o código JS e integrá-lo a muitas bibliotecas JS. Você também pode verificar o recurso Inspetor de página que mostra o código HTML por trás da cena.
Incluindo isso, ele vem com integração Unsplash e Coverr integrada. O Unsplash fornecerá imagens ilimitadas sem royalties, enquanto o Coverr fornece vídeos.
Desempenho do herói CSS:
Ao melhorar as classificações dos mecanismos de pesquisa, a velocidade de carregamento pode ser uma grande preocupação. Mas posso dizer por experiência que isso não torna o site lento.
Como o CSS Hero usa um único arquivo CSS estático, não ocupa espaço. Na verdade, ele inclui esses códigos em seu arquivo de planilha CSS existente.
No geral, o CSS Hero não diminuirá a velocidade de carregamento do seu site como qualquer outro plugin do construtor de páginas. Então você pode usar isso sem se preocupar.
Revisão do CSS Hero: prós e contras
Todos nós sabemos, CSS é um dos melhores plugins de editor CSS do WordPress. No entanto, tudo tem alguns recursos bons e não tão bons.
Por exemplo, aprender código CSS não é mais obrigatório com o editor CSS Hero. Aqui está o que eu gosto e não estou muito satisfeito com o CSS Hero.
Prós
- Clique e edite elementos simples no pop-up da barra lateral
- Funciona em quase qualquer tema WordPress para personalização
- Suporta Multisite para WP
- Não comete nenhum erro de CSS
- Adicionar editor CSS ao vivo personalizado extra
- Não há necessidade de aprender código CSS
- Folhas de estilo pré-fabricadas para trabalhar mais rápido
- Menu e documentação de heróis para iniciantes
Contras
- Falta suporte ao vivo
- Nenhum recurso para adicionar ou criar uma nova camada CSS
Suporte e documentação do CSS Hero
Você pode perder o suporte ao vivo neste incrível plugin do editor CSS do WordPress, mas a documentação é bem detalhada.
Você pode obter tudo em seções bem organizadas. O “ Introdução” permite que você entenda e instale o plug-in corretamente, e os “ Vídeos de destaque de recursos ” mantêm o gel junto com as configurações.
Cada artigo também vem com um tutorial que você pode obter acesso a vídeos gratuitos em seu canal do YouTube.
Quanto custa o CSS Hero?
O plugin CSS Hero WordPress tem 4 preços. Começa a partir de $ 29 por ano pacote inicial para $ 599 negócio vitalício. Para um único negócio, você pode ir com $ 29/ano e para agências $ 99/ano é um excelente negócio.
Nota : Ao escrever a revisão, eles estavam executando uma oferta de desconto.
Alternativas CSS Hero
CSS Hero é um plugin WordPress de framework premium genesis, e é um dos melhores. No entanto, se você quiser competir com eles, haverá muito poucas alternativas.
As principais alternativas do CSS Hero são:
- Lápis Amarelo
- CSS de origem do site
- Microtemero
Esses são seus concorrentes diretos. No entanto, o CSS Hero oferece um negócio um pouco melhor em comparação com outros.
Perguntas frequentes sobre CSS Hero
O CSS Hero funciona com qualquer tema do WordPress?
Aparentemente, o CSS Hero está trabalhando em quase todos os temas populares no repositório WP. Também funciona com temas premium como DIVI. Pode haver algum tema em que este plugin do editor CSS do WordPress pode não funcionar como você deseja.
Pode não funcionar em todos os elementos do tema, mas desde que o tema funcione em outros plugins WordPress do framework genesis, você está pronto para ir.
O CSS Hero é a solução certa para você?
Se você está interessado no desenvolvimento de sites WordPress, vale a pena obtê-lo. Em primeiro lugar, você não precisa aprender código CSS e não comete nenhum erro de codificação.
Além disso, você poderá editar o código JS com o editor visual. Observar a incrível avaliação do usuário facilitará sua determinação.
O CSS Hero funciona com o WooCommerce?
sim. Funciona bem com WooCommerce. Não apenas isso, ele funciona com a maioria dos plugins e construtores de páginas populares. Se você quiser saber, deixe-me dizer que funciona com Gravity Forms, Slider Revolution, Visual Composer e muito mais.
O CSS Hero funciona com plugins do construtor de páginas como o Elementor?
Funciona com todos os plugins de construtor de páginas populares. Elementor, Beaver Builder, framework genesis, WP Bakery são alguns deles.
O que acontece se meu plano expirar?
Não importa qual plano você tenha, a menos que você consiga um contrato vitalício. Você receberá suporte e atualizações por 1 ano. Se o seu plano expirar, você ainda poderá usar o plug-in, mas não receberá nenhuma atualização.
O CSS Hero deixa seu site lento?
Ter um site leve é um fator importante para melhorar os rankings dos mecanismos de busca. Embora o CSS Hero adicione uma folha CSS de frontend, é um plugin de editor CSS WordPress muito leve. No geral, ele não deixa seu site muito lento.
Quais são os requisitos do navegador e do servidor para executar o plugin CSS Hero?
Seria melhor se você tivesse o navegador Chrome mais recente para trabalhar com facilidade. Você também pode trabalhar no navegador Firefox ou Safari mais recente. O plugin funciona perfeitamente nas últimas versões/ambientes Linux, Apache, MySQL e PHP. Você deve ter um plano de hospedagem em qualquer um desses servidores.
Revisão do CSS Hero: Considerações Finais
A maioria dos usuários deste plugin compartilhou suas incríveis críticas sobre ele. Eu também gosto pelo preço e recursos que ele oferece. Como um iniciante que não sabe muito sobre codificação CSS, o CSS hero facilita a edição e o design do meu site.
Você não precisa de um desenvolvedor especialista para usar a ferramenta porque ela é quase autoexplicativa - a única coisa que falta suporte ao chat ao vivo. Ainda assim, se você é alguém que agora tem site e faz tudo sozinho, CSS Hero é um bom investimento.
