Building Pages with WPBakery Visual Composer in 8 Steps

building web pages with visual composer

The days of knowing how to code a website are over. There are plenty of great tools to build a website with ease and without knowing any code at all.

Drag and drop builders have become a new craze because they allow you to easily build web pages without knowing HTML or CSS.

One of the best drag and drop builders for WordPress is WPBakery’s Visual Composer plugin.

What is Visual Composer?

The Visual Composer software is a plugin for WordPress that allows you to easily build robust web pages without knowing any code at all.

visual composer logo

This plugin costs $59 a year per website and is well worth it. You also can get Visual Composer pre-installed on most WordPress themes in ThemeForest.

The intuitive plugin is lightweight, fast and easy to use. After some practice, you will be able to build web pages in minutes.

Why Use Visual Composer?

I am pretty modest but I am a really fast web developer. I can build out web pages in HTML and CSS faster than most, but I can still build pages with Visual Composer much faster.

This is why using Visual Composer is perfect for small business owners and entrepreneurs. It’s very low cost and allows you to save a lot of time having to learn how to build a website by yourself.

This easy drag and drop plugin will allow you to streamline your website creation and management.

Visual Composer Tutorial

Ok, so now that you are familiar with what Visual Composer is, let’s dive into how to use it to build web pages seamlessly.

Check out this simple tutorial on how to build pages using visual composer:

Building Pages

Once you have Visual Composer installed, you will see these blue buttons on your pages in the WordPress admin area.

visual composer backend editor

To start building with the WP Bakery Visual Composer just click the ‘Backend Editor’ button and it will switch to drag and drop mode.

Here you can add elements like rows, grids, headings, text blocks, images, blog posts and a whole lot more.

I recommend firist laying out your rows and grids and then adding elements into each. To add a new row, click the ‘Add Element’ button.

wp bakery page builder add element

You will see a large list of elements that you can use to build out your new web page. First, let add a row and I will show you how to make a grid.

When you add a new row, you will see a new grey box like this below:

visual composer row

This is the container for our row, but we want to add another row inside this row, so we can make a two-grid column. Click the big plus symbol inside the row to add an inner row.

In the inner row hover over the lines tab and here you can choose a number of different column layouts. Let’s do a simple 50/50 column layout.

Once our grids are laid out, we can start adding elements to our columns. Let’s add a heading to our left box. Click add element inside the box and then choose the ‘Custom Heading’ element.

In the Custom Heading settings, you can add your text in the field, as well as choose the heading type (h1, h2, h3, etc), text alignment and even the color.

custom heading settings

The same goes for the text block, which is another highly used element. This element allows you to add WYSIWIG text, just like the normal WordPress editor.

text block settings visual composer

When you click save, you can see your elements in the grids. To edit the elements, simply hover over the element and click the edit icon.

visual composer elements

You can drag the elements by hovering over the element until you see the cross arrow and hold down the mouse and drag.

move text block

Now drag the element into any of the rows or columns for seamless web page creation.

duplicating and moving visual composer elements

The third icon (when you hover over an element) is the duplicate icon and this allows you to easily duplicate elements for super-fast web page building. Just add an element and change the settings, then copy that element and change the text. Its a really quick way to build out web pages.

Now simply keep adding rows and elements, building out your web page with different elements in Visual Composer.

Next,  we will talk about how to style elements to match your brand, style, and colors.

Styling with Visual Composer

Next, you will probably want to style all of the elements and rows so that it gives your website some style and color.

To change the background of your entire container row, just click the edit row tab in the outermost row.

visual composer outter row

In the row settings box, choose if you want to span your row all the way across your page or in the container then chose ‘Strech row’.

row stretch visual composer

Next, Click the design options tab at the top. This is where you can edit any background colors, borders, margin, padding and border-radius.

Simply click the background ‘select color’ box and pick a color or alternatively, you can enter in a hex code including the # symbol.

Let’s make our background a light gray of #f8f8f8 and upper and lower padding of 10px so there is some space in between our rows.

design settings

Click save and then reload your page in another tab or window to see the results.

Here are the results of our example above:

visual composer example

So you can see that after some practice, you can be building web pages in a matter of minutes.

Another awesome piece of Visual Composer is the Custom Grid Builder.

Custom Grid Builder

The custom grid builder allows you to create customized grids for blog posts, pages or any other custom post types you have.

For example, on our homepage, we have a grid of our latest blog posts that is a custom grid.

wordpress seo homepage

Here is how you do it.

In your WordPress admin area, hover over the WPBakery Page Builder plugin and then choose Grid Builder.

grid builder

Click Add New to create a new custom grid in WPBakery. This layout is what each post or page in the grid will look like. Like the page builder, you can click the plus symbols and add elements llike the post title, post image, or post link.

Here is an example of a grid we built for our WordPress SEO homepage article grid:

visual composer grid builder example

Its very simple, but get the job done. To set your grid to use the new custom grid that we made, you will need to go to a page where you have a grid or want to add a grid.

In the post grid settings, click the Item Design tab and then choose the recently created grid in the dropdown.

item design custom grid builder

And that’s it! Now, it will show your custom grid and you can even keep editing your grid until you are happy.

 

 

Leave a Reply

Your email address will not be published.