On last week’s blog, we talked about hidden features of Divi that is very helpful. On today’s blog, we will be talking about how to create beautiful section transitions using Divi’s new design feature.
In this blog, we are going to create section transitions. Sections are the foundation of all the content you share on your website. Each section is a chapter and going from one section to the other is part of the storytelling process. Making this transition as smooth as possible will emphasize the message you’re trying to articulate.
Let’s start off by creating a brand new page by going to the dashboard, click on pages, and then click on add new. Name the page as you’d like and click on “Use the Divi Builder” then click on “Use Visual Builder.” Now we have to add padding so just go to section settings and go to the design tab and click on spacing, now add padding to the top and bottom as desired. Now we have to add a text module. So click on the plus sign on the module and set a single column, then add a text module. Enter anything on the content of your module.
Now we have to add another section just below the first one. Then do the same by adding a text module and enter any text as desired.
Usually, Divi offers a linear section transition. But in this tutorial, we are going to achieve a diagonal section transition. To do that let us go back to the section settings of the first section and click on background and add a gradient, then pick any two colors of your liking. Set the gradient direction to 183 degrees and the start position to be 85 percent and end position at 70 percent. You will start to notice the diagonal line coming into shape.
Now we have to set the background of the second section to complete the section transition. Go to the section settings of the second section and click on background and add a gradient. On this part we now, we have to set the same color that we did in the first section, but we have to reverse the color. Then we have to configure the same settings, gradient direction to 183 degrees and the start position to be 85 percent and end position at 70 percent. You will now see that diagonal line as the section transition.
Now that you learned the basic of the section transition, you can now experiment and create your own version. Happy Divi Building!
Supercharge your business with social media.
Contact us on how you can get started and keep going.