Last Updated: April 21, 2020
Last Updated: April 21, 2020
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 (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).
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.
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:
So … you’re probably wondering:
First things first, we’re going to use two plugins to make all of that happen.
Some more details about the plugins:
Most quality landing pages usually have the following elements:
We could probably list even more requirements, but I think this will be enough for our quick demo here.
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.)
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:
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 .
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:
Starting from the top:
The headline row is a very simple thing to do, yet it can look truly awesome!
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.
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!
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:
[su_animate type="flipInY" delay="1"]YOUR_IMAGE_HERE[/su_animate]
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 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:
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:
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:
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…
Download free guide