Ashraff Hathibelagal
Read Time: 8 min
WordPressWordPress PluginsVisual ComposerPage Builder
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:
- WordPress 5.0 or higher
- the latest version of WPBakery Page Builder
If you need help setting up the plugin, do refer to the following tutorial:
- Get Started With WPBakery (Formerly Visual Composer)Ashraff Hathibelagal16 Sep 2020
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 Pagestab. Then press the Add Newbutton 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 Attributessection 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 Startertheme, which is free and open source, you can select the Blank with Containertemplate.
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 Buybutton. 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 Editorbutton.
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 Settingsdialog, switch to the Design Optionstab and give a top padding of about 16 pxto the row.
Next, split the row into two columns by opening the Row Layoutdialog and selecting the second layout option.
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 Imageoption. In the dialog that pops up, upload the cover image and press the Set Imagebutton.
At this point, I suggest you use the Single Image Settingsdialog to set the Image sizeto mediumand the Image alignmentto 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 Headingelement. This element, unlike the regular Text Blockelement, allows us to use Google Fonts while styling the text.
Once the Custom Heading Settingsdialog pops up, type in the book's title in the Textfield and use the Font Familydropdown list to select the Google Font family you want.
If you think the font size is too small, you can either change it using the Font sizefield or use the Element tagfield to choose a larger heading style, such as h1.
For the description, go ahead and add a Text Blockto 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.
As the last element of the column, add a Buttonelement. 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 Styleto Modern, its Shapeto Round, and its Sizeto Large. By default, the button has a subtle, gray background. Changing its Colorto Classic Greencan make it stand out better.
You're, of course, free to experiment with all the other styles and shapes WPBakery Page Builder offers.
It's worth noting that if you want the button to be as wide as the column, you'll also have to set the Alignmentproperty to Centerand 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 Iconproperty. You'll then be able to select the icon library and icon you want.
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 anotherRowelement as a container for all the reviews. Add it right below the hero section's row and use its Row Layoutdialog to split it into three columns.
To make the reviews section appear distinct from the hero section, switch to the Design Optionstab and change its background color to a light gray.
We could use Text Blockelements to display the reviews. However, to try something different, let's use Message Boxelements 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 Settingsdialog, set the Styleto 3Dand choose the icon you want to display. Then type in the review text using the text editor as usual.
For the other two reviews, you don't have to create the message boxes from scratch. Instead, use the Copybutton 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:
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 WPFormsplugin, 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 wpformsthere and press the Install Nowbutton to begin the installation.
Once the installation's complete, press the Activatebutton 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 Formtemplate.
In the next screen, drag and drop a Namefield and an Emailfield onto the form.
The form is ready, so save it and return to the Forms Overviewpage 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 Rowelement at the bottom of the page. Inside it, add a Text Blockelement.
In the Text Block Settingsdialog, 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 Changesbutton, you should be able to look at your brand new form:
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:
- 21 Best WPBakery Page Builder (Visual Composer) Addons and Extensions of 2022Daniel Strongin21 Aug 2021
FAQs
How do you make a responsive page in WPBakery? ›
Responsive settings can be found in column param window under the tab 'Width & Responsiveness'. Within settings, it is possible to set column width and offset for default column size and also other devices by taking into account default value.
Can I use Visual Composer with WPBakery? ›As already established, WPBakery Page Builder can handle many of the functions of the Visual Composer website builder. It is used in addition to a theme and works flawlessly with any theme you choose.
How do I create a standalone landing page? ›- Select a landing page template.
- Give your landing page a name.
- Add your unique content.
- Include striking images.
- Choose a relevant domain name.
- Make sure all your links and CTAs are working.
- Complete your meta description and SEO title.
- Publish!
Overall, both Elementor and Visual Composer offer user-friendly interfaces that make it easy for users to build and customize professional-looking websites on WordPress. However, Elementor offers more flexibility and customization options, which may make it more appealing to some users.
Which is better Visual Composer or Elementor? ›Visual Composer vs Elementor verdict
Both of these plugins are awesome. Right off the bat, Elementor wins in terms of pricing because it has a free version. Now, when it comes to paid, Visual Composer is cheaper at $45 compared to $49 and has lifetime updates. Elementor only offers 1 year of updates.
"Visual Composer is the best visual builder I have tried so far and I would highly recommend it to anyone looking for such a plugin." "I loved how I could set up a page like I wanted it in a fraction of the time it would take me without using Visual Composer."
Is Elementor better than WPBakery? ›Elementor has faster and more intuitive inline editing compared to WPBakery. Also, their features are easy to handle and have an intimidating free version. Their updates and improvements are also quite regular, a number one plus point. Elementor's addons are also quickly growing and are very beneficial to users.
Is WPBakery faster than Elementor? ›After comparing the performance of these two WordPress plugins, we found that Elementor was slightly faster than WPBakery.
Which page builder is best for WordPress? ›- Brizy.
- WPBakery.
- Visual Composer.
- SeedProd.
- WP Page Builder by Themeum.
- Oxygen.
- MotoPress Content Editor.
- Live Composer.
...
How to Create a Landing Page in HTML
- Create the basic structure.
- Create a navigation bar.
- Stick the navbar to the top of the screen.
- Create a great background.
- Add some style.
What is the size of a responsive landing page? ›
What size is a landing page? The recommended landing page size is 940 – 960 pixels, which works for the majority of different screen sizes. Moreover, any landing page content within the 720-pixel height should display properly on the screen upon page load.
How do I make my WordPress site fully responsive? ›...
Creating a Responsive WordPress Web Design
- Default browser zoom.
- Fluid element widths and heights.
- Image optimization.
- Design-specific breakpoints.
- Separate responsive menus for mobile devices.
To make your WordPress site mobile-friendly, you need to:
Use a responsive WordPress theme (or create your own) Consider mobile-friendly WordPress plugins. Use mobile-friendly opt-ins. Think in terms of responsive media.
You don't need to know a line of code to build a gorgeous, fully-functioning website. With WordPress, you can create and maintain websites for yourself or your clients with minimal technical know-how. Brian Wood shows you how in Creating a Responsive Website with Wordpress.
Are landing pages static or dynamic? ›Businesses around the world utilize static landing pages to turn prospects into real, paying customers. Static landing pages are web pages that are designed, stored and delivered to the visitor in a fixed, unchanging state.
What is a dynamic landing page? ›A dynamic landing page is a page that displays different messages to different users, depending on key variables such as location or keywords. Dynamic landing pages can be optimised for organic search, however, they're largely used for PPC campaigns, in order to match ad groups and align with key search terms.
What is landing page static vs dynamic? ›A static website is one with stable content, where every user sees the exact same thing on each individual page. On the other hand, a dynamic website is one where content is pulled on-the-fly, allowing its content to change with the user.
Can WordPress be used for landing pages? ›Creating a landing page in WordPress is fairly easy when using a WordPress landing page plugin. Even if you're not a developer, you can create a high-converting landing page in WordPress and boost your website traffic and sales by using a plugin. There are several WordPress landing page plugins on the market.
Do I need a website if I have a landing page? ›Technically, you can have a landing page without a website. You can host a landing page independently of a website. So, it's easy to have one without the other.
Can I use a landing page without a website? ›A landing page can be part of a website, but you also don't need a website to have a landing page. The key difference between the two is the ability to focus your visitors' attention on the action you want them to take.
What's the difference between a landing page and a website? ›
As opposed to homepages and websites, which are designed for exploration, landing pages are customized to a specific campaign or offer and guide visitors towards a single call to action. In short, landing pages are designed for conversion.
Is Visual Composer SEO friendly? ›Visual Composer is optimized for SEO. All elements and templates are following best SEO practices in order to rank your site higher. In addition to SEO optimization, the website builder is fully compatible with Yoast - the most popular SEO plugin for WordPress.
Do professional web developers use Elementor? ›Yes, experienced web developers absolutely do use Wordpress. In my case, I use it for a couple of reasons. Depends on the job itself. Elementor is a great visual builder and is used extensively by WordPress developers.
Is Visual Composer easy-to-use? ›Visual Composer has an easy-to-use interface which means it is suitable for beginners and pros (ex. web developers and agencies) to design a website for your business or clients.
Is Elementor pro responsive? ›Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.
Is Visual Composer free? ›The Visual Composer Website Builder has two versions: Free and Premium. The Free version has the features to build a basic website. The Premium version on the other hand has a wide range of functions that can build any type of website.
Is Elementor still the best? ›Elementor is now actively used by over four million WordPress websites, which makes it the most popular WordPress page builder. It's also maintained an impressive 4.7-star rating (out of 5) on over 5,900 reviews, so most of those users are pretty happy with Elementor.
What is the difference between Visual Composer and Beaver Builder? ›The primary difference with this drag and drop editor is that all your creating happens in the frontend of your website (unlike Visual Composer, you don't have the option to edit your website from the backend). Also, just like Visual Composer, Beaver Builder's web page templates all boast responsive design.
Is Visual Composer a plugin? ›Visual Composer is an all-in-one plugin that lets you make beautiful websites from header and footer to archive page and 404 page. You can completely overwrite themes by creating custom post, page, and archive layouts in a code-free way.
What kind of interfaces does the visual composer offer? ›Visual Composer offers a visual, drag-and-drop interface to help you design your content and/or website. In the free version, it's a page builder, while the Pro version kicks things up a notch with support for theme building and a popup builder.
How do I make my WordPress content responsive? ›
...
Creating a Responsive WordPress Web Design
- Default browser zoom.
- Fluid element widths and heights.
- Image optimization.
- Design-specific breakpoints.
- Separate responsive menus for mobile devices.
Responsive web design, or RWD, is a design approach that addresses the range of devices and device sizes, enabling automatic adaption to the screen, whether the content is viewed on a tablet, phone, television, or watch. Responsive web design isn't a separate technology — it is an approach.
Is WordPress automatically responsive? ›Most modern WordPress themes are fully responsive out of the box. However, there are so many that it becomes difficult to choose one. In this article, we have hand-picked some of the best responsive WordPress themes for you to choose from.
What is the best responsive WordPress theme? ›Divi. Divi is the most popular WordPress theme and page builder by Elegant Themes. It's fully responsive and looks great on all devices. It comes with hundreds of ready-made demo layouts, landing pages, and templates to help you get started quickly.
Does WordPress Support responsive design? ›Every single WordPress.com theme is responsive. This means that no matter what theme you decide to use, your website will load exactly how you want it to on mobile, tablet, and desktop devices.
How do I create a dynamic content page in WordPress? ›- Go to your WordPress Control Panel.
- Click “Plugins”, then “Add New”
- Enter “ifso” as a search term and click “Search Plugins”
- Download and install the IfSo Dynamic Content plugin.
- Click the “Activate Plugin” link.
- On your WordPress menu under IfSo, click “Add new”
- Fill in the default content.
- Select rule.
A responsive WordPress theme smoothly adjusts its layout based on the screen size and resolution. Responsive themes offer better readability and usability on smaller screens such as smart phones. It also prevents you from creating a device specific mobile version.
What are two ways in which you can make a website responsive? ›- Set Your Media Query Ranges (Responsive Breakpoints)
- Size Layout Elements with Percentages or Create a CSS Grid Layout.
- Implement Responsive Images.
- Responsive Typography For Your Website Text.
- Test Responsiveness.
- Set the viewport. Ensure an accessible viewport.
- Size content to the viewport. Images. ...
- Use CSS media queries for responsiveness. Media queries based on viewport size. ...
- How to choose breakpoints. Pick major breakpoints by starting small, then working up. ...
- View media query breakpoints in Chrome DevTools.
Use JPGs for photos and PNGs for graphics or other images that require transparency. Use smaller PNG-8 instead of PNG-24 for graphics with a limited number of colors. To decrease the size even further, you can also reduce the number of colors, from 256 to 16.
Why are my WordPress images not responsive? ›
It means that if the screen size is larger than the image, the width of the image must not exceed the defined size (300px or 525px). If the screen is smaller than the width of the image, the image must take the full width of the screen.
How do I make my image fit responsive? ›To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.