SiteOrigin Page Builder Review: The Best Free WordPress Page Builder Plugin?

Review of: SiteOrigin Plugin

Reviewed by:
Rating:
4.5
On October 5, 2017
Last modified:April 18, 2018

Summary:

One of the most popular free WordPress page builder plugins available, SiteOrigin provides a wealth of great features. Definitely well worth a look, especially for those on a tight budget. Recommended.

The SiteOrigin Page Builder is one of the most popular free content editor plugins available for WordPress. But with so many excellent premium page builders on the market, can a free plugin such as SiteOrigin Page Builder be a realistic alternative or will it fall short?

By the end of this review, you’ll hopefully be able to see for yourself whether saving your money and using a free plugin is a viable option, or whether a lack of features makes purchasing a premium tool a necessity.

About SiteOrigin Page Builder

The SiteOrigin Page Builder Plugin

Page Builder by SiteOrigin (downloadable from the official WordPress repository here) has been created to help you produce custom designs for your WordPress website content. From helping you to build a unique homepage layout to offering advanced designs for your About and Contact pages, and helping you to publish more attractive blog posts, this plugin upgrades the standard WordPress editor to expand your creative options.

The SiteOrigin Page Builder User Interface

The Page Builder by SiteOrigin back-end user interface.

(click to enlarge)

The plugin enables you to build custom grid-based responsive page layouts through its drag-and-drop interface, and you can then insert a range of content modules into your custom layouts to create feature-rich pages.

Live Editor Front-End User Interface

The front-end Live Editor SiteOrigin Page Builder mode.

(click to enlarge)

If you’re looking for design inspiration, or if you’re short on time, SiteOrigin Page Builder also includes a selection of editable prebuilt layouts.

SiteOrigin Page Builder Page Layouts

The SiteOrigin Page Builder layouts are all editable.

(click to enlarge)

We’ll explore the user interface and selection of content modules next, but if you’ve ever wanted more control over the appearance of the posts and pages on your WordPress website this could be the plugin for you.

Best SiteOrigin Page Builder Features

The user interface, selection of content modules and widgets, and prebuilt layouts are the three main components to a WordPress page builder plugin.

We’ll look at these aspects of this plugin, plus a few extra features to help you decide whether this free tool is the right option for your project.

SiteOrigin Drag-and-Drop Page Builder Interface

When you activate the plugin, an extra tab is added to the WordPress Editor. When clicked, it launches the SiteOrigin Page Builder interface.

Page Builder Editor Buttons

Clicking on the Page Builder tab switches the WordPress Editor to the SiteOrigin Page Builder.

(click to enlarge)

Once the Page Builder interface has loaded, you can start by adding a widget, a row, or a prebuilt layout to your page.

SiteOrigin Page Builder Getting Started Options

The back-end SiteOrigin Page Builder interface.

(click to enlarge)

Creating Layout Grids with Rows and Columns

Rows are the foundation of the page builder layout, and each row you add to your page can be divided into multiple columns. By adding multiple rows to your layout — each with their own columns — you can start creating advanced page designs in just a few clicks.

Row Builder

SiteOrigin Page Builder gives you precise control over your grid-based layouts through the use of rows and columns.

(click to enlarge)

After clicking on the Add Row button, you can define your row and column structure. The drag-and-drop interface makes it easy to change the width of the rows, but, if you’re looking for help creating an aesthetically pleasing layout, or you’d just like to save time, you can choose from the predefined column ratios.

Create a Custom Column Layout

The predefined ratios make it easy to quickly create a suitable column layout for your page.

(click to enlarge)

As well as defining the number of columns in the row, you can also customize the appearance of the row and individual cells. Changing the background display, including switching colors or images, is handled through the Row Styles panel. You can also add custom margins and padding, and enter any custom CSS for even greater control over your design.

Customize the Row Styles

SiteOrigin Page Builder gives you full control over the appearance of your rows and their columns.

(click to enlarge)

Once you’re happy with the row and its columns, you can add it to your page to continue building your custom layout. Because you can add as many rows as you need to your page, you can create some really advanced layouts with SiteOrigin Page Builder.

Example of a SiteOrigin Page Builder custom layout

The custom row and column layouts can be rearranged through the drag-and-drop interface.

(click to enlarge)

Adding Widgets to Your Custom Page Layout

Widgets are content blocks that are used to add useful elements to your pages, such as buttons, maps and sliders. But before we cover the widget options let’s look at how they’re added to the page layouts.

SiteOrigin Page Builder Widgets

Some of the widgets or content blocks you can add to your layouts with SiteOrigin Page Builder.

(click to enlarge)

Simply select a row or column cell and press the Add Widget button, and you can choose which element to add to your layout.

Add a widget to the page

The SiteOrigin Page Builder widgets can be extensively customized.

(click to enlarge)

Once a widget has been added, you can click on it to start customizing its appearance and how it functions.

SiteOrigin Page Builder Live Editor Mode

As well as working in the back-end editor, you can also switch to the ‘Live Editor’ mode to see how your page will look when it’s published.

Live Editor front-end view

The Live View mode makes it easy to preview your work, and you can also make changes through the side panel, but it’s not as interactive as that of some of the premium page builders.

(click to enlarge)

If you want to make changes to your page when working in the front-end Live Editor mode, rather than allowing you to interact with the content directly, the plugin displays a pop-up window that contains the controls.

Live Editor Options Panels

If you want to make any changes to your page design in Live Editor mode, you’ll have to do it through a pop-up window.

(click to enlarge)

The Live Editor mode gives you an accurate preview of your work, allowing you to find out how it will look to your visitors. However, because of the lack of direct inline editing, it doesn’t compare well with the polished point-and-click front-end editors found in premium WordPress tools such as Beaver Builder, Visual Composer or Thrive Themes Content Builder.

The Divi Front-End Editor

Divi is a premium WordPress theme and page builder plugin that lets you interact with your page design directly.

(click to enlarge)

The Live Editor’s lack of direct inline editing isn’t a major drawback, but the other tools mentioned earlier, as well as the premium Divi from Elegant Themes, offer a much more responsive and intuitive user experience. Being able to click on an item and start editing it directly on the page — whether you want to change text, resize a column, or move an element to a new position — is a much more convenient and intuitive way of working.

Mobile Responsive Page Designs

A handy feature of the Live Editor, though, is the mobile preview tool. To get an idea of how smartphone and tablet users will experience your content, you can use the device buttons to preview your design through the mobile viewports.

SiteOrigin Page Builder Mobile Preview

Clicking on the mobile and tablet buttons changes the size of the viewport to emulate the smaller displays of these devices.

(click to enlarge)

As all of the SiteOrigin Page Builder elements — including the layouts and widgets — are responsive, your designs should work well on smaller screen devices.

SiteOrigin Page Builder Layouts

Example Pre-Built Layout

One of the editable prebuilt homepage layouts from SiteOrigin Page Builder.

As well as creating your own custom designs, you can also import one of the prebuilt layouts into your page, and, for a free plugin, SiteOrigin Page Builder includes an impressive selection of prebuilt designs. However, they’re not up to the same standard as those you would get with a premium tool such as Beaver Themer.

Some Page Builder Layouts

(click to enlarge)

The SiteOrigin Page Builder designs cover a range of page types, including Home, About, Contact and ecommerce pages that are suitable for a variety of projects. Once you’ve imported a layout, you can edit it through the back-end page builder interface.

Editing a layout

The imported layouts are made up of rows, columns, and widgets that can all be customized through the builder interface.

(click to enlarge)

The layouts include relevant stock photography, so once you’ve imported the design you can simply replace the text to quickly create the page for your site.

Content Building Block Widgets

As mentioned, SiteOrigin Page Builder includes a good set of useful widgets that can be added to your pages. From headlines and buttons to pricing tables and sliders, you can quickly and easily upgrade your content with this page builder.

Page Builder Widgets

SiteOrigin Page Builder provides you with a good set of widgets for your custom page designs.

(click to enlarge)

Once you’ve added a widget to your layout, you can customize its appearance through the builder interface.

Editing a Widget

You can personalize the widgets to ensure they match your design preferences.

(click to enlarge)

Like many of the best WordPress page builder plugins, any of the widgets that are active on your site — including those from third-party plugins — can be added to your custom designs. This opens up a whole world of creative possibilities. If you can’t find a suitable widget from the SiteOrigin Page Builder selection, you should be able to find one elsewhere.

Works with Any WordPress Theme

Although SiteOrigin offers a range of WordPress themes (some of which have been created by SiteOrigin, and some by third-party authors such as ProteusThemes and ThemeTrust), the Page Builder plugin should work with any properly coded theme. For example, the Digital Pro Genesis child theme from StudioPress was used during testing for this SiteOrigin Page Builder review without any problems. Switching themes didn’t cause any issues either, with the custom page designs seamlessly transferring to the new design.

Full-width Page Template

Your website will need a full-width template if you want to create pages without the WordPress sidebars or headers.

(click to enlarge)

If you want to create full-width layouts, such as for your homepage, you’ll need to ensure your WordPress theme includes a full-width template. Alternatively, you can code one yourself or install a plugin, such as the free Fullwidth Templates for Any Theme & Page Builder.

Life After SiteOrigin Page Builder?

Because of the way many WordPress page builders work, deactivating the plugin can cause problems. Often, you’ll either lose access to any content you’ve added to a page with the builder, or it becomes lost in seas of proprietary code.

After removing the plugin

Your content is still accessible after deactivating the SiteOrigin Page Builder plugin.

(click to enlarge)

Thankfully, this isn’t the case with SiteOrigin Page Builder. After deactivating the plugin, your content should still be accessible (without the formatting applied by the builder) to your visitors, and editable through the standard WordPress Editor. This gives you the option of switching to another page builder in the future without losing your content — something that isn’t always possible with other page builder plugins.

SiteOrigin Page Builder Premium Add-ons

So far, everything covered in this SiteOrigin Page Builder review has related to the free version of the plugin. However, you can upgrade the page builder by purchasing the premium SiteOrigin add-on bundle for $29.

Premium Add-on Modules

The premium upgrade gives you access to a faster support service and seven new page builder features.

(click to enlarge)

Benefits of activating the premium add-ons include being able to use the custom post type builder to create additional post types for your website, the ability to set parallax background images for layout rows to make them more visually appealing, and the ability to add animation effects to the layout elements.

Using the premium animations module

The premium add-ons enable animation effects and triggers to be applied to page elements.

(click to enlarge)

Another benefit of purchasing the add-ons for the SiteOrigin Page Builder is that, in addition to their free support channel, you also gain access to premium email support.

Final Thoughts

Front-End Live View

The comparatively limited front-end interface of the page builder is the only major weakness of this plugin.

(click to enlarge)

For a free WordPress plugin, the SiteOrigin Page Builder is an impressive tool.

The editor is easy to use and the selection of widgets, along with the ability to add third-party widgets to your layouts, should ensure almost anyone can create useful custom page designs for their WordPress website. The prebuilt page layouts are good, too, giving you a quick way to get started with your own custom designs.

The front-end Live Editor is the main area where SiteOrigin Page Builder falls behind the premium page builder plugins for WordPress. While you may be able to create designs of a similar quality to those you would with a tool such as Divi or Beaver Builder, it will take you longer and involve more effort with SiteOrigin Page Builder. Plus, there are some features found in those tools that you just won’t get access to with this plugin — even if you purchase the premium add-ons.

However, for a free WordPress page builder plugin, the overall SiteOrigin Page Builder user experience is good, and if you’re on a tight budget and still want to create advanced page designs for your website it could be a huge help.

Used/using SiteOrigin Page Builder? Thoughts?

By Joe Fylan

Joe is an experienced WordPress user who enjoys sharing the tips and knowledge he's picked up from using this fantastic platform for many years. You can find out more about Joe on his website.
Comments (policy)
More in Plugins
What Is Jetpack For WordPress? And What Can It Do? (YouTube Video)

Jetpack is, quite simply, one of the best WordPress plugins ever created. Not only is it made by one of the most reliable, trustworthy and...

Close