Best WordPress Page Builders Compared 2018

Offsprout is a WordPress page builder. So to write an article called “Best WordPress Page Builders Compared” will rightly raise some eyebrows and invite accusations of bias.

But, in trying to build the best page builder for freelancers and agencies we tried almost everything else out there. And we continue to try to keep our finger on the pulse of what features people want and what features other builders have.

This article does not attempt to choose sides as it’s obvious which side we’d choose.

Instead, we’re trying to lay out the features that matter most to people, explaining what those features are, and letting you know which WordPress page builders have them, and which don’t.

If you think we’re leaving out important features or we’ve made a mistake in our chart, please leave a comment and we’ll try to correct the record.

Our Criteria for Choosing the Best WordPress Page Builders

This compares the features that you get when you buy the premium versions of the top page builders.

There are valid arguments to be made about including 3rd party add-ons or comparing only free page builders, but we’ll leave that to other articles.

We’ve also left out some page builders that you may use and like. If you think we’ve left one out that compares favorably in the features listed in the chart, please let us know in the comments section and we can work with you to add it.

Here’s our current list of the top WordPress page builders:

1. Offsprout (Pro and Theme)
2. WP Bakery
3. Beaver Builder (Pro and Themer)
4. Elementor (Pro)
5. Thrive Architect
6. Divi
7. Gutenberg

Why include Gutenberg?

There has been talk about whether or not Gutenberg will kill page builders. I think this chart shows that Gutenberg has a long way to go for that to be the case.

Page Builder Features Explained

Below, I go into detail about each feature included in the chart.

Standard UI

Inline Editing

Click into text and edit the text as you see it rather than in something like a modal settings window. It can also be referred to as editing in place.

Drag and Drop

Click on a module, column, or row, and drag it around the page, dropping it where you’d like it to be. “Mostly” in this row refers to the inability to create columns by dragging. “Limited” means that there is no real concept of columns.

Front end

Changes are made in the environment that a visitor to your website sees, so that you can see exactly what your site will look like as you edit it.

Column width drag controls

Change the width of columns by dragging rather than by clicking into a settings panel.

Column width drag locks

Guides to help lock widths into conventional breakdowns such as halves, thirds, fourths, and fifths.

See changes live

As you make changes in a settings panel, you are shown what those changes look like instantly.

Create new columns by dragging

Create a new column on the fly by dragging a module to the side of an existing module as opposed to going into a settings menu and choosing the number of columns from there.

Row padding drag control

Increase or decrease top and bottom padding within a row by clicking and dragging on a drag zone.

Centralized Options

Color scheme

Create a color scheme in your site options and then assign those colors to various elements in your site. This allows you to change the color scheme and have colors change across your entire site rather than having to set or change colors in each module individually.

Button skins

Create button designs in your site options and then assign those designs to the buttons in your site. This means that you can change the button skin in your site options and all of your site’s buttons that are using that button skin will be updated automatically.

Row skins

Create row designs in your site options and then assign those designs to the row in your site. This means that you can change the row skin in your site options and all of your site’s row that are using that row skin will be updated automatically.

Google fonts

Select a Google font to use for paragraphs and heading text.

Upload your own font

Upload a custom font file and use that instead of a Google font or a built-in font.

Upload your own icon set

Upload a custom icon set and use that instead of built in icon set(s)

Site logo

Set a logo for your site, and then use that in a logo module.

Workflow

Navigate to containing elements

If you’re editing a module, there are links to edit the column and row/section containing that module. Another way to think of this is breadcrumbs.

Navigate to other pages

Choose another page to edit from the builder mode rather than having to go back into the WordPress backend and navigate from there.

Create new page from builder

Create a new page or post from a template without leaving the builder. This is opposed to having to exit builder mode and go into the WordPress backend to create a new page or post there.

Edit header/footers/etc from builder

A link to edit the headers, footers, and other sitewide content inside the builder, rather than having to exit the builder, go into the WordPress backend and create or edit sitewide areas in the backend.

Apply new sitewide elements from builder

Rather than having to go into the WordPress backend, and, on an individual basis, select which sitewide elements apply to which pages or page types, this means that you can assign sitewide elements to the page that you’re working on without leaving the builder.

Set user permissions from builder

Create and preview user permissions roles without leaving the builder.

Edit post meta link from builder

A link to edit the meta for the post/page that you’re working on is shown within the builder interface.

Admin link from builder

A link to the WordPress admin is shown within the builder interface.

Keyboard Shortcuts

New Page

Create a new page or post.

Undo/Redo

Undo or redo a change.

Add Module

Show the module selector.

Add Template

Show the row template selector.

Add Global

Show the global template selector.

Save Page Template

Save the current page that you’re working on.

Save Changes

Save changes to the current module or page.

Save and Publish

Save changes to the current page and publish it.

History

Undo/Redo

Undo or redo any changes that you’ve made.

Full Change History

Go through the full history of changes that you’ve made and restore a previous version.

User Permissions

Module-specific user permissions

Control exactly which modules a user can edit, add, move, or delete.

Builder action user permissions

Control exactly which actions a user can take like add pages, create/delete templates, edit globals, edit rows, edit design options, etc.

Set user permissions per user

Assign capabilities on a per user basis.

Set user permissions per WordPress role

Assign capabilities on a per WordPress user role basis.

Templates

Page Templates

How many page templates come with the builder.

Row Templates

How many row/section templates come with the builder.

Save module templates

Save you module configurations as templates that you can use elsewhere in the page builder.

Save page templates

Save page templates that you can use as starting points for other pages or posts in your site.

Save row templates

Save row/section templates that you can use elsewhere in the page builder.

Live template preview

See what saved templates will actually look like in your site when you are looking at the templates available to you.

Templates use centralized color scheme

Colors in templates refer to a centralized color scheme so that when you use them, they are already using the colors of your site rather than the colors of the template.

Globals

Save global rows

Save a row/section as a global that can be reused throughout your site and when edited, will be updated everywhere.

Save global columns

Save a column as a global that can be reused througout your site and when edited, will be updated everywhere.

Save global modules

Save a module as a global that can be reused througout your site and when edited, will be updated everywhere.

Live global preview

See what your saved globals look like when you are shown a screen to add them.

Site-wide content

Design your entire site

Edit things like your headers, footers, sidebars, and other site-wide areas that appear on multiple pages rather than just the content in the page content area.

Archive pages

Create designs for your archive pages like category and tag archives where posts of a given taxonomy are listed. This means you can control how the posts are displayed and the content around the post display area.

404 pages

Create a custom 404 page.

Blog post template

Create a design for your blog posts that all posts will use by default. This means you have the ability to control how the title, post date, featured image, etc. will appear when a blog post is shown.

Row Controls

Background image

Set the background of a row to be an image.

Background image screen

Create a screen layer over the image so that text within the row or section can be seen more easily.

Background image screen width

Control the width of the image screen layer so that you’re only screening part of the image.

Background image parallax

Add a parallax effect to the background image of a row.

Bleed full width

Even when a row is contained in a smaller area, you can still override that containment and stretch the row to the full width of the page.

Column Controls

Background color

Set a background color for columns.

Background image

Set a background image for columns.

Background image screen

Add a screen over the image background in columns.

Mobile Design

Mobile preview

See what your design looks like on different devices within the page builder.

Mobile column width control

Most page builders will automatically stack modules for mobile viewing, which is a preferred behavior. This gives you the ability to control columns in mobile in the event that you do not want adjascent columns to stack but want them to be side by side even in mobile.

Mobile spacing control

Padding and margin controls for modules and rows/sections that can be edited on a per-device basis so that you can have a certain spacing for laptops, and then different spacing for tablets and phones.

Mobile border control

Border controls that can be edited on a per-device basis so that you can have a certain border for laptops, and then different border for tablets and phones.

Mobile font size control

Font size controls that can be edited on a per-device basis so that you can have a certain font size for laptops, and then different font size for tablets and phones.

Lead Generation

Form builder

Create forms out of different input types from within the page builder.

Email marketing integration

Link optin or contact forms to email marketing accounts like MailChimp or Active Campaign.

Exit intent

Trigger an action when the page builder detects that the user is about to exit the current page.

Fields Integrations

Advanced Custom Fields

Integrate text fields with values from the Advanced Custom Fields plugin.

Pods

Integrate text fields with values from the Pods plugin.

eCommerce

WooCommerce modules

Custom modules for things like a WooCommerce buy button and cart link.

Easy Digital Downloads modules

Custom modules for things like an Easy Digital Downloads buy button.

Special Features

A/B Testing

Set goals for actions that you would like users to take on a given page and create multiple versions of a page to see which page leads more users to take that action.

5-Minute Site Grower

Special website creation wizard that allows you to input company information, social media profile urls, and select page templates, and will create a fully designed site for you.

White Label

Add your branding to the page builder.

Centralized Templates

Store all of your templates in a central location and then connect sites to that location so that you don’t have to import and export templates in order to get access to your template library.

White label help docs

Help documentation that does not have any branding so that clients can be pointed to the help docs of the page builder while still being given a white label experience.

Coding Standards

Saves HTML, not shortcodes

When the plugin is deactivated, the content remains as HTML, not as WordPress shortcodes.

Conclusion: Which WordPress Page Builder is the Best?

That’s for you to decide!

We certainly work every day to make Offsprout the best website builder for freelancers or agencies building websites for clients.

But that doesn’t mean that it will be the best for you.

All of these page builders have their strengths and weaknesses. Some are stronger than others. And if you’re trying to decide which to use, I’d encourage you to try them out and see for yourself. Both Offsprout and Beaver Builder have demos where you can try before you buy.

Please be sure to leave any other features or page builders that you’d like us to include in the comments section below!