How to Create Custom WordPress Layouts with Beaver Builder

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. In this article, we will review Beaver Builder and show you how to create custom page layouts in… Read More »

The post How to Create Custom WordPress Layouts with Beaver Builder appeared first on WPBeginner.

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. 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 need to do is 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 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. You will notice a new Page Builder tab in the WordPress editor.

Add new page with page builder

Click on the ‘Page Builder’ tab to launch the Beaver Builder.

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

At this time, you can click on No Thanks button to skip the tour. Since, we will walk you through different features in this guide, so you don’t need the 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.

Editing layout in Beaver Builder plugin

Beaver Builder will show a popup with different settings that you can edit. You can change text, color, background, font, padding, margin, etc.

You can also just click on an item in the live preview and drag and drop to move it around the page.

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 on the Row Layouts menu and then select the number of columns you want in your row.

Adding a row to your page layout in Beaver Builder

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 Save as button while editing a row or module.

Save a module to reuse later

Click on the Done button when you are finished editing your page. Beaver Builder will show a popup with buttons to publish or save your page as a draft.

Save your page layout in Beaver Builder

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 Tools button 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.

Save layout as template

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 ‘Enable Templates Admin’ option and click on save template settings button.

Show template admin

You will notice a new menu item labeled Templates would appear in your WordPress admin bar. All page layouts that you save as template 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 Tools » Export page and select Templates. Click on ‘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 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 templates 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.

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.

The post How to Create Custom WordPress Layouts with Beaver Builder appeared first on WPBeginner.

5 Best Drag and Drop WordPress Page Builders Compared (2017)

Do you want an easy way to build and customize your WordPress site? That’s where drag and drop WordPress page builder plugins come in handy. These WordPress page builders allow you to create, edit, and customize your site layout without writing any code. In this… Read More »

The post 5 Best Drag and Drop WordPress Page Builders Compared (2017) appeared first on WPBeginner.

Do you want an easy way to build and customize your WordPress site? That’s where drag and drop WordPress page builder plugins come in handy. These WordPress page builders allow you to create, edit, and customize your site layout without writing any code. In this article, we will compare and review 5 of the best drag and drop page builders for WordPress.

Best drag and drop WordPress page builder plugins

Why Use a Drag and Drop Page Builder for WordPress?

When starting a blog, many WordPress beginners find it difficult to change or customize page layouts on their site. While a lot premium WordPress themes come with different page layouts, those are extremely hard to customize for anyone who does not know code (HTML / CSS).

This is why users often ask us questions like: “how can we make WordPress drag and drop?” or “is there an easy drag and drop page builder for WordPress?”

When we talk with users who switch from Weebly to WordPress or from Wix to WordPress, their most common response is: “I wish WordPress had a drag and drop website builder”.

Well, there are several great drag and drop page builder plugins available for WordPress. They allow you to customize every component on your site without writing a single line of code.

These components can be anything like adding multiple columns, parallax backgrounds, full width images, content slider, etc. Users can use these components as blocks to build their own layouts within their WordPress themes.

Since there are different type of WordPress drag and drop page builders, some which are part of theme frameworks while others are plugins, we decided to compare them to help you choose the best page builder for WordPress.

Our criteria for comparing these WordPress page builders are: ease of use, flexibility, and the design output.

Having said that, let’s take a look at the best page builders for WordPress in the market.

Beaver Builder

Beaver Builder

Beaver Builder is a premium WordPress drag and drop page builder plugin. In our opinion, it is by far the best WordPress page builder plugin in the market.

It is extremely fast and comes with a built in on-boarding tour that quickly familiarizes users with their interface.

Beaver Builder comes with a live drag and drop interface. You get to see all your changes as you add them by simply dragging elements from the right sidebar and dropping them on your page. You can click on any element in a page to edit its properties.

It has several basic and advanced modules which cover almost anything you may want to add. There are modules to add sliders, carousel, backgrounds, content blocks, buttons, among many other things.

Most importantly, Beaver Builder is very easy to use for beginners. Check out our tutorial on how to create custom WordPress layouts with Beaver Builder.

Pricing: Starting from $99 for single site license.

Our Grade: A+

Review: Beaver Builder is the easiest page builder option in the market. It comes with pre-made templates to help you get started. The ability to customize every little detail makes it the perfect solution for WordPress users.

Elementor

Elementor

Elementor is a powerful drag and drop WordPress page builder. It is built from ground up for speed, and you will immediately notice how fast and responsive it is.

It is a live page builder plugin which means you get to see your page live as you edit it with Elementor. Simply create sections and select the number of columns for each section.

You can then drag and drop widgets from the left panel to your section. Elementor comes with tons of widgets including most commonly used website elements.

From basic image and text widgets to advanced accordions, sliders, testimonials, icons, social media, tabs, etc. Each widget comes with its own settings.

Elementor will also let you add widgets created by other WordPress plugins.

Don’t want to build your own layout?

Elementor also comes with many ready-to-use templates that you can just insert into your pages. You can simply point and click to edit any item on the page and replace it with your own content.

Pricing: Starting from $49 for single site license. WPBeginner users can use our Elementor Pro coupon code to get 10% off any licensing plan.

Our Grade: A

Review: Elementor is one of the best page builder plugin in the market. It is super fast, extremely easy to use, and comes with tons of modules and templates.

Page Builder by Site Origin

Page Builder by Site Origin user interface

With more than one million active installs, Site Origin’s Page Builder is one the most popular WordPress page builder in the market. One of the primary reason for it’s popularity is the price (free). It is available as a fully functional free plugin.

Site Origin Page Builder is fairly easy to use and works with any standard compliant WordPress theme. For components, Site Origin Page Builder allows you to use WordPress widgets. It comes with several widgets of its own, and you can download and install any widget. See our list of the 25 most useful WordPress widgets because you can add all of them using this page builder.

It also comes with a history tool which allows you to switch back and forth to undo / redo changes that you made. This is a huge time saver, and it gives you a peace of mind knowing that you can revert and undo changes.

Pricing: Free

Our Grade: B

Review: Site Origin Page Builder is a good free plugin with drag-and-drop interface to create and customize layouts. Although the live editing is not comparable to other solutions mentioned in this comparison.

Themify Builder

Themify Builder

If you are already using a WordPress theme by Themify, then Themify Builder is already part of your theme. For other non-Themify WordPress themes, you can get the Themify Builder plugin.

This simple and highly intuitive page builder comes with several ready to use modules that you can add to your pages or posts. Many of these modules usually require you to install separate WordPress plugins.

Themify Builder allows you to edit your pages from the admin area as well as from your live site. With live editing you get to see exactly how your changes will appear on the site. Apart from that, Themify Builder comes with ready-to-use layouts that you can quickly apply to your page.

Pricing: $39

Our Grade: C+

Review: While the builder comes with promising features, there is a learning curve that can leave a user frustrated. You can get nearly everything from the Themify builder in Site Orign page builder for free.

Divi

Divi

Divi is a drag and drop theme and WordPress page builder. It is an extremely easy to use and fast WordPress theme with 20+ layouts/templates for different kind of websites.

You can create and save your own Divi layouts. You can also export a layout from one Divi installation into another. Divi also comes with tons of elements that you can drag and drop anywhere in your layout.

Pricing: Starting from $69 per year

Our Grade: C+

Review: Divi is a good page builder. The page builder functionality is superb which allows you to work with other WordPress themes as well. However, Divi uses a lot of shortcodes, and this makes it difficult for you to switch themes or use a different page builder in the future.

Conclusion

As we compared different drag and drop WordPress page builders, one thing became very clear. Beaver Builder and Elementor are clearly the top choice.

If you don’t mind spending little money to get the best in market along with guaranteed support from developers, then go for any of these two, and you won’t regret it.

We hope this article helped you find the best WordPress drag and drop page builder plugins for your site. You may also want to see our comparison to find the best WordPress photo gallery plugins and the best WordPress contact form plugins.

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.

The post 5 Best Drag and Drop WordPress Page Builders Compared (2017) appeared first on WPBeginner.