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.
How To Add The Advanced Column Block
Open a page or a post and click on the plus icon to add a new block and look for the Advanced Column block or you can search for it if it doesn’t pop up quickly for you.
By default, you'll get two columns.
How To Configure Accordion Block
Click on the below icon to configure parent block settings.
Configure 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: Allows 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 alignment 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 image. Depending on the background type selected you will get more customization options for background
Opacity: This option allows you to set the opacity for the background.
Style Parent Block
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 a border radius to the box from here.
Box Shadow: You can give box-shadow to the block with several options available for customization such as color, blur, spread, position, etc.
Configure Child Block
Click on a single column to get the settings for the child block.
Layout
Every column has a setting to adjust the column width. Once you set a number of columns 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 image. Depending on the background type selected you will get more customization options for the background.
Style Child Block
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
