There are multiple ways to set up a separator section, so let’s look at a common example. Here, we will look at the Avada Classic Prebuilt Website Home Page.
The Separator Section Element is designed to transition between two separate sections of the page. To this end, there are some conditions for the container that the separator section will be in. In our example, the Separator Section Element will be at the bottom of the container. It’s important that the Container does not have any padding at the bottom and that the Column does not have any padding or margin at the bottom. As we can see from the below screenshot, the top container has a background image, as well as a normal column layout with content. At the bottom of the content, the Separator Section Element has been placed.
Select the desired Section Separator Style and style settings. In this example, the Waves Opacity option has been selected, with the Horizontal Position set to Left and the Vertical Position set to Top. For the transition to the next container to work smoothly, the Background Color of the Section Separator should be the same color as the background color of the following container. Here, it has been set to white.
Now add a new container. Ensure the background color of the Container is the same as has been set in the Section Separator Element. Add your content as usual.
That’s it. As mentioned, there are a lot of ways to use these section separators, so you will have to adjust the setting to suit your situation, but the basic principle is the same.