Each row is build with columns/grids that you choose from the grid popup. They form the main layout of how and where the elements will be placed within a section, but there is a limit to the number of columns you can add within a row. Maximum size of the column that can be added within a row is 12 and the sum of the number of columns should always be equal to 12 only neither less or more.
The Column settings can be accessed by clicking on the settings icon in purple. To add a new column you need to choose the grid from the Row level settings. You can add any number of elements within a column.
Here’s a glimpse of what each of the icons means at the Column level:
- This icon is used to move the column anywhere throughout the layout manager.
- This icon will open up the column settings popup options where you can easily customize your column level settings.
- This icon is used to delete a particular column.
- This icon will help to enable/disable a particular column at backend that will not be shown at frontend.
- This icon is used to add a new element in that column.
After clicking on the Column Settings icon, you will open up to the following set of options.
Here again we have three different tabs General, Design & Advanced. We’ll describe what each of the option under the General tab, let’s get through it.
Here we only have the Layout tab, we have the options as:-
- HTML Tag- Choose under which tag the section will be. By default it comes under Default(Div) tag.
- Content Position(Vertical)- Align the content to the correct position in vertical fashion, among Inherit, Top(Start), Middle(Center), Bottom(End), Around & Between.
- Content Position(Horizontal)- Align the content to the correct position in horizontal fashion, among Inherit, Top(Start), Middle(Center), Bottom(End), Around & Between.
- Space Between Elements- Adjust the space between the elements in a particular column.