Fazer personalizações com visualização em tempo real em seu blog é muito mais fácil e muito mais satisfatório, quando você tem a capacidade de ver as diferentes mudanças assim que as fizer. A melhor maneira de fazer alterações aplicáveis ​​em tempo real é, obviamente, usando um plugin.

personalização CSS é um recurso oferecido por vários plugins no WordPress.org. Se você estiver procurando por um plug-in que gere uma folha de estilo (CSS), você tem várias opções disponíveis. Mas, embora existam muitos plug-ins que você pode usar para criar código CSS personalizado, há muito poucas opções que oferecem edição de código CSS em tempo real.

Depois de explorar o diretório de plugins para encontrar uma solução para essa limitação, consegui encontrar algumas joias raras que merecem nossa atenção.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress em 7 etapas et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

1. Lápis Amarelo: Editor de Estilo Visual CSS

Yellow Pencil é um editor de estilo visual que você pode usar com qualquer tema para personalizar seu site em minutos (fontes, cores, animações e muito mais ...).Plugin de editor de estilo css visual Yellowpencil wordpress

Ce WordPress Plugin premium criará estilos CSS por fundo enquanto você joga com as cores como se fosse um jogo. Foi projetado tanto para iniciantes quanto para usuários experientes.

Descubra também o nosso Plugins 5 WordPress para mostrar notificações

Nenhum conhecimento de codificação é necessário. No entanto, o WordPress Plugin tem um bom editor de CSS para quem gosta de codificar. Você pode codificar ao vivo com este editor e personalizar seu CSS.

Descarregar | Demo | hospedagem na web

2. Easy Custom JS e CSS 

Ce WordPress Plugin premium é um poderoso editor de código CSS e JavaScript que permite adicioná-los a qualquer seção do seu site. Ele permite que você mantenha suas personalizações mesmo após uma grande atualização do seu tema WordPress. Plugin de wordpress de personalização extra de js e css personalizado fácil

Você tem a opção de limitar o campo de uso do seu código personalizado. Por exemplo, você pode usar seu código apenas para um artigo no formato de vídeo.

Veja nossos artigos sobre Como exigir a aceitação dos termos de uso no WordPress

Ou você pode limitar seu código a um tema WordPress específico; O que é útil se você muda frequentemente os temas para o seu blog WordPress.

Descarregar | Demo | hospedagem na web

3. JS e CSS personalizados para Gutenberg

O plugin premium do WordPress Custom JS e CSS para Gutenberg permitirá que você adicione um número ilimitado de estilos personalizados ao editor WYSIWYG para seus posts e páginas do WordPress. É totalmente compatível com a versão Gutenberg do WordPress.

Js e css personalizados para o plugin gutenberg wordpress

Você pode simplesmente criar um novo estilo com um editor CSS fácil de usar. Este plugin do WordPress estende os recursos do campos personalizados do seu site e permite modificar seus campos personalizados com um módulo de personalização dinâmico e poderoso. e a funcionalidade de visualização em tempo real deste plugin WordPress o torna muito confortável e fácil de usar.

Descarregar | Demo | hospedagem na web

4. Editor de CSS avançado

A empresa de produtos ThemeIsle e Wunderkind WordPress desenvolveu este plugin. Depois de instalar e ativar o último, navegue até o seguinte local “ Aparência> Personalização Para acessar o painel, procure "Editor CSS Avançado" no menu. Ele aparecerá no topo da lista de itens de menu no Customizer. Editor de css avançado - plugin wordpress

Para modificar um código CSS, tudo o que você precisa fazer é adicionar um seletor e a regra que se aplica a ele na caixa de texto ao clicar no menu " Editor de CSS avançado"

Veja também Como melhorar as páginas de má qualidade do seu blog

As regras CSS podem ser escritas para aplicação geral ou para direcionar um elemento particular em dispositivos específicos (computador, telefone, tablet etc.). Assim que as regras forem escritas, o Personalizador exibirá uma visualização com as alterações que foram feitas.

Descarregar | Demo | hospedagem na web

5. SiteOrigin CSS

É de longe o plugin do WordPress que oferece a maioria das opções nesta lista. A coisa mais surpreendente sobre este último é que é gratuito. Este plugin do WordPress é o único que não pode ser encontrado no personalizador.

Siteorigin css - plugin wordpress

Depois de instalar e ativar o plugin, você precisa navegar para o seguinte local “ Aparência> CSS personalizado Para acessar a edição CSS do plugin. Nesta página, você pode ver um editor de texto que não oferece visualização ao vivo. 

Leia também nosso artigo sobre 10 WordPress plugins para impulsionar as vendas do seu site

Para acessar este último, você deve clicar em um dos dois botões que aparecem à esquerda, logo acima do editor. O botão com um ícone de olho trará um editor de código CSS visual que os entusiastas irão apreciar. O ícone com as setas de extensão exibirá um editor de texto que implicará um domínio dos códigos CSS.

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

Aqui está ! Isso é tudo para esta lista de plugins WordPress premium que o ajudarão a editar visualmente o CSS em seu blog. Se você tem Comentários ou sugestões, não hesite em nos informar na seção reservada.

No entanto, você também pode consultar nosso Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Convidamos você a compartilhe em suas redes sociais favoritas.   

...