Create Interactive Sections with the Reveal Effect and Divi

The built in Divi animations are great if you just want to add a bit of movement to your website quickly, but I find using the same fly-in or appear animations gets a bit boring after a while. Especially when every Divi site seems to be using the same ones. I’m a bit obsessed with finding different things I can add to my Divi websites to make them not look like a standard Divi site.

Recently I’ve noticed this method used on lots of websites and really like it! It’s a cool way to take a basic design and make it look premium.

Checkout the Live Demo here. It’s essentially just a 50-50 layout with an image and some text, but the animation makes it looks really cool. If you’d like to know how to achieve the same look for your website, keep reading as I’ll show you how! I’ve tried to keep the technique as simple as possible so it’s easy to follow along.

Download Free Divi Section .JSON file
You can follow this tutorial or download ready to use .json file with sample section that you can import to your Divi Library and use in no time! Subscribe to download free section →

1

Setup the section

Add a section with 2 columns. In the Design tab of the Row Settings turn on Equalize column heights.

2

Add a text module

Add a text module to the left-hand column. Add your text content. For this example I added a h2 and some body text.

Then in the Advanced tab give it two custom css classes of text-reveal and reveal.

In the After box, give it a background colour. This is the colour that will appear briefly before the text.

e.g. background: #F3f3f3

3

Add an image

Add an image to the right-hand column.

In the Advanced tab give the image two custom css classes of image-reveal and reveal.

Then expand Custom CSS tab and in the After field, give it a background colour. This is the colour that will appear briefly before the image.

e.g. background: #f9574f;

4

Add another row (optional)

Clone the row and update the image and text box with different content. You can also change the background colour of the after element if you’d like to use different colours. In this example I’ve used 4 different colours for the images but kept the text the same colour.

To make sure the text always appears on top of the image on mobile, add a class of column-swap to the row where the image is in the left-hand column.

5

Save the layout!

6

Add the CSS

Add the following css to your custom css in your theme options. This CSS will add the reveal effect, as well as vertically centre the text in the column, and reverse the order of the columns on mobile if you added the “column-swap” in the step above.

Note: The vertically centred text doesn’t display in the visual builder, but does on the front-end, so don’t worry if it doesn’t look centred when editing!

7

Add the javascript

Without this javascript the effect will happen on all modules when the page loads, so if an image is half way down the page you won’t see the effect.

What this javascript does is trigger the effect when the module scrolls into the screen.

It’s also setup so if a user has javascript disabled in their browser, the modules will still load so users won’t miss any content.

If you’d like to use this effect on multiple pages then add the following javascript to the body box of the “Integrations” tab in you theme options.

If you’d just like to use it on a single page, you could also add it to a code module on that page so you don’t have to load it on every page.

8

Save and you’re done!!

This tutorial is really just a starting point to show you the technique, but there’s so much more you could do with it! You could add in some animation-delays and animate multiple elements in each section. Or even have a completely animated hero sections for when the page initially loads.

I’ll probably make some more complicated animations using this method in the future, so if you’d like to know when they’re available for download you can sign-up to the B3 email list today!

Safari compatibility

Do you want to use this effect above the fold? If so there’s a slight compatibility issue with Safari. But don’t worry! We have a work around. In Safari if the module is on the screen when the page loads (i.e. above the fold), then the animation doesn’t run in full for those modules.

To get around this, all you need to do is update the classes of which ever modules are above the fold to “image-reveal-af” and “text-reveal-af”, then also update the CSS and JS with the code below:

 

CSS:

 

Javascript:

Let us know in the comments below if you liked this free tutorial and section! Your feedback gives us motivation to create new products and freebies. And if you have any suggestions about what we could make for you next, let us know!

Andy Hooke

Andy Hooke

Andy is a self-taught web designer who now specialises in the Divi theme. He comes from a html & css coding background, and enjoys taking these skills to see how far he can customise Divi and create websites which don’t look like your standard Divi websites.

Get Divi Icons PRO today!

We have a sweet deal for you! You can get the best icon plugin for Divi with a 10% discount! Use the coupon code DIVIICONS10 at checkout!

3 Comments

  1. Christian

    nice… it works like block reveal by Superfly 😉

    Reply
  2. Hurri

    Thanks Andy, its pretty cool.
    I agree with your sentiment about looking to make Divi different and this help a lot.
    I also appreciate the free download too 🙂

    Reply
  3. Nosunelanube

    Thanks Andy. Beatiful section and interesting post.

    Reply

Submit a Comment

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

Pin It on Pinterest