If you thought a Divi site can’t have a certain cinematic quality, oh boy were you wrong. The Ken Burns Effect has been used in film for almost half a century and for good reason, it is gorgeous. In web development, this effect is often used for sliders and to create some depth with background images.

In today’s tutorial, we will show you one way to add an interesting Ken Burns effect to your Divi site’s header (or really any row you choose). It will take some setup and then a bit of code, but we promise, the end result will be marvelous!

Let’s do this!

PREVIEW:

Video Tutorial

What is the Ken Burns Effect?

The Ken Burns Effect is when a slow zoom and pan camera movement is applied to an image to create the illusion of movement in the image. This is often used in slide shows and films. And why is this called the Ken Burns Effect? Well, because a documentary filmmaker named Ken Burns popularized it by using it excessively in his films, it was not originally called this, rather it was referred to as animatics (not a typo, promise). Steve Jobs actually wanted to use his name for the effect so bad that he offered to provide several thousands of dollars worth of hardware and software in exchange for the use of his name which Burns accepted and donated to charity.

With the history lesson over, let’s take a look at the effect again.

Hover the image to see the Ken Burns Effect applied to Ken Burns

Setting up for adding the Ken Burns Effect in Divi

As with anything fancy, there are a few steps to getting this show on the road, but luckily for you, we have a detailed breakdown on adding that Ken Burns effect in Divi. To keep things simple, we broke the setup down into two steps.

Background Row

So with our steps for this part, let’s start with the background row by adding a New Page.

Add a Single Column Row and then an Image Module

Image Module Settings

CONTENT TAB

Image

Image: Select your background image

SAVE

We’ll continue by opening the row settings.

Row Settings

DESIGN TAB

Sizing

Use Custom Gutter Width: YES
Gutter Width: 1
Width: 100%
Max Width: 100%
Height: 700px

Spacing

Padding Top: 0px
Padding Bottom: 0px

ADVANCED TAB

Visibility

Horizontal Overflow: Hidden
Vertical Overflow: Hidden

SAVE

A lot of this will be pretty self-explanatory, but let me do some splaining. We want this row to span the entire width of the page and we made the design decision to make it only 700px high, but you can make this whatever you want, you would just have to use the same offset when you have created your content row which we will do here soon. We also remove the padding so that things sit nice and snug without gaps.

The other bit that might need some clarification is the overflow. This will make that the image size does not cause scroll bars which would look pretty bad and the googler might even ding you for that from an SEO perspective.

Time to circle back to our image and have it show the part of the image we want.

Let’s open the image module settings.

Image Module Settings

DESIGN TAB

Transform > Transform Translate

Unlink the properties by clicking the chain in the bottom right.
TranslateY (on the right): -100px

SAVE

 The last stop here before creating our content row is to fix the last bit of spacing above and below the section.

We’ll continue by opening the section settings.

Section Settings

DESIGN TAB

Spacing

Padding Top: 0px
Padding Bottom: 0px

SAVE

Now we need to add a new Row that will have all the content we want over the Ken Burns effect in Divi. We will then offset that content with negative margin.

Content Row

Copy or duplicate the Row we just created and delete the Image Module. You can add any module here now, but we will just add a simple Call to Action Module.

Add a Call to Action Module in the duplicated Column.

Call to Action Module Settings

CONTENT TAB

Text

Title: #000000 with 25% opacity / rgba(0,0,0,0.25)

DESIGN TAB

Title Text

Title Font: Poppins
Title Font Weight: Ultra Bold
Title Font Style: Uppercase
Title Text Size: 21px
Title Text Shadow: Option 1

Body Text

Body Text Size: 21px

Sizing

Width: 66%
Module Alignment: Center

SAVE

Ok, so now we need to move this content row over the background row we created. To do this we will use a negative margin to offset the content row, and since we know the other row is 700px tall (or whatever you set it to), we need to adjust our margin by -700px. Some padding will also be needed to have our Call to Action not be bumped up to the top of the page.

We’ll continue by opening the content row settings one last time.

Row Settings

DESIGN TAB

Spacing

Margin Top: -700px
Padding Top: 10%

SAVE

We are so almost done now, I can taste it! The last part involves working with some CSS code, but if you look at the front end of this page right now, you will see that it is fully primed for adding the Ken Burns effect to Divi.

Adding the Ken Burns CSS to Divi

We are near the end of the race here kids and we just need to add some CSS code to pull it all together and bask in some Ken Burns glory.

To add our CSS we can use one of three methods which are:

The world is your oyster, so you choose the method that works best for you, or try them all. All you need to do now is copy the code below and execute your chosen method!

And just as I knew you would, you nailed yet another Divi Engine tutorial that will add some flair to your Divi sites.

Ken Burns on Mister Burns…Excelllllent.

Conclusion

That wasn’t too bad, was it? We sincerely hope you enjoyed this tutorial on How to add a Ken Burns effect in Divi without using a plugin. We realize there are many other ways to implement this depending on the way you want to use it, so let us know if you have some other ideas or suggestions.

With that, hats off to you Mr. Ken Burns, thank you for being you!