The Advanced Columns block gives you a powerful, flexible column system to build custom, full-page layouts for your posts and pages. You can customize the number of columns, as well as the layout for each column, using the easy customization options. This block also includes options to customize the colors, margins, paddings, responsiveness, and more.
Before getting started, watch the video (below) where we create a column layout and show you what’s possible with this amazing block.
Table of Contents:
Column wrapper settings
Before adding content to the individual columns, you can decide how you’d like the area around the columns (the column wrapper) to appear. The available settings are described below.
Select the number of columns
After adding the block to the post or page, you can now select the number of columns to add inside the wrapper.
Click on the image that represents the number of columns (1-6) you’d like to add.
Click image to enlarge
Select the column layout
If you are adding 2, 3, or 4 columns, you can choose how the columns are displayed. In the example below, we’ve added 3 columns, so there are now 4 different layouts to choose from.
Note: There are no column layout options when using 1, 5, or 6 columns.
Click on the image that represents the column layout you’d like to use.
Click image to enlarge
Configure the column wrapper settings
Now that you’ve added the columns to the post or page, you can begin to configure the settings for the column wrapper – the outside container that wraps around, or holds, the individual columns.
First, you can choose its alignment (Align Center, Wide Width, or Full Width), as shown in the example below. This setting determines whether the wrapper is displayed in the center of the page or stretches all the way to the left and right edges of the page.
Click image to enlarge
Next, you can click each of the options in the inspector sidebar to configure all the settings for the column wrapper as shown and described below.
- General Settings
- Margin and Padding Settings
- Color Settings
- Background Image Settings
- Advanced Settings
Click image to enlarge
General settings
Click image to enlarge
- Column Count: Adjust the number of columns to be displayed. Important Note: Changing the column count after you’ve added content to the columns can cause loss of content.
- Column Layout: Adjust the layout of your columns. Your content will remain intact in its respective columns and the layout will shift based on the layout you choose.
- Column Gap: Change the width of the gutter (or space) between your columns.
- Column Inner Max Width (px): Choose the width of the content inside the column wrapper. This will allow the wrapper (and background, if applicable) to stretch to the full width of the page while restricting the content inside the container to the selected width.
- Responsive Columns: Enable smart stacking of columns on tablets and mobile devices.
Margin and Padding settings
Click image to enlarge
- Margin Unit: The margin refers to the amount of space displayed around the outside edges of the wrapper. Decide whether the values you input for the wrapper’s top and bottom margins will be measured in pixels, percent, or em units.
- Sync Margin: When this option is enabled, the top and bottom margins will be automatically the same. When you manually adjust the values, both values will change at the same time.
- Margin Top/Bottom: Use the slider or enter the desired number to set the value for the margins.
- Padding Unit: The padding refers to the amount of space displayed around the inside edges of the wrapper. Decide whether the values you input for the wrapper’s padding will be measured in pixels, percent, or em units.
- Sync Padding: When this option is enabled, the top, right, bottom, and left padding will be automatically the same. When you manually adjust the values, all the values will change at the same time.
- Padding Top/Right/Bottom/Left: Use the slider or enter the desired number to set the value for the padding.
Color settings
Click image to enlarge
- Background Color: Change the background color of the column wrapper.
- Text Color: Change the color of the text in the column wrapper.
Background Image settings
Click image to enlarge
- Select Image: Click the Select Image button to select an image from your media library or to upload a new one. If you add a background image here, it will replace the background color (set in the Color section above) of the column wrapper.
- Focal Point: The focal point determines which part of the image is most important or the area that you want to highlight. Click and drag the circle indicator that appears on the image (shown in the image above) until it’s at the desired focal point. Or you can enter an exact position in the next setting. This option will only appear after selecting an image.
- Horizontal/Vertical pos.: If you’d rather use an exact focal point (instead of clicking and dragging the circle as described above), enter the horizontal and vertical position percentage values here. This option will only appear after selecting an image.
- Image Opacity: Adjust the opacity (or transparency) of the background image. The lower the number, the more transparent the image will be. This setting makes it easier to read text if the background image has a lot of busy detail on it.This option will only appear after selecting an image.
- Fixed Background: Enable this option if you don’t want the background image to scroll with the page. In other words, when this option is enabled, the background image will remain fixed into one place while the rest of the page scrolls.This option will only appear after selecting an image.
- Image Display: Choose how the background image will be displayed. This option will only appear after selecting an image. You can choose from the following 3 options:
- Auto: The background image is displayed in its original size. When an image that’s larger than the display area is added, only a portion of the image will show.
- Cover: The background image is scaled to be as large as possible so it covers the entire container without stretching the image. The image may be cropped either vertically or horizontally so that no empty space remains.
- Contain: The background image is scaled to be as large as possible without cropping or stretching the image. The image will be fully visible.
Advanced settings
Click image to enlarge
- Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the column wrapper. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.
Individual column settings
Now that all the settings for the column wrapper have been set, you are ready to configure the settings for the individual columns that are inside the wrapper.
Click image to enlarge
- Margin and Padding Settings: The same margin and padding settings for the column wrapper (explained above) can be configured for each individual column.
- Color Settings: Here you can change the background color and text color for each individual column.
- Background Image Settings: You can add a background image (explained above) that will replace the background color of each individual column.
- Advanced Settings: You can add one or more CSS class to customize the appearance of an individual column. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.
- Vertical Alignment: When an individual column is selected, the toolbar will display vertical alignment options that allow you to vertically align the column to the top, center, or bottom of the wrapper. This is helpful when you want your column content to be vertically aligned with each other.