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.
- 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)
Click on the below icon to configure parent block settings.
%20(1).png?alt=media&token=f82db8c5-2beb-4371-b8d4-a06a53989403)
- 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 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)
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 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)
Click on a single column to get the settings for the child block.
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 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)
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)
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.
%20(1).png?alt=media&token=e6f6e3e6-c2f9-4c22-baa3-a642baf0bd5f)
Last modified 2yr ago