WordPress é um CMS amplamente utilizado em todo o mundo devido à sua interface simples, temas altamente personalizáveis ​​e variedade infinita de plugins poderoso. Simplificou a criação, o desenvolvimento e o gerenciamento de sites, mesmo para os usuários mais amadores.

Hoje, graças ao WordPress, você não precisa mais ter conhecimentos específicos para criar páginas atraentes. No entanto, você é lata ser já encontrou um site que oferece um design realmente incrível e você provavelmente já se perguntou: Como isso foi feito?

Infelizmente, se você é amador ou iniciante, não pode fazer muito, mesmo com WordPress, já que para modificar o seu tema, você precisa de um certo grau de especialização em HTML, CSS, PHP e várias outras habilidades dependendo da natureza do seu tema, mas também do seu projeto ou objetivo.

Porém, mesmo que você seja um programador experiente, certamente precisa de uma ferramenta que permita economizar tempo e qualidade no resultado final.

Felizmente, o plug-in WordPress « WPBakery Page Builder Anteriormente conhecido como " Visual Composer » fornece uma solução para esse problema. Com este último, ainda mais blogueiros iniciantes podem criar páginas com um visual completamente único para seu site.

Com este plugin, você pode criar:

  • Páginas de destino atraentes (página de destino)
  • De páginas de vendas a aparência profissional
  • Sites de "demonstração" para sua empresa
  • módulos de páginas para a sua formação
  • pouco tempo

É na minha opinião a melhor ferramenta de formatação (ou layout) da internet. Especialmente para usuários do WordPress.

Neste tutorial, mostrarei como dar uma aparência única ao seu site. (Ou blog) com a plug-in Visual Composer.

Então ...

Como instalar e configurar Plugin do WPBakery Page Builder

WPBakery Page Builder é um plug-in prémio que você pode comprar em Codecanyon : A melhor plataforma de vendas sobre os plugins de internet.

OK. Depois de comprar e baixar este plugin de layout no WordPress, tudo o que você precisa fazer é instalá-lo e ativá-lo.

Então começaremos fazendo alguns ajustes básicos. Para fazer isso, navegue até o local "Configurações >> Visual Composer » em seu painel.

configurações gerais

configurações gerais de discagem visualA primeira guia (configurações gerais), Permite alterar:

  • O conteúdo dos quais visual compor estará disponível. Você pode verificar os itens (postar) e / ou páginas (página)
  • As diferentes regras deacesso papéis diferentes. Com esta opção você pode determinar que muda o. As diferentes funções disponíveis serão exibidas. Você terá que clicar em cada um para verificar os elementos aos quais (o papel) terá acesso. Você tem a opção de proibir o uso de " visual compositor ”para usuários de uma função específica.
    ative o editor no construtor de páginas WPbakery
  • Ativar ou desativar itens responsivo
  • Definir subconjuntos para fontes do Google

seleção de funções wpbakeryOpções de design

Nas opções de design, você tem a possibilidade de modificar a aparência visual padrão dos vários elementos do " visual compor ". Antes de usá-lo, certifique-se de ter marcado a opção « Use opções de design personalizadas ».

configurações de css

Essas opções permitirão que você defina a cor que se aplica a todos os elementos. 

  • O " CSS personalizado »Oferece a oportunidade de personalizar ainda mais cada item, apenas os desenvolvedores podem saber o que é.
  • A guia « licença do produto »Permite que você ative seu plug-in para receber atualizações automáticas.
  • A guia « shortcodes ativos É essencialmente sobre desenvolvedores.

Ok, agora vamos criar uma página da web personalizada com Compositor Visual.

Como criar uma página personalizada com visual compor

Para criar facilmente páginas da web personalizadas, você pode escolher entre o editor do " back-office ", Ou seja, você modifica o site a partir do painel do WordPress, onde o de" front office ".

editor-the-front-end-the-editor-backend

Se estiver usando o Gutenberg, você notará um botão "Editor de página" na barra de tarefas superior.

editor visual editor de painel gutenberg

A vantagem com o editor de Escritório da frente é que você pode editar suas páginas ao vivo e ver como os diferentes elementos aparecem no seu tema.

Com o editor de back office

Para acessar o editor do " back-office », Convido você a clicar em« Editor Back-Office ". Você pode retornar ao editor visual do WordPress a qualquer momento clicando em " O modo clássico ". Mas acho que não será necessário, portanto, a formatação desta página do plug-in está concluída.

Uma vez no editor de Back-office, você pode escolher um layout global que se aplicará à página.

As atualizações página variar dependendo do que você planeja fazer com a página. Então você pode escolher « aterrissagem página » para criar uma página inicial, "Lista de serviços" para uma página que mostra serviços e assim por diante. Com experiência, você poderá até mesmo criar apostas en páginas projetado muito profissional.

Seja qual for a escolha da sua configuração página, a apresentação dos elementos é semelhante em todos os últimos. Você pode adicionar um novo elemento en cliquant "+" no topo da objetivo caixa « editor do Visual », Ou adicione um modelo clicando no ícone "Modelo".

Em cada linha, você pode (da esquerda para a direita) :

  • Mover a linha
  • Gerenciar colunas na linha
  • Adicionar uma nova coluna

interface do construtor de página wpbakeryOutras opções estão disponíveis à direita da caixa. Essas opções permitem que você (da esquerda para a direita) Para:

  • reduza a linha
  • editar uma linha
  • duplicar uma linha
  • excluir uma linha

layout wpbackeryNo meio de cada coluna, você pode adicionar um item antes, editar uma coluna ou excluí-lo.

seção de opções wpbackeryseção de opções wpbackery

Recursos Recomendados

Aqui estão algumas extensões compositor visual que recomendamos:

1 - Como gerenciar as colunas

Na guia de gerenciamento de colunas, você pode escolher o número de colunas que deseja adicionar à linha. Para entender os diferentes modelos de coluna, saiba que cada fração corresponde à largura que a coluna vai ocupar. Por mais que um modelo tenha frações, muitas vezes a página terá colunas.

Obviamente, diferentes modelos de colunas 11 estão disponíveis, mas você pode criar quantos quiser clicando no link "Personalizado" logo abaixo da lista de colunas.

Por exemplo, para exibir uma seção da página com colunas 2 em larguras iguais, você deve escolher (Ou adicionar) "1 / 2 + 1 / 2". 

As colunas serão exibidas no seu blog e suas larguras serão distribuídas proporcionalmente às dimensões do tema. Uma coluna pode conter tantos itens quanto possível, então você não tem limites neste nível.

layout da seção wpbakery

Os diferentes elementos podem ser movidos para qualquer coluna.

movendo caixa de texto wordpress wpbakeryAo passar o mouse sobre cada elemento, você poderá acessar suas opções, em particular o botão que permite:

  • mudança elemento
  • mudança elemento
  • duplicar elemento
  • supprimer elemento

Opções-os-elementos

2 - Como adicionar elementos

Você tem a opção de personalizar cada coluna com os elementos propostos por " visual Compor ". Para adicionar um item, clique no botão "+" em uma coluna específica ou no botão "+" plugin do Menu Principal.

adicionar um elemento wpbakery
Quando uma coluna está vazia (ne contém sem conteúdo)ela tem um botão "+" dentro.
 Para adicionar um vídeo, por exemplo, clique neste botão e escolha o elemento de vídeo.

adicione-a-video

Clicar nele abrirá uma nova janela. Nesta janela, você deve fornecer o título, o link para o vídeo e uma classe adicional (que não é obrigatório). Quando terminar de inserir as várias informações sobre o seu vídeo, não se esqueça de salvar as alterações.

configuração de vídeo wpbakerySeu vídeo ficará disponível no editor de back office. Salve suas alterações mais uma vez. Agora você pode visualizá-lo clicando em "visualização".

adicionar vídeo wpbakery wordpressO processo de adição de um item é igual para todos os outros, com algumas exceções. As informações a serem preenchidas podem variar dependendo dos elementos. 

Ao selecionar o elemento de texto, por exemplo, você encontrará um editor visual clássico (o disponível ao escrever artigos ou páginas), mas também uma opção que permite adicionar uma animação durante a exibição do elemento. O último pode, portanto, desaparecer de uma posição para outra, dependendo de suas configurações.

configurações de bloco de textoO mais interessante com isso plug-in, é que você poderá criar barras laterais se o seu tema não, por exemplo. Para fazer isso, clique no botão adicionar (" + ")e escolha o elemento " Comentários do WP recente "," Facebook como E finalmente « Categorias Wp ".

Agora crie este modelo de coluna personalizado 1 / 3 + 2 / 3 »Ou qualquer outro e adicione o elemento barra lateral na coluna da esquerda ou na direita. Não importa porque tudo depende de quão larga você deseja dar à barra lateral criada sob esta extensão de layout do que no Visual Composer.

configuração da coluna wpbakery

Você notará uma nova coluna vazia à direita e adicionará um novo elemento de sua escolha (Eu recomendo que você adicione um texto simples) Agora salve a página e vá para a visualização para ver o resultado deste exercício.

3 - Como salvar e reutilizar um modelo de página

É possível salvar o template da sua página e usá-lo posteriormente. Adoro essa opção porque evita que você gaste horas tentando copiar um modelo de uma página. Aqui tudo é feito com um clique. Sim, você ouviu direito, EM UM CLIQUE ... ou em dois 🙂

Para salvar um modelo, clique no ícone de modelos. Na janela que aparecerá, digite o nome do seu modelo no campo " Salve o layout atual como um modelo », Clique em« Salvar modelo ".

Importante: Você deve fazer isso na página que deseja salvar como modelo e não em uma página em branco.

registrar um modelo wpbakery

É da mesma forma que você encontrará os diferentes modelos que salvou, mais abaixo na mesma janela na seção "Carregar um modelo".

meus modelos wpbakeryTudo que você precisa fazer neste caso é criar uma nova página, em seguida, vá até os modelos e escolha aquela que deseja dar à sua página.

Com o editor de front-office

O editor de front office tem a vantagem de permitem que você edite sua página em tempo real. Em outras palavras, ele permite que você veja como ficará cada alteração feita em seu site usando o Visual Composer. A vantagem dessa abordagem é que você não precisa trabalhar cegamente como faz com o editor de páginas de back-office.

Você pode mudar de uma opção para outra a qualquer momento (Office back office ou borda).

O editor de front-office não é tão diferente do editor de back-office, pois há um bar utilisateur idênticos, mas também todas as opções do editor de back office são as mesmas do editor de front office.

barra de ferramentas wpbakeryNo entanto, cinco novos botões foram adicionados, incluindo:

  • Ativação ou desativação de guias
  • O emulador, que permite que você veja como ficará seu blog em diferentes dispositivos
  • O botão de volta para o back office
  • O botão salvar alterações
  • O botão de saída visual compor

opções de wpbakeryCada elemento de uma página pode ser modificado, você poderá ver as opções disponíveis passando o mouse sobre cada elemento. O botão em forma "TOQUE", permitirá que você exiba mais opções para um elemento.

Opções-os-elementos-of-the-front office

Seus primeiros passos podem ser difíceis, mas com a prática você alcançará um página inicial como esta.  Se desejar, antes de obter o plug-in, Você pode testá-lo gratuitamente (de login, o usuário: demo, senha: demo).

Aqui está o que consegui alcançar em 1 minuto em casa. Com prática, você pode alcançar resultados muito satisfatórios. E se você precisar de ajuda para construir seu site WordPress com este poderoso plugin, sinta-se à vontade para entre em contato com a equipe BlogPasCherquem ficará feliz em realizar seus projetos.

Espero que este tutorial inteiramente em francês ajude você a dar os primeiros passos com o plug-in « Visual Composer ". Se você tem um problema, nós (ou assistência) ficará feliz em ajudá-lo. Não esqueça: uma página web bela converte clientes mais curiosos.

Extensões recomendadas

Aqui estão algumas extensões compositor visual que recomendamos:

Descubra mais plugins em Codecanyon

Partilhar este tutorial com os necessitados.