Columns are a great way to display data in separate manageable sections. UAG brings a flexible Advanced Columns block that acts as an outer wrapper and allows adding any Gutenberg block within it. This block provides outer main section and number of inner columns.
You can add any Gutenberg block within column block. Have a look at the demo here.
Key Features –
- One parent column that will act as an outer most single wrapper
- Option to choose the number of inner columns (maximum 6 )
- Adjust the width for every column
- Separate Background and spacing options for outer and inner columns
- Shape Dividers for outer column
- Responsive support
One parent column that will act as an outer most single wrapper
Advanced Columns block provide outer main wrapper that acts as a row. It allows adding number of inner columns. Below are advantages that outer wrapper adds –
- Option to select the number of inner columns (maximum 6 )
- Container width – Inner columns container width
- Column Gap – It will add padding for each column
- Spacing – Padding and Margin for outer wrapper
- Background – Background can be set as Color, Gradient, Image or Video.
- Shape Dividers and Border
Adjust the width for every column
Every column has a setting to adjust the column width. Once you set a number of column from the outer wrapper adjust the width from individual column.
Separate Background and spacing options for outer and inner columns
Outer as well inner columns will offer separate options for padding, margin and background.
Shape Dividers for outer column
This is the exciting feature of Advanced Columns block. It provides shape dividers for outer wrapper column.
- Dividers can be added to
top as well asbottom of the column - Different shape dividers are available along with color, height etc settings
Best way to use Advanced Columns block
This block is very flexible and opens a new opportunities to achieve complex designs in the page. Below is the recommended way to use this block –
- Select
a Advanced Columns block from UAG Blocks list - From the outer column settings. select number of columns
- Set up outer column with background image, spacing, shape dividers and other options
- Edit each column and manage its width, background, spacing etc
- You can user UAG Section block within each column to have more control over the content. Section itself acts as a wrapper and provides background and spacing options.