Welcome to this comprehensive tutorial on how to add animated gradient text effects to your Elementor website. This guide is designed to be user-friendly, providing clear steps to help you create eye-catching text animations that enhance your website’s aesthetics.

🚀 Step 1: Setting Up Your Page

Before we dive into adding the animated gradient text, we need to set up our page correctly. The first thing you should do is create a new page or edit an existing one in Elementor.

Once you are in the Elementor editor, change the background color of your page to black. This will help the gradient text stand out more effectively.

• Click on the settings icon in the bottom left corner.
• Navigate to the ‘Style’ tab.
• Select ‘Background Type’ and choose a dark black color.
• Click ‘Update’ to save your changes.

🎨 Step 2: Adding a Two-Column Section

Now that your background is set, the next step is to add a two-column section to your page. This layout will allow us to place our animated text effectively.

To add a two-column section:

• Drag the ‘Two Columns’ widget into your page.
• Set the height of the section to ‘Fit to Screen’ for a full-page effect.

🔤 Step 3: Inserting Text Elements

With your section in place, it’s time to add the text elements. You can choose to add either a heading or a text editor widget.

For this tutorial, we will add a text editor widget:

• Drag the ‘Text Editor’ widget into the left column.
• Type “Happy Diwali” in the text field.
• Duplicate this text editor for the second column and change the text to “Snake Text”.

🖌️ Step 4: Styling Your Text

Now it’s time to style your text to make it visually appealing. This includes centering the text and adjusting the typography settings.

Follow these steps:

• Align both text elements to center.
• For the “Happy Diwali” text, change the font family to ‘Alpha Slab’ and set the font size to 70.
• For the “Snake Text”, choose the ‘Akaya’ font and adjust its width to 30%.

🌈 Step 5: Adding Animated Gradient Color

Now comes the exciting part! We will add an animated gradient color effect to our text. This requires a simple CSS code snippet.

If you have Elementor Pro, you can add custom CSS directly. If not, we can add the CSS through the HTML widget. Here’s how:

• Go to the ‘HTML’ widget and drag it below your text elements.
• Paste the following CSS code in the widget