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.,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global Options,How To Use The Separator ElementThe Separator Element allows you to add styled or invisible separators anywhere in your content.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Separator from the Elements List.
Step 4. The first thing to choose is the Separator Style. The element comes with 7 preset styles plus a No Style option for invisible separators. Be sure to check out the Separator Element Demo page to see all the options.
Step 5. 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.
Step 6. If you have chosen a styled element, the remaining options are to style this, with regards to its color, icon, size, width and alignment. A huge variety of separators are possible.
Step 7. Once you have completed styling your Separator Element, click Save.
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
Style – Selects the Style for the Separator. Choose between the seven Separator line styles, the No Style, or the Default option, set in Theme Options (Avada > Options > Avada Builder Elements > Separator).
Element Visibility – Allows you to control the Separator』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). 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 – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
Flex Grow – Controls the amount (in parts) of the available space inside a flex column the separator should take up. If the separator is the only element in the column using flew grow, any value above 0 will let it take up all available space. Set to 0 to disable its ability to grow.
Margin – Controls the spacing above and below the Separator. In px, em or %, e.g. 10px.
Separator Width – Controls the width of the Separator. In In pixels (px or %), ex: 1px, ex: 50%.
Alignment – Controls the alignment of the Separator. This only works when a width is specified. Choices are Center, Left, or Right.
Border Size – Controls the thickness of the Separator. In pixels.
Separator Color – Controls the Separator Color. Leave empty for the Default value, set in Theme Options (Avada > Options > Avada Builder Elements > Separator).
Select Icon – Allows you to select an icon to show in the center of the Separator.
Icon Size – In pixels.
Icon Color – Controls the color of the Icon.
Circled Icon – Controls whether the chosen icon has a circle around it. Choices are Default, Yes, or No.
Circle Color – Controls the background color of the circle around the icon. Leave empty for the default value.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Separator.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Separator Style – Controls the line style of all separators, divider lines on portfolio archives, blog archives, product archives and more.
Separator Color – Controls the color of all separators, divider lines and borders for meta, previous & next, filters, archive pages, boxes around number pagination, sidebar widgets, accordion divider lines, counter boxes and more.
Border Size – Controls the border size of the separator. In pixels.
Icon Size – In pixels.
Separator Circle – Turn on if you want to display a circle around the separator icon.
Circle Color – Controls the background color of the circle around the icon.
View The Options Screen