In this video we’re going to explore another page builder. The WP Bakery Visual Composer. The visual composer is super popular. One of the main reasons it’s so popular is because it comes bundled with many WordPress premium themes.
The version of the visual composer plug-in that comes with your premium theme is the free version so you don’t get many of the features.
Every time you download your latest theme you should be getting a new release of the visual composer as well.
Now, once you have installed your premium theme or you’ve installed your free version of the the visual composer plug-in. We can start building pages.
Building page layouts with columns in visual composer
One of my favourite features about the visual composer is the columns.
Create layouts and then add content into the layout boxes. When adding images into the columns you can choose from predefined image sizes.
You should have:
- thumbnail
- Medium
- Large
- and full size.
All the column layouts you create with the visual composer are automatically responsive. Column layouts are laid out horizontally on large desktop devices and then stack vertically when scaled down and viewed on smaller devices.
Why use visual composer
I think the success of this page builder can be contributed to the fact that it gives you such high level control over all the element settings. For instance. If I wanted to add a button to the page. It gives you quite a lot of options for configuring this button. I am able to configure the color, the hover colors, color of the text, the styling of the button and button icon as well.
Fast page building.
Another awesome feature of the visual composer is the speed in which you can build pages. Using plugins such as the duplicate posts plug-in or even simply using the inbuilt duplication features of the visual composer to duplicate existing row layouts is fast and easy and is pretty well suited to web development practices.
The only issue is that you fall into the trap of repeating yourself. Cloning the modules also clones the modules individual settings. Which is a problem if you decide to clone a bunch of elements and then you decide they need to change styling settings. Then you need to go back and adjust the setting for each individual element. They are not globally adjustable by default.
Using css to fix issues with visual composer limitations.
I find that adding a simple CSS class to your visual composer module, and then styling the module in CSS is a much better approach for a developer who knows how to code in CSS. This allows for much better control to style the modules globally rather than individually.
Background Styles
Styling the backgrounds of visual composer content rows is a key part of the page builder. A visual composer makes it easy to set background images or flat colour. Allowing you to be quite creative with your visual composer content Rows.
Setting full width panels
Set your rows to be full width content or restricted content area. Mix it up to create visually interesting pages.
Saving reusable components with visual composer.
Once you’re finished creating your content component you have the ability to save it as a reusable component. This means you can add this saved component to any page a new website. Although you can add these reusable components to any page, they are not true global content modules. So making a change on one page will not update the global content block on another page.
Copy Visual composer content from one page to another
The best way to do this is to copy the source code from the classic editor on one page to the classic editor on another page.
Conclusion
The visual composer is a very powerful plugin especially with the cloning features. cloning components and reusing components on different pages and being able to copy all the code from one page to another.
We did fall into a little bit of a trap where were we were configuring individual elements and that was becoming quite repetitive and taking a bit of time but it was it is a really fast builder and it’s really quick to throw pages together.
I’d still choose Gutenberg over visual composer because gutenberg is native and it’s made by WordPress and even in a short sort of 20 minute demonstration of the visual composer we did find bugs we’ve found some features that should have been built in but just
were not.
Conclusion
The visual composer produces code on the front and that is way too bulky for my liking and it’s all too easy to fall into the trap of repetitive development. The visual composer is good for people that have no interest in learning to code CSS. But for a developer who like to code, working in the visual composer area is not much fun.