Advanced Columns

Columns are a great way to display data in separate manageable sections. Spectra 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 as bottom 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 –

1. Select a Advanced Columns block from Spectra Blocks list
2. From the outer column settings. select number of columns
3. Set up outer column with background image, spacing, shape dividers and other options
4. Edit each column and manage its width, background, spacing etc
5. You can user Spectra Section block within each column to have more control over the content. Section itself acts as a wrapper and provides background and spacing options.