Times, when WordPress was just a blogging system, has ended. Now you can find many plugins that extend the capabilities of this platform with completely new features. One of such plugins is WPBakery Page Builder (formerly Visual Composer). After a long time of working with it, I want to share with you some advanced techniques.
Advanced tricks in Visual Composer – for who?
Visual Composer despite its undoubted advantages also has one big issue, which is difficult to master by less “technical” users. To learn the capabilities of this plugin in a good degree you have to dig through a ton of options which for some people may just be impossible.
There is also another group of users who have learned Visual Composer very well but some questions still remain unanswered. This guide is for such people and it won’t teach you the basics but I will focus on some limitations, which are not well described in the official documentation.
1. How to hide a ROW in Visual Composer for mobile?
Hannah asked this question on our support forum:
I’m trying to hide a row on mobile view but can only find the option to hide columns. Is it possible to hide a full row?
It is a header row with an image set to full width in the background, but this image is not resizing on mobile so I’m getting a really weird crop.
My solution was to hide the row and add another image which is only visible on mobile, but open to other ideas if you have any.
In short: She wanted to create two versions of one similar ROW and hide one version on a desktop and second on a mobile. (Maybe that was not the exact question, but I just assumed that it had to be 😉 )
Yes, there is no such option in the Visual Composer, I had to find the solution.
After a few minutes of investigation, I decided to use only columns to simulate hiding things on different resolutions.
Let’s dive into solution!
1.1 ROW without settings
Create a ROW and don’t add any settings to it like backgrounds, paddings or margins because this ROW will work only as a container for columns, columns with different settings.
Add your content to a first column. In my case, I added the Custom Heading.
1.2 The First Column on desktop
Now you need to edit the first column. Go to the settings, add your background, paddings and finally go to the responsive tab:
1.3 The Second Column on mobile
Click on the + icons and create the second column in the same ROW:
1.4 The Second Column with different content or settings
Now it’s time to decide what we want to show on mobiles. First of all, go to the responsive settings and mark the first two checkboxes (it will hide this column on a desktop).
What can you do now?
- You can add different content for a mobile column or just content with different settings like smaller font size or color.
- You can add different settings for a mobile column like a background, margins, paddings and borders.
With these options, you have bigger control on your content in a mobile and desktop resolutions.
2. ROW Layouts in Visual Composer – more control over different widths
After years of working on themes and helping our clients, I have come to the conclusion that I need more control over the columns.
Let’s face the truth – ROW layouts sucks! Yes, the default ones and yes, you can do it right but you must dive into custom layouts and make it from scratch. Let’s begin.
2.1 Choose default layout and change responsive options
In my example, I used a more complex example. Let’s start with the default (1/4 + 4/6 + 1/6) layout. I added content only to the middle column (4/6) and both other columns were only to simulate nice margins.
On high resolution, it looked pretty nice, but unfortunately, on the lower resolution it was not so good:
2.2 Remember! Start from 1/1 width and change only the Responsiveness sizes
This is the most important part because you need to change the approach to creating columns. Always start by changing the width of the column to 100% and then go to the Responsiveness widths.
Take a look on the screen below. You have to edit two external columns and give them the same responsive settings.
Next, go to the Responsive Options of the middle column and these settings:
Now your content should look much better on lower resolutions.
In these examples, I wanted to show you that it is worth experimenting and looking for alternative ways to solve some of the Visual Composer limitations.
This is it for now with advanced tricks in Visual Composer. See you soon! 🙂