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 #
- 1.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.
- 2.By default, you’ll get two columns.
%20(1).png?alt=media&token=31f2429f-981a-4850-a392-78a065e4688b)
How To Configure Accordion Block #
Click on the below icon to configure parent block settings.
%20(1).png?alt=media&token=f82db8c5-2beb-4371-b8d4-a06a53989403)
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.
%20(1).png?alt=media&token=33063596-44c6-45ec-b537-5c9dcc8fb2b6)
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.
%20(1).png?alt=media&token=ff5bb58d-d0a4-403c-a924-d4edd8b2db65)
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
%20(1).png?alt=media&token=262bcab4-2211-46f0-94e6-f8d76645b779)
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.
%20(1).png?alt=media&token=274c0127-6980-48c6-bfc9-baaed822fd51)
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.
%20(1).png?alt=media&token=97b66ef9-6ff3-4293-949f-d4cd35dbbee9)
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.
%20(1).png?alt=media&token=abe4c565-9c42-4fb9-a94a-3d6e5c141076)
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
%20(1).png?alt=media&token=2ff126c0-a8d0-42ea-b324-1509d1da2328)
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.
