How to Create a Landing Page With PB Addons for WP Bakery

Page Builder Addons is a collection of free and premium add-on UI elements for WPBakery Page Builder; a WordPress plugin for building web pages by simply dragging and dropping components onto the webpage. The add-on elements are clean, responsive, easy to use, and very functional.

In this step by step guide, we will create a simple landing page for a newly launched Book, with an offer for Free access on sign up!

Elements to Create a Landing Page

The main elements of a Landing page may vary according to marketing needs and requirements. For a simple promotional page, we will add the following elements

Steps To Create A Landing Page

Follow these steps to create your own landing page

Create a New Page

Go to the admin dashboard, navigate to pages and Add a new page.

When you create a new page, it has default attributes including sidebars, menus and footer links. For an effective landing page, remove the extra widgets and keep the page as direct and simple as possible using the custom CSS settings.

We will customize the page with the editor of WP Bakery Page Builder.

When you add a new page, the following page appears.

Blank page

Headers or headlines on a landing page are of utmost significance. They capture the attention of the user inviting them to stay on the page. A catchy line or phrase goes a long way in making a page attractive.

For a landing page, try to limit the choices of navigation for your visitors. If the page has a lot of external and internal links, with other random information, it will confuse the user and the purpose of a Landing page may not be achieved.

We will add a catchy phrase to grab user’s attention in the header using the PB Add-on Headings element for our landing page.

Follow these steps

  • Click on the Backend Editor button to activate the editor. You will see this page.
    WPBakery Page Builder
  • To create the first row, click on the Add Element.
    Add Elements
  • From the dialog box, select the Row.
    Add Row Element
  • Click on the Edit Row button to open Row Settings’ dialog.
    Edit Row Button
  • Customize the Row Stretch from the General Tab to “Stretch Row”
  • Next, Navigate to Design Options Tab and customize the padding-top and padding-bottom to 0px.
    Add Padding
  • Add the background color or image. We will add the background color ‘BLACK’ to make the Heading stand out. Save the changes and close the dialog box.
  • Now click on the Plus button in the added row.
    Add Row
  • Navigate to the PB Add-ons Tab and select the ‘Headings’ Element.
    PB Addons
  • For editing, hover the mouse on Heading and click on the edit button. A Dialog box will pop up.
    Heading Element
    Heading Element Settings
  • Add the Text, Position, Color, and Border Style for the heading. Choose a Font Family and Font style.
  • We will make the headline a bit catchy and prominent to make sure the user stays on the page to read more.
  • Save the changes.

Preview the changes made by clicking the Preview button on the Right side of the screen. A new tab will display the header like this

Heading Area

Hero Section

 A Hero section is the second element of our landing page where the user gets to know what they’ll get out of the page. The message here needs to be put across in a simple and concise way in order to deliver the product or service effectively.

We will add a new section below the header, and add a form for Sign up along with the Book’s cover photo. The main attraction for Sign-Up is the Free Access to the book.

  • Click on the plus button below the Header row, and select ‘Section’ from the Dialog box.
    Hero Section
  • Customize the Section from the Edit button options. Set the width of the section to ‘Stretch Section’ and set the height to Full.
    Section
  • From the Design Options tab, add the Background Image (from Media Library)/Color for the section. Save changes.
    Section Settings
  • Inside the section, click on the plus button again to add a Row element.
  • Hover the mouse on the Row Layout button and split it into two columns.

Columns

We will display the Form in the first column and the book cover image in the second column. The form here acts as a Call to Action Section which is an essential part of any Landing Page.

  • Click on the plus button of the first column and navigate to the Page Builder Add-ons tab. Select the MailChimp Element.
    MailChimp Element

The following dialog box will appear.

MailChimp Element Settings

The PB Add-ons offer various themes for MailChimp Element.

  • Select a theme and add the MailChimp API Key for activating the form.
  • Add the details for Heading Text, Content, Name and Email Placeholder, and the Button Text.
  • Customize the Styles, Color themes, Font Family and Styles from the MailChimp Form Styles Tab. Save the Changes.

For the second column, we will add a single image of a book cover.

  • Click on the plus button in the Second column.
    Second Column for Single Image
  • Select the Single Image Element from the list of elements.
    Single Image Element
  • Select the Image source and add the Image accordingly. Customize the size, position, and animation details from the General settings tab.
    Select Image
  • From the Design Options tab, add the padding, background color and borders as required. Save the Changes. The section will look like this on Preview.

Hero Section Design

(We have chosen MailChimp’s Theme Style 4 for the style displayed above)

Text Block For Author’s Bio

 Just below the Hero section, we will add a brief introduction of the author with an Image.

  • Click on the plus button below the last added row of the Hero section to append one more row to the existing section.
    Row Element
  • Edit the row layout to 1/4 and 3/4 for the Image and Description respectively.
  • To add the background image to this column, click on the edit button on the right.
    Edit Button
  • Navigate to the Design Options tab and add the Background Image or background color. Save Changes.
  • Click on the plus button of the first column, and add a Single Image Element from the dialog box.
  • Edit and customize the Image per requirements. Save Changes.
  • In the second column, click on the plus button and navigate to the Page Builder Addons tab to add the Headings Element.
  • Add the Heading Text, Position, Border Styles, Font Family and Font Styles. Save Changes.
  • Append another element just below the Heading element, by clicking on the plus button.
    Append Element
  • Add a Text-Block Element from the dialog box to add details of the author.
    Add Text Block Element
  • Add the text for Author’s Bio in the text editor and customize the styles. By default, WP Bakery page builder does not allow you to change the text color of the Text Block. Add an extra class name for that purpose and change the color through Custom CSS Settings.
    Text Block Settings
  • Save changes and Preview. The landing page will now look like this.

Landing page area

Section For Testimonials

Featuring customer testimonials and reviews on your landing page can be effective as they help build trust. If a client will trust your product or service, the conversion rate will be higher, meaning increased sales.

We will make the testimonials section using the Page Builder Addons Testimonials element.

  • Click on the plus button below the last added row.
    Add Row
  • Add a new Row from the elements.
  • Click on the plus button inside the row and add the Headings Element from the PB Add-ons Tab.
  • Add the Heading Text “Testimonials” and customize the Font Family, Styles, Color and border styles. We have also added icons with borders to give a distinguished look to the Heading. Save Changes.
  • Click again on the plus button below the Heading element to append another element.
  • Navigate to the Page Builder Addons tab to add the Testimonials element.
    Testimonial Element
  • From the General settings tab, select a Theme style, customize the slider options, Arrows, Font Family and Style.
  • To add Testimonials, navigate to the Testimonials Tab and add details for Author’s name, Image, and Text. To add more than one testimonial, click on the copy button below
    Testimonial Settings
  • Choose the number of slides to display on the screen from the Desktop tab. Save Changes. The Testimonials section will look like this on Preview.

Testimonial Area

(We have chosen Theme style 7 for the style displayed above)

Footer gives a compact look to a web page. The display of Social icons on a Landing page means you care about the social presence of your product.

We will add Social Icon Buttons from the PB Add-ons Button Element in the footer.

  • Add a new row below the testimonials section.
  • Split the row into two columns, by selecting custom layout option 1/2 + 1/2.
  • Edit the row and add Background Color from the Design Options tab. Save Changes.
  • Click the plus button in the first column and navigate to the PB Add-ons to add the Buttons Element.
    Button Settings
  • For Social Media Buttons, choose theme style 1 and add the Link (URL).
  • From the Button Settings tab, add the Icon fro the social media platform and customize the Shape, Size, Background Color, Text Color of the Button.
  • Save Changes.
  • To add more Buttons, click on the Clone button and change the icons for other social media platforms.
    Buttons Element
  • Click on the plus button in the second column and add a Text-Block Element from the dialog box.
  • You can add copyright text or any other text suitable to your requirements. Customize the text from the Text editor and Save Changes.
  • The Landing page on the preview should look similar to the one below

Landing Page

(You can add custom CSS by giving extra class name, for the padding and spacing between the elements for a compact and clean look)

Note: To remove the default Header and Footer in WP Bakery Page Builder, you will have to add custom CSS from here

Remove default Feader and Footer

WP Bakery does not offer a blank template by default.

Conclusion

A Landing page is a place where a customer buys your product, it’s what keeps you in business. A Single Call to Action is a crucial part of a Landing page and helps attract customers to your products and offers.

Using WP Bakery Page Builder and the clean and responsive Page Builder Addons, you can now design all kinds of Landing Page and maximize your conversion rates. Its always recommended to test and modify your Landing page to see what works best for your product!

Was this article helpful? Let us know in the comments section, what elements you add to the Landing page.