Section Separator Element
The Section Separator Element adds a shaped edge between two sections of a page. Instead of a straight line where one background ends and the next begins, you get a triangle, a slant, curves, waves, hills, clouds, brush strokes or your own SVG shape.
It is a purely visual element. Placed at the top or bottom of a container, it makes the section look as if it flows into the next one, which gives long pages a clearer rhythm without adding extra content. Because the shapes are drawn as vector graphics, they stay sharp on every screen and scale with the width of the page.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Section Separator Element
Add the Section Separator Element to a column, usually at the very top or bottom of a container, and pick a Style. With Custom you upload your own shape in the Custom SVG File field. Set Vertical Position to decide whether the shape sits on the top edge, the bottom edge or both.
Most shapes offer a Height, and many of them a Repeat value that places the shape several times side by side; both can be set per screen size. Horizontal Position moves asymmetric shapes to the left, center or right. On the Design tab, set the Background Color: this is the color of the shape itself, so it should match the background of the neighboring section.
The Triangle style works differently from the others. It draws a small pointed notch with an optional Border and Border Color, and it can show an Icon in the notch with its own Icon Color. Options that do not apply to the chosen style are hidden automatically.
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 → Section Separator. Change them there to style every Section Separator at once.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Style | Select the type of the separator. |
| Custom SVG File | Upload your custom SVG separator. SVG file should include attribute preserveAspectRatio=”none” for best work in combination with custom height or repeat option. |
| Height | Controls the height of the separator. Enter value including any valid CSS unit, for example 200px. Leave empty for auto. |
| Repeat | Choose how many times the Separator should repeat horizontally. |
| Horizontal Position | Select the horizontal position of the separator. |
| Vertical Position | Select the vertical position of the separator. |
| Icon | Click an icon to select, click again to deselect. |
| Icon Color | Controls this setting. |
| Border | In pixels. |
| Border Color | Controls the border color. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. 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 |
|---|---|
| Margin | In pixels or percentage, for example 10px or 10%. |
| Background Color | Controls the background color of the separator style. |
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
- Give the separator the same Background Color as the section it leads into. Otherwise the shape looks like a separate band instead of a smooth transition.
- The separator stretches to the edges when it sits in a full-width container with a single 1/1 column. In narrower layouts it follows the width of its column.
- For a custom shape, use an SVG file that contains
preserveAspectRatio="none". Without it the shape keeps its proportions and will not follow a custom height or repeat. - Clouds are always drawn on one edge, so Vertical Position is not available for that style.
- Use the Margin on the Design tab to pull the separator exactly onto the edge of the container if your container has padding.