Guia do Visual Composer

Tempo de leitura: 6 minutos

Guia do Visual Composer

O WordPress é a ferramenta de blogs mundialmente preferida devido ao fato que a ferramenta tem uma interface simples e temas altamente customizáveis além uma variedade praticamente infinita de plugins para qualquer coisa que voce queira fazer. O WordPress tem facilitado o gerenciamento de sites até para os usuarios mais amadores, este guia do visual composer irá trazer um passo a passo para a melhor ferramenta de customização do WordPress.

Todavia, ainda há horas em que você vê um determinado design de website, e ele imediatamente chama sua atenção. Então você se inspira e decide modificar seu site para deixá-lo parecido. Infelizmente, se você é um completo amador, você não conseguirá fazer muito até mesmo com o WordPress, uma vez que modificar temas requer um certo grau de experiência em HTML, CSS, PHP e muitas outras habilidades dependendo da origem do seu tema. Mas mesmo se você for um progamador expert, isso poderá lhe custar algumas horas para fazer as modificações desejadas.

Todavia, o plugin do wordpress Visual Composer tem diminuido o problema.Com este plugin até mesmo os usuarios mais iniciantes podem customizar uma pagina com facilidade. Este plugin é tão pratico que em muitos dos temas mais recentes ele ja está vindo incluído.

Sabendo disto, neste artigo lhe ensinaremos alguns dos principais recursos do visual composer e como ele pode ser configurado na sua instalação do WordPress. Vamos então ao guia do visual composer:

Principais destaques

O Visual Composer foi projetado pelo time da WP Bakery. Ele é um plugin pago que não está disponivel no diretorio de plugins do WordPress você pode compra-lo e baixa-lo por este link ou procurando visual composer no próprio google.

Atualmente, mais de  200.000 usuários já utilizam este plugin , o visual composer possui diversos recursos úteis. Abaixo citaremos alguns deles

Contrutor de Página para Frontend e Backend

O mais poderoso destaque do Visual Composer é que ele te dá um fácil construtor de páginas de arrastar e clicar. Além disso ele pode ser usado na área padrão do WordPress (aquela onde você normalmente vai construir seu post ou pagina) ou diretamente do front end (na página da frente do seu site).

Compatibilidade Universal com Temas

O Visual Composer não é desenvolvido para nenhum tema específico. Isso quer dizer que você pode usar em qualquer tema WordPress sem a nessecidade de fazer alguma alteração no código.

  • Múltiplos Elementos de Design:

E o melhor de tudo é que temos muitos elementos de desgin prontos para usar. A interface de clicar e arrastar do Visual Composer tem mais de 40 elementos prontos, os quais podem ser usados para criar uma aparência única para seu site em pouquissimo tempo.

  • Elementos Completamente resposivos:

Os elementos criados com o visual composer são completamente responsivos, ou seja são prontos para celulares, tablets, computadores e notebooks… isso sem precisar re-configurar ou criar versão especifica para cada dispositivo.

  • Amigável ao desenvolvedor:

O visual composer é cheio de elementos de clicar e arrastar. Mas todos os elementos do código são super versáteis, e o melhor de tudo é que se você quiser realizar alterações via código, é possível devido a interface extremamente amigável a desenvolvedores.

Instalação do Plugin e Configuração

Como mencionado anteriormente, infelizmente o visual composer é um plugin pago (felizmente ele vem incluído na maioria dos temas pagos).

O processo de instalação é o mesmo que de qualquer outro plugin WordPress.  Uma vez instalado, o plugin vai aparecer com seu nome no item de  configurações do painel do WordPress ou direto no menu WordPress com o nome editor visual ou algo similar.

Cada função administrativa do site pode ter um papel diferente, esta opção você encontra em role menager (administrador, autor, etc…) você pode configurar se quer usar usar o visual composer para posts, paginas ou ambos.

Na aba opções de design você pode modificar algumas coisas do visual composer, para que o próprio adeque-se da melhor forma ao seu site.

Utilizando o visual composer nas suas paginas

Como foi mencionado acima, você pode usar o visual composer para suas paginas, posts ou ambos. Continuando com nosso guia do visual composer, depois de ativado o plugin você vai ver as abas do visual composer no topo do editor padrão. Veja a imagem exemplo abaixo:

Editor visual padrão (backend editor)

Passo 1

Quando você usa o editor visual padrão numa pagina em branco você terá 3 opções.

  • Adicionar elemento, o qual vai te mostrar a serie de outros elementos prontos que você pode adicionar;
  • Um bloco de texto no qual você pode editar manualmente e inserir scripts prontos;
  • Ou ainda adicionar um template. Desta forma o VC construirá uma pagina com estrutura pré-pronta a partir de um dos diversos templates disponíveis (podem ser criados por você, ou os selecionar algum pronto do tema ou plugin).

Passo 2

A caixa adicionar elemento contém tudo que você precisa para montar o design de seu site. Veja:

PASSO 3

Os elementos estão divididos em cinco categorias:

  • Conteúdo;
  • Social;
  • Estrutura;
  • Conteúdo;
  • Widgets WordPress;

 

Seja qual for a opção desejada, basta clicar e será adicionada. No próximo passo, você deve arrasta-la para posição desejada. Apos adicionar o 1 elemento sua página será basicamente dividida em duas colunas diferentes. Agora você pode continuar adicionando novas colunas e novos elementos nessas colunas, clicando e arrastando de onde eles estão para onde quiser posiciona-las.

Para editar, deletar ou duplicar qualquer coluna em particular, basta usar os ícones no topo de cada uma delas:

Editor Visual Frontal

O editor visual frontal permite adicionar os elementos instantaneamente em sua pagina e já ter uma pré-visualização de como a página está ficando. Além de ter todas as opções do editor visual padrão.

Passo 1

Uma solução muito simples no editor visual frontal é simplesmente clicar no botão com o ” + ” e adicionar o elemento desejado: 

 

PASSO 2

Com o editor visual pronta é possível obter uma prévia ao vivo em diferentes dispositivos. Basta clicar nos modelos de pré-visualização como a imagem abaixo:

 

E então, é muito simples utilizar o VC não é mesmo?

Mas se você quer se tornar um mestre do WordPress, recomento o curso Otimize WordPress, ele custa somente R$99,00 e lhe trará um aprendizado incrível.

Eu espero que você tenha gostado deste meu guia do visual composer. Caso ainda reste qualquer dúvida de como utilizar este ou outro plugin, basta deixar suas dúvidas nos comentários abaixo que irei lhe responder o mais breve possível.

Werner Stumpf

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *