1. Siteorigin Vs Elementor
2. Siteorigin Page Builder
3. Siteorigin Woocommerce

Page Builder by SiteOrigin is a plugin that we have vetted and approved for use within our WordPress theme. To have access to use it you will need to ensure it is installed and activated on your website. Developed by Greg Priday, Page Builder by SiteOrigin is a drag-and-drop page creation plugin used for creating mobile-ready content. The software is actively installed on over one million websites. (SiteOrigin has actually been pointed out as the best free solution on the market in our comparison of the top drag-and-drop content building plugins for WordPress.) The second one is the Shortcodes Ultimate plugin. (Probably the best free shortcodes plugin around. We're going to use it to add some additional cool content blocks to our. My BnB was opened in 2010 by to couples looking to escape the hustle and bustle of the city. Lorem sit quis in dignissim rhoncus sed. Nisi lorem ut ac adipiscing nunc integer cum pulvinar, turpis a ultrices nascetur ac phasellus ac natoque. Cras elit orci, rhoncus gravida convallis sit amet, molestie vitae leo. Etiam at egestas orci. Fusce auctor pretium diam sed iaculis. Nullam ut sapien ac lacus tempor convallis.

Let's start with a quick demo. Here's an example of the kind of page that you can create in any of our themes with a drag-and-drop content builder plugin:

Just to list some cool details about that little demo page:

• no sidebar,
• full-width hero section,
• multi-column layout,
• columns of different widths,
• custom headings,
• fully responsive structure.

The plugins to use

We're going to use two plugins to make all of that happen.

• The first one is the SiteOrigin Page Builder plugin along with its additional bundle of widgets.
  • (SiteOrigin has actually been pointed out as the best free solution on the market in our comparison of the top drag-and-drop content building plugins for WordPress.)
• The second one is the Shortcodes Ultimate plugin.
  • (Probably the best free shortcodes plugin around. We're going to use it to add some additional cool content blocks to our previously created landing page structure.)

Some more details about the plugins:

• They both work with any of our themes.
• You can use them on posts and pages.
• You do all of your work inside the standard editing screen in WordPress.
• The output is responsive and mobile-friendly.
• You can use widgets as content blocks in SiteOrigin.
• There's version control in SiteOrigin.

1. Installing the plugins

Nothing fancy here, just get them through the WordPress installer ( wp-admin > Plugins > Add New) or via WordPress.org (links above). Install and activate. Here's our guide on installing WordPress plugins.(Don't forget that you need not only the main SiteOrigin plugin, but also the additional widgets bundle.)

2. Creating a page template

Start by going to the Pages menu in the wp-admin and clicking on 'Add New.' Once on the 'Add New Page' screen, it's recommended you do two things:

• Switch the 'Template' of the page to 'Full Width.' This will give you generally better effects when working on your new landing page. Landing pages usually don't need sidebars on them. Find this setting in the right sidebar:

• Then, switch the WordPress editor to the 'Page Builder' setting:

From there, you have the option to either start building something from scratch, or use one of the pre-built layouts

For the purpose of this tutorial, we're going to build a landing page in WordPress from the ground up, but I highly encourage you to check out those pre-built layouts as well, and see what sort of mechanisms sit under the hood there. Each of those layouts is perfectly editable, nothing is hidden.

There are two main container types in SiteOrigin:

• rows,
• widgets.

Basically, to put any kind of content on your landing page, you first need to create a row, and then add your content as a widget. Here's how:

3. Creating rows for your landing page

Okay, so to get started, you need a general idea of what you want your landing page to look like. Here's a rough structure I came up with:

Since I need a good example to work with here, the purpose of this landing page will be to promote a guide on 'how to sew a cool beanie hat in less than 20 minutes.' I need four individual rows:

1. the main headline section,
2. the details section - the one that features those three images,
3. the about section,
4. the opt-in section.

Starting from the top:

The headline row

The headline row is a very simple thing to do, yet it can look truly awesome! Here's how: Click the rowbutton in the main SiteOrigin interface:

Then, change the layout to 1 column, and click Insert:

Now, let's add a new widget. Click the Add Widget button:

Then switch to 'Widgets Bundle,' and select the 'SiteOrigin Hero' widget:

Click the wrench icon in the upper right corner of your new row:

From there, go to the 'Layout' section in the right sidebar, and from the 'Row Layout' drop-down, select 'Full Width Stretched.' This will stretch the whole row, ultimately making it possible to have a full-width image in the background.

However, to achieve the full-width effect, we need a couple more steps. First, edit the 'Hero' widget:

There, add a new 'Hero frame':

Click on that new frame to edit it:

This is where you can put your headline. Here's mine:

Right below that whole frame block, there's a section called 'Background.' In it, you can set your full-width background image. It works just like any other piece of media in WordPress. Simply click the 'Choose Media' button, and upload an image from your computer.

After you're done, just click the main 'Done' button in the lower right corner. With this done, you can click the 'Preview' button of your whole page. Here's what my landing page looks like at the moment:

Cool! That's a good start!

The details row

This row is where I placed those three small images in my design. It's also the first place where we're going to use the Shortcodes Ultimate plugin. Here's how I'm going to go about creating it: Start by adding a new row (just like previously). But this time, I want three columns, and I want them to be even:

Then, in each one, I'm going to add a simple widget called 'SiteOrigin Editor':

This is basically a standard editor window with all of WordPress' text editing capability. What I'm going to use it for is a very simple content block - just an image and some text. Like so:

Next, I'm going to add some Shortcodes Ultimate magic here! My goal is to make that image appear on the screen after a slight delay and using a simple animation. To make that happen, I click the 'Insert Shortcode' button near the top of the editor screen:

What you'll see is all of Shortcodes Ultimate's shortcodes. This might be a bit intimidating at first, but it's actually a very user-friendly system, and there are some really good docs available. The shortcode I'm going to use is called 'Animation': Feel free to experiment with the options available in that config window until you see something that you really like. There's a small 'Live Preview' button at the bottom to help you out. For now, however, we're going to speed things up, and just use the ready-made shortcode right inside the editor window. Simply place the following code around your image:

Do it like this (so the shortcode is around the image):

The important thing to notice there is that the delay parameter is set to 1 second. Next, I create two more editor blocks just like this one, and add similar shortcodes there, but I'm assigning different delays to them ( 2 seconds for the second block, and 3 seconds for the third). This will give us a nice progression. This is what my new row looks like right now:

And this is what it looks like on the landing page:

At this point, I should probably also mention that every widget and every row can be arranged with drag-and-drop. This makes things really straightforward for editing work. Here's a demo:

The 'About' row

The 'About' row uses basically the same widget elements - 'SiteOrigin Editor' blocks - but it has two columns instead of three. So, create a new row, and set it to contain 2 columns. Then set the columns to be divided according to the golden ratio, and from 'Right to Left.' Like so:

SiteOrigin is very helpful here. The golden ratio is only one of many pre-made ratios to choose from. Feel free to experiment with the others as well:

The content of these columns is pretty straightforward too. I just use it to hold one 'SiteOrigin Editor' widget each, and some 'About' info inside:

Finally, here's what it looks like on the landing page:

The opt-in row

This is our last row, and actually the most important row for any landing page - it's where the call to action sits. I'm using a three-column row, and starting with the ratio set to 'Even.' However, I'll adjust the middle column right away to take up only 20% of the whole width. Like so:

As you can see, SiteOrigin makes it really easy to adjust any column's width. You just need to click the current width and type in whatever value you want. Now, my columns:

• The first column is where I place a short piece of text that invites people to leave their email addresses to get the download. Just a simple 'SiteOrigin Editor' widget here.
• The second block is also nothing fancy. I just use an arrow icon to point to the opt-in form that's going to be placed on the right. Again, done with the 'SiteOrigin Editor' widget.
• The third column is where the magic happens. This is where I use a widget from my email delivery plugin. That widget will take care of placing a working opt-in form right on the page and hooking it up to my email software (check with your own email provider to find out how to make this part work).

In the end, this is what my final row looks like in the drag-and-drop landing page builder:

And this is what it looks like on the landing page in WordPress:

The landing page altogether

At this stage, the work is done and you can enjoy your new landing page built with some drag-and-drop trickery. Mine has turned out pretty nice, I think. Check it out:

Siteorigin Vs Elementor

Building something like this is really simple with SiteOrigin and Shortcodes Ultimate. Once you have your idea, you don't need a designer's help. The fact that you can create all of that on your own makes those plugins uber-helpful. And again, the process of building a landing page described here works with all of our themes, so the only thing you're restricted by is your creativity.

• QUALITY. SIMPLICITY.

  Create a website in minutes. Corp and Page Builder, a powerful pair.

WELCOME TO CORP WORDPRESS THEME

Lorem ipsum dolor sit amet consectetur adipiscing elit. Proin ut mauris quis nibh porta cursus nec non quam. Quisque metus lacus sollicitudin at massa sed vestibulum sollicitudin urna.

RESPONSIVE DESIGN

Sed sit amet hendrerit metus. Vestibulum mollis nisl et mauris suscipit consequat. Sed a eros augue. Pellentesque luctus ultrices aliquet.

FAST LOADING

Aliquam tristique velit quis ante tristique, sed cursus nunc auctor. Aenean feugiat quam sed magna vulputate porta.

WOOCOMMERCE READY

Praesent vel sodales lectus. Nulla nec pellentesque libero, non volutpat enim. Nam pulvinar eget justo at placerat. Morbi iaculis ultrices turpis.

CORP IS AN AMAZING BUSINESS THEME

Sed sed lectus ac purus condimentum tempor. Etiam semper nisi et dolor malesuada, at rutrum est feugiat. Donec ornare vitae justo eleifend volutpat.

• BUILD STUNNING LAYOUTS
  WITH PAGE BUILDER BY SITEORIGIN

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut mauris quis nibh porta cursus nec non quam. Quisque metus lacus, sollicitudin at massa sed, vestibulum sollicitudin urna. Nulla in diam risus. Aenean a orci eros. Integer commodo leo nec felis aliquam iaculis.

Siteorigin Page Builder

FROM OUR BLOG

Pellentesque habitant morbi tristique senectus et malesuada turpis egestas. Nunc velit aliquam eget venenatis ut dignissim sed felis.

Siteorigin Woocommerce

• SIMPLE INSTALLATION

  Etiam eleifend venenatis odio, a laoreet dolor mattis eget.
  Integer vulputate aliquet dui, in sagittis lectus eleifend sit amet. Curabitur sagittis neque non viverra auctor.