Ken Burns Section Addon Tutorial

Intro

Ken Burns Section Addon for Elementor Page Builder allows you to add the most popular cinematic effect to your background images to be displayed on your web page using a variety of options and features for images’ transition.

https://www.youtube.com/watch?v=DUNFjWphZfsu0026feature=emb_title
Premium Ken Burns Section Add-on for Elementor Page Builder

Displaying your background images with Elementor Ken Burns Section Addon will provide you with these astonishing effects and animations with minimal effort.

In this tutorial, we will guide you to add the Ken Burns effect to your Elementor section/s.

Click here to check Premium Ken Burns Section Section Addon demo.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

UPDATE: You can now add Ken Burn Effect to any Elementor Column by navigating to Column settings -> Layout tab -> Enable Ken Burn Effect.

Ken Burns Effect for Elementor Columns
Ken Burns Effect for Elementor Columns

Key Features

Elementor Ken Burns Effect

Ken Burns Effect for Elementor Settings
Premium Ken Burns Effect for Elementor Sections

Premium Ken Burns Effect Settings

  • Enable Ken Burns Effect: Switcher to Enable/Disable the Ken Burns effect on your Elementor section.
  • Add Item: Start adding images that will be displayed as backgrounds on your Elementor section.
  • Scale Speed (sec): Set the scale speed in seconds for the Ken Burns Effect.
  • Effect: How would you like the transition between background images looks like? You can choose from the following transitions:
    • Fade
    • Scroll Horizontal
    • Scroll Vertical
  • Effect Speed: Set the Ken Burns effect speed in seconds for your Elementor’s section background.
  • Infinite: Allows you to create an infinite Ken Burns Effect. This option is working only if you have just a single background image to add.
  • Overlay Color: Set an overlay color for the background images within the Ken Burns effect.
Settings for Ken Burns for Elementor
Elementor Ken Burns Effect Section Addon
Premium Ken Burns for Elementor Settings
Ken Burns Effect Settings in Elementor Page Builder
Item Settings for Elementor Ken Burns Effect
Elementor Ken Burns Effect Addon Settings and Item Options
Item Settings for Premium Ken Burns
Background Image Settings Included Within Ken Burns Effect for Elementor
Two Screenshots [Left] Show Settings for Ken Burns Effect, [Right] Image of Barber Trimming Beard with Ken Burns Horizontal Scroll Effect
Elementor Ken Burns Effect Settings: Scale Speed, Effect, Effect Speed, Infinite, and Overlay Color

In “Add Item”, select or upload the background images

Screenshots Shows [Left] an Arrow Points at Fade Effect, [Right] Section's Background with Ken Burns Fade Effect
The Fade Effect in Premium Ken Burns Section Add-on

Click the following link to check Ken Burns Fade Effect.

Screenshots [Left] an Arrow Points at Horizontal Scroll Effect, [Right] Section's Background Image of Barber Cutting Hair
Horizontal Scroll Effect in Premium Ken Burns Section Add-on for Elementor

Click the following link to check Ken Burns Horizontal Scroll Effect.

Effect Option for Elementor Ken Burns Effect
Vertical Scroll Effect in Elementor Ken Burns Section Add-on

Click the following link to check Ken Burns Vertical Scroll Effect.

  • Image Fit:
    • Fill: The image is sized to fill Elementor’s section. If necessary, the background image will be stretched to fit.
    • Contain: The image is scaled to maintain its aspect ratio while fitting within the Elementor section.
    • Cover: Image is sized to maintain its aspect ratio while filling Elementor’s section entire content box.
Image Size Option for Premium Ken Burns for Elementor
Premium Ken Burns Background Image Settings
  • Direction:
    • Center Center
    • Center Left
    • Center Right
    • Top Center
    • Bottom Center
    • Top Left
    • Top Right
    • Bottom Left
    • Bottom Right
Elementor Ken Burns Addon Direction Option
Ken Burns Elementor Section Add-on Background Direction

Check the demo in Ken Burns Effects for Elementor’s Section Background.

Items Settings for Ken Burns Addon for Elementor
Examples for The Background Images in Elementor Ken Burns Section Addon
  • Zoom Direction:
    • Zoom Direction “In” makes the image seem to be bigger and closer than it actually is.
    • Zoom Direction “Out” makes the image seem to be smaller and farther away than it actually is.
Zoom Direction Option for Premium Ken Burns Effect for Elementor
Elementor Ken Burns Zoom Directions “In and Out”

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.