Separator Element
The Separator Element draws a horizontal divider between pieces of content. You can choose a single or double line, solid, dashed or dotted, a soft shadow or a wavy line, and place an icon in the middle of it. Width, thickness, color and alignment are all adjustable, so the line can be a subtle hint or a clear break.
With the style set to No Style it draws nothing and only keeps its margins, so it also works as a simple spacer when you need extra room between two elements. Its default style comes from Global Options, so separators across the whole site can share one look and be changed together.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Separator Element
Add the Separator Element to any column and choose a Style. Default uses the separator style set in Global Options, so all separators on the site change together when you update it there.
On the Design tab, set the Margin above and below, the Separator Width and the Separator Color. Alignment only has an effect when a width is set, because a full-width line has nowhere to move. Border Size controls the thickness of the line styles; the wavy style has its own Separator Height, Separator Weight and Separator Wave Size.
Choose an icon in Select Icon to split the line in two with the icon in the middle. Icon Size, Icon Color and Circled Icon appear once an icon is selected. In a flex container, Flex Grow lets the separator take up the remaining space in the column, for example to push the next element to the bottom.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Separator. Change them there to style every Separator at once.
General
| Heading | Description |
|---|---|
| Style | Choose the separator line style. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Flex Grow | Controls the amount (in parts) of the available space inside the flex column the separator should take up. If the separator is the only element in the column using flex grow, any value above 0 will let it take up all available space. Set to 0 to disable its ability to grow. |
| Margin | Spacing above and below the separator. In px, em or %, e.g. 10px. |
| Separator Width | In pixels (px or %), for example 1px, for example 50%. Leave blank for full width. |
| Separator Height | In pixels (px or %), for example 1px, for example 50%. |
| Alignment | Select the separator alignment; only works when a width is specified. |
| Border Size | In pixels. |
| Separator Weight | Controls the thickness of the wavy separator. In pixels. |
| Separator Wave Size | Controls the width of a single wave iteration. In pixels. |
| Separator Color | Controls the separator color. |
| Select Icon | Click an icon to select, click again to deselect. |
| Icon Size | In pixels. |
| Icon Color | Controls the color of the icon. Will fall back to the separator color, if no color is set here and in the Global Options. |
| Circled Icon | Choose to have a circle in separator color around the icon. |
| Circle Color | Controls the background color of the circle around the icon. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Leave Style on Default for most separators. You then change the look of every separator in one place, in Global Options.
- Use No Style with a top or bottom margin when you only need space. It is quicker than adding empty text or padding to other elements.
- If the icon has no color of its own, it takes the Separator Color.
- A separator is decoration. If the content changes topic, a heading from the Title Element tells readers and screen readers more than a line does.
- Element Sticky Visibility hides the separator in a sticky header when it only makes sense in the normal state, or the other way round.