Divi Transitions

Page transitions designed for Divi, Extra and the Divi Builder plugin

Transitions designed for Divi, Extra and the Divi Builder
Reliable transitions that work correctly with the back button and new tabs
Fade out to the background color or image

Automatic updates. No recurring fees.
90 day money back guarantee.

Divi Transitions is a new plugin that aims to bring effective transitions to Divi.

Page Transitions are effects applied to a webpage when the user navigates between pages. For example, fading the content of the current page out when the user clicks on a link, before the new content is shown.

 

 

Example of a site fading to a "loading…" background image while the next page loads:

Improved Transition Detection

Divi Transitions addresses several issues seen in other page transitions plugins:

  • Transition is incorrectly triggered by links where the page is not actually left, e.g. when link opened in a new tab or the link triggers an on-page effect
  • Transition effect (e.g. fade out) remains in place when returning to the page, e.g. using the "back" button.

The root cause of the first two issues is that other page transition plugins typically take the approach of intercepting link clicks, which necessitates handling all the special cases of functionality that links allow.

Divi Transitions instead uses a simpler, more reliable method – it triggers the effect only when the browser indicates that the current page is being unloaded.

Divi Support

Divi Transitions is designed specifically for Divi, Extra and the Divi Builder plugin, and as such is able to provide better support for them than more general WordPress page transition plugins are. 

This improved transition detection helps provide better handling of links in Divi modules.

Additionally, Divi-specific features include:

  • Transitions disabled in Visual Builder

Transition Effects

Divi Transitions currently offers the following transition:

  • Fade to background

You can set the Divi background color / image in "Divi > Theme Customizer > General Settings >
Background".

If you'd like to see other transitions added (or any other improvements made), please let me know in the comments or via the contact form and I'll do my best to incorporate it in the plugin.

Usage

Currently, you just install it as you would any other plugin. Once installed, it's good to go – there's zero configuration, except to enter your license key to activate updates. 

Divi Transitions

Automatic updates. No recurring fees.
90 day money back guarantee.

2 Comments

  1. Any sample pages so I can see how it works?

    Reply
    • Hey Steven, I've just added a short video to the post above, showing the fade to background transition in action. I hope that helps!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *