The design tab gives you control over the design aspect of that column including background, color, width, spacing, typography and other settings. Let’s go over these settings one by one.
In the Basic tab we have the following options:
- Custom ID- Give the column a custom ID, You can write custom CSS based on this ID.
- Custom Class- Add a custom class to your column and you can also write CSS based on this class.
- Z-index- This property specifies the stack order of the columns. A column with greater z-index/stack order is always in front of the other column with a lower z-index/stack order.
In Background tab we have four different categories of the background to choose from as None, Color, Image, Video & Gradient.
- None- No background is set.
- Color- Choose a background color for the column.
- Image- Set a background image to the column, you can also add background color for that image.
- Video- Choose background video for the column.
- Gradient- Set the column background as gradient by clicking on the edit icon.
If you choose the background as Image or Video then you will be open to Background Overlay options tab, where one can set an overlay color or an overlay image and even set its opacity.
In the Border tab we have the options as:
- Border Type- Select the border for the column among None, Solid, Double, Dotted or Dashed. By default its set to None.
- Border Width- After choosing the border type set the weight/depth of the border
- Border Radius- Border radius will give the column rounded edges.
- Box Shadow- Add background shadow to the column.
In Spacing tab we have:
- Margin- Set the margin for the column with respect to the other columns.
- Padding- Adjust the spacing for the columns.
With Typography we have the options as:
- Heading color- Set the color for all the headings within the column all at once.
- Text Color- Set the color for all the content within a column.
- Link Color- Set the color for all the links within a column.
- Link Hover Color- Set the color for all the links on hover in a column.
- Text Align- Set the text alignment of all the elements within a column all at once.
Last would be the custom CSS field that let’s you write custom CSS specifically for this column.
