Categories
How To Themes

12 beautiful Avada section separators you can apply on your website today

Today, we will see how you can use Avada section separators in your website. In this tutorial, you will see 12 ways you can add beautiful separators on your web page.

The separators are pre-build hence you do not need to do much. Simply drag on to your page and customize.

Avada WordPress theme remains as the most popular WordPress theme in 2020. As of writing of this post, Avada boasts of 600,000 sales the highest so far for a WordPress theme.

Avada is not blowing its own horn. From experience, having used Avada severally to craft beautiful websites, I loved its flexibilty and extensive functionality. Therefore, I highly recommend Avada theme for WordPress whether you are a beginner or an experienced web developer.

Today, I am going to show you how you can create wonderful separators. If you are like me, for ages I have wondered some websites manage to create beautiful looking separators. I stopped wondering when I came across Avada. So let’s dive in to it.

Finding section separator

I believe you already know how to add containers on a page. To add a section separator, click on add element below the container, from the pop-up, enter separator in the search box. You will see two options. Select section Section Separator.

Avada section separator

Drag the section separator on the desired section. Next step, click on the separator and the context as shown below should open. From the drop down you will see various separator options.

Important section separator settings

First, select the type of separator you want to use. Secondly, choose the vertical position of your separator. Avada gives you three options i.e. Top, Bottom, and top and bottom. You may decide to work with an icon or borders if you like.

Thirdly, you need to set the background color of your section separator so that it fits to the section background color. The remaining properties are not necessary unless you require advanced settings which we will not need here.

Section separator types

As mentioned earlier, Avada comes with 12 types of section separators. I will show you by example how they look and feel. Each style comes with options for further customization of the look and feel.

1) Triangle

Displays like a notch. In this example the vertical display of the separator is set to bottom.

Avada Separators - Triangle

2 ) Slant

As the name suggests, it creates a slant between two sections of your website. It gives you two options for setting your slant i.e. horizontal direction i.e. left or right. Vertical positioning i.e. top or bottom. In the example below, I have set the direction to left and bottom.

Avada Separators - Slant

3) Big Triangle

As the name suggests, this type of separator draws a lengthened triangle between two sections. In the example below the vertical positioning is set to top while the horizontal direction is set to left.

Avada Separators - Big Triangle

4) Rounded split

A rounded notch is formed with this type of separator. You have two vertical positioning options i.e. Bottom and top. In the example below the vertical position is set to bottom

Avada Separators - Rounded split

5) Curved

The separator style draws a curve between two sections. It can be set to both the top and the bottom. In the example below the vertical positioning of the curve is set to top while the horizontal direction is from left.

Avada separator -curve

6) Big half circle

The style is similar to the curve separator style. The difference is the even distribution of the curve on both sides of the page. In the example below, the curve horizontal positioning is set to top. There is no left or right property option for this type of separator.

Avada separators - Big half circle

7) Cloud

The style separates two sections of a webpage with cloud like patterns. The only option available in the settings is changing the separator colors.

Avada separators - cloud

8) Horizon

As the name suggests, horizon separator beautifully separates two sections of a webpage with a beautiful horizon like theme. The customization options available are top and bottom. In the example below, the vertical direction is set to top.

Avada Separators - Horizontal

9) Waves

The waves style beautifully adds wavy lines between two sections of a webpage. Two customization options are available. The vertical positioning can either be top or bottom. The horizontal direction can either be left or right.

Avada separators - waves

10) Waves opacity

The separator style adds beautiful wavy lines between two sections of a webpage. It comes with three custom properties. Setting the separator color, vertical positioning, and horizontal directions. In the example below the vertical positioning is set to top. The horizontal direction is set to left.

Avada separator - Waves Opacity

11) Hills

The style adds curvy hills between two sections of a webpage. You have ability to change the color of the separator. In the example below the vertical positioning is set to top.

Avada Separator - Hills

12) Hills opacity

The style is similar with Hills. The difference is the additional transparent hills that gives a beautiful overlay effect. Hills opacity style comes with two customization options. Ability to change the color, and ability to change the vertical positioning to either top or bottom. In the example below, the positioning is set to top.

Avada separator - hills opacity

There you have it! Avada simplicity through its drag and drop functionality empowers you to create beautiful websites. Avada separators enhances the brings out the beauty in your site layout.

By WP Array

Ex Dreamweaver...yeah! Ex Modx, Ex Joomla. 2 years of web design experience, 3 years UX/UI designer and 8 years of web experience. Wordpress convert and enthusiast! Let's do this for the love of the web.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.