In this article we will talk about Column Settings in WPBakery Page Builder. We will give detailed information about the responsive options available in column settings. For more information about WPBakery Page Builder click here.


Column Settings

You can add columns for the Row and Page Section shortcodes in WPBakery Page Builder. The width of the columns can be set proportionally by small chunks adding up to 12 count. Each Column then has separate options available which you can use to fine tune different aspects of it. You will need to click on the Pencil icon for the specific column you want to change. The following is a detailed breakdown of each option for columns in WPBakery Page Builder.

General Tab

Visual composer column settings - general tab

 

1Column Border Color.  

Use this option to set the color of the surrounding border for this particular column.

2Background Blend Modes.  

Use this option to set the blend mode you prefer for the background of this column. Available options are:

  1. None
  2. Multiply
  3. Screen
  4. Overlay
  5. Darken
  6. Lighten
  7. Soft Light
  8. Luminosity
3Visibility for Devices.  

Use this option to hide the column when viewed by devices with a certain width. Available options are:

  1. All
  2. Hidden on Phones (Screens smaller than 765px)
  3. Hidden on Tablets (Screens in the range of 768px and 1024px)
  4. Hidden on Mega Tablets (Screens in the range of 768px and 1280px)
  5. Hidden on Desktops (Screens wider than 1224px)
  6. Hidden on Mega Desktops (Screens wider than 1290px)
  7. Visible on Phones (Screens smaller than 765px)
  8. Visible on Tablets (Screens in the range of 768px and 1024px)
  9. Visible on Mega Tablets (Screens in the range of 768px and 1280px)
  10. Visible on Desktops (Screens wider than 1224px)
  11. Visible on Mega Desktops (Screens wider than 1290px)
4Extra Class Name.  

If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options > Advanced > Custom CSS.

Design Options

Visual composer column settings - design options tab

 

1CSS.  

This option provides a graphical user tool to set the Margin, Padding and Border width for this particular column.

2Border Color.  

Use this option to set the border color for the column. The Column Border Color option in General Tab will override this option if set.

3Border Style.  

Use this option to set the border style of this column. Available options are:

  1. Theme Defaults
  2. Solid
  3. Dotted
  4. Dashed
  5. None
  6. Hidden
  7. Double
  8. Groove
  9. Ridge
  10. Inset
  11. Outset
  12. Initial
  13. Inherit
4Border Radius.  

Use this option to set the border radius for this column. It will set the intensity of the curve which border corners will have. Available options are:

  1. None
  2. 1px
  3. 2px
  4. 3px
  5. 4px
  6. 5px
  7. 10px
  8. 15px
  9. 20px
  10. 25px
  11. 30px
  12. 35px
5Background.  

Use this option to set the background color and/or add a background image for the column. On this very same option you have a choice to select how you want the background image layout in the column. Available options are:

  1. Theme Defaults
  2. Cover
  3. Contain
  4. No Repeat
  5. Repeat
6Box Controls.  

Enable the Simplify Controls option if you want to have same width for all 4 sides of the column regarding the Margin, Padding or Border. The option will change the CSS options graphical user interface to different mode.

Column Settings CSS

Responsive Options

Visual composer column settings - responsive options tab

 

1Width.  

Use this option to set the default width for column in all browser window sizes. This option will be the default option for the next series of options in the Width and Responsiveness tab. The option works proportionally and you can set fractures of the whole column width which contains 12 portions. Available options are:

  1. 1 column – 1/12
  2. 2 columns – 1/6
  3. 3 columns – 1/4
  4. 4 columns – 1/3
  5. 5 columns – 5/12
  6. 6 columns – 1/2
  7. 7 columns – 7/12
  8. 8 columns – 2/3
  9. 9 columns – 3/4
  10. 10 columns – 5/6
  11. 11 columns – 11/12
  12. 12 columns – 1/1

Width and Responsiveness

Visual composer column settings - width and responsivesness tab

In this settings section you can adjust column for different screen sizes. You can control width, offset and visibility settings.
Device allows you to set different column behavior on different screen sizes:

  • Desktop – for screen sizes bigger than 1280px.
  • Tablet – Landscape – for screen sizes from 1280px to 1024px.
  • Tablet – Portrait – for screen sizes from 1024px to 800px.
  • Mobile – for screen sizes smaller than 800px.
  • Offset – allows you to set the offset for the column. You may use columns to specify the offset value. It means the amount of space to the edge of the page.
  • Width – allows you to set the different width for the column on different screen sizes to restructure the content properly.
  • Hide on device? – tick it to hide the elements on certain screen sizes.

The options available on Offset and Width settings are like the ones available in the Width option in the Responsive Options Tab.


Preventing Columns from Stacking Up on Mobile

To illustrate the usage of the responsive options in column settings we discuss a case scenario in which you want to prevent columns from stacking up on mobile which is the default behavior of responsive themes including Jupiter and The Ken.

In this case we have two columns in the default positioning of the Row and we want to have the same two columns in mobile view. Follow the steps below:

1Set the Default Responsive Options to Two Columns.  

Click on the Pencil icon of each column and go to the Responsive Options tab and set the 6 Columns – 1/2 option. This will make the columns take up half of the row each.

Column Settings Responsive Options

2Set Half of the Row Width in Mobile.  

Switch to the Width and Responsiveness tab for each column and set the Width option for Mobile view to 6 Columns – 1/2. This will force the columns to take up half the width of the row and prevent the columns from stacking up.

Column Settings Mobile

If you have any questions, please contact our support team creating a ticket via your Artbees Dashboard.