Column Settings in WPBakery Page Builder

Last Updated on

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.

In this article


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

 

1
Column Border Color.  

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

2
Background 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
3
Visibility 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)
x
Note: To learn more about this option, read the Configuring the visibility for devices article.
4
Extra 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

 

1
CSS.  

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

2
Border 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.

3
Border 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
4
Border 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
5
Background.  

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
6
Box 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

 

1
Width.  

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

 

Use the set of options in this tab to select how you want the column laid out in different windows sizes. Available sizes are for:

  1. Desktop
  2. Tablet – Landscape
  3. Tablet – Portrait
  4. Mobile

For each set of width you have an option to set the Offset and Width of the column. The options available on these two settings are like the one available in the Width option in the Responsive Options Tab.

Also for each tier of widths you have a choice to hide this particular column by selecting the Hide on Device option for that specific tier.


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:

1
Set 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

2
Set 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

x
Note: To learn how to create a five column layout, read this article.

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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket