The Animated Gradient Background extension in Wow Elements Pro allows you to add smooth and dynamic gradient background animations to your website sections and elements without any coding. It helps create modern and visually engaging designs by applying animated color transitions and flowing gradient effects to your layouts. With flexible customization controls and stylish animation options, you can easily enhance the visual appeal and interactivity of your Elementor website. In this documentation, we will guide you through how to use and customize the Animated Gradient Background extension in Wow Elements Pro.
Enable the Animated Gradient Background Extension #
To use the Animated Gradient Background Extension from Wow Elements Pro, first, you have to enable the extension.
- Go to WordPress dashboard → Wow Elements Plugin dashboard.
- Then, Click the Extension Tab.
- Search the Animated Gradient Background Extension Name.
- Enable the Animated Gradient Background Extension.
- Hit the Save Settings Button.
Please note that this extension does not function inside Elementor Editor Mode. To see the final result properly, you need to preview the page on the frontend.
Where To Find The Animated Gradient Background Extension #
1. To find the Animated Gradient Background Extension, you must need to select a container.
2. After that complete the basic adjustment that you need to do for the container.
3. After that move to the Style Tab of the selected container.
4. Here, you can see the Animated Gradient Background.
Configuring the Animated Gradient Background Extension #
1. Use Animated Gradient Background: You can enable the switcher to turn on and get more option to setting up the Animated Gradient Background extension.
2. Close Icon: You can click on this close icon to delete the item.
3. Copy Icon: You can click on this copy icon to duplicate the item.
4. Add Item: You can click on this button to add more item.
In the each item, you will get more option. Let’s see what we have here –
5. Start Color: You can select the start color of animated gradient background with this option.
6. End Color: You can select the end color of animated gradient background with this option.
Preview #
1. You can see the end color here. As we have keep the direction of color as Radial so it’s in the middle.
2. You can see the start color here. As we have keep the direction of color as Radial so it’s appearing by surrounding the middle place.
5. Start Color: You can select the start color of animated gradient background with this option.
6. End Color: You can select the end color of animated gradient background with this option.
Preview: #
1. You can see the start color here. As we have keep the direction of color as left right so it’s in the left.
2. You can see the end color here. As we have keep the direction of color as left right so it’s in the right.
9. Direction: You can set the direction of the animation in this field. The available directions are – Diagonal, Left Right, Top Button & Radial.
10. Transition Speed: You can adjust the animation speed of the background with this option.
Final Preview on Frontend #
This is the view of Animated Gradient Background as per the upper settings. You can go with your needed one.
All done, You have successfully customized the Animated Gradient Background Extension on your website element.
Video Assist #
You can also watch the tutorial video about the Animated Gradient Background Extension. Please visit the demo page for examples.
Thanks for staying with us.
