CSS Hero, o editor de tema WordPress ao vivo

Imagine que você está construindo seu site WordPress e se depara com um elemento que gostaria de ajustar. A resposta pode ser escrever algum CSS para customizar o elemento. O único problema é que você não conhece CSS suficiente para alterá-lo e já passou horas procurando o código certo para usar.

Você pode economizar muito tempo – e uma enxaqueca total – usando uma ferramenta que elimina a necessidade de escrever CSS do zero. Esqueça a busca pelo elemento certo no inspetor. Você pode parar de se preocupar em lembrar o CSS certo para usar – e onde usá-lo.

O plug-in CSS Hero é uma solução 100% sem código que ajudará você a personalizar seu site WordPress de maneira rápida e fácil. Vamos conferir!

Personalize seu site com CSS Hero

CSS Hero é um plug-in para WordPress que facilita a personalização da aparência do seu site. Ele tem uma interface de apontar e clicar lindamente projetada e intuitiva.

Não importa qual tema do WordPress você usa, você pode ter controle total sobre a personalização do seu site. É tão simples quanto clicar em um elemento em seu site, fazer uma alteração e vê-la acontecer ao vivo. Com o CSS Hero você pode controlar:

• Cor
• Tipografia e estilos de fonte
• Medidas
• …e mais!

O CSS Hero também é responsivo nativamente, permitindo que você controle a aparência do seu site em computadores e dispositivos móveis. Você também não precisa se preocupar em quebrar seu site. Além da funcionalidade de visualização ao vivo, o CSS Hero inclui um recurso de área de trabalho salva-vidas para que você possa limitar as alterações apenas na área de trabalho.

Você pode fazer quantas alterações quiser no CSS Hero Theme Editor sem alterar nenhum dos arquivos de tema existentes. Se você desativar o plug-in CSS Hero, seu site simplesmente voltará ao que era.

Como um designer WordPress experiente sabe, adicionar muito CSS ao seu site pode degradar significativamente o desempenho. No entanto, o CSS Hero não acumula uma tonelada de código CSS; em vez disso, ele gera uma única folha de estilo extra estática que substitui a folha de estilo do seu tema.

Se você já tem alguma experiência em escrever CSS, também pode adicionar seu próprio código no editor de código CSS Hero. Ele oferece a mesma funcionalidade de visualização ao vivo que a interface de apontar e clicar - e verifica seu código em busca de erros em tempo real. Além disso, você pode adicionar suas próprias consultas de mídia. Você também pode exportar seu código CSS para usar em outro lugar.

CSS Hero funciona bem com:

• elementor
• Beaver Builder
• GeneratePress
• WooCommerce
• Gutemberg
• Themify
• TutorLMS
• bbPressione
• Formulário de contato 7
• …e mais!

Você pode trabalhar em qualquer tema que desejar e personalizar qualquer elemento do seu site.

Como usar o CSS Hero para personalizar seu site

Embora o uso do CSS Hero seja satisfatório e intuitivo, guiarei você pela configuração e como usar alguns dos principais recursos do plug-in.

Etapa 1: instalar o plug-in CSS Hero

Você pode encontrar o plugin CSS Hero em seu site. Existem vários planos para compra e abordarei os preços um pouco mais tarde. Eles oferecem uma garantia de reembolso de 30 dias, portanto, não há risco de experimentá-lo.

Depois de criar uma conta, basta baixar a versão mais recente do plug-in no painel da sua conta.

Depois de salvar o arquivo .zip em seu computador, vá para o site WordPress e navegue até Plugins→Adicionar novo . Procure o arquivo zip do plug-in, carregue e ative.

Etapa 2: conecte sua conta

Imediatamente você verá uma notificação no painel de administração do WordPress solicitando que você ative sua licença. Clique no grande botão azul e siga as instruções para adicionar sua licença ao seu site.

Agora você verá uma guia para CSS Hero na barra de menu superior. Clique nele para entrar no ambiente de edição.

Etapa 3: editando seu site

Ao entrar no modo de edição no CSS Hero, você verá uma janela de visualização da página atual, semelhante ao Personalizador. No entanto, agora você tem uma infinidade de opções de edição.

O editor

Ao mover o cursor pela janela de visualização, você verá os elementos da página exibidos para você, como veria no inspetor do navegador, mas com mais detalhes e clareza.

No menu do lado esquerdo, você tem um conjunto de ferramentas de edição que permitem alterar o elemento selecionado. No meu exemplo, simplesmente selecionei o elemento .site-title e fiz alterações na cor, tamanho da fonte, espessura da fonte, espaçamento entre letras e adicionei uma sombra. Tudo isso foi feito usando o menu intuitivo com controles deslizantes e seletores que se parecem muito com um construtor de sites completo. Por mais questionáveis ​​que fossem minhas escolhas de design, o editor é extremamente fácil de usar. Esta é a verdadeira edição visual dos elementos do site, sem ter que escrever um pingo de código.

Abaixo da janela do editor visual, há um editor de código onde você pode ver o código CSS adequado conforme modifica o elemento. Se você conhece CSS e gosta de ajustar o próprio código, gostará de ter as duas opções. Se você é novo no CSS, ele funciona como uma ferramenta de aprendizado útil.

Você pode fazer alterações ou adições diretamente ao código no editor de código e verá a visualização ao vivo exatamente como faria usando o editor visual. O CSS Hero também alerta sobre erros de codificação enquanto você trabalha. Por exemplo, ao eliminar um dos argumentos do seletor de cores, mas deixando a vírgula, imediatamente apareceu um alerta para me dizer onde errei.

A correção do erro faz com que o alerta desapareça automaticamente.

Visualizações de vários dispositivos

Na barra superior do editor CSS Hero, você encontrará uma variedade de ícones para vários dispositivos. O padrão é o modo de área de trabalho. Clicar em qualquer ícone de dispositivo mostrará uma visualização de como ele apareceria naquele dispositivo e orientação. Além disso, você pode ajustar o tamanho da janela de visualização usando alças ou inserindo a largura do pixel na caixa na parte inferior.

Também no menu da barra superior, você encontrará um botão de alternância que permite navegar pelo site em vez de selecionar elementos para edição.

Você pode clicar nos ícones de desfazer e refazer, bem como visualizar um histórico completo de edições.

Mais recursos

Esses são os principais recursos da interface do CSS Hero. Há muito mais que você pode fazer com este editor. Clicar no menu suspenso Projeto na barra de menu superior oferece ainda mais opções.

Variáveis

Existem dois tipos de variáveis ​​que você pode utilizar no CSS Hero: LESS Variables e CSS Variables. Você pode adicionar variáveis ​​comumente usadas em MENOS Variáveis ​​e gerenciá-las em um único menu. Em Variáveis ​​CSS, você pode pesquisar qualquer variável e editar o nome e o valor.

Configurações de consulta de mídia

Este menu oferece um único local para gerenciar todas as suas consultas de mídia existentes, bem como adicionar consultas personalizadas conforme necessário.

pontos de verificação

Digamos que você queira visualizar algumas alterações em seu site, mas ainda não está pronto para atualizar o site ativo. É aqui que a Checkpoints pode te ajudar. Faça as alterações desejadas e crie um ponto de verificação. Você pode cancelar suas alterações para que elas não afetem o site ao vivo, mas pode voltar a qualquer momento e ativar essas alterações sem refazer todo o seu trabalho duro.

Fontes personalizadas

Você pode carregar qualquer fonte personalizada que desejar nos formatos .ttf, otf e woff.

Fundos de vídeo

Deseja adicionar um desses loops de vídeo lisos e compactos como plano de fundo? Surpreendentemente, você pode fazer isso diretamente no editor. O CSS Hero oferece uma grande quantidade de vídeos pré-fabricados para você escolher, fornecidos pelo coverr. Basta selecionar um elemento, escolher um vídeo e ajustar. É simples assim.

Antes do herói CSS e depois

Atualmente, você pode adicionar todo o CSS que quiser no Customizer. O WordPress também mostrará uma prévia.

Isso funciona bem, mas considere algumas coisas:

1. Você pode não saber muito — ou nenhum — CSS.
2. A pesquisa de algo que você codificou anteriormente pode levar muito tempo.
3. Todo esse CSS no Customizer pode tornar seu site drasticamente lento.

Depois de começar a usar o editor CSS Hero, as alterações podem ser feitas rapidamente, usando um editor visual — sem necessidade de codificação. Você pode encontrar facilmente o que modificou clicando no elemento. O código CSS não deixará seu site lento, porque está contido em sua própria folha de estilo bem organizada.

Preços

O CSS Hero oferece três níveis de planos de preços anuais e um plano vitalício. Como mencionei anteriormente, há uma garantia de reembolso de 100% em até 30 dias após a compra de qualquer plano. Não há praticamente nenhum risco para experimentá-lo.

Iniciante

Este plano é melhor para quando você só precisa personalizar um site. Por apenas $ 29 por ano, você obtém todas as atualizações de produtos e suporte básico.

Pessoal

Se você é um freelancer ou administra uma pequena agência, o próximo nível pode ser o melhor para você. Você pode instalar o CSS Hero em até cinco sites e obter todas as atualizações de produto e suporte básico. O preço é de $ 59 por ano.

Pró

Como parece, este plano é melhor para editores profissionais e agências maiores. Por $ 199 por ano, você obtém incríveis 999 instalações, com suporte para WordPress Multisite.

Lifetime Pro

Este é um plano único que oferece 999 instalações de sites, suporte prioritário e atualizações vitalícias de produtos... para sempre. Com um pagamento único de US$ 599, você tem cobertura vitalícia.

Personalização de CSS intuitiva e fácil

Para qualquer designer do WordPress, o CSS Hero tem um valor enorme. Mesmo que você conheça CSS como a palma da sua mão, usar o editor CSS Hero tornará a edição do seu site incrivelmente eficiente.