How to build a landing page with a drag-and-drop content builder 🎥

Watch the Video Tutorial on YouTube & other 100+ WordPress Tutorials 

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:

landing page demo

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.

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:

full-width-template

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

page-builder-switch

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

start-building 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.

siteorigin-layouts 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:

landing-page-design 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 row button in the main SiteOrigin interface:

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

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

add-widget Then switch to "Widgets Bundle," and select the "SiteOrigin Hero" widget:

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

wrench 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.

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

widget-edit There, add a new "Hero frame":

hero-frame Click on that new frame to edit it:

hero-frame-edit This is where you can put your headline. Here's mine:

headline 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.

image-background 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:

  landing page ver1 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:

row-3-columns

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

widget-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:

editor-content

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:

add-shortcode 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": SU-codes 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:
<code>[su_animate type="flipInY" delay="1"]YOUR_IMAGE_HERE[/su_animate]

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

shortcode-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:

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

su-animation 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:

drag-and-drop

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: 

2-columns-settings 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: 

ratios 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:

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

landing page ver3

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:

columns-adjust 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:

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

landing page ver4

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:

full landing page

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.