SiteOrigin Page Builder

SiteOrigin Page Builder

As I have been redesigning, one WordPress plugin has stood out as a ‘must have tool”. That plugin, as you probably guessed from the title, is SiteOrigin Page Builder.

SiteOrigin Page Builder makes it easy to build your WordPress pages because of its drag and drop interface. Basically, that’s a fancy way of saying you get to design your page by dragging the parts you want to where you want them instead of writing out everything in code. Every page on this site uses SiteOrigin Page Builder to build the layout and then used widget areas to place content. Let’s take a look at one of those pages and show you the behind the scenes of its creation.

Digital Mastermind Monthly

I recently created a page for my Digital Mastermind Monthly group.
(small plug….. if you haven’t heard about the DMM you should visit the page now and then come back!)

When thinking of how I wanted the page to look, I had a basic design on paper. I knew that I wanted a large image at the top of the page. I also knew that the page would be a single column until I got to the different pricing options, where at that point I would need three columns.

Now, way back in my day, that would mean I was in for a bit of coding. I would have to figure out coding the tables that would then be nested in other tables so that I could get the look I wanted.

The image above shows:

  • an image stating when registration opens…(hey it’s open now!)
  • there is some text
  • then 3 separate columns where pricing is discussed
  • and finally some more text.

In the back-end of WordPress here you will see how this was done with SiteOrigin Page Builder. In the image, you see the rows. Your page is built by using rows and then placing widgets within those rows. For each row, you can decide on how many columns you wish to have. Let’s take a look at this one section.

sopdmmrowsThe first row is a single row with the SiteOrigin Image widget for the content. To add content to the widget point your mouse in the corner and the option to edit will pop up.

editrowOnce edit is opened for this particular widget it brings up the options for you to choose your image and other things like linking the image to a URL, controlling  image size/ image alignment and others. Once you are done you simply click done and then update your page.

sopimagewidgetFor each row you continue to decide how many columns you want the row to have and then you place the widget you want to use by dragging the widget to the spot you want!

I know, in this quick post,  I am not doing justice to all this plugin can do. Watch the plugin in use in the video below

If you’re looking for a great plugin to save you time and cut out the hassle of coding then go to the SiteOrigin Page Builder page and download the plugin. This plugin gets the technical work done quickly so you can get to the stuff that truly matter most to you. Oh yeah, the plugin is free! Get this in your digital toolbox today and then let me know what you think in the comments below!



Posted in Digital Lifestyle.

Paul Galbreath

I am a digital lifestyle coach. I share my experiences with personal development, entrepreneurship, and creating a digital lifestyle to help professionals create and improve their online platforms so they can share what matters most while living the life they wish to live.