Advanced Columns Block
The Advanced Columns block provides you with a powerful, flexible, responsive grid system to help you quickly build out custom page designs. Each column has options for margins, paddings, colors and more to easily achieve layouts that were once difficult to do in WordPress.
To kick things off, let's create a column layout in the following video to get a feel for what's possible with this amazing block.
Add the AB Advanced Columns block to your post or page by using the block inserter button (+) or the forward slash shortcut (on a new line you can type "/" and then start typing to add blocks). You can also find the block by searching for "advanced," "columns," and "layout."
Once added, you will be presented with the option to choose how many columns you want to add, between one and six columns. If you choose two, three, or four columns, you'll have the option to choose between different layouts available for those columns. There are no additional column layouts for the one, five, or six column layouts.
After you've selected your column number and layout, your columns will be added to the page and you can start adding content and customizing the column settings.
Selecting the column wrapper and individual columns to adjust settings can be a little tricky because the WordPress block editing UI is still undergoing improvements, however, you can easily select exactly which column you want to adjust by using the Block Navigation button.
The Advanced Column block comes with settings for the column wrapper, as well as settings for the individual columns. Each set of settings is different and controls the style of the block in different ways.
Using the Block Navigation button, you can select the column wrapper by clicking AB Advanced Columns. The settings for the column wrapper will be shown in the inspector sidebar.
- Column Layout - Use the Column Layout setting to 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 between your columns.
- Column Inner Max Width - Change the width of the content inside the container wrapper. This will allow you to have your column container (and background color) stretch the full width of your page while keeping the content inside the container at a certain width.
- Center Columns in Container - Enable this option to center the columns on the page when a max-width is used.
- Responsive Columns - Enable Responsive Columns to enable smart stacking of columns on tablets and mobile devices.
- Margin and Padding - Adjust the margin and padding around your column content. Both margin and padding come with the option to select which measurement unit you would like to use in adjusting your spacing (pixels, percent, and ems). Margin and padding also both have the option to sync the range slider to adjust the values at the same time, instead of individually. This is handy if you want to quickly adjust the padding on all sides of your column.
- Color - Change the background color and text color of the column container.
Each individual column also has a set of settings that can be adjusted.
- Margin and Padding - The same margin and padding settings found in the column container can be found on each individual column.
- Color - Change the background color and text color of each individual column.
- Vertical Alignment - When an individual column is selected, the toolbar will display vertical alignment options that let you vertically align the column to the top, center, or bottom of the container. This is helpful when you want your column content to be vertically aligned together.
