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.
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.
Once you have Visual Composer installed, you will see these blue buttons on your pages in the WordPress admin area.
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.
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:
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.
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.
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.
You can drag the elements by hovering over the element until you see the cross arrow and hold down the mouse and drag.
Now drag the element into any of the rows or columns for seamless web page creation.
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.
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’.
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.
Click save and then reload your page in another tab or window to see the results.
Here are the results of our example above:
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.
Here is how you do it.
In your WordPress admin area, hover over the WPBakery Page Builder plugin and then choose 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:
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.
And that’s it! Now, it will show your custom grid and you can even keep editing your grid until you are happy.