Page Builder by SiteOrigin

So you have a WordPress website. You found and installed a Theme you particularly like.

But you would like more control over how things appear on pages you make.

Sometimes you want your introductory text full width. But then need two or three columns below it.

Not east to achieve.

Sometimes you may want some blocks of text to have a different background color.

You have seen the Widgets we can use in the sidebar and footer. Great ways of adding automated little apps.

But what if you wanted to load one of those in the body of a page - not in the sidebar? You will be pushed to find the way of doing that.

There are many situations where you would like to break up the page into individual elements that you can control and style separately.

So  Lets talk about a Page Builder.

Go to plugins - Add New - Search/ type in Site origin.

Probably the first two in the search will be "Page Builder by SiteOrigin" and " SiteOrigin Widgets Bundle". Install both of these first.

After you activate the first one , you will be taken back to your installed plugin list. Its the default action in WordPress.

They expect you may want to access the settings for the plugin. You should see the second plugin is installed in the list but not activated. Do that now by clicking the word Activate below its title.

Now lets see what they can do. Go to pages and make a new page, name it if you like but only important if you want to keep it as a reference.

Now you can see there is an additional tab on the editor. We have Visual/Text/ and now Page Builder. Site Origin Page Builder is not intrusive like some plugins. It is there and you can choose to use or not use it when you open a new page.

Now click on the Page Builder Tab and lets see what it can do.

So click on add a row, either button in this instance is the same command.

So this is where it starts to get interesting. We have an option to carve this new row up into as many columns as we like.

We can do that in the top left "Set row layout" box. Type in a number or use the up/down arrows. The Blue area will break up into as many equal columns as you enter.

If you had two, but don't want them equal sizes 50%/50%,  you click on the number you want to change and type it in.

The other number will automatically assume the value for the remainder. So if you want the left portion to be 75 type it in and the right portion will automatically assume 25.

On the right of the box we have the Row styles Menu. Attributes, Layout and Design. These control how the whole row appears on the page. W

ith these controls you can change background colour, size, margins and many other variables.

Above is an example of a row built with 3 equal portions.  I started writing this tutorial with a full width page to accommodate the wide graphics we need to use.

When I finished the last sentence above the graphic, I needed to show you the graphical content of each Attribute/Layout/Design.

It seemed awkward to show them one below the other when I could show them side by side. So I added another row in page builder and split it into 3.

One for each of the 3 Graphics.

When I had finished I saved and then added another page builder full width row below it which is where this paragraph lives now.

Style Elements separately

At the start of the article I spoke about the desire to Style elements separately and even have different colour backgrounds.

Well you can see I have done that with the 3 column row Attributes/Layout/Design. 

For the attributes graphic I changed the Background color to blue using the design tab.. You only see it at the bottom where the Image Alt text appears.

In the second and third graphics (Layout/Design)I added  different color backgrounds but I also added 10 pixels of padding around each graphic in the Layout tab.

The padding adds whitespace around the image and the background color over rides the white with my chosen color.

So we have one row, containing 3 elements /columns, and each have different styling.

That is the flexibility we originally wanted but not available to us before we installed the page builder.

So lets finish our row. For this one let make it a single partition. Select 1 in the box top left then save bottom right,

Our row looks like this

Widgets

Click on add Widget and a window opens to select one.  You will see a whole grid of possible widgets to use. Some suitable for Galleries, Grids, Sliders, and many more.

But this is not all of them. When we installed the Site Origin Widgets Bundle it enabled just a portion of them automatically.

Lets hop out of here for a minute and go to click on Plugins in the Dashboard. (So Click save before you leave your new page).

Notice below plugins there is a dropdown and the last item is SiteOrigin Widget Bundle. Click there.

Now we have a window showing the widgets. There are three tabs at the top. All/Enabled/Disabled. Click on Disabled.

These are not active so they do not show in the editor where we were working in pagebuilder.

Activate any you think sound useful. You can always come back here later to activate or deactivate the ones you want available.

I actually have one more that does not appear in your installation.
It is called "Visual Editor" and comes as part of another plugin called "Black Studio TinyMCE Widget" It is a particularly flexible Widget suitable for all mixed text/content/media.
Go to add new plugin, type in black, wait a few seconds and it should be the first option in the page.  Install Black Studio and and activate it now.

Okay lets go back to the Page we created,

Highlight the row we previously made click Add Widget, Visual editor should be the next to last widget. Select it.

We now have somewhere to write content in this row. 

Next, open the visual Editor widget. Notice it has a very similar layout to the classic editor for posts and pages we used in previous tutorials.

But also notice on the right side we have a similar set of controls (Attributes/Layout/Design) to the Row Editor.
This set, controls the characteristics and appearance of all the content inside this visual editor.
The similar controls in the Row, only control how the row itself appears on the page. Don't mix them up.
When you need to change an aspect of appearance, think for a second where the problem is.
Is it related to how the Row is formatted? Or is it related to how the Content is formatted.
You will then understand where to go to fix it. Change one thing at a time, save and then view the result.
If it you didn't get the desired result using the Row Editor, then you change it back and try changing it inside the Widget instead.

We can add more rows with single or multiple columns. Each time we add a row, we then place the required widget into each column of the new row.

Below is the page I am writing this tutorial in. I told you the first full width row was great for wide graphics and text.

The next row holds 3 columns each containing an image, Then this is the third row where we are back to the full width content.

You are not limited to how many rows vertically you use to split up the page content.
The only thing limiting the number of columns horizontally in any row, is the size of the content you wish to put in any one box.

There comes a point where the box maybe too small in width. We can also rearrange the items in a multiple column row using drag and drop.

Another benefit of using the page builder, is depending on the continuity of your page content, you can rearrange the rows also.

To do this, you notice each Row has a "spanner" towards the right side. Beside it is an up/down arrow. If you hover on the spanner it shows the row edit menu.
(It only controls the row itself and the functions we set before we added the Visual Editor Widget.)
We can use the up/down tool to move a row up or down in the vertical order.

I think you understand how it works now, so the only limitation is your imagination. 

You don't have to use the pagebuilder from here on in for every page you build if you don't need its special abilities.

Also if you have existing content before you installed Page Builder, you can open it normally or with Page builder - it will ask if you want to import the content into Page Builder to continue.

You have done well. Soon you'll be an old hand at this.

Many of the fears you had are just a memory.

You are starting to get comfortable manipulating things in a website environment.

Follow along at you own pace in the the ensuing articles.

Thanks for being here.

For our latest posts an topics visit our main Blog here

For an archive or all our topics go here

Don't forget to Subscribe to receive notifications for new articles and Tutorials as they appear.