Sections - FAQ – ui/Theme-Builder

Section Overview

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

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 id names for the section.
Class: Define one or more class names for the section. Separate multiple classes with spaces.

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 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.

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.

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.

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.

Stephan W.04. März 2024