How to Create Landing Page with Visual Composer

Landing pages are the ultimate solution for increasing sales while also lowering costs per action. Its purpose is to lead users into making your desired actions by subscribing, booking, pre-ordering, learning more, or starting a free trial first.

Landing pages are the ultimate solution for increasing sales while also lowering costs per action. Its purpose is to lead users into making your desired actions by subscribing, booking, pre-ordering, learning more, or starting a free trial first. By offering free attributes we nurture the visitor into converting to a customer.

We will go through the process of creating a landing page altogether. For this purpose, we will use the free Visual Composer website builder features

What is the Visual Composer plugin?

Visual Composer is a React-based drag and drop website builder for WordPress that offers a wide range of features. These include multiple background options (gradient, slideshow, carousel, zoom in/out, and video), simple parallax effects, and element design options. Offering all you could need for creating an eye-catching landing page.

Plus, what you see is what you get – the intuitive interface betters the user experience. Providing full control for non-tech-savvy users due to no coding requirements yet giving the option of customization via API. Here are some features of the plugin:

  • Content Elements: the building blocks of Visual Composer. With 30 content elements available in the free version and over 300 in the premium to choose from.
  • Compatibility: by supporting the leading third-party WordPress plugins, Visual Composer allows building a website to cater to even the most specific needs. Some of the most popular supported plugins are WooCommerce, Yoast SEO, Gutenberg, and Gravity Forms.
  • Insights: by in-depth analysis of your site, Insights offer tips on improving your site’s speed, SEO ranking & performance.
  • Theme Integration: integratable with any WordPress theme, available both in the free and premium version. 
  • Automatic Responsiveness: as compatibility to different device types is a core web vital, Visual Composer comes with built-in responsiveness. Meaning, you don’t have to worry if your website looks good on mobile, tablet, or desktop individually.

Visual Composer vs WPBakery

Visual Composer is the next-generation website builder, not to be confused with WPBakery Page Builder (formerly known as Visual Composer Page Builder). These plugins both can drag and drop elements that ultimately make a website. Visual Composer differs in performance, functionality, and no shortcodes

In comparison to the WPBakery addons, the Visual Composer Hub is one of the Visual Composer’s biggest assets. Keeping all the elements, templates, and addons in one place gives the option to download only the assets you need. As a result, this allows designing a light, fast and clean website

Visual Composer Website Builder VS WPBakery Page Builder

How to install the plugin?

Visual Composer offers a free and premium version of the plugin that you can download from the Visual Composer official site (automatically or manually) or the WordPress plugin repository. 

The installation process is just like with any other plugin. Hence, if you are not familiar with the plugin installation, you may follow a step-by-step guide below.

To auto-install Visual Composer on your WordPress site, follow these steps:

  1. Go to ;
  2. Click on “Getting Started”;
  3. Enter your email address and click on “Continue”;
  4. For installation, choose the Free version and click on “Free Download”;
  5. Enter your site URL and click on “Install Visual Composer” 
  6. Click on “Click to Install” and finish the installation in your WordPress admin panel.

Creating a landing page with Visual Composer

After you’ve downloaded, installed, and activated the plugin, now you can start building your landing pages. If you’re a visual learner, you’re in the right place. Here is a guided video tutorial for creating a simple landing page:

How to Create a Landing Page in WordPress for Free with Visual Composer

Note, that If you require something more complex, like creating a custom header, footer, sidebar, popups, or have compatibility with certain plugins, such as WooCommerce, MailChimp, or contact forms, you will need the premium version. In these steps, we’ll show you how to create a landing page by using a free, pre-set template:

Add New with Visual Composer

visual composer add new

Let’s start by creating a new page. To do so, go to your WordPress dashboard and select Pages, then Add New with Visual Composer to start creating your landing page.

visual composer settings

You will be redirected to the frontend editor. Now, it’s time to go to settings in the sidebar and select the Title, Permalink, and Layout of your ​​landing page. Also, you can change or add these settings later on.

Landing page template – Visual Composer Hub

In this step, let’s go to the Visual Composer Hub, located in the lower-left corner of the editor. After you’ve opened the Hub, hover to Templates and select Free from the dropdown. This will list all the free templates available, as shown in the image below.

visual composer free templates

Note: While the free version offers basic features, the full version offers over 500+ elements, templates, and addons, starting as low as $49/year for a single website plan.

After you have selected a landing page template (for example, we’ve chosen the Simple Product Page template) start building and customizing!

Customise with Visual Composer

visual composer landing page four

In this step, we can edit each block as we wish. For example, right-click on the element you wish to change and select Edit. This will open the sidebar editing options for this element. From here, you can change the size, positioning, or switch the element out for a new one.

Responsive Layout

For example, here we can customize the row layout, fit, stacking, and add custom responsiveness settings for different device types (in case you need something specific, otherwise the editor adjusts rows and columns automatically).

visual composer editing

In the sidebar editor, scrolling even further down you will find the Design Options (otherwise known as the “onion controls”). You can customize the radius, margin, border, and padding for any row, column, or element with these options.

visual composer design options

Create form with Simple Contact Form

Another great practice for converting visitors into potential customers is to add a contact form. You can select from a variety of contact forms that fit your style and needs. Custom forms are great if the visitors are looking for support, want to subscribe for newsletters, or receive special offers because, in exchange, you get new leads! You can find these in the Visual Composer Hub, by searching ‘Form’ or by typing the specific name of a plugin. For example, the Simple Contact Form element doesn’t require an additional plugin.

visual composer forms

Note: Although the plugin is free, some additional add-ons, like contact forms, acquire the premium version of Visual Composer. We would recommend purchasing the full version for limitless options

Create page layout, design, and call-to-action element with Visual Composer

visual composer landing page

In the final result, we’ve changed the background color (you can also add an image or parallax effects for the background). Also, switched up the product image, description, and title for the button. But remember that you can create any type of layout, design, and call-to-action element you intend on your landing page with the Visual Composer Website Builder.

Better SEO with Content Insights tool

insights tool visual composer

Visual Composer Insights is an in-built assistant to perform a qualitative and quantitative analysis of your WordPress website content. Insights analyze your page by showing if your current content is optimized to perform and rank in the best way possible. With it, you can improve the quality, performance, and SEO ranking of your page before even publishing it. 

Final note: Make sure you adjust your content to the Insights tool suggestions ​​ . This will make your page rank higher and perform better!


Visual Composer is a WordPress plugin that helps you create a full website with ease. Thanks to the design freedom, powerful features, and insights the plugin offers, you can create anything from a portfolio, a blog to an online store (possibilities are endless).

Visual Composer has everything to fit even the most specific needs! The Visual Composer Hub alone offers hundreds of elements, templates, and addons. It’s worth mentioning that Visual Composer offers the most comprehensive compatibility with supported plugins in the WordPress world. 

Using the plugin guarantees that your visitors will convert into customers or leads, return to your website, and have a pleasant experience with the landing pages you create using the Visual Composer website builder.

Photo by Hal Gatewood on Unsplash