How To Create A Sales Landing Page with WP Bakery Pagebuilder (step by step)

Everyone loves good deals and sales. But no one wants to browse through searches to dig the gold mine. Landing pages are a perfect solution to this problem.

With PB All-in-One Web Addons, you can create stunning landing page layouts in minutes. It is a collection of clean, easy-to-use, and functional add-on elements that helps you do your work with zero-hassle.

In this step by step guide, we will create a landing page for an e-Commerce fashion store using the PB Web Elements. The catch is the Surprise year-end sale.

Elements To Create A Landing Page

Not all landing pages are the same in design; they vary according to the marketing needs and requirements. For our sales landing page, we will use the following elements on our page to grab the maximum leads and increase sales:

  • A logo in the header
  • A hero section with a heading and a Pop-up Modal with sales detail.
  • A service section using the PB Services element
  • A section about the company using Text Block Element
  • A gallery using the Image Carousel
  • A footer with social links

To know more about the landing page elements, please refer to our article; Ultimate guide on Landing page essentials and Why they are considered an effective marketing tool.

Steps To Create A Landing Page

Follow the steps below to create your sales landing page.

Create a New Page

  • Go to the Admin dashboard, navigate to pages and select Add New.
  • The following page will appear when you add a new page.Add New - landing page guide
  • We will customize the page with the editor of WP Bakery Page Builder.

Logos provide an identity to your business. It helps customers recognize you wherever you are on the web. For sales, it is ideal to use logos on your page. Follow these steps to mark your unique identity to the page:

  • Click on the back-end editor to activate the editor.Backend Editor - landing page guide
  • The following page will appear. Click on the ‘Add element.’Add Elements - landing page guide
  • Select the Row button.
    Add Row - landing page guide
  • Edit the row settings from the edit button on the right.Edit Row - landing page guide
  • From the General settings, change the type from default to Stretch row and content.Row Settings - landing page guide
  • Next, scroll down to spacing and transform and customize the top and bottom padding to 0px.
  • Move on to the background tab, change the background color, add an image(from the media library), save the changes, and close the dialog box.
    Row Settings Design option - landing page guide
  • Click on the plus button and add a Single Image Element from the dialog box.
    Plus button - landing page guideSingle Image Element - landing page guide
  • Edit and customize the Image as per requirements and save changes.
  • Your page will appear as below on preview.
    Logo - landing page guide

Hero Section with a Heading

The Hero Section is the first area that communicates with the visitors and is always above the fold. We will add an attention-grabbing headline for our sales landing page using the Headings Element, along with some brief descriptions. The clickable text will be the CTA opening up as a pop-up using the PB Element Pop-up Modal.

  • Click on the Add element just below the last added
    Add element below the image - landing page guide
  • Add theSection element.
    Add section - landing page guide
  • Click the edit button on the top right of the section.
    Edit Section - landing page guide
  • Add the background image to the section from the design options tab.
    Section background image - landing page guide
  • Save changes.
  • Inside the section, click on the plus button again to add a row element.
    LandingPage-Sales
  • After adding a row, split the row into two by selecting custom layout option 1/2 + 1/2.
    Split Row - landing page guide
  • Click on the first column’s plus button and add a Single Image Element from the dialog box.
  • Edit and customize the Image as per requirements and save changes.
    Single Image Settings - landing page guide
  • In the second column, click on the plus button and navigate to the page Builder Add-ons tab to add the Text Block Element.
    PB Addons Text Block Element - landing page guide
  • A dialog box will appear. Add the Heading Text, Border Position, Border Styles, Text, Text Color, Font Family, and Font Styles. Save Changes.
    Edit Text Block Element - landing page guide
  • Append another element below the Text Block Element to add a Pop-up modal from PB Add-ons.
    PB Popup Model - landing page guide
  • A dialog box will appear for Pop-up Modal settings. Choose on what you want the pop-up modal to be displayed. For our page, we have selected text.
  • Add Background Color and Save changes.
    PB Popup Model Settings - landing page guide
  • Inside the pop-up modal block, Click on the plus button to add a row.
    Pop Model Plus button - landing page guide
  • After adding the row, click on the plus button to add a Text Block Element.
    Add element Text block - landing page guide
  • To add text to the pop-up modal, we will use the text block element of WP Bakery.
  • A dialog box will appear for text block settings. Add the text and do the custom CSS.
  • Again, click on the plus button to append one more Element of buttons inside the pop-up modal block.
    Popup Model Plus button to add more - landing page guide
  • Navigate to the PB Add-ons tab to select the button element.
    PB Buttons Element - landing page guide
  • A dialog box will appear for settings. From the General settings tab, choose the style, add the text.
    PB Button Settings - landing page guide
  • From the Button settings tab, choose the shape and background color.
  • Save changes and preview. The landing page will now look like this.
    Preview Top Part - landing page guide
  • On clicking the text, a pop-up box will appear.
    Popup Appear - landing page guide
    (We have chosen design 1 of variation 3 for the Pop-up Modal.)

Services Offered by the Store

The services section makes you stand out in the market and describes what your company or business has unique. They provide more details for your customers and the benefits your company has to offer

To showcase our services, we will use the Services element of the PB Add-ons for WP Bakery Page Builder.

  • Click on the plus button below the last added row to add a section element.
    Plus Button to Add Service Section - landing page guide
  • After adding the section, click on the edit button to do the settings.
  • Now, click on the plus button to add a row element.
    Add Row for Service section- landing page guide
  • After adding the row, do the editing by clicking on the edit button on the right.
  • Click on the plus button inside the row and add the Text Block Element from the PB Add-ons Tab.
  • Add the Heading, Text, and customize the Font Family, Styles, Color, and border styles. Save Changes.
    Text Block Settings to Add Service content - landing page guide
  • Click again on the plus button below the Text Block Element to append another
  • After adding the row, click on the plus button and navigate to the Page Builder Add-ons tab to add the Service Element
    PB Service Element - landing page guide
  • A dialog box will appear for settings. From the General settings tab, select a Theme Style, Category, Font Family, and Style.
  • From the Desktop settings tab, select the number of services you want to be displayed in a row as per the screens.
    PB Service Settings Desktop - landing page guide
  • Save the changes.

Adding Services

For showing up the services on the landing page, we will first need to add them in the PB SERVICES.

  • Go to the Admin Dashboard and click on the PB Services.
  • Select a category, and you will see this page in which we will add a new category. Add the name of the landing page.
    Service Custom Post Type - landing page guide
  • Scroll down and click on the add new category button to add a category on your page.
    Add New Category - landing page guide
  • Next, click on the PB Services to add new services in the category.
    Add New Service through Custom Post Type - landing page guide
  • Add title, text, and enable the checkbox of the category you want to keep this service in.
  • We will select Shop Online Services to add this service to our page.
    Add Service Content - landing page guide
  • To add the icon image, scroll down to the bottom of the same page.
  • You will add the icon image in the featured image tab on the right.
    Add Service Icon as Featured image - landing page guide
  • Save your work by clicking the Publish button on the right.
    Publish Service - landing page guide
  • Do the same for all the services you are offering. The landing page will now look like this on the preview.
    Preview Service section - landing page guide
    (We have used THEME 1 of the Services Element of PB Add-ons)

Text Block for Shops Intro

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

  • Click on the plus button below the Services section’s last added row to add a section
  • Edit the section and add the background image.
  • Add a row element by clicking the plus button inside the section element.
  • Edit the row layout to 1/2 and 1/2for the Image and Description, respectively.
    Text Blocks for Shops Intro - landing page guide
  • Click on the first section’s plus button and navigate to the PB Add-ons tab to add a Text Block Element.
  • A dialog box will appear for text block settings. Choose the theme style, Add heading, choose border styles, alignment, add text.
    Text Block Settings for Intro content - landing page guide
  • Choose a color for the heading and text. Save changes.
  • Click on the second column’s plus button and add a Single Image Element from the dialog box.
    Add New single image element - landing page guide
  • Edit and customize the Image as per requirements.
  • Save changes and preview. The landing page will now look like this on the preview.
    Preview Intro shop - landing page guide

Images paint a thousand words is well-known to all of us. Then why not use them on your landing page to capture user’s attention and increase conversion rates. To show the products of our store, we will use the PB Add-ons Image Carousel element.

  • Click on the add button to add a section element, just below the last added row.
  • Add a row after adding the section.
    Gallery Image Carousel Area - landing page guide
  • Again, click on the plus button and navigate to the PB Add-ons tab to add a text block element.
  • In the dialog box, add the heading, text, choose styles, alignment, and color.
    Text block settings for Gallery Image - landing page guide
  • Save changes and close the dialog box.
  • Click on the plus button to append one more Element.
    Plus button to add section for Gallery Image - landing page guide
  • Navigate to the PB Add-ons tab to add the Image carousel element.
    PB Image Carousel Element - landing page guide
  • From the General Settings tab, select a theme style. We have chosen Theme 2 for our page.
  • Click on the toggle tab to add an image.
    PB Image Carousel Settings - landing page guide
  • Click on the clone button to add as many images as you want.
    Clone image Carousel - landing page guide
  • From the Desktop Tab, choose 3 to show in a row. Select 2 and 1 for tablet and mobile, respectively.
    Image Carousel Settings - landing page guide
  • Save changes.
  • The page will look like this in the preview.
    Preview Image Gallery section - landing page guide
    (We have used Theme 2 of Image Carousel)

Footers are the critical place to showcase the badges of trust, which can be your social icons. To give a compact look to our page, we will add Social Icon Buttons from the PB Add-ons Button Element in the footer.

  • Add a new row below the image carousel section.
  • Split the row into two columns by selecting custom layout option 1/2 + 1/2.
    Footer Area - landing page guide
  • Click on the edit button to 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.
    Footer Area PB Button Element - landing page guide
  • For Social Media Buttons, choose theme style one and add the Link (URL).
  • From the Button settings tab, add the Icon for the social media platform and customize the shape, size, background color, text color of the button, and save changes.
    Footer Area Button secttings - landing page guide
  • To add more Buttons, click on the Clone button and change the icons and URL for other social media platforms.
    More buttons - landing page guide
  • Click on the plus button in the second column to add a text block.
    Footer Area Button Second Column - landing page guide
  • 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.
    Footer Area Copy Right Section - landing page guide
  • The Landing page on the preview should look similar to the one below:
    Preview whole Landing page

 

NOTE

  1. By default, WP Bakery Page Builder gives you a blank template.
  2. WP Bakery also offers a wide range of free and paid themes with various templates for your custom website or landing page.
  3. If your custom templates or themes does not have an option for a blank template, you can remove the Header and Footer using the custom CSS.(screenshot below)
    WPBakery Page Builder Settings - landing page guide

Conclusion

Marketing through landing pages help accelerate your sales and generate revenue. Well-designed landing pages allow you to reach the target effectively.

You can design a wide range of landing pages using the WP Bakery Page Builder Add-ons, which are responsive and customizable.

What elements do you use to make a landing page? Please let us know in the comments section. We would love your feedback.