Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como criar layouts personalizados do WordPress com o Beaver Builder

Você provavelmente já procurou maneiras de criar layouts personalizados no WordPress. Mas os guias que você encontrou são muito longos ou exigem habilidades de codificação. Isso lhe parece familiar?

Nesse caso, achamos que você deve experimentar um construtor de páginas como o Beaver Builder. Muitos usuários experientes acham que os construtores de páginas não criam designs excelentes ou tornam os sites mais lentos. Mas, em nossa experiência, ferramentas como essa podem realmente simplificar a criação de sites, especialmente para iniciantes.

Para demonstrar, mostraremos a você como criar um layout personalizado do WordPress usando o Beaver Builder. Ensinaremos você a configurá-lo, a criar seu primeiro layout personalizado e a usar designs prontos para economizar tempo.

Creating custom page layouts in WordPress with Beaver Builder

Por que e quando você precisa de layouts de página personalizados

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 incorporado 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.

É aí que entram ferramentas como o Beaver Builder. É um plugin de criação de páginas de arrastar e soltar para o 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 está repleto de recursos incríveis para criar páginas com aparência profissional.

Ele funciona com todos os temas do WordPress e tem vários 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 da maneira que imaginou.

Neste tutorial do Beaver Builder, mostraremos a você 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:

Dica profissional: Quer pular toda a parte de bricolagem? Nossos especialistas do WPBeginner Pro Services podem ajudá-lo a ter um site profissional instalado e funcionando rapidamente para economizar seu tempo. Nós cuidaremos de tudo, do design ao desenvolvimento, para que você possa se concentrar em seus negócios.

Etapa 1: Configurar o plug-in Beaver Builder

Primeiro, você precisa adquirir o plug-in Beaver Builder. Ele é um plugin pago, com preços a partir de US$ 99 para sites ilimitados.

Em seguida, você deve instalar e ativar o plug-in Beaver Builder. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa acessar a página Settings ” Beaver Builder para inserir sua chave de licença.

Entering the Beaver Builder's license key

Depois de inserir sua chave de licença, você estará pronto para criar belos layouts de página.

Etapa 2: Crie seu primeiro layout de página personalizado com o Beaver Builder

Primeiro, basta criar uma nova página no WordPress acessando Pages ” Add New Page.

Clicking Add New Page in WordPress admin area

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 abriria a menos que fizéssemos isso primeiro.

Saving a page as a draft

Depois de fazer isso, clique no botão “Launch Beaver Builder” (Iniciar o Beaver Builder) para começar.

Isso abrirá a parte frontal de sua página na interface do Beaver Builder.

Launching the Beaver Builder plugin

Se esta for a primeira vez que você usa o Beaver Builder, verá um pop-up de boas-vindas oferecendo um tour guiado.

Depois disso, você precisa clicar no botão “+” no menu superior. Esse botão se transformará em um ícone de “x”. Em seguida, vá para a guia “Templates”.

Finding a template to add to the page template in Beaver Builder

O Beaver Builder vem com alguns modelos projetados profissionalmente para que você possa começar imediatamente.

Não se preocupe; você pode personalizar o modelo o quanto quiser. Ele é apenas uma maneira rápida de começar a criar um layout.

Quando você selecionar um layout, o Beaver Builder o carregará na janela de visualização. Leve o mouse até um item, e o Beaver Builder o destacará.

Você pode simplesmente clicar no ícone de chave inglesa em qualquer item destacado para editá-lo.

wrench icon

O Beaver Builder mostrará uma janela pop-up com diferentes configurações que você pode editar.

Você pode alterar a fonte, a cor, o plano de fundo, a fonte, o preenchimento, a margem e muito mais.

headings popup

Os layouts do Beaver Builder são baseados em linhas. Você pode arrastar e soltar para reorganizar as linhas. Você também pode remover ou adicionar uma nova linha.

Basta clicar no menu Layouts de linha e selecionar o número de colunas que deseja em sua linha.

row and columns layout

O Beaver Builder adicionará a linha à visualização ao vivo em seu site.

Você pode adicionar itens à sua linha usando os módulos e widgets básicos ou avançados. Esses módulos permitem adicionar os elementos mais comumente usados, como botões, cabeçalhos, texto, imagens, apresentações de slides, áudio, vídeo etc.

Basta selecionar um item e arrastá-lo para a linha que você acabou de adicionar. Clique em um item para editar suas propriedades.

Você também pode salvar uma linha ou um módulo para reutilizá-lo posteriormente em outras páginas. Clique no botão ‘Save as’ ao editar uma linha ou módulo.

Save element to reuse

Clique no botão “Done” (Concluído) no canto superior direito quando terminar de editar sua página.

O Beaver Builder mostrará uma série de botões para publicar ou salvar sua página como rascunho.

publish button

Você também pode reutilizar um layout de página inteiro 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 mostrará uma janela pop-up. Você pode salvar a página como um modelo ou criar rapidamente uma página duplicada com o mesmo layout.

Beaver Builder tools

Como gerenciar modelos de layout de página no Beaver Builder

Você pode verificar todos os modelos que criou em Beaver Builder “ Modelos. Aqui, você pode gerenciar, visualizar e editar seus modelos existentes.

Managing templates in Beaver Builder

Uma grande vantagem dos modelos do Beaver Builder é que eles são tipos de post personalizados. Isso significa que você pode exportar facilmente seus modelos do Beaver Builder usando o recurso de exportação incorporado no WordPress.

Visite a página Ferramentas ” Exportar e selecione Modelos. Clique no botão “Download Export File” e o WordPress lhe enviará um arquivo XML para download.

Exporting templates

Agora, faça login no site do WordPress para o qual você deseja importar os modelos. Visite a página Configurações ” Importar e clique em WordPress.

Você será solicitado a fazer o download e instalar o plug-in do 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 excelente, ele pode não ser a opção perfeita para todos. Não tem problema! Há outras opções excelentes no mercado, como o SeedProd.

O SeedProd é outro construtor de páginas fácil de usar que recomendamos com frequência. Ele não serve apenas para criar páginas de destino. Você pode usá-lo até mesmo para criar temas completos para o WordPress. Fizemos bom uso dele em muitos projetos, inclusive na criação de páginas de destino para a OptinMonster.

SeedProd's homepage

O que faz o SeedProd se destacar são suas amplas opções de personalização. Elas permitem que você adicione facilmente recursos interessantes às suas páginas, como depoimentos rotativos, animações atraentes, tabelas de preços profissionais, caixas de recursos e muito mais.

Além disso, o SeedProd tem ferramentas de IA que podem gerar rapidamente textos e imagens de boa qualidade para seu site. Isso pode economizar muito tempo quando você estiver criando suas páginas.

Interessado em saber mais? Confira estas análises para ver como o SeedProd se compara a outros criadores de páginas populares:

Esperamos que este artigo tenha ajudado você a criar layouts de página personalizados no WordPress usando o Beaver Builder. Talvez você também queira ver nosso guia sobre como criar um site WordPress compatível com dispositivos móveis e nossas escolhas de especialistas dos melhores construtores de temas do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

27 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. corey

    this helps me out a lot.
    i am using astra and beaver. been needing to upgrade to grwoth plan soon
    is still over my head unlike Guttenberg

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Administrador

  3. Rodney Harrier

    I started using Elementor to build a blog. If I switch to Beaver Builder, do I lose whatever I have done?

    • WPBeginner Support

      If you change plugins you would lose the customizations from your first plugin.

      Administrador

  4. Pius Anthony

    Dear Sir,

    Happy new year, i have being watching your wpbeginner video it really inspiring I believe before the next six month i will be teaching other people.

    Regard
    Pius Anthony

    • WPBeginner Support

      Glad our guides can help you start helping other people too :)

      Administrador

  5. Krayl

    When using Beaver Builder, are you using it on a child theme only? If not, how does it hold up to theme updates?

    Thank you team WPbeginner!

  6. Lisa Theriault

    I really need some help. This is supposed to be easy but when I click on a module or a row nothing happens. I tried dragging and dropping, saving, etc. Nada. I made sure the settings were correct and that the plug in was active. Beaver Builder shows up on the page for editing but I’m obviously an idiot. Getting frustrated, but I’m sure it’s just some silly thing. Can someone offer suggestions? I followed the beginner tutorial and thay is really easy. When I try to do it in Live mode….nothing. Please help. Thank you in advancd.

    • WPBeginner Support

      Hi Lisa,

      Try editing a new page. If that doesn’t work try switching to a default WordPress theme like twenty seventeen and then try editing with Beaver Builder. If that works, then your theme probably has compatibility issues with the page builder.

      Administrador

      • David Sharp

        I’m having the same problem as Lisa. I used Beaver Builder a couple of years ago to create a landing page, and it worked very well. In fact, I’m still using that same landing page without any problems. But today I tried to create a new landing page using Beaver Builder, but this time, Beaver Builder wouldn’t work.

        Here’s what happened: I created a new page. I clicked the Beaver Builder tab. But instead of seeing a button that says “Launch Beaver Builder,” I was taken to a screen that said, “Drop a row layout or module to get started.” Unfortunately, Beaver Builder failed to produce a Beaver Builder toolbar or any other tools (such as modules or rows) with which to build the page.

        Here’s what I tried to do to fix the problem, without success:

        1. I deactivated my other plugins.
        2. I switched to the Twenty Sixteen Theme.
        3. I made sure I’m using the latest version of everything (Wordpress, Beaver Builder, etc.)
        4. I noticed that if I typed something into the page and then clicked Beaver Builder tab, tools would show up. But when I clicked on them, I just got a spinning circle.
        5. I tried using Beaver Builder on my website that’s online, and also on my localhost test site, but Beaver Builder failed to work on either site.
        6. I tried using a different browser (Safari instead of my usual Chrome) without success.

        Any idea what might be wrong and how I might fix it?

        Thanks!

        • WPBeginner Support

          Hi David,

          You can contact Beaver Builder support, they would be able to help you out.

    • Krayl

      Same thing happened to me Lisa. I think it is my theme not playing well with BB. Looking to switch themes to have full compatibility.

    • Yeremi Akpan

      I had similar issues using Chrome, but they were resolved when I switched to Mirosoft Edge.

  7. Jesse

    I am so grateful for all the wpbeginner ‘how-to’ articles. They are clear and direct, and they make my life so much easier. Because I could follow the trail from ecommerce through Beaver Builder I am now in a place to get OptInMonster. Thanks Syed & team.

  8. Gabrielle

    Hi, is BB outputting [shortcodes] or html content, when switching back to normal editor?
    I wonder if this works well, when building products pages for woocommerce.

  9. Dr. Peter H. Markesteyn

    Would I have to create a child theme (20-17) to preserve all the changes I would make with BeaverBuilder when there is an update?

  10. Anthony

    While this plugin is great, I was wondering if you teach how to customize them yourself? I am looking to build my portfolio and knowing how to do it yourself would be fantastic!

  11. Ian Gordon

    WIth the Beaver Builder plugin, I can take an existing theme and create a completely new Header and Footer without editing any of the existing template files? My

  12. Sam

    How nice does Beaver Builder play with other plugins?

    • WPBeginner Support

      It plays well with most plugins. There might be some hiccups with a random less commonly used plugin, but they are quick to solve such issues.

      Administrador

  13. Rk bhardwaj

    This is amazing plugin to make any blog looks pretty

  14. Oliver

    Beaver Builder is the best page builder plugin by the best team! :)

    • Robby

      Hey, Oliver! Thanks for the kind words. :)

  15. Andrew Peters

    I LOVE Beaver Builder. I’ve used it for close to a dozen sites since making the switch back in the fall. I’m actually going back and converting some of my clients from VC to BB. It’s fire!

    • Shaiful

      Hi there,

      Just wondering, can it support shortcodes that have conditional context? Such as:

      [if user_loggedin]
      hello user.
      (show logged in user content build with beaver builder)
      [else]
      hello guest.
      (show public content build with beaver builder)
      [/if]

      • WPBeginner Support

        Yes it supports shortcode. Paste them in any field that you can insert text and they will be rendered automatically. When placing shortcodes on the page, it is best to use the HTML module compared to the Text Editor module. The latter tends to add additional p tags which sometimes break the layout.

        Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.