How To Build A Landing Page In WordPress Without A Designer

11
4


Hello! I am Robert from themeisle.com and I welcome
you to this tutorial about how to build a landing page with a drag-and-drop content
builder. 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. There is no sidebar and you can see a full-width
hero section, multi-column layout, columns of different widths, custom headings and a
fully responsive structure. THE PLUGINS TO USE
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. 1. INSTALLING THE PLUGINS Nothing fancy here, just get them through
the WordPress installer ( wp-admin>Plugins>Add New) or via WordPress.org. You’ll find all the necessary links in the
descrition of this video. 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 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:
Then, switch the WordPress editor to the “Page Builder” setting:
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 and 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: 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. 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 “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. [su_animate type=”flipInY”delay=”1″]
YOUR_IMAGE_HERE [/su_animate] 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. 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. 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. 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.

11 COMMENTS

  1. Thanks for your honest interactions! I am happy to answer any questions you might have about the Landing Page builder mentioned in this video.

  2. Thanks for this kinds of informative video, but you don't mention about the theme, which theme is suitable for this templates

  3. If I have WordPress to build my website, do I need another WP account to create a landing page for something completely different? Or can I use the one I have?

  4. I don't have the option to change the template. I am working with a fresh install of WP v. 4.9.2 using Twenty Seventeen theme. I have also tried with Twenty Sixteen and Twenty Fifteen. I am trying to follow along step by step with your video but I don't have the very first step of changing the template to Full Width. How do I add the same template options? I have the SiteOrigin plugins you mentioned installed AND activated. But I do not have this option. How do I add this?

  5. Hi. Thanks for the useful video! I am having a problem. I had previously installed a theme in wordpress, and the theme is overriding anything I do with siteorigin, meaning that any content I add with siteorigin is added to the current theme, instead of starting from a blank page. I tried to uninstall the theme, but it seems you can only change themes, by replacing them with others. So my question is, how do I get rid of my current theme without replacing it with a new one, so that I can start with a blank page?

  6. Just wonderful, I've been looking for "make landing page online" for a while now, and I think this has helped. Ever heard of – Doniden Landify Pages – (just google it ) ? Ive heard some incredible things about it and my co-worker got great results with it.

  7. Thanks, but when I used siteorigin plugins, it made my whole website unresponsive. I had to use the following video to fix it [https://www.youtube.com/watch?v=rHQFNVQn1rY]. Now the plugin is not usable, of course. Any idea why siteorigin would cause this to happen?

  8. Great video.

    I followed the steps in installing the plugins. But I don't have under page attributes under template " full width, no title, (Siteorigin page..)

    Had anyone else ran into this problem?

LEAVE A REPLY

Please enter your comment!
Please enter your name here