Procurando uma maneira de criar layouts personalizados no WordPress sem mergulhar no código? Entendemos. A maioria dos guias existentes parece a leitura de um romance ou assume que você é um especialista em codificação.
Notamos que alguns usuários experientes de WordPress evitam construtores de páginas como o Beaver Builder, preocupados que eles criem designs desajeitados ou deixem seus sites lentos.
Mas eis o que aprendemos ao ajudar milhares de iniciantes: o construtor de páginas certo pode simplificar drasticamente a criação de sites, ao mesmo tempo que oferece resultados profissionais.
Neste guia passo a passo, mostraremos como criar layouts personalizados no WordPress usando o Beaver Builder. Se você está começando do zero ou usando modelos prontos, aprenderá a construir exatamente o que deseja, sem a necessidade de codificação.
Por que usar o Beaver Builder para criar layouts personalizados no WordPress 👀
Muitos temas premium do WordPress vêm com layouts de página prontos para uso para diferentes seções de um site. No entanto, às vezes, um layout integrado pode não atender às suas necessidades.
Você pode criar modelos de página personalizados no WordPress criando um tema filho e, em seguida, adicionando seus próprios modelos de página. Mas você precisará de algum conhecimento de PHP, HTML e CSS para que isso funcione.
É aqui que entram ferramentas como o Beaver Builder. É um plugin construtor de páginas de arrastar e soltar para WordPress. Ele ajuda você a criar seus próprios layouts de página personalizados sem escrever nenhum código.
O Beaver Builder é muito fácil de usar e amigável para iniciantes. Ao mesmo tempo, ele é carregado com recursos incríveis para criar páginas com aparência profissional.
Ele funciona com todos os temas do WordPress e tem dezenas de módulos que você pode simplesmente arrastar e soltar em sua página. Você pode criar qualquer tipo de layout que desejar e configurá-lo exatamente como imaginou.
Neste tutorial do Beaver Builder, mostraremos como usar o Beaver Builder para criar layouts de página personalizados no WordPress. Você pode usar os links rápidos abaixo para navegar por este artigo:
- Etapa 1: Configurar o Plugin Beaver Builder
- Etapa 2: Criar seu primeiro layout de página personalizado com o Beaver Builder
- How to Manage Page Layout Templates in Beaver Builder
Etapa 1: Configurar o Plugin Beaver Builder
Primeiro, você precisa comprar o plugin Beaver Builder. É um plugin pago, com preços a partir de US$ 99 para sites ilimitados.
Em seguida, você deve instalar e ativar o plugin Beaver Builder. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa visitar a página Configurações » Beaver Builder para inserir sua chave de licença.
Após inserir sua chave de licença, você está pronto para criar belos layouts de página.
Etapa 2: Criar seu primeiro layout de página personalizado com o Beaver Builder
Primeiro, simplesmente crie uma nova página no WordPress visitando Páginas » Adicionar Nova Página.
Antes de abrirmos o Beaver Builder, dê um título à sua nova página e salve-a como rascunho.
Em nossa experiência, o construtor de páginas não abria a menos que fizéssemos isso primeiro.
Assim que fizer isso, clique no botão 'Iniciar Beaver Builder' para começar.
Isso abrirá a parte frontal da sua página na interface do Beaver Builder.
Se esta é a sua primeira vez usando o Beaver Builder, você verá um pop-up de boas-vindas oferecendo um tour guiado.
Depois disso, você precisa clicar no botão ‘+’ no menu superior. Este botão se transformará em um ícone de ‘x’. Em seguida, mude para a aba ‘Templates’.
O Beaver Builder vem com alguns templates projetados profissionalmente para você começar imediatamente.
Não se preocupe; você pode personalizar o template o quanto quiser. É apenas uma maneira rápida de começar com um layout.
Quando você seleciona um layout, o Beaver Builder o carregará na janela de visualização. Mova o mouse sobre um item e o Beaver Builder o destacará.
Você pode simplesmente clicar no ícone de chave inglesa em qualquer item destacado para editá-lo.
O Beaver Builder mostrará um pop-up com diferentes configurações que você pode editar.
Você pode alterar a fonte, cor, fundo, fonte, espaçamento interno, margem, e mais.
Os layouts do Beaver Builder são baseados em linhas. Você pode arrastar e soltar para reorganizar linhas. Você também pode remover ou adicionar uma nova linha.
Simplesmente clique no mesmo botão ‘+’ de antes e navegue até a seção ‘Rows’. A partir daqui, você pode escolher qualquer uma das linhas e colunas apresentadas a você.
O Beaver Builder adicionará a linha à visualização ao vivo em seu site.
Você pode adicionar itens à sua linha usando os módulos básicos ou avançados e widgets. Esses módulos permitem que você adicione os elementos mais comumente usados, como botões, títulos, texto, imagens, slideshows, áudio, vídeo, etc.
Basta clicar no botão ‘+’ e navegar até a seção ‘Módulos’. Em seguida, arraste um elemento para a linha que você acabou de adicionar.
Vá em frente e clique em um elemento de design do WordPress para editar suas propriedades.
Você também pode salvar uma linha ou um módulo para reutilizar mais tarde em outras páginas. Clique no botão ‘Salvar como’ enquanto edita uma linha ou módulo.
Clique no botão ‘Concluir’ no canto superior direito quando terminar de editar sua página.
O Beaver Builder exibirá uma série de botões para publicar ou salvar sua página como rascunho.
Você também pode reutilizar o layout de uma página inteira para outras páginas em seu site WordPress. Basta abrir a página com o Page Builder e, em seguida, clicar no botão de seta para baixo para acessar ‘Ferramentas’ na barra superior.
O Beaver Builder exibirá um pop-up. Você pode salvar a página como um modelo ou criar rapidamente uma página duplicada com o mesmo layout.
Como Gerenciar Modelos de Layout de Página no Beaver Builder
Você pode conferir todos os modelos que criou em Beaver Builder » Modelos. Aqui, você pode gerenciar, visualizar e editar seus modelos existentes.
Uma ótima coisa sobre os modelos do Beaver Builder é que eles são tipos de postagem personalizados. Isso significa que você pode exportar facilmente seus modelos do Beaver Builder usando o recurso de exportação integrado do WordPress.
Visite a página Ferramentas » Exportar e selecione Modelos. Clique no botão ‘Baixar Arquivo de Exportação’, e o WordPress enviará um arquivo XML para download.
Agora faça login no site WordPress onde você deseja importar os modelos. Visite a página Configurações » Importar e clique em WordPress.
Você será solicitado a baixar e instalar o plugin importador do WordPress. Depois disso, você poderá simplesmente carregar o arquivo XML do seu modelo e importá-lo.
Alternativa: Use o SeedProd para Criar um Tema Personalizado
Embora o Beaver Builder seja ótimo, ele pode não ser a escolha perfeita para todos. Tudo bem! Existem outras opções excelentes por aí, como o SeedProd.
O SeedProd é outro construtor de páginas fácil de usar que recomendamos frequentemente. Ele não serve apenas para criar landing pages. Você pode até usá-lo para criar temas WordPress inteiros. Nós o utilizamos com bons resultados em muitos projetos, incluindo a criação de landing pages para o OptinMonster.
O que diferencia o SeedProd são suas extensas opções de personalização. Elas permitem que você adicione facilmente recursos interessantes às suas páginas, como depoimentos rotativos, animações que chamam a atenção, tabelas de preços profissionais, caixas de recursos e muito mais.
Além disso, o SeedProd possui ferramentas de IA que podem gerar rapidamente texto e imagens de boa qualidade para o seu site. Isso pode economizar muito tempo quando você está construindo suas páginas.
Interessado em saber mais? Confira estas avaliações para ver como o SeedProd se compara a outros construtores de páginas populares:
- Elementor vs Divi vs SeedProd (Comparado) – Qual é o Melhor?
- Instapage vs Leadpages vs Unbounce vs SeedProd
Esperamos que este artigo tenha ajudado você a criar layouts de página personalizados no WordPress usando o Beaver Builder. Você também pode querer ver nosso guia sobre como criar um site WordPress compatível com dispositivos móveis e nossas escolhas especializadas dos melhores construtores de temas WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
corey
isso me ajuda muito.
estou usando Astra e Beaver. preciso fazer um upgrade para o plano Growth em breve
ainda está acima do meu entendimento, diferente do Guttenberg
WPBeginner Support
Que bom saber que nosso guia foi útil!
Admin
Rodney Harrier
Comecei a usar o Elementor para construir um blog. Se eu mudar para o Beaver Builder, perco o que já fiz?
WPBeginner Support
Se você mudar de plugin, perderá as personalizações do seu primeiro plugin.
Admin
Pius Anthony
Caro Senhor,
Feliz ano novo, tenho assistido aos seus vídeos do wpbeginner, são realmente inspiradores. Acredito que antes dos próximos seis meses estarei ensinando outras pessoas.
Atenciosamente
Pius Anthony
WPBeginner Support
Glad our guides can help you start helping other people too
Admin
Krayl
Ao usar o Beaver Builder, você o utiliza apenas em um tema filho? Se não, como ele se mantém em relação às atualizações de tema?
Obrigado equipe WPbeginner!
Lisa Theriault
Eu realmente preciso de ajuda. Isso deveria ser fácil, mas quando clico em um módulo ou em uma linha, nada acontece. Tentei arrastar e soltar, salvar, etc. Nada. Certifiquei-me de que as configurações estavam corretas e que o plugin estava ativo. O Beaver Builder aparece na página para edição, mas obviamente sou um idiota. Estou ficando frustrado, mas tenho certeza de que é apenas uma coisa boba. Alguém pode oferecer sugestões? Segui o tutorial para iniciantes e ele é realmente fácil. Quando tento fazer no modo Live... nada. Por favor, ajude. Obrigado antecipadamente.
WPBeginner Support
Oi Lisa,
Tente editar uma nova página. Se isso não funcionar, tente mudar para um tema padrão do WordPress como o twenty seventeen e depois tente editar com o Beaver Builder. Se isso funcionar, seu tema provavelmente tem problemas de compatibilidade com o construtor de páginas.
Admin
David Sharp
Estou tendo o mesmo problema que a Lisa. Usei o Beaver Builder há alguns anos para criar uma landing page, e funcionou muito bem. Na verdade, ainda estou usando essa mesma landing page sem problemas. Mas hoje tentei criar uma nova landing page usando o Beaver Builder, mas desta vez, o Beaver Builder não funcionou.
Eis o que aconteceu: Criei uma nova página. Cliquei na aba Beaver Builder. Mas em vez de ver um botão que dizia “Launch Beaver Builder”, fui levado a uma tela que dizia: “Drop a row layout or module to get started.” Infelizmente, o Beaver Builder falhou em produzir uma barra de ferramentas do Beaver Builder ou quaisquer outras ferramentas (como módulos ou linhas) com as quais construir a página.
Eis o que tentei fazer para resolver o problema, sem sucesso:
1. Desativei meus outros plugins.
2. Mudei para o Tema Twenty Sixteen.
3. Certifiquei-me de que estou usando a versão mais recente de tudo (Wordpress, Beaver Builder, etc.)
4. Notei que se eu digitasse algo na página e depois clicasse na aba Beaver Builder, as ferramentas apareceriam. Mas quando eu clicava nelas, eu apenas via um círculo girando.
5. Tentei usar o Beaver Builder no meu site que está online, e também no meu site de teste em localhost, mas o Beaver Builder falhou em funcionar em nenhum dos sites.
6. Tentei usar um navegador diferente (Safari em vez do meu Chrome usual) sem sucesso.
Alguma ideia do que pode estar errado e como posso consertar?
Obrigado!
WPBeginner Support
Olá David,
Você pode entrar em contato com o suporte do Beaver Builder, eles poderão te ajudar.
Krayl
Aconteceu a mesma coisa comigo, Lisa. Acho que é o meu tema que não está funcionando bem com o BB. Estou pensando em mudar de tema para ter compatibilidade total.
Yeremi Akpan
Tive problemas semelhantes usando o Chrome, mas eles foram resolvidos quando mudei para o Microsoft Edge.
Jesse
Sou muito grato por todos os artigos de 'como fazer' do wpbeginner. Eles são claros e diretos, e tornam minha vida muito mais fácil. Como pude seguir o caminho do ecommerce através do Beaver Builder, agora estou em posição de obter o OptInMonster. Obrigado Syed e equipe.
Gabrielle
Oi, o BB está gerando [shortcodes] ou conteúdo HTML, ao voltar para o editor normal?
Eu me pergunto se isso funciona bem, ao construir páginas de produtos para o woocommerce.
Dr. Peter H. Markesteyn
Eu teria que criar um tema filho (20-17) para preservar todas as alterações que eu faria com o BeaverBuilder quando houvesse uma atualização?
Anthony
Embora este plugin seja ótimo, eu estava me perguntando se você ensina como personalizá-los você mesmo? Estou querendo construir meu portfólio e saber como fazer isso sozinho seria fantástico!
Ian Gordon
Com o plugin Beaver Builder, posso pegar um tema existente e criar um Cabeçalho e Rodapé completamente novos sem editar nenhum dos arquivos de template existentes?
Sam
Como o Beaver Builder funciona bem com outros plugins?
WPBeginner Support
Ele funciona bem com a maioria dos plugins. Pode haver alguns soluços com um plugin aleatório menos comum, mas eles resolvem esses problemas rapidamente.
Admin
Rk bhardwaj
Este é um plugin incrível para deixar qualquer blog bonito
Oliver
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
Andrew Peters
EU AMO o Beaver Builder. Eu o usei para quase uma dúzia de sites desde que fiz a mudança no outono. Na verdade, estou voltando e convertendo alguns dos meus clientes do VC para o BB. É fogo!
Shaiful
Olá,
Só queria saber, ele pode suportar shortcodes que têm contexto condicional? Como:
[if user_loggedin]
olá usuário.
(mostrar conteúdo do usuário logado criado com beaver builder)
[else]
olá convidado.
(mostrar conteúdo público criado com beaver builder)
[/if]
WPBeginner Support
Sim, ele suporta shortcodes. Cole-os em qualquer campo onde você possa inserir texto e eles serão renderizados automaticamente. Ao colocar shortcodes na página, é melhor usar o módulo HTML em comparação com o módulo Editor de Texto. Este último tende a adicionar tags p adicionais que às vezes quebram o layout.
Admin