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

How to Create Custom WordPress Layouts with Beaver Builder

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to learn how to create custom page layouts in WordPress?

Beaver Builder allows you to create your own page layouts without writing any code. You can easily design your website fast with its built-in drag-and-drop editor.

In this article, we will review Beaver Builder and show you how to create custom page layouts in WordPress with Beaver Builder.

Creating custom page layouts in WordPress with Beaver Builder

Why and When You Need Custom Page Layouts

Many premium WordPress themes come with ready-to-use page layouts for different sections of a website. However, sometimes, a built-in layout may not fit your needs.

You can create custom page templates in WordPress by creating a child theme and then adding your own page templates. But you will need some knowledge of PHP, HTML, and CSS for that to work.

This is where Beaver Builder comes in. It is a drag-and-drop page builder plugin for WordPress. It helps you create your own custom page layouts without writing any code.

Beaver Builder Review

Beaver Builder is very easy to use and beginner-friendly. At the same time, it is loaded with incredible features to create professional-looking pages.

It works with all WordPress themes and has tons of modules that you can just drag and drop to your page. You can create any kind of layout that you want and set it up just the way you imagined.

In this Beaver Builder review, we will show you how to use Beaver Builder to create custom page layouts in WordPress.

Let’s get started.

Setting Up Beaver Builder Plugin

First, you need to purchase the Beaver Builder plugin. It is a paid plugin, with pricing starting from $99 for unlimited sites.

Next, you must install and activate the Beaver Builder plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Page Builder page to enter your license key.

Entering your Beaver Builder license key

After entering your license key, you are now ready to create beautiful page layouts.

Creating Your First Custom Page Layout With Beaver Builder

Simply create a new page in WordPress by visiting Pages » Add New Page. You will notice a new Page Builder tab in the WordPress editor.

From here, hit the ‘Launch Beaver Builder’ button to get started.

launch beaver builder

If this is your first time using Beaver Builder, then you will see a welcome popup offering you a guided tour.

After that, you need to click on the ‘Templates’ button in the top menu.

Choosing a template for your page layout in Beaver Builder

Beaver Builder comes with some professionally designed templates to get you started right away.

Don’t worry; you can customize the template as much as you like. It is just a quick way to get you started with a layout.

Choose a template for your page layout

When you select a layout, Beaver Builder will load it in the preview window. Take your mouse to an item, and Beaver Builder will highlight it.

You can simply click on the wrench icon on any highlighted item to edit it.

wrench icon

Beaver Builder will show a popup with different settings that you can edit.

You can change text, color, background, font, padding, margin, etc.

headings popup

The Beaver Builder layouts are based on rows. You can drag and drop to rearrange rows. You can also remove or add a new row.

Simply click the Row Layouts menu and select the number of columns you want in your row.

row and columns layout

Beaver Builder will add the row to the live preview on your site.

You can add items to your row using the basic or advanced modules and widgets. These modules allow you to add the most commonly used elements like buttons, headings, text, images, slideshows, audio, video, etc.

Simply select an item and drag it to the row you just added. Click on an item to edit its properties.

You can also save a row or a module to reuse later on other pages. Click on the ‘Save as’ button while editing a row or module.

Save element to reuse

Click on the ‘Done’ button in the upper right-hand corner when you are finished editing your page.

Beaver Builder will show a series of buttons to publish or save your page as a draft.

publish button

You can also reuse an entire page layout for other pages on your WordPress site. Simply open the page with Page Builder and then click on the down arrow button to access Tools in the top bar.

Beaver Builder will show you a popup. You can save the page as a template or quickly create a duplicate page with the same layout.

Beaver Builder tools

Managing Page Layout Templates in Beaver Builder

Each Beaver Builder license entitles you to use it on unlimited websites. But how do you move your page templates from one WordPress site to another?

Beaver Builder stores user-created templates in a custom post type called templates. It is hidden by default, but you can make it visible by going to Settings » Page Builder and clicking on the Templates tab.

Simply check the box next to the ‘Enable Templates Admin’ option and click on the ‘Save Template Settings’ button.

Show template admin

You will notice a new menu item labeled Templates will appear in your WordPress admin bar. All page layouts that you save as templates will appear on that page.

Since it is a custom post type, you can easily export your Beaver Builder templates using the built-in export feature in WordPress.

Visit the Tools » Export page and select Templates. Click on the ‘Download Export File’ button, and WordPress will send an XML file for you to download.

Exporting templates

Now login to the WordPress site where you want to import the templates. Visit the Settings » Import page and click on WordPress.

You will be asked to download and install the WordPress importer plugin. After which, you will be able to simply upload your template’s xml file and import it.

That’s all; we hope this article helped you create custom page layouts in WordPress using Beaver Builder. You may also want to see our guide on how to hide unnecessary items from WordPress admin with Adminimize and our expert pick of the best Beaver Builder themes and templates.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

27 CommentsLeave a Reply

  1. Syed Balkhi says

    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 says

    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

  3. Rodney Harrier says

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

    • WPBeginner Support says

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

      Admin

  4. Pius Anthony says

    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

  5. Krayl says

    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 says

    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 says

      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.

      Admin

      • David Sharp says

        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!

    • Krayl says

      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 says

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

  7. Jesse says

    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 says

    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 says

    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 says

    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 says

    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. Andrew Peters says

    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 says

      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 says

        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.

        Admin

Leave a Reply to WPBeginner Support Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.