Personalizar o design do seu site nunca foi tão fácil. Usando um plug-in de editor ao vivo CSS do WordPress, agora você pode criar um site exclusivo que corresponda às suas especificações de design específicas e reflita a imagem da sua marca.


Até bem recentemente, o uso de CSS para alterar a aparência do site era deixado principalmente para os web designers. No entanto, agora existe uma variedade de plug-ins de editor ao vivo CSS CSS disponíveis que ajudam você a personalizar seu site. Alguns exigem um pouco de conhecimento de codificação, enquanto outros não precisam de nenhuma experiência em codificação. E todos eles permitem que você trabalhe no front-end do seu site real em tempo real.

Neste artigo, veremos o que exatamente é um plug-in de editor de CSS ao vivo, quais plug-ins de editor de CSS ao WordPress estão disponíveis e o que procurar ao escolher um..

O que é um plugin para CSS Live Editor do WordPress?

Um plug-in de editor ao vivo CSS do WordPress permite que você personalize o design do seu tema. No entanto, diferente de editar os arquivos CSS diretamente ou usar um plug-in CSS padrão bog, um plug-in de editor ao vivo CSS do WordPress permite trabalhar no front-end do seu site. Isso significa que você pode assistir suas alterações aplicadas ao vivo em tempo real, enquanto as faz.

WordPress CSS editor ao vivo plugin

O uso de um plug-in de editor ao vivo CSS do WordPress envolve a inserção de código ou o ajuste dos controles no front-end. Isso significa que você pode assistir suas alterações enquanto digita. Além disso, trabalhar no lado voltado para o visitante de um site economiza tempo alternando entre as guias e pressionando constantemente a atualização.

Painel de Controle do WordPress CSS Live Editor Plugins

Os plug-ins de editor ao vivo CSS do WordPress que não exigem que você edite o CSS exibem diretamente um painel de controle no front-end do seu site que permite fazer alterações no design do site por meio de uma interface visual. Isso funciona de maneira muito simples, basta você apontar e clicar em um elemento da página e selecionar uma nova configuração nas opções disponíveis. A escolha de um dos plug-ins de editor ao vivo CSS do WordPress com esse recurso é ideal para quem deseja personalizar o design do site, mas não sabe escrever CSS.

Qualquer que seja o tipo de plug-in de editor ao vivo CSS do WordPress, você usa os resultados finais são essencialmente os mesmos. Você cria um design original e pessoal para o seu site. Devido ao componente de editor ao vivo, você não apenas economiza tempo e esforço, mas também pode aproveitar o processo.

O que procurar em um plugin do WordPress CSS Live Editor

O que você procura em um plug-in de editor ao vivo em CSS dependerá muito do seu nível de conhecimento ou experiência em codificação em CSS.

Se você não é um programador, não se preocupe, alguns plug-ins de editor ao vivo em CSS foram criados para serem usados ​​por iniciantes. No entanto, você precisará escolher um plug-in de editor ao vivo com um painel de controle, que permite apontar e clicar para fazer alterações. No entanto, vale a pena conferir exatamente quais elementos você pode personalizar, pois cada plug-in é diferente.

Desenvolvedores mais experientes podem querer um plug-in que permita inserir ou editar o código você mesmo. Uma boa opção é aquela que lhe dará uma ajuda enquanto você codifica e destaca os erros. Outros recursos de plug-in a serem procurados, independentemente da sua experiência:

  • Funciona com todos os temas e plugins do WordPress?
  • Oferece projetos pré-fabricados?
  • Você pode trabalhar no modo de rascunho antes de publicar as alterações?
  • Ele salva alterações incrementais à medida que avança, para que você possa desfazer seu trabalho, se necessário?
  • Fornece documentação, tutoriais e suporte detalhados?

Então agora você sabe o que considerar antes de fazer uma escolha, vamos dar uma olhada nos diferentes plug-ins de editor ao vivo CSS CSS disponíveis.

Aviso Legal: O WPExplorer é afiliado de um ou mais produtos listados abaixo. Se você clicar em um link e concluir uma compra, poderemos fazer uma comissão.

1. Herói CSS

Herói do CSS

Informações e DownloadVer demonstração

O CSS Hero é um plug-in de editor de temas WordPress ao vivo premium, que permite personalizar quase todos os aspectos do design do seu tema. Isso é feito usando uma interface intuitiva de apontar e clicar que funciona no front-end do site, sem que você precise inserir uma linha de CSS, se desejar. Portanto, mesmo que você não tenha nenhum conhecimento de codificação, ainda poderá usar este plug-in para alterar o design do seu site..

O CSS Hero possui alguns recursos particularmente notáveis. Em primeiro lugar, ele salva todas as suas edições, para que você possa desfazer qualquer trabalho que tenha feito ou retornar a um ponto específico do seu fluxo de trabalho. Você não precisa mais temer cometer um erro e quebrar seu site.

Em segundo lugar, o CSS Hero fornece “Ready Made Styles” e “Theme Skins”. Isso oferece centenas de designs e 29 layouts pré-criados para você escolher como ponto de partida para o seu site. Assim, mesmo aqueles sem inspiração ou visão de design podem criar um site para se orgulhar.

O CSS Hero é um dos plug-ins de editor ao vivo CSS mais impressionantes do WordPress, projetado para permitir que você personalize facilmente o design do seu site, seja um iniciante em codificação ou um desenvolvedor web. Antes de comprar o CSS Hero por apenas US $ 19, vale a pena verificar se este plugin funcionará com o seu tema. O CSS Hero funciona em vários temas prontos para Hero, e eles fornecem uma descrição, porcentagem de compatibilidade (pontuações totais da fyi, alta classificação mais alta de 99% – muito mais alta que outros temas premium mais vendidos) e um site de teste ao vivo para cada um. Você também pode tentar CSSHero RocketMode para torná-lo acessível ao seu tema atual.

Promoção de verão CSSHero

No momento, você pode economizar até 50% em CSSHero durante a promoção de verão! Não é necessário código, quando você efetuar o pagamento, o desconto será aplicado. A oferta termina em 9 de agosto de 2016.

Economize até 50% em CSSHero

2. Lápis Amarelo

Lápis amarelo

Informações e DownloadVer demonstração

Yellow Pencil é um editor de WordPress CSS Visual Style e outro plugin que não requer codificação. Dito isto, existe um editor de CSS embutido para quem gosta de editar suas folhas de estilo manualmente. Este plug-in funciona 100% no front-end, permitindo que você veja e trabalhe em seu site em tempo real. Foi criado para permitir que você personalize qualquer elemento em qualquer tema ou plug-in e permite editar seu tema em minutos ou redesenhar todo o design do seu site, se desejar.

O Lápis Amarelo permite realçar facilmente seletores CSS individuais, tornando a alteração do tema rápida e fácil. Este plugin possui mais de 300 planos de fundo, mais de 600 famílias de fontes e mais de 50 animações para escolher, permitindo que você personalize seu tema para se adequar à imagem da sua marca. O Yellow Pages também vem com extensa documentação e suporte para aqueles que não usaram plugins de editor de CSS ao vivo do WordPress antes.

O Yellow Pencil custará US $ 23 e é compatível com todos os temas e plugins do WordPress. Mais uma vez, uma ótima opção para iniciantes e experientes web designers.

3. CSS personalizado do TJ

TJ Custom CSS Plugin

O TJ Custom CSS do Theme Junkie é um plug-in gratuito do WordPress que permitirá que você personalize seu site por meio de uma interface front-end. Este plug-in foi desenvolvido com os codificadores em mente e não é recomendado para quem não confia no CSS.

Como muitos desses plugins, o TJ Custom CSS usa um gerenciador de CSS para adicionar o CSS personalizado ao seu site, substituindo qualquer tema ou estilo padrão. Isso pode ser acessado e trabalhado no seu painel.

No entanto, o CSS personalizado do TJ também permite visualizar suas alterações em tempo real. Ao usar o Live Customizer, você pode visualizar o efeito de suas alterações ao adicionar o CSS personalizado. Isso pode economizar muito tempo, pois você não precisará continuar salvando seu trabalho, alternando as guias do navegador e atualizando as páginas.

O TJ Custom é um plugin muito simples que o ajudará a criar um site exclusivo exatamente de acordo com seus requisitos. Se você gosta de mexer no código e tem experiência em personalizar seu tema usando CSS, este pode ser o plugin perfeito para você.

4. SiteOrigin CSS

Editor de CSS do SiteOrigin

O SiteOrigin CSS é um plugin avançado e gratuito para edição de CSS ao vivo, do SiteOrigin. Supostamente compatível com todos os temas do WordPress, este plug-in rico em recursos oferece uma seleção de ferramentas para atender às necessidades de todos os seus usuários, independentemente da sua experiência em codificação.

Para iniciantes, o SiteOrigin CSS fornece um Editor Visual. Isso consiste em um conjunto simples de controles que permitem escolher facilmente estilos, cores e outras configurações. Sem a necessidade de habilidades de codificação, você pode fazer alterações no design do site com apenas alguns cliques.

Para aqueles com alguma experiência manual de edição de CSS e com necessidade de fazer mais, o SiteOrigin vem com um Inspetor dinâmico. Isso ajuda a encontrar o seletor correto a ser usado para direcionar um elemento específico que você deseja personalizar. Geralmente, essa pode ser a parte mais difícil de editar o CSS existente, por isso é uma grande ajuda para quem ainda está aprendendo..

Para os codificadores mais avançados do mercado, o poderoso editor de CSS do plug-in SiteOrigin tem preenchimento automático para seletores e atributos de CSS. Também o ajudará a encontrar problemas no seu CSS antes de publicá-lo.

Quaisquer que sejam os recursos deste plug-in que você usa para personalizar seu site WordPress, todo o trabalho ocorre no front-end do site em tempo real, para que você possa observar as alterações conforme as realiza..

5. Microthemer

Microtherma

Informações e DownloadVer demonstração

Microthemer é um plugin de editor de CSS CSS premium intuitivo e poderoso para front-end. Ele pode personalizar a aparência de qualquer tema ou plugin do WordPress e é leve o suficiente para evitar a lentidão do site.

Microthemer oferece opções para iniciantes e profissionais. Os não codificadores podem alterar elementos como cores, fontes, imagens de plano de fundo e layouts de sites, para citar alguns. Os desenvolvedores podem trabalhar no modo de visualização ao vivo, codificando CSS, SCSS e JavaScript manualmente.

Um recurso importante do Microthemer é que ele permite que você trabalhe no modo de rascunho. Você pode experimentar um novo design para o seu site ou gastar tempo tentando várias opções de estilo sem que isso afete a experiência do seu público no site. Você pode publicar todas as alterações de uma só vez, quando estiver satisfeito com o rascunho final.

O Microthemer vem com tutoriais, documentação e fóruns de suporte extremamente completos, ajudando você a tirar o máximo proveito deste plug-in. Você pode comprar o Microthemer por uma taxa única de US $ 45, que inclui atualizações gratuitas por toda a vida.

Bônus: Ultimate Tweaker

Ultimate Tweaker para WordPress

Informações e DownloadVer a demonstração

Talvez você queira editar não apenas a aparência do front-end do seu site, mas algumas das funções de usuário, página de login ou outros recursos do WordPress. É aqui que o Ultimate Tweaker para WordPress pode ser útil. O plug-in é compatível com as versões atuais do WordPress. A maioria dos navegadores habilitados para JavaScript os fará funcionar sem problemas.

O Ultimate Tweaker contém mais de 260 vários hacks e ajustes que permitem aos usuários (sem conhecimentos de php ou programação) configurar e personalizar o WordPress. Apesar do grande número de recursos, o plug-in é muito rápido e otimizado para carregar apenas ajustes usados ​​(carregamento lento sem uso de memória).

O plug-in também suporta a maioria dos temas, logotipos e ícones e protege o conteúdo (sem menu de contexto, sem seleção e sem arrastar). A função HTML Minifier ajuda os usuários a remover comentários, reduzir o HTML e criar URLs relativos.

Entre os recursos notáveis ​​deste plug-in estão uma interface administrativa leve com salvamento automático, HTML Minifier e construtor de links relativos, opção para ocultar Meta Boxes em tipos de páginas personalizadas, Gerenciador de funções, modo de configuração independente de função, 2X mais rápido / carregamento lento, ocultação e função de administrador “Ultimate Tweaker”.


Pensamentos finais

Todos os plugins de editor ao vivo CSS do WordPress mencionados aqui são opções impressionantes para ajudá-lo a personalizar o design do seu site. Qualquer que seja o plug-in que você escolher, leia a documentação fornecida para que você possa tirar o melhor proveito dela. Quanto mais você entender como usar um editor ao vivo, melhores serão os designs que você produzirá.

Você usa um plug-in de editor ao vivo em CSS e, em caso afirmativo, qual? Você recomendaria isto? Compartilhe dicas ou observações úteis nos comentários.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me