These are some of the advance level settings available for an element, from how to who should see the element, all these changes can easily be done under the advance tab. Lets get into the detail of the options available here.
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.
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 the Responsive tab one can choose at which level the element be visible. We can hide the element on either Desktop or Tablets or even a Mobile as per the requirement.
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 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.
In the Animation tab one can set the animation of that element. It has the following sub options:
- Animation- Choose the animation of the element.
- Animation Speed- Set the speed of the animation from Slow, Slower to Normal to Fast, Faster.
- Animation Delay- Set after how long the element animation will work after a user open the page.
- Infinite Loop- Enabling this will keep the set animation running at all times.
Next is the Position tab that has Default, Relative, Absolute & Fixed positions defined for setting the element’s position with respect to others.
In ACL Control tab one can manage who can see that element and who not. It has a dynamic list based on the groups available in Joomla’s user manager.
Last would be the custom CSS field that let’s you write custom CSS specifically for this element.
Next we have the Conditional Display tab where you can set restrictions on who all can view the element and who not. For more info read the article
Last is the Info tab that let’s you see the ID of the element in case you want to write any CSS specific to that element. Also which element type it is.
And now the Admin Label has also been moved here where you can give the element a name of your choice for clear identification in the page layout.
