How to create Landing Pages with Beaver Builder the WordPress Page Builder
- Part 1: How to create Landing Pages with Beaver Builder the WordPress Page Builder (importing templates)
- Part 2: How to create Landing Pages with Beaver Builder the WordPress Page Builder (creating a new Landing Pages custom post type)
In Part 1: How to create Landing Pages with Beaver Builder the WordPress Page Builder I showed how to use our landing pages. Currently, we have 16 landing pages templates for the Beaver Builder. To organize the landing pages, I created a separate Post Type for the Landing Pages. After importing our Landing Page Template for Beaver Builder, I created a Thank you page as well as the confirmation page/s under that.
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
In this tutorial, I will show you exactly how to do that yourself. Before, I was creating pages for each landing page. Often, I need to disable some; meaning, I had some informational pages that were active and there are also landing pages that will be temporary.
HERE'S THE VIDEO!
Just to recap what we're trying to achieve - shown below is my Beyondbeaver.com Dashboard and you can see here that I have “Landing Pages” as an admin menu item. I click “Landing Pages” to view all my Landing Pages that I am sending paid traffic and other traffic to.
TIP! In WordPress is that the post type is actually put into the URL when viewing parts of your WordPress admin screen in the WordPress Dashboard.
Once in our Landing Pages section, this is actually our Custom Post Type called Landing Pages that I'll be showing you how to set up today in this tutorial. In the URL you can confirm this as the URL tells us what the post type is. See below where the URL says post_type=landingpage - neat, huh?
Go to your Pages in your WordPress Dashboard and you'll notice it says post_type=page.
Anyway, let's get started!
A real life example: My "How to create a WordPress website in just 1 day without knowing design or code" funnel explained
As I mentioned in Part 1: How to create Landing Pages with Beaver Builder the WordPress Page Builder where I talked on how you can create your landing pages really really fast to be able to drive traffic, by creating a Custom Post Type specifically for your Landing Pages, you can structure them in a hierarchical manner which makes managing them easier (trust me). What I mean is, I have created the actual landing page and then created sub pages under them for the Thank You and Confirmation. They're grouped so to speak.
When someone goes to my advertising campaign (think Facebook or Adwords) and fills out their details on the squeeze page, they will go to the ‘Thank you’ page with the message to confirm the subscription by checking their email and clicking a link. Once they check their email and click the link to activate their email address on my Active Campaign mailing list, they will be redirected to the Confirmation page.
Let me explain this more thoroughly.
Step 1: User clicks on a paid marketing ad and lands on my squeeze page
The way that I have set up the landing page “Learn how to Build Website in 1 day” squeeze page (see image below), people will click on a Facebook ad and then be taken to this squeeze page below.
Step 2: User completes the form on my squeeze page and is taken to the Thank You page for THAT particular squeeze page
So, once a person enters their details to get the free offer, (in this case, it’s the Ultimate List of WordPress Plugins for 2016), they are redirected to a ‘Thank you page’ like the one below.
Step 3: User clicks the link in their email to confirm their subscription and is taken to the confirmation page
When the subscriber checks their Inbox and clicks the link in the email to confirm their subscription to my Active Campaign mailing list, the following confirmation page appears.
And, as promised, there is a link to The Ultimate Plugin List - the lead magnet I offered them as a bonus for joining the mailing list and registering for the "How to build a WordPress website in just 1 day without knowing design or code" online course.
From hereon Active Campaign automates emails to my list to nurture them. It's amazing because it doesn't take me much time to set it up, my subscribers get regular content that is relevant to them and I feel good because customer service is everything and there's nothing worse than signing up for something and never hearing back. (more on Active Campaign in a separate post to come 🙂 ).
How to set up WordPress to create Landing Pages with Beaver Builder in an organized way
Let me show you how you can go ahead and set up WordPress to create Landing Pages with Beaver Builder like I have just explained above. I've created a demo site for this tutorial for you to follow along.
Step 1: Install the plugin Custom Post Types UI
On our demo site, we will go ahead and install a plugin that I use to create the Landing Page post type.
To do that, follow these steps:
- Log in to the WordPress Dashboard.
- On the Plugins section, click ‘Add New’.
- Using the Search Box on the right, search for Custom Post Types UI and install the plugin pictured on the left in the image below.
Click to Activate the Custom Post Types UI plugin when prompted
Step 2: Create the new Landing Pages post type using Custom Post Types UI
After installing Custom Post Types UI we now see on the left-hand section of the Dashboard the CPT UI menu item. Let's click on that to then Add our new Landing Page Post type.
The plugin has its own documentation on the plugin's page in the WordPress Plugin Respository but here's a few things to note and how I have set up my own on BeyondBeaver.com
- *Post Type Slug: you can just add a name such as ‘landingpage’
- *Plural Label: Ex: Landing Pages
- * Singular Label: Ex: Landing Page
Once completed, click ‘Add Post Type’ button. We have now successfully registered our new Landing Page post type.
Next, there's a few settings we want to change for this post type that affect how we can use it.
Click on the “Edit Post Types” tab.
Then choose ‘Landing Pages’ from the select menu. That will load the Landing Page post type we just created and it will give the different settings that you can edit for it.
Some of the things that need to be changed are:
- Hierarchical set to TRUE. This means that for our Landing Page post type we can set children and parent items (like normal WordPress pages. By default post types created are non hierarchical - similar to Post Tags).
- Scroll down and in the Supports settings enable ‘Page Attributes’. By doing this, we will have the meta box on our Landing Pages where we can select parents for each Landing Page.
Then click Save Post Type to save these new settings.
Step 3: Create your Landing Pages hierarchy
Go to the new ‘Landing Pages’ menu item on the left-hand section of the Dashboard, click ‘Add New’.
Let's first set up our main squeeze page that we will send traffic to. In this example, we’ll use the title, “Our New eBook for Sale”. Click Publish.
Next, let's set up our Thank You Page. Click the ‘Add New’ button to create another Landing Page for our Thank you page. Before publishing the ‘Thank You’ page, go to the Page Attributes section on the right bottom part of the dashboard and choose the previously created landing page (our main squeeze page that we'll send the traffic to) as Parent page. Click ‘Publish’.
Create another page for the Confirmation page. Again, customize the Page Attributes section, and choose the main Landing Page as its Parent page. Click Publish.
To confirm what you've done and we've done here in this tutorial, under ‘Landing Pages’ in the WordPress Dashboard select ‘All Landing Pages’. You can now view all the three landing pages that you just have created and it should look similar to the below.
Notice the hierarchy - a nice and clean organisation of our campaign 🙂
Step 4: Creating your Landing Pages using Beaver Builder, including how to import one of our premium 16 Beaver Builder Landing Page Templates
To quickly import the landing pages from our Shop. Go to https://beyondbeaver.com, click ‘Products’ menu, and select ‘Landing Pages’. There you will see all the premium Beaver Builder landing page templates which you can purchase from us. There are actually 16 templates for now and they are designed for all sorts of things such as counter timer for product, webinar, eBooks, online conferences, and more.
NOTE! To read about how to import our premium Beaver Builder Landing Page Templates click here to visit our Support Page.
To allow editing your new Landing Pages post type with Beaver Builder we need to tell the Beaver Builder plugin that we wish to edit this new post type using Beaver Builder.
To do that, under ‘Settings’ in the WordPress Dashboard, select ‘Page Builder’, click ‘Post Types’, and then check ‘Landing Pages’.
Click the ‘Save Post Types’ button to save your settings.
Now when you edit your Landing Pages you will be able to activate Beaver Builder editing and build your Landing Pages using the drag-and-drop nature of Beaver Builder.
If you have purchased our premium Beaver Builder landing page templates, you can select the desired template that you have been downloaded from us when you launch Beaver Builder. The template will then be loaded. You can then make changes / edits on the template by clicking, dragging or customizing the text or images.
Step 5: Disabling the Header and Footer with the Beaver Builder Theme
Generally with a landing page you will not want the header or the footer because you want people to leave the pages where you sent them to do an action.
To remove the header and footer and make your Landing Pages full-width when using the Beaver Builder Theme, in your FTP or cPanel, go to the Parent Beaver Builder Theme folder named bb-theme folder. Basically, you want to go to /wp-content/themes/bb-theme .
In this folder is a file named tpl-no-header-footer.php and you want to copy this into your Child Theme. My child theme for this demo is in a folder titled odw so I copy this tpl-no-header-footer.php into the odw theme folder, as shown below.
To check if you have copied it successfully, you can just open your child theme folder to see if the tpl-no-header-footer.php is inside the folder.
Now, rename the tpl-no-header-footer.php inside your child theme to single-landingpage.php .
And you're done!
Wrapping it up Beyonders!
So, that’s how easy it is to create Landing Pages with WordPress and Beaver Builder without having to pay to use third-party softwares.
Even better, you also know that you can use our premium Beaver Builder landing page templates to build better WordPress Landing Pages ridiculously quick.
Get 16 of our premium Beaver Builder Landing Page Templates and save $247.