Section Separator Element

26/03/2019

The Section Separator Element is a great way to add stylish sections to your website. Our section separators have been designed to give you the ultimate in page compartmentalization flexibility, and to aid you in making your website legible, logical, and beautiful…all at the same time.

With Avada 5.9, we have added even more section separators, bringing the total to 12 different separators, each with their own various options. If you’d like to learn how to add them to your site, as well as understand the different styles and options available, please continue reading below.

Separator Section Example

This style displays the section separator as a big triangle shape. You can position the triangle to point to the left, center or right. You can also choose to display it on the top or bottom and choose it’s background color.

View The Full Range of Separator Styles In Action!

Section Separator Styles

Avada’s section separator now has 12 styles, with a range of options. The styles provide a range of creative design capabilities for your website.

  • Triangle – This style displays a small triangle on the center of the page. You can position the triangle to display either on top or the bottom or both. You can also set the icon, icon color, border, and border color, and background color.

  • Slant – This style displays the Section Separator as a slant on the page. You can position the section separator to slant left or right, and to display on the top or bottom. You can also choose it’s background color.

  • Big Triangle – This style displays the section separator as a big triangle shape. You can position the triangle to point to the left, center or right. You can also choose to display it on the top or bottom and choose its background color.

  • Rounded Split – This style displays the section separator as a rounded split. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

  • Curved – This style displays the section separator as a slanted curve. You can position the section separator to slant to the left or right, and display it on the top or bottom. You can also choose its background color.

  • Big Half Circle – This style displays the section separator as a half circle. You can only position this style to display either on top or on the bottom. You can also choose a background color for this style.

  • Clouds – This style displays the section separator as a cloud-shaped border. This style doesn’t have any position options, and will only display in the center and on top. You can, however, set its background color.

  • Horizon – This style displays the section separator as a converging point on the horizon, with multiple levels of opacity. You can position this style to display either on top or on the bottom. You can also choose a background color for this style.

  • Waves – This style displays the section separator as a wave. You can position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

  • Waves Opacity – This style displays the section separator as a wave with multiple levels of opacity. You can position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

  • Hills – This style displays the section separator as rolling hills. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

  • Hills Opacity – This style displays the section separator as rolling hills with multiple levels of opacity. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

View The Full Range of Separator Styles In Action!

How To Use The Section Separator Element

Step 1 – Create a new container and add your desired column layout, then add your content. It’s also recommended to add a background color to the container that matches the color of the section separator. For this example, let’s add a two column layout with text, and set red as it’s background color.

Step 2 – If you’d like to display the content as full width, then set your Page Template to ‘100% Width’.

Step 3 – Add a new container with a 1/1 column layout. Click the ‘+ Element’ button to add a new Section Separator element. Once you add a Section Separator, you can then select a style and set it’s corresponding options. For this example, let’s select the Triangle style and select the same red as it’s background color.

Step 4 – Depending on what vertical position you’ve set for the Section Separator element, you can move it’s container to the top or bottom of the container with the content. For this example, we’ve set the Section Separator element to display on the bottom, so we’ve kept the container below the content.

Step 5 – Lastly, don’t forget to make sure that both containers’ top and bottom margins are set to 0px. This will ensure that there is no space between the content and the section separator element. Click the ‘Container Settings’ icon, then switch to the ‘Design’ tab. Here, you can set the top and bottom margins to be 0px.

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 > Section Separator Element section. Also, please note that the displayed options 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.

  • Section Separator Style – Controls the style of the section separator. Choose between Triangle, Slant, Big Triangle, Rounded Split, Curved, Big Half CircleClouds, Horizon, Waves, Waves Opacity, Hills, or Hills Opacity.

  • Horizontal Position Of The Section Separator – Controls the section separator’s horizontal position. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.

  • Vertical Position Of The Section Separator – Controls the section separator’s vertical position. Some styles may have variation in these settings. Please see the Section Separator Styles section to learn more.

  • Icon – Choose an icon for your Separator Section. Click an icon to select, click again to deselect.

  • Icon Color – Choose a color for the icon. Leave empty for the default value.

  • Border – Choose a border width for the separator section. In pixels. Leave empty for the default value.

  • Border Color – Choose a border color for the separator section. In pixels. Leave empty for the default value.

  • Background Color of the Section Separator – Controls the background color of the section separator style. Leave empty for the default value.

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

View The Options Screen

Global Options

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

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Section Separator Border Size – Controls the border’s thickness. Accepts a pixel value. For example, 5px.

  • Section Separator Divider Candy Background Color – Controls the separator’s background color. Accepts a hexcode. For example, #000000.

  • Section Separator Border Color – Controls the border’s color. Accepts a hexcode. For example, #000000.

View The Options Screen

Section Separator Element Parameters

Copy to Clipboard
    • divider_type – Choose from triangle, slant, bigtriangle, rounded-split, curved, big-half-circle, or clouds. Sets the style of the section separator.
    • divider_position – Choose from left, center, or right. Sets the section separator’s horizontal position.
    • divider_candy – Choose from top, or bottom. Sets the separator’s vertical position.
    • icon – A font awesome icon value. For example, fa-glass.
    • icon_color – Accepts a hexcode ( #000000 ). Sets the icon’s color.
    • bordersize – Accepts a numerical value. For example, 1. Set the border size.
    • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
    • backgroundcolor – Accepts a hexcode ( #000000 ). Sets the background’s color.
    • 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. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.