Separator Element

Last Update: March 7, 2024

The Separator Element offers highly flexible separators for your site, including seven line types, plus a No Style Separator for convenient spacing. You can also control Separator Border Size, Color, Width, Margins above and below, Alignment, and you even add icons to them. Read on for an overview of this very useful Element, or watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Separator Element

The Separator Element allows you to add styled or invisible separators anywhere in your content. To start, add the element into your desired column.

The first thing to choose is the Separator Style. The element comes with 7 preset styles plus a No Style option for invisible separators.

The Design tab is your next stop. Depending on the style chosen, you will have more or less to do here. If you have chosen the No Style option, all you need to do is to determine the spacing for the element. This is achieved via the second option, the Margin. You can specify your spacing in px, em, or %. You can adjust the margins above and below the separator, but this is not important with an invisible one. This is best used to increase the separation between elements. It is also possible to use negative values with this element.

If you have chosen a styled element, the remaining options are to style this, with regard to its color, icon, size, width, and alignment. A huge variety of separators are possible.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Separator. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
StyleChoose the separator line style.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Flex GrowControls 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.
MarginSpacing above and below the separator. In px, em or %, e.g. 10px.
Separator WidthIn pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.
Separator HeightIn pixels (px or %), ex: 1px, ex: 50%.
AlignmentSelect the separator alignment; only works when a width is specified.
Border SizeIn pixels.
Separator WeightControls the thickness of the wavy separator. In pixels.
Separator Wave SizeControls the width of a single wave iteration. In pixels.
Separator ColorControls the separator color.
Select IconClick an icon to select, click again to deselect.
Icon SizeIn pixels.
Icon ColorControls the color of the icon. Will fall back to the separator color, if no color is set here and in the Global Options.
Circled IconChoose to have a circle in separator color around the icon.
Circle ColorControls the background color of the circle around the icon.

In this article