Separator Element

08/08/2019

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, Colour, Width, Margins above and below, Alignment, and you even add icons to them. Read on for an overview of this very useful Element.

View more examples!

How To Use The Separator Element

The Separator Element allows you to add styled or invisible separators anywhere in your content.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the portfolio items into.

Step 3 – Click on the + Element button at the bottom of the column. Select Separator.

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. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..

Read below for a detailed description of all element options.

Element Options

Location: 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 in your Theme Options > Fusion Builder Elements > Popover Element section.

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 > Theme Options > Fusion Builder Elements > Separator Element).

  • Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • 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 Screen

Design Tab

  • Separator Color – Controls the Separator Color. Leave empty for the Default value, set in Theme Options (Avada > Theme Options > Fusion Builder Elements > Separator Element).

  • Margin – Controls the spacing above and below the Separator. In px, em or %, e.g. 10px.

  • Border Size – Controls the thickness of the Separator. In pixels.

  • Select Icon – Allows you to select an icon to show in the center of the Separator.

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

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

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Separator Element

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.

  • 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

Separator Element Parameters

Copy to Clipboard
  • style_type – Can be one of these values: none, single, double, single|dashed, double|dashed, single|dotted, double|dotted, or shadow. Sets the separator’s line style.

  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.

  • class – Add a custom class to the wrapping HTML element for further css customization.
  • id – Add a custom id to the wrapping HTML element for further css customization.
  • sep_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the separator’s color. Leave Blank for Theme Option selection.

  • top_margin – Accepts a numerical value to set the top margin. For example 40 to increase spacing, or –40 to decrease spacing.

  • botom_margin – Accepts a numerical value to set the bottom margin. For example 40 to increase spacing, or –40 to decrease spacing.

  • border_size – Accepts a pixel value to set the border size (thickness of the Separator). For example, 1px. Leave blank for Theme Option selection.

  • icon – A font awesome icon value. For example, fa-glass.
  • icon_circle – Select to have a circle in separator color around the icon or not. Options are Default, Yes, or No.

  • icon_circle_color –  Accepts a hexcode ( #000000 ) that sets the background color of the circle around the icon. Leave Blank for Theme Option selection.

  • width – Accepts a pixel value or a percentage to set the width. For example, 1px, or 50%. Leave Blank for full width.

  • alignment – Can be one of these values: center, left, or right. Sets the separator’s alignment. Can only be used when a width is specified.