The design tab gives you control over the design aspect of the element 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 element a custom ID. Only in alphabets no numeric IDs.
- Custom Class- One can easily add a custom CSS class while writing a CSS code.
- Z-index- This property specifies the stack order of an element. Element with greater z-index/stack order is always in front of the other element with a lower z-index/stack order.
Under Width tab we can choose the size of the element from Default, Inline(Natural Size), Inline(Auto Size) and Custom where one can choose the width of the element.
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 element.
- Image- Set a background image to the element you can also add background color for that image.
- Video- Choose the video for the background for the element.
- Gradient- Set the element 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 element 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 element rounded corners.
- Box Shadow- Add background shadow to the element.
In Spacing tab we have:
- Margin- Set the margin for the element with respect to the other elements.
- Padding- Adjust the spacing for the elements.
With Typography we have the options as:
- Heading color- Set the color for all the headings within the element all at once.
- Text Color- Set the color for all the content within the element.
- Link Color- Set the color for all the links within the element.
- Link Hover Color- Set the color for all the links on hover within the element.
- Text Align- Set the text alignment with the element all at once.
Next is the Position tab that has Default, Relative, Absolute & Fixed positions defined for setting the element’s position with respect to others.
Last would be the custom CSS field that let’s you write custom CSS specifically for this element.