How to Create an Awesome Landing Page With a Free Drag-and-Drop Content Builder

The drag-and-drop content building game has become really popular in the recent years.

For instance, if you go to CodeCanyon and do a quick search for “drag and drop,” you get this:

That’s more than 220 plugins responding to the drag-and-drop search query! And let’s not forget that CodeCanyon isn’t the be-all end-all of WordPress plugins. There are many other drag-and-drop plugins available on third-party websites and in the official plugin repository.

So what do you do when you want some drag-and-drop content building magic?

Well, if you’ve got money to invest, like I said, there are multiple premium plugins. Also, you can opt for a more integrated solution and choose a whole WordPress theme that already has some drag-and-drop functionality built in (we have a list of those for you as well).

But.

Today, let’s keep things free!

Here’s our guide on how to create an awesome landing page in WordPress with a free drag-and-drop content builder .

The demo

Let’s start with the fun part. Here’s an example of what’s available in the drag-and-drop realm with no investment whatsoever:

Nothing too complex, granted, but it’s also nothing like the default setup that WordPress allows you to do.

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.

So … you’re probably wondering:

How to create a landing page in WordPress with drag-and-drop

First things first, 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:

Important landing page elements

Most quality landing pages usually have the following elements:

• Good headline presentation – big and bold.
• Minimal side elements, such as the sidebar, footer content, or anything else that can be distracting to the visitor.
• Clear focus on just one single objective. This can be a sale, an affiliate link click, or a newsletter subscription (usually).
• Story-driven presentation – where the visitor is taken by the hand through every section of the page until they reach a final call to action.
• The call to action – the ask. This element tells the visitor what to do.
• Good visual separation of the individual sections on the page.

We could probably list even more requirements, but I think this will be enough for our quick demo here.

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.

(Don’t forget that you need not only the main SiteOrigin plugin, but also the additional widgets bundle.)

2. Creating a page template

The first decision to make is whether you’re going to create your landing page as a WordPress post or a page.

Technically speaking, there’s no difference. But keep in mind that most themes allow you to use a full-width (no-sidebar) template for pages, whereas very few deliver such functionality for posts.

So in the end, you probably want to work with a new page.

Once on the “Add New Page” screen, switch to the “Page Builder” right away:

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:

As you can see, nothing too fancy.

Since I need a good example to work with here, the purpose of this landing page will be to promote my girlfriend’s (non-existent) guide on “how to sew a cool beanie hat in less than 20 minutes.”

So okay, by the looks of things, 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:

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:

YOUR_IMAGE_HERE

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 all together

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:

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.

But what do you think? Do you have any questions on how this process works? Or maybe you have a landing page of your own you’d like to show us…