Advanced Column

The Advanced Columns block is a great way to display data in separate manageable sections. One parent column will act as an outermost single wrapper and can contain many inner blocks. Column block allows adding any Gutenberg block within it.

Parent Block

General

  • Columns: Decide the number of columns to display.

  • Column Gap: This option allows you to adjust the space between two columns.

  • Stack On: This option allows you to stack columns on a tablet or mobile.

  • Container Width: Allow you to choose a width for the columns. You can give a custom width of your choice to the columns from here.

  • Height option: This allows you to adjust the height of the block to Normal, Half-screen, Full-screen, or custom height.

  • Horizontal Align: This option allows you to set the horizontal alignment of the block.

  • Vertical Align: This option allows you to set the vertical align of the block.

  • Z index: This option allows you to set the z index of the block.

Background

  • Background Type: This option allows you to select the background type as color, gradient, or an image. Depending on the background type selected you will get more customization options for background

  • .Opacity: This option allows you to set opacity for background.

Spacing

The Spacing tab offers options to customize the margins and paddings for the Advanced column block. These options are separate for desktop, tablet, and mobile devices. The options are –

  • Top Padding

  • Bottom Padding

  • Left Padding

  • Right Padding

  • Top Margin

  • Bottom Margin

Border

  • Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.

  • Border Width: Set a width for the border from here.

  • Border Color: You can give color to the border from here.

  • Border Radius: You can give border-radius to the box from here.

  • Box Shadow: You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.

Child Block

Layout

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 the individual column.

Background

Background Type: This option allows you to select the background type as color, gradient, or an image. Depending on the background type selected you will get more customization options for the background.

Spacing

The Spacing tab offers options to customize the margins and paddings for column blocks. These options are separate for desktop, tablet, and mobile devices. The options are –

  • Top Padding

  • Bottom Padding

  • Left Padding

  • Right Padding

  • Top Margin

  • Bottom Margin

  • Left Margin

  • Right Margin

Border

The Border tab offers options to customize the border style, border width, border color, & border radius of column block. You will also get options to customize the box shadow and hover box shadow over here.

Last updated