There are many different page builder plugins available. Some more complex than others, but in this tutorial we’ll be using the Page Builder by SiteOrigin. This plugin is available for free from the WordPress theme repository, has a strong following with over 1 million active installs, and is easy to use.
Installing the SiteOrigin Page Builder plugin
Goto “Plugins” -> “Add New” in the WordPress admin.
Search for “Page Builder by SiteOrigin”.
You should see the following match in the search results:
Click “Install Now”, wait for the plugin to download then click “Activate”.
Now when you edit a post or page you’ll see a new “Page Builder” tab above the text editor. If you have existing content it can be copied across by clicking the “Page Builder” tab and clicking “OK” when prompted. If you are creating a new page/post then you simply need to click the “Page Builder” tab to get started.
Creating an advanced layout using the Page Builder
For this tutorial we’ll be creating a homepage layout for a fictional business called “Heartstone Cafe”. We’re using the SS Foundation WordPress theme but the process is similar no matter what theme you’re using. The layout in this tutorial is quite basic, feel free to have play around, once comfortable you’ll be creating advanced layouts in no time.
Create Page builder layout
First thing we need to do is create a page and enable the Page Builder. Once enabled it’s time to start creating the page layout. Using the “Add Row” button 3 rows have been created.
- Row 1 = 1 column / Even (1)
- Row 2 = 2 columns / Halves (0.5)
- Row 3 = 3 columns / Even (1)
Add widgets to Page Builder layout
If you click on any of the columns a popup will appear that allows you to a widget (content type) to the selected column. At this point in time you may be prompted to install the “SiteOrigin Widgets Bundle” plugin. Go ahead and install this plugin, it adds a range of useful widgets for you to use in the Page Builder.
As you can see above we’ve added Image, Editor and Button widgets. Now we can being adding content to these widgets. Here’s what the page looks like after populating the widgets with content. A background color was given to the 2nd row and the Button widget was given a background image, everything else is using the default widget settings.
As you can see we’ve created a professional looking page without having to write a single line of code. It should also be added there is a variety of pre-built page layout you can use that only require content to be added. So if you’re looking to create more advanced page layouts then why not install the Page builder by SiteOrigin plugin and give it a go yourself.