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
- A header
- Hero Section with the signup offer and book detail
- A text block for Author’s bio
- A section for testimonials
- A footer with social media links
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.
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.
- To create the first row, click on the Add Element.
- From the dialog box, select the Row.
- Click on the Edit Row button to open Row Settings’ dialog.
- 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 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.
- Navigate to the PB Add-ons Tab and select the ‘Headings’ Element.
- For editing, hover the mouse on Heading and click on the edit button. A Dialog box will pop up.
- 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
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.
- Customize the Section from the Edit button options. Set the width of the section to ‘Stretch Section’ and set the height to Full.
- From the Design Options tab, add the Background Image (from Media Library)/Color for the section. Save changes.
- 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.
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.
The following dialog box will appear.
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.
- Select the Single Image Element from the list of elements.
- Select the Image source and add the Image accordingly. Customize the size, position, and animation details from the General settings tab.
- 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.
(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.
- 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.
- 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.
- Add a Text-Block Element from the dialog box to add details of the author.
- 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.
- Save changes and Preview. The landing page will now look like this.
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 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.
- 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
- 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.
(We have chosen Theme style 7 for the style displayed above)
Footer With Social Media Links
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.
- 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.
- 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
(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
WP Bakery does not offer a blank template by default.
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.