How to add a Ken Burns effect in Divi (without a plugin)

The name is Burns, Ken Burns.

Besides being an awesome name and no relation to Mr. Burns of Simpsons fame, Ken Burns is also an effect that looks spicy when used on background images in Divi.

Say buh-bye to silly static background or overused parallax images, and say hello to the zoom-y and pan-y goodness of the Ken Burns effect on your Divi sites.

Let’s get fancy…

SMITHERS!

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

This is 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

We need to do some basic setup with an image module and row settings. This is the image that will be used for the Ken Burns effect on our Divi site.

Content Row

We need to do some basic setup with an image module and row settings. This is the image that will be used for the Ken Burns effect on our Divi site.

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

Ken Burns Divi Background
Dang that was easy, but we are not done yet, we need to adjust the sizing and spacing of all the pretty things, so let’s do that!

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

NOTE: You might still see the full image due to a quirk in Divi, but just save the page and take a look on the front end, or delicately move the cursor around to see the part that will be shown.

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

NOTE: Depending on the image you have chosen, you might have to play with this a little to get the effect you want.

 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

Ken Burns Divi Fixed Spacing

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

Ken Burns Divi Call to Action Content

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

NOTE: You might have to play with the padding a little to get the spacing you want. I wanted mine in the middle, and 10% did it for me, yours might be different.

Ken Burns in Divi Offset Content

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:

Divi Theme Options

From the WordPress Dashboard just go to Divi > Theme Options, then paste the CSS code in the Custom CSS box. This will make the CSS available anywhere on your Divi install.

Theme Customizer

From the WordPress Dashboard just go to Divi > Theme Customizer or Appearance > Customize, then paste the CSS code in the Custom CSS box. Similarly, this will also make the CSS available anywhere on your Divi install.

Code Module

On the page we created earlier, just add a code module, open some opening and closing <script> tags, then paste the CSS code. This will limit the CSS to only be available on that page.

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!

written by

Robey Joyce

Business Development Manager

You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.

1 Comment

  1. Is there a way to have it also rotate through different images and apply the same effect?

Submit a Comment

Explore more from Divi Engine