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.

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.

Key Features

Elementor Ken Burns Effect

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.

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

Click the following link to check Ken Burns Fade Effect.

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

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.

• Direction:
  • Center Center
  • Center Left
  • Center Right
  • Top Center
  • Bottom Center
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

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

• 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.