5/5

How To Create An Animated Gradient Background.

For this tutorial I am going to show you how to recreate the homepage background on iheartelementor.com. It may seem like a monstrous task but it is pretty simple.

So let’s begin.

To begin we need to open another tab and visit Animista . You can find a post I wrote on it here. The part of the site we will be using is located at the top labeled background.

After you select the Background option choose Color-change.

The option box provides you with four gradient options to choose from. Afterwards you can play with the timing if the animation is to fast or leave set to its default settings.

Bringing it all together.

Once you have your options all figured we need to collect the code and transfer it to Elementor. Look to the far right and click on the brackets to expose all the code. A window should popup similar to the one below.

Copy both the class and the keyframes and paste that into your sections CSS area or in the customizer.

Next we need to take the css class and add it to the section advanced area. Your class should look similar to this.

[css]color-change-2x[/css]

Include this class in the advanced area of your section.

If you followed my instructions you should now see the results of all your hard work. All that remains is to change the color codes to what ever you desire.

Thanks for reading 😀.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

Leave a Reply

Your email address will not be published. Required fields are marked *

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.