How to convert an Elementor site to BeaverBuilder

This guide will show you the steps necessary to convert an Elementor site to BeaverBuilder. The same steps can be used to convert from other page builders, like WPBakery, Divi Builder, or Brizy. Simply replace the term Elementor in this guide with whatever your site is currently using for a page builder.

Why would you want to convert to BeaverBuilder?

• Speed: BeaverBuilder’s resources are among the lightest weight in the industry. This is handy both in the backend, where you spend less time waiting for pages to render as you edit them, and in the front-end where you’ll find quicker and easier compliance with speed testing utilities like GTMetrix and Google PageSpeed.
• Smart UI: BeaverBuilder’s UI methodology presents you with the tools you need to build pages quickly, while hiding only less commonly used functions in menus. Meanwhile competing builders either hide everything in menus or show dozens of buttons at once.
• CSS Methodology: BeaverBuilder does an excellent job of separating global styles (in Customizer) from single-page styles (in the builder) ensuring optimal adherence to CSS methodology. When you and your web building tools adhere to this methodology, it helps you build sites faster and it helps the end users of the site edit or add content faster and with less problems.
• More reasons to use BeaverBuilder.

Unfortunately each page builder uses their own custom formatting when storing their data. Some use shortcodes to represent every single component on the page, which are stored directly in the standard wp_post main content field in the database. Others, like BeaverBuilder, store their data in serialized format in the wp_postmeta table. Some builders have modules that behave differently from the equivalent modules found in other builders, and some builders have modules that don’t exist in other builders entirely. This makes automatically converting them an exceptionally difficult task, which is why automatic conversion utilities don’t exist.

This means that the only way to convert a site from Elementor to BeaverBuilder is to manually rebuild each page. In this article we’re going to describe three different methods for accomplishing this goal and provide some tips to help decide when to choose each method.

The fresh install method

This is identical to the process you would use if the source site isn’t built with WordPress.

1. Install WordPress anew in a dev environment, like a subdomain. We like to use dev.<domain>.
2. Install BeaverBuilder on your development copy of the site
3. One by one, build each page using BeaverBuilder: our guide to using BeaverBuilder on your site can be found here.

Advantages of this method:

• There’s no overhead in database or media size as you’re starting totally fresh.
• No confusion as to which pages have been rebuilt as the only pages that exist are the ones you’ve created

Downsides of this method:

• If the site is dynamic, all changes made to the live site since you cloned it for development will need to be exported from the live site and into the dev site to bring the development site content up to date prior to making the new site live
• Pay close attention to the URL structure after the new site is built as you’ll need to ensure 301 redirects are in place for all traffic-bearing URLs

The development clone conversion method

The steps are as follows:

1. Make a clone of the live site to set it up as a development environment.
2. Install BeaverBuilder on your development copy of the site
3. One by one, switch each page to use BeaverBuilder and re-layout its content (our guide to using BeaverBuilder on your site can be found here).

Advantages of this method:

• A massive advantage to cloning first then rebuilding pages (rather than a fresh install of WordPress) is that all or most of the URL structure remains intact, so you don’t need to set up 301 redirects for every single page to maintain rankings after the new site has been rolled out.
• You’ve already got media in the library that you can re-use while rebuilding.
• All existing configurations will remain in place and don’t need to be re-configured on the dev site prior to roll out. This can refer to common elements like contact forms, google analytics or tag manager integration, commenting systems, and more

Downsides of this method:

• If the site is highly dynamic, all changes made to the live site since you cloned it for development will need to be exported from the live site and into the dev site to bring the development site content up to date prior to making the new site live
• Existing page content built with Elementor will remain in the database, potentially inflating it more than necessary. This isn’t often that significant unless there’s hundreds of pages.
• Existing media will come along with it that may be unused with the new site, unless you manually delete the images you no longer need from the media library.

Tip: if your site is changing structure considerably with this redesign, and using all new images, then the Fresh install method above is likely best.

The in-place BeaverBuilder templates method

This option is super handy if you’ve got a highly dynamic website. Examples of this are WooCommerce sites with a high volume of orders, membership sites, or blogs with frequent commenting.

With this method, you re-create all pages using BeaverBuilder directly on the live site. No fresh install of WordPress, and no development clone required. Here’s how it’s done:

1. Login as an admin to the live site
2. Install BeaverBuilder plugin
3. For each page that you’ll be rebuilding, you’re going to create a BeaverBuilder template (totally separate from the live page, for now). Learn how to do that by following the steps in the BeaverBuilder documentation under “To create a new custom layout template from the Beaver Builder admin panel”
4. When it comes time to roll out each page (you can do them all at once, or individually), follow the BeaverBuilder documentation on applying a template to a page, which will overwrite the live page content with your totally new BeaverBuilder template.

Advantages of this method:

• It can be done without creating a clone of the site for development
• It works great for highly dynamic websites as the content can continue changing and you don’t have to consider merging data between the live site and a development site clone.
• This method also works great for Beaver Themer – when you’re applying custom page layouts to custom post types, blog post archives, etc. It’s even easier to make your templates live with Themer as you can simply create the templates as Themer templates and check a box to apply them to all ‘pages’ of that type when you’re ready, rather than having to add the layout manually to each page.

Disadvantages of this method:

• All changes must be rolled out piecemeal. For example each new page template must be applied page-by-page and any global element changes must be done separately (ex: navigation, header, footer)
• If you’re rebuilding the site for a client, you can’t easily show the entire site to them before making it live, though you can show individual pages.
• Existing page content built with Elementor will remain in the database, potentially inflating it more than necessary. This isn’t often that significant unless there’s hundreds of pages.
• Existing media will come along with it that may be unused with the new site, unless you manually delete the images you no longer need from the media library.