Section Overview

Sections are used to separate the content of a page into differently styled blocks.

Basics Settings

Date Publishing Settings
Set the Start Publishing and Finish Publishing dates. This will cause the ui/Theme-Builder section to only be published for the specified time period. If you use both the Start Publishing and the Finish Publishing, the section will show up only between the beginning date and the ending date.
Start Publishing
If you only set the Start Publishing and not the Finish Publishing, Joomla! will begin displaying the ui/Theme-Builder section on the beginning publishing date given but it will never stop showing the section.
Finish Publishing
If you only set the Finish Publishing and not the Start Publishing, Joomla! will show the ui/Theme-Builder section as soon as you have turned it on and will stop showing the section once the ending publishing date has been reached.
Show
Select one of the following options to show the section for screens larger than the specified width.
Hidden
Select one of the following options to hide the section from screens larger than a specified width.
HTML Tag
Set an HTML Tag for your section.
ID
Define one or more id names for the section.
Class
Define one or more class names for the section. Separate multiple classes with spaces.

Container Settings

Section full width?
Yes or No. (Learn more)

Grid Settings

Grid: Match height
Yes or No.
Grid Gutter
The Grid component comes with a default gutter that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width.
Grid Divider
Yes or No. Choose 'Yes' to separate grid cells with lines. This option can be combined with the gutter modifiers. As soon as the grid stacks, the divider lines will become horizontal.

Title/Subtitle Settings

Title Show
When set to 'Yes', this option will enable Title and or Subtitle in front-end.
Section Title
Enter text which will display as a section title.
Title HTML Tag
Choose a HTML-Tag for the title.
Font Size
Set Title font size for this selector.
Font Weight
Set Title font weight for this selector.
Title Style
Choose a title style modifier.
Title Color
Choose a Title color.
Subtitle
Insert text which will display as a section subtitle (short description).
Subtitle HTML Tag
Choose a HTML-Tag for the subtitle.
Subtitle Font Size
Set Subtitle font size for this selector.
Subtitle Style
Choose a subtitle style modifier.
Subtitle Weight
Set subtitle font weight for this selector.
Heading Alignment
Choose a type of text alignment for title and subtitle.
Use SVG Title/Subtitle?
When set to 'Yes', this option will enable SVG Title and or Subtitle style in front-end.
Use Stroke Title?
Yes or No.
Use Stroke Subtitle?
Yes or No.

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)
Set Shapes or Video Backgrounds
Background
Choose a default background option.
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

Content align vertical?
Yes or No.
Load Components?
Yes or No.
Viewport Height
Yes or No.
Section Padding
Choose a default padding for the section.
Use Section Margin?
Choose a margin for the section.
Divider in Front?
Place the svg shape above section content.
TOP SVG Divider?
Choose a top SVG Divider.
Mirrored?
Yes or No. To mirror the top divider choose 'Yes'. Note: You cannot mirror all svg shapes.
Divider Drop Shadow Top?
Yes or No.
Use Gradient?
Yes or No.
Color
Set a SVG-Divider top fill color.
SVG Divider Top Height
Set SVG shape height in pixel.
Bottom SVG Divider?
Choose a bottom SVG Divider.
Mirrored?
Yes or No. To mirror the bottom divider choose 'Yes'. Note: You cannot mirror all svg shapes.
Divider Drop Shadow Bottom?
Yes or No.
Use Gradient?
Yes or No.
Color
Set a SVG-Divider bottom fill color.
SVG Divider Bottom Height
Set SVG shape height in pixel.
Choose a SVG File
Choose a section SVG Mask.
SVG Mask fill Color
Set a SVG-Mask fill color.
Mask repeat?
The mask-repeat property sets how mask images are repeated.
Use custom Mask Size?
Yes or No.
Choose Mask Size
The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.
Mask position
The mask-position property sets the initial position, relative to the mask position layer.
SVG Mask flip horizontally?
Yes or No.

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.
Responsive
Add a number in pixel, e.g. 640, or a breakpoint, e.g. @s, @m, @l or @xl. The parallax will be shown for the specified viewport width and larger.
Use Parallax Title Animation?
Yes or No. (Learn more)
Use Parallax Subtitle Animation?
Yes or No.
Background Image Parallax?
Yes or No.