WPBakery Page Builder, once called Visual Composer, is a WordPress plugin that allows you to create customs pages for your WordPress site without writing any HTML or CSS code. Its intuitive editors are ideal for non-coder designers who want to promptly transform their designs into in full functional WordPress pages. Experienced web developers excessively, however, can save a lot of fourth dimension and campaign 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 land page .

Prerequisites

To follow along, make sure you have :

  • WordPress 5.0 or higher
  • the latest version of WPBakery Page Builder

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

1. Create a New Page

A land page is normally a page that ‘s built to convert traffic generated from a market political campaign into leads or sales. For it to be effective, it must have a chiseled objective. In this tutorial, for the sake of a realistic case, we ‘ll be creating a landing page that persuades its visitors to purchase an e-book .
Start by opening your WordPress exemplify ‘s admin splashboard and voyage to the Pages pill. 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, mechanically total 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 dear theme 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 foliate. The accurate name of the template, however, will depend on your current theme. For case, if you are using the WP Bootstrap Starter composition, which is rid and receptive reference, you can select the Blank with Container template .
Page Attributes sectionPage Attributes sectionPage Attributes section We ‘re now ready to start adding capacity to the page .

2. Create a Hero Section

The first and most outstanding segment of our page is going to be a hero section. It ‘ll have the title of the e-book, its cover persona, a few details about the book, and a Buy push button. Feel free to use any photograph for the binding 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 land page. Doing therefore 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 dialogue, switch to the Design Options check and give a top pad of about 16 px to the rowing .
Design Options tab of Row Settings dialogDesign Options tab of Row Settings dialogDesign Options tab of Row Settings dialog next, split the quarrel into two columns by opening the Row Layout dialogue and selecting the second layout choice .
Row Layout dialogRow Layout dialogRow Layout dialog We ‘ll be displaying the embrace picture in the first column of the row. so suction stop on the plus sign of the zodiac shown inside it and select the Single Image option. In the dialogue that pops up, upload the cover prototype and press the Set Image button .
Set Image dialogSet Image dialogSet Image dialog At this point, I suggest you use the Single Image Settings dialogue to set the Image size to medium and the Image alignment to center. If you ‘re hush not satisfied with the size of the prototype, feel dislodge to immediately specify the desire dimensions in pixels rather .
The second gear column of the row will be dwelling to the style, the description, and the push button. For the title, we ‘ll use a Custom Heading component. This component, unlike the unconstipated Text Block element, allows us to use Google Fonts while styling the text .
once the Custom Heading Settings dialogue pops up, type in the book ‘s title in the Text sphere 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 besides little, you can either change it using the Font size field or use the Element tag plain to choose a larger head style, such as h1 .
For the description, go ahead and add a Text Block to the same column. Using the rich people text editor that pops up, you can not alone type in all your text, but besides apply simple styles to it .
Text Block Settings dialogText Block Settings dialogText Block Settings dialog As the last chemical element of the column, add a Button element. In its configuration dialogue, give a pronounce to the button and specify the URL of the page you want it to open. For now, you can use any dumbbell URL .
To make the button expect more polish, set its Style to Modern, its Shape to Round, and its Size to Large. By default, the button has a elusive, gray background. Changing its Color to Classic Green can make it stand out better .
You ‘re, of course, absolve to experiment with all the early styles and shapes WPBakery Page Builder offers.

Button Settings dialogButton Settings dialogButton Settings dialog It ‘s deserving noting that if you want the release to be arsenic wide as the column, you ‘ll besides have to set the Alignment property to Center and check the Set full width button? choice .
WPBakery Page Builder allows you to easily add icons from several different icon libraries to your buttons. To add an picture to the button, you must first check the Add Icon property. You ‘ll then be able to select the picture 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 simpleton champion incision is ready. It should look something like this :

3. Create a Reviews Section

Reviews or testimonials are an crucial part of most landing pages. A few good and genuine reviews are normally adequate to gain your visitors ‘ trust. For immediately, 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 segment ‘s row and use its Row Layout dialogue to split it into three columns .
Row Layout dialogRow Layout dialogRow Layout dialog To make the reviews section appear distinct from the hero segment, switch to the Design Options tab and change its background color to a unaccented grey .
We could use Text Block elements to display the review. however, to try something different, let ‘s use Message Box elements alternatively. The primary dispute between the two is that a message box can display a large picture beside its text. additionally, message boxes come with more pre-defined styles and colors.
Add the beginning message corner inside the first column. In the Message Box Settings dialogue, set the Style to 3D and choose the icon you want to display. then type in the inspection text using the text editor program as usual .
Message Box Settings dialogMessage Box Settings dialogMessage Box Settings dialog For the other two reviews, you do n’t have to create the message boxes from rub. alternatively, use the Copy button to create two copies of the first message box. After you change their text contents, you can merely drag and drop them into the second and third gear 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 case, you could try sending them the first chapter of the bible as an e-mail for free. Or you could invite them to subscribe to your newsletter and give them a chance to win the reserve. Whatever approach you choose, you will need a kind to get the visitor ‘s reach information .
WPBakery Page Builder is compatible with most modern shape builder plugins. In this tutorial, we ‘ll be using the unblock WPForms plugin, which has over 2 million active users, to create our imprint. To install it, go to the admin splashboard 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 facility ‘s complete, press the Activate button to start using the plugin .
To keep things childlike, let ‘s create a form that accepts only the visitor ‘s appoint and e-mail address. indeed go to WPForms > Add New. In the form initiation sorcerer, give a name to the mannequin and select the Blank Form template .
Form setupForm setupForm setup In the future 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 shape is fix, 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 thus, go back to the front-end editor program of WPBakery Page Builder and add a third gear Row component at the bottom of the page. Inside it, add a Text Block element .
In the Text Block Settings dialogue, first add some text that explains to your visitors why they should fill in the imprint, and then type in the shortcode of the shape. After you press the Save Changes clitoris, 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 bring foliate. You besides 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 promptly. The follow article points you to the most matter to WPBakery addons we ‘ve found :

Leave a Reply

Your email address will not be published.