Fraud Blocker

Table Of Contents

How to use Animated Gradient Background extension with Element Pack Pro

The Animated Gradient Background Extension is an amazing new feature presented by BDthemes that is a part of Element Pack Pro version 6.0. It lets you design a gradient background on the page that switches between the colors automatically with smooth color transitions.

Let’s learn how to use the extension on your site.

Enable the Animated Gradient Background extension

2 4 - BdThemes

To use the Animated Gradient Background feature with Element Pack Pro, you have to enable it first.

To do that, go to WordPress dashboard> Element Pack Pro> Extensions. After that, enable the Animated Gradient Background extension switcher and save settings.

Activate the Animated Gradient Background extension


Animated Gradient Background

To use the extension, you have to go to the target page, create a section on the page. After that, click on the section settings icon.

Now, go to the Style tab, then go to the Animated Gradient Background option, and enable the switcher named ‘Use Animated Gradient Background’. Now, you will see the background gradient is changing automatically. This is the default setting.


5 2 - BdThemes

Now, we will show you what a text looks like on top of the animated background just for instance. Let’s insert a text in the section, and customize it by changing the text alignment, Text color, Typography, and Text Shadow.

Customize the Animated Gradient Background

6 3 - BdThemes

Now, go back to the section settings window. Click on any item. For each item, you can see two color sets i.e.: Start Color and End Color. This option helps you select the color for the color transitions. You can upload various colors from any website i.e.:

7 3 - BdThemes

There is a button to add items in the section. You can add more items and set the transition color settings as the 1st item.

8 4 - BdThemes

Now, add some more items using the Add Item button, and set the transition color as you wish. Keep in mind that you have to choose pleasant colors that will attract the eyes of the visitors.

9 5 - BdThemes

You can change the direction of color transition from the Direction option. There are four options i.e.: Diagonal, Left Right, Top Bottom, Radial. The default is Diagonal. You can set them alternatively and see the effect on the page.

10 4 - BdThemes

Lastly, you can use the Transition Speed scrollbar to maintain the transition speed if you want. As a result, the colors will change at the speed you have set.

All done! You have successfully customized the Animated Gradient Background on your website.

Now, sit back and watch the screen.

Video Assist

You can watch this video to learn how to use Animated Gradient Background Extension in Elementor to get a hands-down experience. You can also visit the demo page for more examples. Hope you can use it on your own.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.

Our supported payment system and security badge