The design tab gives you control over the design aspect of the row in a section 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 row a custom ID. Only in alphabets no numeric IDs.
- Custom Class- One can easily add a custom CSS class and write CSS for it.
- Z-index- This property specifies the stack order of the row. Row with greater z-index/stack order is always in front of the other row 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 row.
- Image- Set a background image for the row you can also add background color for that image.
- Video- Choose the video for the background for the row.
- Gradient- Set the row background as a gradient by clicking on the editor 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 Particles Background tab we can add any number of moving particles of different shapes, sizes & moving speeds. To know more about the options available read the article.
In the Border tab we have the options as:
- Border Type- Select the border for the row 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 row rounded corners.
- Box Shadow- Add background shadow to the row.
In Spacing tab we have:
- Margin- Set the margin for the row with respect to the other rows.
- Padding- Adjust the spacing for between the rows.
With Typography we have the options as:
- Heading color- Set the color for all the headings within the row all at once.
- Text Color- Set the color for all the content within a row.
- Link Color- Set the color for all the links in a row.
- Link Hover Color- Set the color for all the links on hover in a row.
- Text Align- Set the text alignment of all the elements within a row all at once.
Last would be the custom CSS field that let’s you write a custom CSS specifically for that row.
