/ Documentation /Blocks/Advanced Columns

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.
Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.