O WPBakery Page Builder (anteriormente Visual Composer) tornou-se um dos plugins de criação de páginas mais vendidos para WordPress. Desde seu lançamento em maio de 2011, o plug-in explodiu com mais de 150.000 clientes (e isso sem contar as centenas de milhares de usuários que receberam uma cópia com um tema), mais de 200 complementos e extensões e centenas de avaliações positivas em todo o a teia.
Se você ainda não possui sua própria cópia do plug-in, talvez já o tenha visto empacotado com um tema premium do WordPress no passado. Ou talvez você tenha encontrado um antigo guia do Visual Composer (porque esse era o nome original do plugin – um pouco confuso, nós sabemos) em algum lugar na web. Muita coisa mudou desde que o Visual Composer original agora chamado WPBakery Page Builder foi lançado pela primeira vez, então queríamos guiá-lo por todos os recursos incríveis que compõem este poderoso plugin.
Conheça o construtor de páginas WPBakery
Se você não estiver familiarizado, o WPBakery Page Builder é um plugin de construção de páginas de arrastar e soltar para WordPress. Este prático plug-in dandy elimina a parte difícil de criar postagens e páginas personalizadas do WordPress. Não é necessário conhecimento de codificação. Basta instalar o plugin e você pode começar a trabalhar criando suas postagens e páginas. Também é compatível com a maioria dos temas gratuitos e muitos premium, além de ser totalmente compatível com plugins populares como Contact Form 7, Slider Revolution e muitos outros (que falaremos mais tarde).
Instalando o Construtor de Páginas WPBakery
Antes de criar suas próprias páginas, você precisará baixar e instalar o WPBakery Page Builder. Existem duas maneiras de garantir uma cópia do plug-in: compre sua própria cópia ou compre um tema premium com o plug-in incluído. O plugin funciona exatamente da mesma forma, não importa qual rota você escolha, a única diferença nesses dois métodos é como você o instala.
Opção 1: Compre sua própria cópia para usar em seu site WordPress
A primeira maneira de obter uma cópia do WPBakery Page Builder é comprar o plugin para você. Basta ir ao CodeCanyon, adicionar uma cópia do WPBakery Page Builder à sua cesta (recomendamos adicionar o suporte extra para que você tenha um ano inteiro de assistência do autor do plug-in à sua disposição) e conclua sua compra.
Em seguida, navegue até sua página de downloads. Clique no botão verde Download ao lado do plugin WPBakery Page Builder que você acabou de comprar e selecione Installable WordPress File Only.
Agora, faça login no painel do WordPress e navegue até Plugins> Adicionar novo arquivo . Clique no botão Upload Plugin na parte superior da tela.
Selecione o arquivo zip do WPBakery Page Builder que você baixou do CodeCanyon. Depois é só clicar para instalar e ativar o plugin.
Como você comprou o plug-in, também precisará adicionar seu código de licença para concluir o processo de ativação. Basta clicar no link na parte superior da tela e depois no botão azul gigante para ativar sua cópia do WPBakery Page Builder.
Isso abrirá um portal para você permitir que o WPBakery verifique sua compra. Clique no grande botão verde Aprovar . Não se preocupe – você está apenas dando permissão ao WPBakery para confirmar que seu nome de usuário/e-mail realmente comprou uma cópia do WPBakery Page Builder.
Basta seguir as instruções para concluir a ativação e retornar ao painel do WordPress. Agora você está pronto para começar a construir!
Opção 2: WPBakery Page Builder (anteriormente Visual Composer) foi incluído no seu tema WordPress
Se você comprou um tema com o WPBakery Page Builder ou o Visual Composer mais antigo, a instalação é diferente e também pode variar de acordo com o autor. Mostraremos como instalar o plug-in se você estiver usando um tema WPExplorer como o Total (e deve ser bastante semelhante à maioria dos outros temas premium).
Primeiro você precisará baixar e instalar seu tema WordPress. Se você comprou seu tema do Themeforest, é o mesmo processo de baixar o WPBakery Page Builder. Faça login na sua conta Themeforest e vá para a página de downloads. Em seguida, localize seu tema, clique no botão de download e selecione apenas o arquivo instalável do WordPress.
Em seguida, faça login na sua instalação do WordPress e clique em Aparência > Temas > Adicionar novo . Em seguida, clique na opção Carregar tema na parte superior da página. Você terá que abrir o arquivo zip baixado para localizar o arquivo WordPress instalável. Isso ocorre porque o tema Total é fornecido com recursos adicionais, como plugins premium, dados de amostra e arquivos PSD.
Depois de localizar o arquivo, você pode fazer o upload, instalar e ativar o tema. Após a ativação, o Total solicitará que você instale os plugins recomendados – incluindo o WPBakery Page Builder.
Basta clicar no link para iniciar a instalação de plugins . Selecione Instalar na lista suspensa de ações em massa, marque todos os plug-ins que deseja instalar e clique em Aplicar .
Isso é tudo que você tem que fazer! Não há necessidade de ativar o WPBakery Page Builder via Envato. Como você comprou um tema em vez de sua própria cópia do plug -in , você não tem um código de licença para verificar e não terá acesso às atualizações do plug-in até que elas sejam fornecidas a você pelo autor do tema.
Claro, se você quiser comprar sua própria cópia para receber atualizações mais rapidamente, certamente pode, mas não é necessário usar o WPBakery Page Builder com seu tema. Com esse, você pode passar a realmente usar o plug-in.
Começando com o Construtor de Páginas WPBakery
Agora que você instalou o WPBakery Page Builder, é hora de começar com as configurações do plug-in. No seu painel do WordPress, você deve ver agora uma opção do Visual Composer. Clique nele para abrir sua página de configurações.
A guia Configurações gerais contém opções simples para ativar/desativar o empilhamento de elementos responsivos em telas pequenas (para que uma linha padrão de três colunas se torne três linhas de coluna única em vez de diminuir a linha de três colunas no celular), selecionando um subconjunto de fontes do Google e um botão de descanso para reativar os tours guiados do WPBakery Page Builder.
Se o seu site usa várias funções de usuário, o Gerenciador de funções do WPBakery Page Builder certamente será útil. Esta página de configuração permite restringir o acesso do usuário a vários recursos do Visual WPBakery Page Builder com base na função. Dessa forma, você pode permitir que os administradores acessem todos os recursos, limitando os editores a apenas páginas do blog e os contribuidores a nada.
Mencionamos isso anteriormente durante a instalação, mas a guia Licença do produto é onde você pode verificar seu código de licença se tiver adquirido sua própria cópia do plug-in. Se sua cópia do WPBakery Page Builder veio com um tema, você pode ignorar esta seção.
Elementos do Construtor de Páginas
O WPBakery Page Builder vem com mais de 34 elementos de construtor de página padrão para muitos recursos que você deseja adicionar às suas páginas (a captura de tela acima mostra todos eles, além do elemento Contact Form 7, sobre o qual falaremos mais tarde). Muitos dos elementos incluem opções adicionais para cores, bordas, preenchimento, margens, CSS personalizado, animações e muito mais. Aqui está um resumo rápido do que está incluído:
- As linhas são a página de suas páginas. Você usará o elemento de linha para criar colunas e inserir todos os outros elementos de página.
- Blocos de texto são exatamente o que parecem – blocos de texto. usando o editor padrão WordPress WYSIWYG, você pode adicionar e formatar texto com este módulo.
- Os ícones incluem ícones de fonte das seguintes bibliotecas de ícones: FontAwesome, Open Iconic, Typicons, Entypo, Linecons e Mono Social.
- Separador e Separador Com Texto são maneiras de criar quebras de linha (e ou texto) entre as seções que você cria em suas páginas.
- Caixas de mensagens são ótimas para adicionar notas, alertas ou outras mensagens em caixa.
- Facebook, Tweet, Google+ e Pinterest são botões simples de compartilhamento social que você pode adicionar para que os usuários compartilhem a página que você está criando.
- As perguntas frequentes são alternâncias que podem ser usadas para adicionar conteúdo oculto que os usuários podem revelar à medida que leem sua página.
- A Imagem Única é exatamente isso – uma imagem simples com opções adicionais para dimensionamento, animação, link e muito mais.
- Guias, Tours e Acordeões são semelhantes às Perguntas frequentes, pois contêm conteúdo oculto ou recolhível, mas com a primeira seção aberta.
- Um Contêiner Paginável é um controle deslizante de conteúdo básico (mas você pode inserir praticamente qualquer elemento de construtor de página em cada “página” de contêiner).
- Os títulos personalizados facilitam a adição de seus próprios títulos às seções usando fontes, tamanhos, cores e muito mais personalizados.
- Os botões permitem adicionar links para outras páginas ou sites externos.
- Um Call to Action é uma caixa de texto explicativo com um botão adicionado que chama a atenção dos usuários e permite que você adicione um pouco de conteúdo convincente.
- A barra lateral com widget permite que você insira sua própria barra lateral personalizada em qualquer lugar da página.
- O Video Player facilita a inserção de diferentes formatos de vídeo suportados pelo WordPress.
- O Google Maps é outra opção simples – basta colar o código do Google Maps para inserir um mapa em sua página.
- Barras de progresso, gráficos de pizza, gráficos redondos e gráficos de linhas são formas de representar graficamente ou exibir dados ou habilidades.
- O Espaço Vazio simplifica a adição de uma quebra vertical entre os elementos.
- Post, Media, Post Masonry e Media Masonry Grids são todas as grades personalizadas que você pode adicionar às páginas (com a opção de misturar e combinar post ou tipos de mídia).
O plug-in também inclui 8 elementos de widget que podem ser usados
Extensões do Construtor de Páginas WPBakery
Os elementos básicos do Visual Compose são ótimos para começar, mas eventualmente você vai querer ou precisar de mais para criar seus layouts de página personalizados. Isso é possível através de extensões. Existem algumas fontes diferentes para extensões do WPBakery Page Builder.
A primeira maneira de estender seu WPBakery Page Builder é através do seu tema . Um ótimo exemplo é o nosso tema Total WordPress, que inclui 39 elementos de construtor de páginas adicionados. Eles estão incluídos exclusivamente no Total para trabalhar com seus recursos, portanto, você deve ter o tema instalado e ativo para usá-los. Total inclui extensões para tipos de postagem personalizados (depoimentos, equipe, portfólios), galerias personalizadas, controles deslizantes simples, sociais e muito mais. Isso torna mais fácil para você adicionar o conteúdo desejado onde quiser.
Se o seu tema não incluir nenhuma extensão, você pode instalar extensões do WPBakery Page Builder de terceiros . Estes podem variar de grátis a US$ 55 e estão disponíveis em uma variedade de autores no CodeCanyon e em toda a web. Se você deseja adicionar alguns recursos extras, como tabelas de preços e redes sociais, o plugin gratuito Symple Shortcodes é o caminho a seguir (afinal, nós o criamos aqui no WPExplorer). Se você deseja adicionar mais opções, um plugin premium como o Ultimate Add-on pode ser adequado para você. Existem literalmente centenas de opções – você pode ver uma lista completa de complementos compatíveis no WPBakery.
No entanto, você optar por estender seu WPBakery Page Builder, recomendamos que você não use todas as extensões de tema e plug-in ao mesmo tempo . Mais nem sempre é melhor – especialmente neste caso. Isso não apenas criará muitas opções de sobreposição e duplicação, mas também reduzirá significativamente a velocidade do seu site (uma tonelada de código entra em cada elemento do construtor de página). Portanto, escolha a extensão que funciona melhor para você e fique com ela.
Edição de back-end e front-end
Com o WPBakery Page Builder você não está limitado em como você pode construir e editar suas páginas. Com este poderoso plugin, você tem a opção de fazer alterações no backend modular ou no frontend visual.
Editor de back-end do construtor
Se você optar por usar o editor de back-end, cada elemento será exibido como um elemento modular que você pode inserir, arrastar e soltar no lugar. Esse método é ótimo se você quiser fazer o layout rapidamente de um wireframe da aparência da sua página e também pode ser mais rápido que o front-end se você tiver um servidor ou conexão com a Internet mais lento.
O editor de back-end é bastante fácil de usar. Basta clicar no botão azul do Editor de back -end para habilitar o construtor de páginas para a página ou postagem que você está editando.
Em seguida, clique no botão turquesa para +Adicionar Elementos .
A partir daqui, você pode começar a inserir todos e quaisquer elementos de página que desejar!
Editor de front-end
O editor frontend oferece uma visão muito melhor de como será sua página final, pois é essencialmente um editor visual em tempo real. Ele permite que você insira todos os mesmos elementos do construtor de páginas que o editor de back-end com o benefício adicional de poder realmente vê-los em vez de um módulo. Você pode ver o quão grande uma imagem de 300px realmente parece, ou se um botão roxo com um valor hexadecimal #6e2f93 realmente aparece.
Para habilitar a edição de front-end, clique em uma das duas opções do Frontend Editor para sua página ou postagem.
Isso atualizará sua tela e o levará a uma visualização de front-end ao vivo de sua postagem ou página com todas as mesmas opções de criação de página do editor de back-end.
Basta clicar para começar a adicionar elementos. A principal diferença aqui é que agora você pode ver os elementos à medida que os insere e pode usar as opções de visualização na barra superior para ter uma ideia de como sua página ficará em desktops, laptops, tablets e telefones.
Adicionando e editando elementos de página
Se você usar o editor de back-end ou front-end, terá as mesmas opções para personalizar seus vários elementos do construtor de páginas. Embora as opções variem entre os elementos, existem alguns recursos importantes a serem observados após a inserção do elemento.
Opções de linha
Não importa o que você deseja adicionar à sua página, você deve inserir uma linha primeiro . Uma vez inserido, você pode passar o mouse no elemento frontend para revelar as opções de linha azul (no backend, elas estão sempre visíveis na parte superior de cada linha).
- O primeiro ícone de linha é onde você pode clicar para arrastar e soltar a linha em uma nova posição em sua página.
- O ícone de lápis abre opções para suas configurações de linha. Estes podem variar de acordo com o seu tema. Com o tema Total, você verá opções para ID de rolagem local, extensão de linha (para linhas de largura total), linha de altura total, altura mínima, visibilidade em dispositivos móveis, conteúdo centralizado, colunas de alturas iguais, animação, tipografia, largura máxima, espaçamento de coluna , vídeo de fundo ou paralaxe e opções de design (margem, borda, preenchimento, cor/imagem de fundo).
- Colunas são para definir o número de colunas em sua linha. Existem opções padrão para até 6 colunas, mas você também pode definir seu próprio layout de coluna personalizado, se desejar.
- Além disso , adiciona uma nova linha abaixo daquela que você está editando.
- O ícone Duplicar clonará sua linha atual e todo o seu conteúdo (também conhecido como todos os elementos que você inseriu na linha). Isso é ótimo se você quiser reutilizar um layout de linha várias vezes na mesma página.
- A lixeira é simplesmente excluir uma linha inteira e seu conteúdo.
Opções de coluna
Quando você passa o mouse em uma linha no editor de front-end, também verá opções de coluna amarela (no back-end, você encontrará as mesmas opções e ícones exibidos acima de cada coluna).
- O primeiro ícone de coluna é o mesmo que as linhas – clique nele para arrastar e soltar e reorganizar as colunas dentro de sua linha.
- O Lápis é a configuração geral da coluna. Semelhante às linhas, as opções de coluna podem variar de acordo com o tema que você está usando. Com o Total, as seguintes opções estão disponíveis: visibilidade em dispositivos móveis, animação, tipografia, altura mínima, opções de design (margem, borda, preenchimento, plano de fundo) e configurações de resposta (deslocamento personalizado, largura ou opções ocultas com base no dispositivo).
- Para colunas, o ícone de adição adicionará um elemento ao topo da coluna, acima de qualquer outro elemento já inserido.
- Novamente, o ícone da lixeira é para excluir a coluna inteira mais seu conteúdo. Depois de excluir uma coluna, as colunas restantes mantêm suas dimensões (se você excluir 1 de 3 colunas, as 2 colunas restantes ainda terão 1/3 de tamanho) então lembre-se de editar as larguras das colunas após a exclusão.
Opções de elemento de página
Dentro de sua linha ou colunas, você usará o ícone de adição para inserir um elemento de página. Na captura de tela acima, adicionamos uma caixa de mensagem . Ao inserir um elemento, as configurações serão abertas automaticamente. Para editar um elemento que você já adicionou, basta passar o mouse sobre o elemento no editor de front ou back-end para revelar as seguintes opções:
- O ícone do lápis abrirá as configurações (que estão descritas abaixo).
- O ícone Duplicar clonará seu elemento de página exatamente como você o tem (configurações e tudo).
- Por fim, a Lixeira excluirá apenas o elemento do construtor de páginas. da linha ou coluna onde você o inseriu, deixando todos os outros elementos intactos.
Opções gerais do elemento de página
Ao inserir um novo elemento ou clicar no ícone de Lápis de um elemento, você abrirá as configurações do elemento do construtor de páginas . Eles são (na maioria das vezes) divididos em várias guias para facilitar a visualização de todas as opções de personalização disponíveis. Além da guia de configurações, há um ícone de engrenagem no canto superior direito que você pode usar para salvar as configurações selecionadas como uma predefinição para ser reutilizada posteriormente ou como padrão para ser usado automaticamente sempre que você inserir esse elemento específico.
A guia Geral inclui opções gerais para seu elemento de página. Eles variam de acordo com o elemento que você insere (mas em todos os casos a edição é tão simples quanto usar um menu suspenso, seletor de cores, seleção ou caixa de texto). Por exemplo, a caixa de mensagem na captura de tela acima inclui opções para estilo, forma, cor, ícone, texto e animação. Mas se você inserir um botão , encontrará opções para texto, url, estilo, forma, cor, tamanho, alinhamento, ícone e animação.
Opções de design de elemento de página
A guia Opções de design é a segunda guia padrão que você verá em praticamente todos os elementos do construtor de páginas. A partir daqui, você pode adicionar um plano de fundo personalizado (cor ou imagem), borda, preenchimento e margem ao seu elemento. As opções para Simplificar Controles reduzem as opções da caixa CSS para que você possa inserir um valor universal para cada opção (margem, borda e preenchimento). Uma observação a ser lembrada: quando você aplica um plano de fundo, ele fica dentro da sua borda. Portanto , aumentar o preenchimento aumentará o plano de fundo visível adicionado ao redor do elemento, mas se você aumentar a margem , aumentará o espaço vazio ao redor do elemento da página (revelando a linha/página atrás dele)
Claro que dependendo do módulo que você insere o elemento da sua página pode ter muito mais abas. Por exemplo, o Post Grid do construtor incluiu guias de opções para Configurações de Dados e Design de Item. E se você estiver usando elementos de página personalizados por meio de uma extensão como o Total Staff Grid , pode haver ainda mais opções incorporadas (como opções de consulta, corte de imagem personalizado, meta, links sociais, trechos etc.), dependendo da extensão autor incluiu.
Observação: você pode conferir uma lista abrangente de elementos em nosso Guia de módulos do Total Builder . No entanto, a melhor maneira de aprender o que cada módulo faz é brincar com o construtor. Crie uma página de teste e pratique a inserção e edição de elementos. Você vai rapidamente pegar o jeito e criar páginas como um profissional!
Plugins Compatíveis Populares
Além das extensões do WPBakery Page Builder, muitos plugins populares são compatíveis com o construtor e adicionam seu próprio elemento de construção de página automaticamente. Aqui estão alguns dos muitos plugins que você ficará feliz em saber que funcionarão perfeitamente com o plugin WPBakery Page Builder para uma construção de página ainda melhor.
WooCommerce : Se você deseja construir uma loja com o WordPress , o WooCommerce é o caminho a percorrer. Este plugin não é apenas gratuito e cheio de recursos incríveis, mas é totalmente compatível com o WPBakery Page Builder. Uma vez instalado e ativado, o WooCommerce não apenas adicionará suas próprias configurações e opções, mas também adicionará 17 novos elementos de construtor de páginas para você brincar.
Slider Revolution : Sliders são uma ótima maneira de adicionar uma seção atraente e cheia de conteúdo a qualquer página e o Slider Revolution é um plugin perfeito para fazer exatamente isso. Com este plug-in, você pode arrastar e soltar elementos como texto, botões, imagens e até vídeos, todos com animações e efeitos adicionados para criar controles deslizantes impressionantes. Veja-o em ação em muitas de nossas demonstrações do Total !
LayerSlider : Outra ótima opção para sliders é o plugin LayerSlider. É tão incrível quanto o Slider Revolution, mas com uma interface e opções ligeiramente diferentes. Ele ainda inclui um construtor de transição personalizado para que você possa criar animações únicas. É também um dos dois controles deslizantes premium incluídos no nosso tema Total WordPress, para que você saiba que é muito bom.
Formulário de contato 7 : Os formulários de contato são uma parte importante de qualquer site – seja você um blogueiro com um formulário para consultas comerciais ou um dentista com um formulário de agendamento. O Contact Form 7 é totalmente gratuito, flexível e com o WPBakery Page Builder é fácil inserir seus formulários de contato com o elemento de formulário personalizado.
WPML : Se você precisa criar um site multilíngue, o WPML é uma das principais opções para traduzir seus posts e páginas. Além disso, o WPML é totalmente compatível com o WPBakery Page Builder, portanto, é possível traduzir cada página personalizada que você criar.
Polylang : Se você não quer investir no WPML, o Polylang é uma ótima opção gratuita que é totalmente compatível com o WPBakery Page Builder (é um dos plugins gratuitos que recomendamos para tornar seu site WordPress multilíngue ).
Yoast SEO : Yoast facilita para qualquer usuário melhorar o SEO no local. Existem muitas funções importantes de SEO, incluindo mapas do site, meta descrições, migalhas de pão e muito mais. O melhor de tudo – Yoast SEO funciona bem com praticamente todos os construtores, então você pode se preocupar em criar páginas melhores em vez de pesquisar SEO.
Templatera : Este plugin não é apenas compatível – foi criado pelo WPBakery para estender a funcionalidade de seu construtor de páginas. O Templatera possibilita salvar e reutilizar modelos para que seja fácil criar páginas repetidas. Uma vez instalado, o plug-in adiciona sua própria opção nas configurações do WPBakery Page Builder no painel do WordPress, para que seja simples importar, exportar e reutilizar seus modelos (o que achamos um recurso tão incrível que também incluímos este plug-in no Total ).
E temos certeza de que existem muitos outros plugins compatíveis! Se você estiver em dúvida sobre a compatibilidade de um novo plugin com o WPBakery Page Builder, basta entrar em contato com o autor do seu novo plugin e perguntar.
Opções avançadas para o construtor de páginas WPBakery
Para usuários mais avançados, existem algumas opções extras no WPBakery Page Builder que você pode usar para adicionar códigos de acesso personalizados ao seu construtor de páginas e criar grades de mídia personalizadas.
O primeiro é o Mapeador de Shortcode . Essa opção é encontrada nas configurações do WPBakery Page Builder e pode ser usada para mapear seus próprios códigos de acesso personalizados para o construtor. Isso é ótimo se você tiver um shortcode que você adora (como talvez um para uma tabela de preços) que não esteja incluído no Visual Composer por padrão.
A segunda opção avançada é o Grid Builder incluído . Com esses recursos, você pode criar grades personalizadas (semelhantes às grades de mídia e postagem) com seus próprios layouts personalizados para o seu conteúdo. Por exemplo, você pode criar uma grade de postagem de blog personalizada com imagens redondas, o nome do autor da postagem em uma fonte personalizada em negrito, comprimento de trecho personalizado, um botão leia mais e um segundo botão com link para um produto recomendado. Pega a ideia? Você pode criar qualquer layout de grade que desejar com várias opções de elementos, cores, margens, bordas e muito mais.
Empacotando
Há muito que você pode fazer com o WordPress e o WPBakery Page Builder (anteriormente Visual Composer). Se você quiser ver o construtor de páginas funcionando, dê uma olhada em qualquer uma de nossas demonstrações de tema Total, onde tentamos mostrar a variedade de estilos e layouts que podem ser criados usando o construtor.
E se perdemos alguma coisa , pergunte-nos . Ficaremos felizes em contar tudo o que você quiser saber sobre o WPBakery Page Builder (anteriormente Visual Composer) e como ele funciona – deixe um comentário abaixo . Obrigado por ler!