Advertisement
  1. Code
  2. WordPress
  3. Plugin Development

Create a Responsive Landing Page With WPBakery (Visual Composer)

Scroll to top

WPBakery Page Builder, formerly called Visual Composer, is a WordPress plugin that allows you to create custom pages for your WordPress site without writing any HTML or CSS code. Its intuitive editors are ideal for non-coder designers who want to quickly transform their designs into fully functional WordPress pages. Experienced web developers too, however, can save a lot of time and effort by adding it to their development workflows.

In an earlier tutorial, I introduced you to WPBakery Page Builder's user interface. Today, I'll show you how to use it to create a simple, responsive landing page.

Prerequisites

To follow along, make sure you have:

If you need help setting up the plugin, do refer to the following tutorial:

1. Create a New Page

A landing page is usually a page that's built to convert traffic generated from a marketing campaign into leads or sales. For it to be effective, it must have a well-defined objective. In this tutorial, for the sake of a realistic example, we'll be creating a landing page that persuades its visitors to purchase an e-book.

Start by opening your WordPress instance's admin dashboard and navigating to the Pages tab. Then press the Add New button to create a blank page.

Because attention spans are short these days, a well-optimized landing page is one that has few distractions and a very obvious call to action. Most WordPress themes, however, automatically add elements such as headers, sidebars, footers, and navigation bars to a newly created page. Such elements can distract your visitors, so it's generally a good idea to remove them.

The easiest way to do so is to use the Page Attributes section to apply a blank, single-column template to the page. The exact name of the template, however, will depend on your current theme. For instance, if you are using the WP Bootstrap Starter theme, which is free and open source, you can select the Blank with Container template.

Page Attributes sectionPage Attributes sectionPage Attributes section

We're now ready to start adding content to the page.

2. Create a Hero Section

The first and most prominent section of our page is going to be a hero section. It'll have the title of the e-book, its cover image, a few details about the book, and a Buy button. Feel free to use any photo for the cover image. Alternatively, you can create one quickly using Canva.

We'll be using the WYSIWYG front-end editor offered by WPBakery Page Builder to create our page. To activate it, click on the Frontend Editor button.

Front-end editor showing blank pageFront-end editor showing blank pageFront-end editor showing blank page

We'll be using Row elements extensively in our landing page. Doing so ensures that the page is both modular and responsive. Our first row will serve as a container for the hero section. Create it now by going to Add Element > Row.

In the Row Settings dialog, switch to the Design Options tab and give a top padding of about 16 px to the row.

Design Options tab of Row Settings dialogDesign Options tab of Row Settings dialogDesign Options tab of Row Settings dialog

Next, split the row into two columns by opening the Row Layout dialog and selecting the second layout option.

Row Layout dialogRow Layout dialogRow Layout dialog

We'll be displaying the cover image in the first column of the row. So click on the plus sign shown inside it and select the Single Image option. In the dialog that pops up, upload the cover image and press the Set Image button.

Set Image dialogSet Image dialogSet Image dialog

At this point, I suggest you use the Single Image Settings dialog to set the Image size to medium and the Image alignment to center. If you're still not satisfied with the size of the image, feel free to directly specify the desired dimensions in pixels instead.

The second column of the row will be home to the title, the description, and the button. For the title, we'll use a Custom Heading element. This element, unlike the regular Text Block element, allows us to use Google Fonts while styling the text.

Once the Custom Heading Settings dialog pops up, type in the book's title in the Text field and use the Font Family dropdown list to select the Google Font family you want.

Custom Heading Settings dialogCustom Heading Settings dialogCustom Heading Settings dialog

If you think the font size is too small, you can either change it using the Font size field or use the Element tag field to choose a larger heading style, such as h1.

For the description, go ahead and add a Text Block to the same column. Using the rich text editor that pops up, you can not only type in all your text, but also apply simple styles to it.

Text Block Settings dialogText Block Settings dialogText Block Settings dialog

As the last element of the column, add a Button element. In its configuration dialog, give a label to the button and specify the URL of the page you want it to open. For now, you can use any dummy URL.

To make the button look more polished, set its Style to Modern, its Shape to Round, and its Size to Large. By default, the button has a subtle, gray background. Changing its Color to Classic Green can make it stand out better.

You're, of course, free to experiment with all the other styles and shapes WPBakery Page Builder offers.

Button Settings dialogButton Settings dialogButton Settings dialog

It's worth noting that if you want the button to be as wide as the column, you'll also have to set the Alignment property to Center and check the Set full width button? option.

WPBakery Page Builder allows you to easily add icons from several different icon libraries to your buttons. To add an icon to the button, you must first check the Add Icon property. You'll then be able to select the icon library and icon you want.

Button Settings dialog interface for adding an iconButton Settings dialog interface for adding an iconButton Settings dialog interface for adding an icon

Our simple hero section is ready. It should look something like this:

3. Create a Reviews Section

Reviews or testimonials are an important part of most landing pages. A few good and genuine reviews are usually enough to gain your visitors' trust. For now, let's add three reviews to our page.

We'll be using another Row element as a container for all the reviews. Add it right below the hero section's row and use its Row Layout dialog to split it into three columns.

Row Layout dialogRow Layout dialogRow Layout dialog

To make the reviews section appear distinct from the hero section, switch to the Design Options tab and change its background color to a light gray.

We could use Text Block elements to display the reviews. However, to try something different, let's use Message Box elements instead. The primary difference between the two is that a message box can display a large icon beside its text. Additionally, message boxes come with more pre-defined styles and colors.

Add the first message box inside the first column. In the Message Box Settings dialog, set the Style to 3D and choose the icon you want to display. Then type in the review text using the text editor as usual.

Message Box Settings dialogMessage Box Settings dialogMessage Box Settings dialog

For the other two reviews, you don't have to create the message boxes from scratch. Instead, use the Copy button to create two copies of the first message box. After you change their text contents, you can simply drag and drop them into the second and third columns.

The review section should now look like this:

Review sectionReview sectionReview section

4. Create a Form

Some visitors might still not be sure if they want to make the purchase. To convince them, there are a few different approaches you can follow. For instance, you could try sending them the first chapter of the book as an email for free. Or you could invite them to subscribe to your newsletter and give them a chance to win the book. Whatever approach you choose, you will need a form to get the visitor's contact information.

WPBakery Page Builder is compatible with most modern form builder plugins. In this tutorial, we'll be using the free WPForms plugin, which has over 2 million active users, to create our form. To install it, go to the admin dashboard and navigate to Plugins > Add New. Search for wpforms there and press the Install Now button to begin the installation.

Install WPFormsInstall WPFormsInstall WPForms

Once the installation's complete, press the Activate button to start using the plugin.

To keep things simple, let's create a form that accepts only the visitor's name and e-mail address. So go to WPForms > Add New. In the form creation wizard, give a name to the form and select the Blank Form template.

Form setupForm setupForm setup

In the next screen, drag and drop a Name field and an Email field onto the form.

Creating form with two fieldsCreating form with two fieldsCreating form with two fields

The form is ready, so save it and return to the Forms Overview page to get its unique shortcode.

All you need to do now is embed the form inside the landing page. To do so, go back to the front-end editor of WPBakery Page Builder and add a third Row element at the bottom of the page. Inside it, add a Text Block element.

In the Text Block Settings dialog, first add some text that explains to your visitors why they should fill in the form, and then type in the shortcode of the form. After you press the Save Changes button, you should be able to look at your brand new form:

Form embedded in landing pageForm embedded in landing pageForm embedded in landing page

Conclusion

In this tutorial, you learned how to use several different elements offered by WPBakery Page Builder to create a simple landing page. You also learned how to use shortcodes to interface with third-party addons.

CodeCanyon is brimming with premium addons for WPBakery Page Builder. By using them, you can add complex functionality to your pages more quickly. The following article points you to the most interesting WPBakery addons we've found:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.