Divider element is used purely for design purposes. It can be used as a separator between contents or to highlight a
To use this element, please follow this steps:
- After adding a Section and Column, click the Plus icon to open the available elements.
- Click Divider and it will be added to your page and its settings window will automatically open so you can start configuring it.
On it's Settings pop-up you will find two tabs, General and Advanced. On each tab you will find the different options available to modify and customize the element.
- Divider - Basics settings for the Divider.
- Type - Here you can choose between the two different types of Dividers avaliable, Border or Image.
- Alignment - You can set the alignment for the divider, you can place it to the Left, Center or Right of the column.
- Border - If the Divider is set to border, this settings will be avaliable.
- Style - Use this setting to define the type of border you want for the Divider, there are four options: Solid, Double, Dotted and Dashed.
- Weight - You can easily set the weight of the divider by dragging the selector left/right, or you can directly input the value you want on the number field. The higher the value, the thicker the divider.
- Color - Select the color for the Divider.
- Width - You can easily set the width of the divider by dragging the selector left/right, or you can directly input the value you want on the number field.
- Gap - Use this setting to set the distance bewteen the divider and the content above and below it.
- Image - If the Divider is set to image, this settings will be avaliable.
- Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab, an Icon on the Icons tab or download an image from Unsplash on the Unsplash tab.
- Alt Text - If a browser is not capable of loading images, the Alternate Text will show instead. Also used for accesibility purposes.
As it's name says, here you can find the Advanced settings for the element. You can choose to edit them or leave them the way they are depending on your needs.
- Element Style - Here you will find the settings for Margin, Padding and Z-Index values of the element.
- Margin - Margins allow you to add space around the element, outside of its container.
- Padding - Paddings allow you to add space around the element, inside of its container.
- Z-Index - When two items overlap, the Z-Index value control which one appears on top of the other. An element with a Z-Index of 0 will appear behind an element with a Z-Index of 1.
- Background - Here you will be able to configure the Background for the element.
- Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
- Background Type - Here you can select if you want a solid background or a gradient background.
- Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
- Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
- Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
- Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
- End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
- Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
- Border & Box Shadow - You wil be able to configure Borders and Shadows for the element.
- Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different borders and shadows for each state.
- Border Type - Use this setting to define the type of border you want for the element, there are five options: None, Solid, Double, Dotted and Dashed.
- Border Width - If a Border Type other than None is selected, this option will appear so you can configure the width of the border line for the element.
- Border Radius - Use this option to set the radius of the corners to give them a rounded look.
- Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.
- Animation - If you want to give your element movement, here is the place to do it.
- Entrance Animation - Select the animation you want from the options avaliable on the dropdown.
- Animation Repeat - You can enable this option if you want the animation to repeat everytime the element is visible on the screen. The default value is No, which only plays the animation the first time the element is viewed.
- Animation Delay - You can set a delay from the moment the element is on the screen to the moment the animation starts. Specially useful if you want to create a cascading effect.
- Custom CSS (PRO Only) - If you require a bit more customization, you can add your custom CSS here.
- CSS Code - You can write your own CSS code here that will affect the element. No style tags required.
- Identifier - Here you can find and customize the unique information for the element.
- CSS ID - The unique identifier assigned to the element. You can change it, specially to make it easier to work with anchor links, but it always has to be unique to avoid issues.
- CSS Class - If you would like to write CSS code on an external CSS file to customize the element, you can add an specific CSS Class to identify it so the changes are only applied to the element with the class.
- Access Control - You will find all the User Groups you have configured on Joomla here. This option will allow you to configure who can view and interact with the access and with what permissions to the page.