Home » The Best Free WordPress Page Builder?
Spread the love!

The SiteOrigin Page Builder WordPress plugin is one of the most popular free content editor plugins available. But with so many excellent premium page builders on the market, can a free plugin really still compete? Can a free plugin like SiteOrigin Page Builder be a realistic alternative to a paid page builder, or will it fall short?

These are some of the questions we’ll answer here. By the end of this review, you’ll hopefully be able to see for yourself if saving your money and using a free plugin is a viable option, or if 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 building a unique homepage layout and advanced designs for your About and Contact pages to helping you 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 achieves this by enabling you to build custom grid-based responsive page layouts through its drag-and-drop interface. 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 you’re short on time, SiteOrigin Page Builder also includes a selection of editable pre-built 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 in this SiteOrigin Page Builder review, 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 pre-built layouts are the three main components to a WordPress page builder plugin.

This SiteOrigin Page Builder review will now explore those three aspects of this plugin, plus a few extra features, to help you decide if this free tool is the right option for your project.

SiteOrigin Drag-and-Drop Page Builder Interface

After activating 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 pre-built 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 layouts, and each row that 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. 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, as well as 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. As 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 the 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, 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 some premium page builders.

(click to enlarge)

To make changes to your page when working in the front-end Live Editor mode, rather than interacting 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 does give you an accurate preview of your work, allowing you to find out how it will look to your visitors. However, due to the lack of direct inline editing, it doesn’t compare well to the polished point-and-click front-end editors found in premium WordPress tools like 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 SiteOrigin Page Builder Live Editor’s lack of direct inline editing isn’t a major drawback. However, the other tools like those 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 to work.

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 pre-built homepage layouts from SiteOrigin Page Builder.

As well as creating your own custom designs, you can also import one of the pre-built layouts into your page. For a free plugin, SiteOrigin Page Builder includes an impressive selection of pre-built designs. However, they’re not up to the same standard as those you get with a premium tool like 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 of WordPress themes (some of which have been created by SiteOrigin themselves, 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 like the free Fullwidth Templates for Any Theme & Page Builder.

Life After SiteOrigin Page Builder?

Due to 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 relates 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

Cap: 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, set parallax background images for layout rows to make them more visually appealing, and 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 pre-built 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 might be able to create designs of a similar quality to those you would with a tool like 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?

Joe Fylan

Source link

قالب وردپرس

Joe Fylan

View all posts

Add comment

Your email address will not be published. Required fields are marked *

Stay Connected

Get Exciting Offers, Free Coupons and other Freebies delivered straight to your inbox!