Create dividers to separate content and apply different styles to them.
Basics Settings
- Label
- Define a name to easily identify this element inside the Theme-Builder.
- Show
- Select one of the following options to show the element for screens larger than the specified width.
- Hidden
- Select one of the following options to hide the element from screens larger than a specified width.
- Type
- Choose a type of divider.
- Height
- Choose a box height.
- Class
- Define one or more class names for the element. Separate multiple classes with spaces.
- ID
- ID Selector for the element.
Background Settings
- Custom Background
- When set to 'Yes', you can set different background options. (Background images, different Blendmodes, Custom color)When set to 'SVG', you can use your own SVG backgrounds. (Learn more)
- Module Background
- Choose a default background color.
- Inverse Color
- Select the 'light' class to improve the visibility of objects on dark backgrounds in a light style. When using a dark style, add the 'dark' class to elements on a light background.
The 'Primary' and 'Secondary' (Background Settings) option are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add this 'Preserve color' option.
Style Settings
- Addon Padding
- Choose a padding for the component.
Animation Settings
- Scrollspy Animation
- The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.
- Background Image Parallax?
- Yes or No.