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