Hi everyone, today we want to complete our five-posts Divi Section Dividers Series. We have seen in the previous posts how to work with css ‘after’ and ‘before’ pseudo elements, how to use the css clip-path property and how to animate our transitions.

In this last post we want to get a stunning effect in a very simple way, just by using Divi rows and Divi options and eventually just few lines of css.

Let’s get started!

PROPOSAL : THE ROWS TRANSITION

So, we need two rows of which one sliding in and changing this way the background we have on our section; however, we need to do one step before.

1 – ADD SECTIONS AND ROWS

How we did in the previous series post we add two sections. Then we add two rows in our first section (the above one). In the first one we put some copy, this is our main rows; while in the below one we add just some padding to give it consistency and we made it ‘Fullwidth’ with ‘0’ gutter.

2 – THE BACKGROUND

The only element really change in the second row (in respect of the first one) is the background; so let’s se the two background gradients in comparation:

2 – THE ANIMATION

Now it’s time to animate our design, so we’ll go in the second Row Settings -> Design -> Animation and we will select the sliding one with a duration of 2000ms, a 100% intensity and the direction toward left.

All done! Now simply watch your work in action!

GO BEYOND

Of course you can go beyond and add a little touch of css to style more your design; so we could, for example, customize the animation duration and its timing curve.

FINAL THOUGHTS

Well, we completed our Divi Dividers and Transition Series for now and we did it probably with the simplest one. On the other hand, with Divi you don’t need to be complicated to amaze and make impressive designs. Hope this Series could be useful.

See you next post!