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:

codecanyon

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 (some of them we talked about in one of our review/comparisons). 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:

landing page demo

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.

Some more details about the plugins:

  • They both work with your current WordPress theme.
  • 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.

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.

full-width-template

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:

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.

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

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:

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:

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:

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

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:

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:

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

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.

Finally, 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.

Feel free to view this entry in our Themeisle docs for a slightly shorter version of this guide.

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…

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

3 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Umar Bajwa
December 8, 2017 4:38 pm

Hi,

You should also include PluginOps Page Builder in your article. Its the only free page builder for creating landing pages on WordPress.
https://wordpress.org/plugins/page-builder-add/

Thanks

James King
July 10, 2017 5:02 am

I can’t see how to install the Site origin plugin. So I can’t even get started. Any ideas as it isn’t explained here.

Bartłomiej Sergiusz
May 23, 2017 8:47 pm

Hi!

Probably you’ve figured it out, but for other who have same problem (i had) – you have to create custom page template in php, upload it in specific folder and then choose in page option – it’s easy and here you have a full code (not my page, just sharing what worked for me 🙂 ) http://www.gspr.it/NFAjs8

To OP – great, great article, helpfull and nice to watch. How do you create those gifs, if i may ask?

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!