Normally, when visitors navigate from page to page on your Divi website, the transition happens instantly. Now, what if there’s a way to animate these page transitions? With Divi’s Theme Builder there sure is, without the need for any custom code! As soon as your visitors leave a page to enter another one, you can make an animation apply. In today’s tutorial, we’ll show you how to create these animated page transitions. More so, we’ll also share three different examples that you can apply on your next project right away. You’ll be able to download the template JSON files for free as well!
Let’s get to it.
- 1 Preview
- 2 Download The Page Templates for FREE
- 3 Download For Free
- 4 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
- 5 1. Go to Divi Theme Builder & Add New Page Template
- 6 2. Create Page Body Using Post Content Module
- 7 3. Apply Animated Page Transition of Your Choice
- 8 6. Save All Theme Builder Changes & Preview Result
- 9 Preview
- 10 Final Thoughts
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Animated Page Transition #1
Desktop
Mobile
Animated Page Transition #2
Desktop
Mobile
Animated Page Transition #3
Desktop
Mobile
Download The Page Templates for FREE
To lay your hands on the free page templates, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
1. Go to Divi Theme Builder & Add New Page Template
Go to Divi Theme Builder & Add New Template
The first thing you’ll need to do is go to your Divi Theme Builder and click on ‘Add New Template’.
Use Template on All Pages
Use the new template on all pages (or the pages you want the transition to apply to).
- Use On: All Pages
Start Building Template Body
Then, start building the custom body of your page template.
2. Create Page Body Using Post Content Module
Section Settings
Spacing
Once inside the template editor, you’ll notice a section. Open that section and remove all default top and bottom padding.
- Top Padding: 0px
- Bottom Padding: 0px
Visibility
To make sure no horizontal scrollbar appears when the animation is happening, we’ll need to hide both section overflows in the advanced tab of the section settings.
- Horizontal Overflow: Hidden
- Vertical Overflow: Hidden
Add New Row
Column Structure
Continue by adding a new row to the section using the following column structure:
Sizing
Without adding any modules yet, open the row settings and allow the row to take up the entire width of the section container.
- Use Custom Gutter Width: Yes
- Gutter Width: 1
- Width: 100%
- Max Width: 100%
Spacing
We’re also removing the row’s default top and bottom padding. At this point, the section, row and column containers have the exact same size. There’s no whitespace between the containers whatsoever. This is important for what’s to come in the next step; adding the dynamic page content.
- Top Padding: 0px
- Bottom Padding: 0px
Add Post Content Module to Column
The only module we need to make the page content appear dynamically is the Post Content Module. Go ahead and add this module to your row’s column. Thanks to the section and row settings we applied in the previous parts of this post, the dynamic page content will take up the entire width and height of the section container.
3. Apply Animated Page Transition of Your Choice
Recreate Animated Page Transition #1
Section Settings
Background Color
Time to apply the animated page transitions! We’re sharing three different examples, but with Divi’s built-in options, the animation possibilities are endless. To apply the first animated page transition, open the section container and add a background color.
- Background Color: #d8cdbe
Animation
We’re also applying the following animation settings to the section:
- Animation Style: Slide
- Animation Direction: Right
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Row Settings
Background Color
Open the row settings next and add the following background color:
- Background Color: #e2e2e2
Animation
Continue by applying the following animation to the row:
- Animation Style: Slide
- Animation Direction: Right
- Animation Delay: 500ms
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Column Settings
Background Color
On to the next container which we’ll animate, which is the column container. Open the column settings and add a white background color.
- Background Color: #ffffff
Animation
Add a custom animation to the column as well.
- Animation Style: Slide
- Animation Direction: Left
- Animation Delay: 1200ms
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Post Content Module Settings
Animation
Last but not least, we’ll animate the Post Content Module (containing all dynamic page content).
- Animation Style: Fade
- Animation Delay: 2500ms
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Recreate Animated Page Transition #2
Section Settings
Background Color
Want to create the second animation instead? Open the section settings and use the following background color:
- Background Color: #d8cdbe
Animation
Then, apply a custom animation to the section.
- Animation Style: Slide
- Animation Direction: Left
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Row Settings
Gradient Background
Open the row settings next and use the following gradient background for it:
- Color 1: rgba(255,255,255,0)
- Color 2: #ffffff
- Gradient Type: Linear
- Gradient Direction: 90deg
- Start Position: 50%
- End Position: 50%
Animation
Add a custom animation to your row too.
- Animation Style: Slide
- Animation Direction: Up
- Animation Delay: 800ms
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In
- Animation Repeat: Once
Column Settings
Background Color
Then, open the row’s column settings and use a white background color.
- Background Color: #ffffff
Animation
Continue by adding an animation to the column.
- Animation Style: Slide
- Animation Direction: Right
- Animation Delay: 2000ms
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Post Content Module Settings
Animation
Last but not least, open the Post Content Module settings and use the following animation settings:
- Animation Style: Fade
- Animation Delay: 3000ms
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Recreate Animated Page Transition #3
Section Settings
Gradient Background
On to the next and last animated page transition! Open the section settings and use the following gradient background:
- Color 1: #d8cdbe
- Color 2: #ffffff
- Gradient Type: Radial
- Radial Direction: Top
- Start Position: 20%
- End Position: 20%
Animation
Move on to the section’s design tab and change the animation settings accordingly:
- Animation Style: Slide
- Animation Direction: Down
- Animation Intensity: 10%
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Row Settings
Gradient Background
Then, open the row settings and apply a gradient background:
- Color 1: #ffffff
- Color 2: rgba(255,255,255,0)
- Gradient Type: Radial
- Radial Direction: Center
- Start Position: 50%
- End Position: 50%
Animation
Modify the row’s animation settings too.
- Animation Style: Slide
- Animation Direction: Down
- Animation Delay: 1000ms
- Animation Starting Opacity: 100%
- Animation Speed Curve: Ease-In
- Animation Repeat: Once
Column Settings
Background Color
Continue by opening the column settings. Change the background color.
- Background Color: #ffffff
Animation
Apply the following animation settings to the column too:
- Animation Style: Slide
- Animation Direction: Down
- Animation Delay: 1500ms
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
Post Content Module Settings
Animation
And complete the third animated page transition by applying the following animation settings to the Post Content Module:
- Animation Style: Fade
- Animation Delay: 3000ms
- Animation Speed Curve: Ease-In-Out
- Animation Repeat: Once
6. Save All Theme Builder Changes & Preview Result
Once you’ve built your page template’s body and added the animated page transition of your choice, you can save all Theme Builder changes and view the outcome on your website!
Preview
Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.
Animated Page Transition #1
Desktop
Mobile
Animated Page Transition #2
Desktop
Mobile
Animated Page Transition #3
Desktop
Mobile
Final Thoughts
In this post, we’ve shown you how to create animated page transitions with Divi’s built-in options and Theme Builder only. This is a great way to add another level of interaction to your website, without the need for additional code. You were able to download the example template JSON files for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.
This is the worst tutorial. Too much detail about formatting. I did not learn how to do page transitions. I gave up reading minutia I know already. Highly off topic for users who know Divi.
It doesn’t work for me! Can anyone help please? I add New Template then Divi takes me Crete new page? Please let me know why this issue accur.
Creative as always. Thanks for the inspiration.
Very nice. It works for me in Safari and Firefox. What would be really cool is if Divi could be made to load page asynchronously with these transitions in between. I can just see Nick and the rest of the devs pulling their hair at this request. 🤪
+1 for load page asynchronously feature. Will improve page loading.
These Animated Page Transitions are animated on the Chrome browser only.
For me Animated Page Transition is working also in Firefox.
Excellent usage of the builder!!!
This is a highly creative way of using the theme builder!
Thanks!
Hi Donjete
Thanks for that. It’s very nice. However it made me think that something simpler should just be added to page settings to add a simple slide transition between pages out of the box. 🙂
I’ve not put time aside to learn Divi Theme Builder yet but love going over these tutorials and getting excited at it’s potential and eventually using it in my business.
That’s a nice post, thanks a lot!
If only Divi could have a Ajax page loading with seemless transition!
This is great thanks for continuing to innovate Divi! Does this slow down the website loading time at all?
+1
Very nice! Thanks Donjete!
Useful page transition Donjete! It’s working well on my page.
Thank you for creating this tutorial!
The idea shows promise, but it would seem a bit more fully transition-like if the colored boxes actually overlapped the page content while appearing and retreating, rather than the page suddenly turning blank and then the boxes sliding in and out.
Or even if the page faded out first (as opposed to just suddenly disappearing), then the colored box arrives and departs, followed by the fading in of the new page.
All that being said, this is still pretty cool as is!