- \n
- A good introduction<\/li>\n
- Testimonials<\/li>\n
- Product Services<\/li>\n
- Contact Form\/Subscription Form<\/li>\n
- Product Pricing<\/li>\n
- Social Icons<\/li>\n<\/ul>\n
And more.<\/p>\n
Building a Landing Page<\/h3>\n
The good thing is\u00a0that you can create a Landing Page without writing code. Let’s see how you can\u00a0do that.<\/p>\n
If you want to gain potential customers from your landing pages, then this guide is for you and trust me having a perfect high converting landing page is what you need to get more conversions. When I made a landing page for myself with drag and drop page builder<\/a><\/strong> on WordPress (which I will explain later in the tutorial) it really seems like blobs of text, blended with a series of images and works really well.<\/p>\n
In this tutorial, I will guide you how to create your perfect landing page on WordPress using Beaver Builder<\/a>.<\/p>\n
By using Beaver Builder, you are going to have a landing page with all the considerable elements like:<\/p>\n
- \n
- A perfect tagline (heading) \u2013 precise, big and bold.<\/li>\n
- WooCommerce integration<\/strong>\u00a0– perfect for designing any shopping or fashion website.<\/li>\n
- Call to action buttons \u2013 This element lets the visitor perform an action.<\/li>\n
- Layered row separators<\/a><\/strong> – This clearly shows the content of your website plus it looks fresh and captivating.<\/li>\n
- Completely Customizable<\/strong> – Which means you have control over every single element on your landing page. From font styling to the\u00a0background color, you can customize anything with front end customizer panel.<\/li>\n<\/ul>\n
Why choose Beaver Builder to build a highly converting landing page?<\/h3>\n
- \n
- Beaver Builder lets you take the full control of your WordPress website with an amazing drag and drop page builder that has all the elements for creating a perfect landing page.<\/li>\n
- It saves your valuable time to concentrate on your core content without the need of writing code.<\/li>\n
- The Beaver Builder plugin is compatible with any theme.<\/li>\n
- You can switch themes without losing your content.<\/li>\n
- Moreover, you can change the position of elements on your landing page as per your requirements.<\/li>\n<\/ul>\n
If anytime you feel like to stop using Beaver Builder:<\/strong><\/p>\n
- \n
- Your content gets ported right back into the WordPress editor.<\/li>\n
- You\u2019ll not loose your post and pages.<\/li>\n<\/ul>\n
The Beaver Builder plugin has it\u2019s FREE\u00a0lite version<\/a><\/strong> available on WordPress.org and got some great reviews with 200,000+ active installs<\/strong>. That’s some great numbers, isn\u2019t it?<\/p>\n
![\"beaver](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/beaver-builder-reviews.png\")
<\/p>\nThinking of how to use the Beaver Builder plugin to create your landing page? It’s easy!<\/p>\n
I\u2019ll be designing a landing page using\u00a0Beaver Builder Pro plugin<\/a>\u00a0and the Beaver Builder Theme<\/a>.<\/p>\n
Note<\/strong>: This tutorial will work only with PRO version of Beaver Builder, so if you haven\u2019t bought it yet, buy it from here<\/a>.<\/p>\n
Step 1: Installing Beaver Builder Plugin<\/h3>\n
Login & install the Beaver Builder plugin to your WordPress dashboard<\/p>\n
- \n
- Just click on the Plugins\u00a0<\/strong>>\u00a0Add New\u00a0<\/strong>>\u00a0Upload Plugin > Install Now<\/strong>.<\/li>\n<\/ul>\n
![\"step](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/step-1-1.png\")
<\/p>\n- \n
- Just click on the Activate<\/strong> option and you are all set to configure the plugin.<\/li>\n<\/ul>\n
![\"step](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/step-2-e1491841050846.png\")
<\/p>\nStep 2: Creating your Landing Page using Beaver Builder<\/h3>\n
- \n
- Click on the Pages > Add New<\/strong>. You\u2019ll see two tabs, one is Text Editor<\/strong> & another is Page Builder<\/strong>.<\/li>\n
- Set the page template to “No header\/footer” in Page Attributes.<\/strong><\/li>\n<\/ul>\n
![\"step](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/step-3.png\")
<\/p>\n- \n
- Go ahead and click on the Page Builder tab<\/strong>. This will active the Page Builder for the current page (which means later you can edit the same page using the Page builder).<\/li>\n<\/ul>\n
![\"page](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/page-builder-loader.png\")
<\/p>\n- \n
- The Page Builder Panel will open and in the top bar, you will see options: Templates, Tools, and a Help Tab.<\/li>\n<\/ul>\n
Step 3:\u00a0Selecting The Page Template<\/h3>\n
Start creating your landing page,\u00a0your core requirement for the page should be:<\/p>\n
- \n
- A headline section<\/li>\n
- A\u00a0three column services\/feature section<\/li>\n
- Testimonials,<\/li>\n
- Numbered counter for stats of your product or service<\/li>\n
- Captivating Photo gallery to showcase product images or portfolio<\/li>\n
- And a Sing up form to capture leads<\/li>\n<\/ul>\n
Beaver Builder comes with 25+ Pre-built page templates. You can find these templates by clicking the Templates\u00a0<\/strong>button in top right side.\u00a0Based on our core requirements, Zen Lite seems to be a perfect template.<\/p>\n
![\"default\"](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/default.png\")
<\/p>\nStep 4: Editing the Template Content<\/h3>\n
Beaver Builder is a visual front-end page builder. So, editing the content is very easy and you can view all the changes in real time.\u00a0There are three building blocks of a page built with Beaver Builder<\/p>\n
- \n
- Modules – The smallest element which handles the content and styling.<\/li>\n
- Columns – As the name suggests this is used to create blocks on the page. Modules are placed inside columns and each column can have multiple\u00a0modules.<\/li>\n
- Row – Row is a collection of columns.<\/li>\n<\/ol>\n
Let’s quickly roll to set your landing page Headline. <\/strong>Click on the heading section on the template and set the module accordingly:<\/p>\n
![\"heading](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/heading-module.png\")
Once you are done with the changes just click on \u201cSave<\/strong>\u201d button. In my case I have designed the template for you and here’s what my landing page looks like<\/strong>:<\/p>\n![\"layout\"](\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/layout.png\")
<\/p>\nGo ahead and get Beaver Builder, PowerPack and build yours!<\/p>\n
- \n
- Beaver Builder has 25+ pre-build templates<\/a><\/strong>.<\/li>\n
- If anyway you are looking for more such amazing templates you can install it from PowerPack<\/strong>.<\/li>\n
- PowerPack\u00a0comes lets your work look\u00a0creative and build all kind of designs. It also comes with conversion-oriented landing page templates that you can use with 1-click.<\/li>\n
- You get 250+ row and full page Templates <\/a><\/strong>at an unbelievable price along with 50+ modules<\/a><\/strong>. What else is needed, get PowerPack now<\/a>!<\/li>\n<\/ul>\n
\nI hope the above tutorial will help you to create your landing page successfully. If you have any questions or came across any challenges while using Beaver Builder, feel free to ask it in the comment section below, I will help you.<\/p>\n
Do share your experience and let me know how Beaver Builder works for you \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Despite a website do you still wonder why you fail to get customers? Or do you still seek for the ways to best advertise your product? The only answer to the question is an absolute fascinating landing page. Landing pages are the special pages built to focus on capturing leads, selling a product, offering a…<\/p>\n","protected":false},"author":1274,"featured_media":30321,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27,12],"tags":[31,32,34,33],"class_list":["post-23020","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beaver-builder","category-tutorials","tag-landing-page","tag-landing-page-template","tag-landing-page-wordpress","tag-lead-capture-page"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/23020"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1274"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=23020"}],"version-history":[{"count":2,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/23020\/revisions"}],"predecessor-version":[{"id":453570,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/23020\/revisions\/453570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/30321"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=23020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=23020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=23020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- If anyway you are looking for more such amazing templates you can install it from PowerPack<\/strong>.<\/li>\n
- Beaver Builder has 25+ pre-build templates<\/a><\/strong>.<\/li>\n
- The Page Builder Panel will open and in the top bar, you will see options: Templates, Tools, and a Help Tab.<\/li>\n<\/ul>\n
- Set the page template to “No header\/footer” in Page Attributes.<\/strong><\/li>\n<\/ul>\n
- Click on the Pages > Add New<\/strong>. You\u2019ll see two tabs, one is Text Editor<\/strong> & another is Page Builder<\/strong>.<\/li>\n
- Just click on the Activate<\/strong> option and you are all set to configure the plugin.<\/li>\n<\/ul>\n
- Just click on the Plugins\u00a0<\/strong>>\u00a0Add New\u00a0<\/strong>>\u00a0Upload Plugin > Install Now<\/strong>.<\/li>\n<\/ul>\n