![\"codecanyon\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2016\/02\/codecanyon.png\")
<\/p>\nThe drag-and-drop\u00a0content building game has become really popular\u00a0in the recent years.<\/p>\n
For instance, if you go to CodeCanyon and do a quick search for “drag and drop,” you get this:<\/p>\n
<\/p>\n
That’s more than 220 plugins responding to the drag-and-drop\u00a0search 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.<\/p>\n
So what do you do\u00a0when you want some drag-and-drop content building magic?<\/p>\n
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<\/a> for you as well).<\/p>\n But.<\/p>\n Today, let’s keep things free!<\/p>\n Here’s our guide on how to create an awesome landing page<\/a> in WordPress with a free drag-and-drop content builder <\/strong>.<\/p>\n 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:<\/p>\n Nothing too complex, granted, but it’s also nothing like the default setup that WordPress allows you to do.<\/p>\n Just to list some cool details about that little demo page:<\/p>\n So … you’re probably wondering:<\/p>\n First things first, we’re going to use two plugins to make all of that happen.<\/p>\n Some more details about the plugins: Most quality landing pages<\/a> usually have the following elements:<\/p>\n We could probably list even more requirements, but I think this will be enough for our quick demo here.<\/p>\n Nothing fancy here, just get them through the WordPress installer (wp-admin > Plugins > Add New<\/em>) or via WordPress.org (links above).\u00a0Install and activate.<\/p>\n (Don’t forget that you need not only the main SiteOrigin plugin, but also the additional widgets bundle.)<\/p>\n The first decision to make is whether you’re going to create your landing page as a WordPress post<\/em> or a page<\/em>.<\/p>\n 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.<\/p>\n So in the end, you probably want to work with a new page<\/em>.<\/p>\n Once on the “Add New Page” screen, switch to the “Page Builder” right away:<\/p>\n From there, you have the option to either start building something from scratch, or use one of the pre-built layouts.<\/p>\n 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.<\/p>\n <\/p>\n There are two main container types in SiteOrigin:<\/p>\n 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 <\/span>.<\/p>\n Here’s how:<\/p>\n Okay, so to get started, you need a general idea of what you want your landing page to look like.<\/p>\n Here’s a rough structure I came up with:<\/p>\n As you can see, nothing too fancy.<\/p>\n 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.”<\/p>\n So okay, by the looks of things, I need four\u00a0individual rows:<\/p>\n Starting from the top:<\/p>\n The headline row is a very simple thing to do, yet it can look truly awesome!<\/p>\n Here’s how:<\/p>\n Click the row<\/em> button in the main SiteOrigin interface:<\/p>\n Then, change the layout to 1 column<\/em>, and click Insert<\/em>:<\/p>\n Now, let’s add a new widget. Click the Add Widget<\/em> button:<\/p>\n Then switch to “Widgets Bundle,” and select the “SiteOrigin Hero” widget:<\/p>\n Click the wrench icon in the upper right corner of your new row:<\/p>\n 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.<\/p>\n However, to achieve the full-width effect, we need a couple more steps. First, edit the “Hero” widget:<\/p>\n There, add a new “Hero frame”:<\/p>\n Click on that new frame to edit it:<\/p>\n <\/p>\n This is where you can put your headline.<\/p>\n Here’s mine:<\/p>\n 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.<\/p>\n 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.<\/p>\n Here’s what my landing page looks like at the moment:<\/p>\n Cool! That’s a good start!<\/p>\n This row is where I placed those three small images in my design.\u00a0It’s\u00a0also the first place where we’re going to use the Shortcodes Ultimate\u00a0plugin.<\/p>\n Here’s how I’m going to go about creating it:<\/p>\n Start by adding\u00a0a new row (just like previously). But this time, I want three columns, and I want them to be even:<\/p>\n Then, in each one, I’m going to add a simple widget called “SiteOrigin Editor”:<\/p>\n 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:<\/p>\n 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.<\/p>\n To make that happen, I click the “Insert Shortcode” button near the top of the editor screen:<\/p>\n 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<\/a>.<\/p>\n The shortcode I’m going to use is called “Animation”:<\/p>\n 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.<\/p>\n 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:<\/p>\n Do it like this (so the shortcode is around the image):<\/p>\n The important thing to notice there is that the delay parameter is set to 1 second<\/em>.<\/p>\n 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<\/em> for the second block, and 3 seconds<\/em> for the third). This will give us a nice progression.<\/p>\n This is what my new row looks like right now:<\/p>\n And this is what it looks like on the landing page:<\/p>\n <\/p>\n At this point, I should probably also mention that every widget and every row can be arranged with drag-and-drop <\/span>. This makes things really straightforward for editing work. Here’s a demo:<\/p>\n <\/p>\n The “About” row uses basically the same widget elements – “SiteOrigin Editor” blocks – but it has two columns instead of three.<\/p>\n So, create a new row, and set it to contain 2 columns<\/em>. Then set the columns to be divided according to the golden ratio, and from “Right to Left.” Like so:<\/p>\n 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:<\/p>\n 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:<\/p>\n Finally, here’s what it looks like on the landing page:<\/p>\n This is our last row, and actually the most important row for any landing page – it’s where the call to action sits.<\/p>\n 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:<\/p>\n <\/p>\n 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.<\/p>\n Now, my columns:<\/p>\n In the end, this is what my final row looks like in the drag-and-drop landing page builder:<\/p>\n And this is what it looks like on the landing page in WordPress:<\/p>\n 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:<\/p>\n 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.<\/p>\nThe demo<\/h2>\n
![\"landing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/woocommerce-ready.jpg\")
<\/p>\n\n
How to create a landing page in WordPress with drag-and-drop<\/h2>\n
\n
\n
\n
\n\n\n
Important landing page elements<\/h2>\n
\n
1. Installing the plugins<\/h2>\n
2. Creating a page template<\/h2>\n
![\"full-width-template\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/full-width-template.png\")
<\/p>\n![\"page-builder-switch\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/page-builder-switch.png\")
<\/p>\n![\"start-building\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/start-building.png\")
<\/p>\n\n
3. Creating rows for your landing page<\/h2>\n
![\"landing-page-design\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/landing-page-design.jpg\")
<\/p>\n\n
The headline row<\/h3>\n
![\"new-row\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/new-row.png\")
<\/p>\n![\"1-column-row\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/1-column-row.png\")
<\/p>\n![\"add-widget\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/add-widget.png\")
<\/p>\n![\"hero\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/hero.png\")
<\/p>\n![\"wrench\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/wrench.png\")
<\/p>\n![\"full-width-stretched\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/full-width-stretched.png\")
<\/p>\n![\"widget-edit\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/widget-edit.png\")
<\/p>\n![\"hero-frame\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/hero-frame.png\")
<\/p>\n![\"headline\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/headline.png\")
<\/p>\n![\"image-background\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/image-background.png\")
<\/p>\n![\"landing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/page-1.jpg\")
<\/p>\nThe details\u00a0row<\/h3>\n
![\"row-3-columns\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/row-3-columns.png\")
<\/p>\n![\"widget-editor\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/widget-editor.png\")
<\/p>\n![\"editor-content\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/editor-content.png\")
<\/p>\n![\"add-shortcode\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/add-shortcode.png\")
<\/p>\n![\"SU-codes\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/SU-codes.png\")
<\/p>\nYOUR_IMAGE_HERE<\/div><\/code><\/pre>\n![\"shortcode-image\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/shortcode-image.png\")
<\/p>\n![\"3-rows\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/3-rows.png\")
<\/p>\nThe “About” row<\/h3>\n
![\"2-columns-settings\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/2-columns-settings.png\")
<\/p>\n![\"ratios\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/ratios.png\")
<\/p>\n![\"about-row\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/about-row.png\")
<\/p>\n![\"landing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/page-3.jpg\")
<\/p>\nThe opt-in row<\/h3>\n
\n
![\"opt-in-row\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/opt-in-row.png\")
<\/p>\n![\"landing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/page-4.jpg\")
<\/p>\nThe landing page all together<\/h2>\n
![\"full](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/02\/full-landing-page.jpg\")
<\/p>\nFinally, the process of building a landing page described here works with all of our themes<\/a>, so the only thing you’re restricted by is your creativity.<\/p>\n