Visual Composer now includes design controls for selecting colours for the columns and rows and text boxes so that you don’t have to use css to achieve much of what is outlined below.

Giving a column in Visual Composer (by WP Bakery) is not quite a point and click option in the latest version (as of Feb 2014), but perhaps it will be in the future.

It’s not difficult though to do some neat column background colouring with a little bit of css and some understanding of how the customer css works in Visual Composer.

The following is an overview of how to do set background colours and gradients for Visual Composer columns.


Pick colours

Pick a background colour and a complimentary foreground colour for the text.

A tool I often use for this is: colorschemedesigner.com

But you can use a colour picker in photoshop or your browser or from your style guide etc.

Using the hexidecimal value for the colour, eg #FF0000 rather than simple using the colour words like ‘blue’ or ‘red’ will give you finer control over what colours you use.


Custom CSS in Visual Composer

Using the custom css button on the top right corner of the page in Visual Composer create a simple style like the following:

.columnbackground {
background-color:#2D06BE;
color:#FFD100;
padding:10px;
}


W3Schools CSS Guides

You can name the class (.columnbackground) pretty much anything, pick a name that will help you remember what it is without spaces. There is an explanation of classes here: w3schools.com/css/css_id_class.asp


Resulting column background colour

In this example you can see that the blue background is now applied to the column.


Gradient background colours

Using CSS3 we can set a gradient for the background colour.

To get a copy of the CSS required you can use a tool like designscripting.com/webtools/css3/generator to generate the CSS gradient to copy and paste into your custom css area.




Visual Composer – Column Background Color with CSS

Visual Composer – Column Background Color and Text Color with CSS

Visual Composer – Column Background Color and Text Color and Padding with CSS

Visual Composer – Column Background Gradient with CSS

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *