• Home

How to add Various Kenburns effects in divi fullwidth slider module.

We Design Brands Experiences And Interfaces

How to add Various Kenburns effects in divi fullwidth slider module.

- You can use this Kenburns Effect on your divi website .

Steps for Kenburns Effect on Divi Fullwidth Slider Module

1. Download  CSS File.

2. Unzip file

3. Copy your Kenburns Effect css in kenburns.css file and paste on Divi -> Theme Options -> General -> Custom CSS

4. Below are classes which you have found in css
dp-kenburns-top
dp-kenburns-top-rev
dp-kenburns-top-right
dp-kenburns-top-right-rev
dp-kenburns-right
dp-kenburns-right-rev
dp-kenburns-bottom-right
dp-kenburns-bottom-right-rev

5.Add Full Width Section and Select Full Width Slider Module

6.Choose any one of class [ see point 4 ] & add on Advanced -> CSS Class and do others settings, see on images.

Select Advanced Tab

How to add Various Kenburns effects in divi fullwidth slider module.

Add Class on CSS Class Field

How to add Various Kenburns effects in divi fullwidth slider module.

Edit Slider Setting Icon

How to add Various Kenburns effects in divi fullwidth slider module.

Use Parallax Effect

How to add Various Kenburns effects in divi fullwidth slider module.

16 Comments

  1. Mike Wade

    Great job guys – really awesome fix

  2. Tessa

    Hi! This work so well, thank you! Can you tell me how to slow down the effect (so it lasts longer. ) I’m using Kenburns Top Reverse Effect

  3. olGerva

    Good morning
    Excellent article, congratulations
    But is it possible to have different effects on the slider images?
    Thank you

    • Divi Professional

      yes just add class

      • olGerva

        Thanks for the reply.
        I use Divi (latest version) and only in the main slider can I put the class. In the single contents / images I have the possibility to add only eventual css code.
        How can I do?
        Thank you

        • Divi Professional

          Please contact via email

          • Michael

            How to Do it Sir?

          • Divi Professional

            already mention in post how to use.

          • Lisa

            I’d also like to know how to do this. Thank you!

          • Divi Professional

            you can use as a class and add class in css.

  4. Camilo Fontecilla

    Hi there! This is awesome, but I’m wondering if there’s a way to start with the image at closer to 100% and then having it zoom in to 115% or so. I’ve tried messing around with the variables but made a mess of it.

    Right now the starting point is -very- zoomed in so it’s difficult to frame the image properly.

    Thanks!

    • Divi Professional

      plz send url of website

  5. Abraham Goebel

    Would it be also possible to have different kenburns effects on different images/slides within the same slider at the same time? So could one apply, for example, the dp-kenburns-top effect on the first image/slide, and the dp-kenburns-top-rev effect on the second image/slide, and so on?!

    • Divi Professional

      yes just add class

  6. Aleksandra

    Thank You for this great article. I’ve tried it on my website and it works perfectly in Firefox . Ken Burne’s effect looks fantastic and the background image, although parallax is turned on, isn’t ‘sticky’. In Chrome, however, when you scroll down the screen the backgroud image is ‘sticky’, so the parallax works. I’ve just checked Your demo website on Chrome, and again the background is “sticky’. I’d be grateful if you could help me solve this issue.

Recent Post
Creative 4 Divi Modules Design And Footer Style

September 16, 2020

Another 5 Creative Service Designs Using Divi Module with stunning hover effects and 8 Awesome Footer Designs Using Divi Module

February 18, 2020

How to Create Creative Person or Team Design Using Divi Module

February 11, 2020

Services
How to Create Creative Service Designs Using Divi Module

February 3, 2020