The Text Gradient Background extension in Wow Elements Pro allows you to apply stylish gradient color effects to your text backgrounds without any coding. It helps create modern and visually appealing typography by adding smooth gradient transitions and vibrant color combinations to headings, titles, and text elements. With flexible customization controls and dynamic styling options, you can easily enhance the visual appeal and creativity of your Elementor website. In this documentation, we will guide you through how to use and customize the Text Gradient Background extension in Wow Elements Pro.
Enabling the Text Gradient Background Extension #
To use the Text 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 Text Gradient Background Extension Name.
- Enable the Text Gradient Background Extension.
- Hit the Save Settings Button
Where To Find The Text Gradient Background Extension #
To find the Text Gradient Background Extension, you must need to select the element where you want to use the extension. Let’s see the steps below –
1. Click to text type elements which you want to configure by the Ripple Effects extension.
2. Now move to the Advanced tab.
3. You will find the Text Gradient Background extension here along with the Wow Elements logo.
Configuring the Text Gradient Background Extension #
In this part, we will configure both Heading & Button widget with the Text Gradient Background Extension. Let’s see how the Text Gradient Background Extension works on both widgets text. Let’s start with the Heading widget. As we have two settings for background classic & background. We will describe those one by one.
Heading Widget (Classic Background) #
Select the Heading widget first and then move to the Advanced tab. After that open the Text Gradient Background and let’s see what we have here –
1. Use Text Gradient Background: Enable the switcher to use the text gradient background on the selected element.
2. Class & ID Selector: You can add the class & ID selector of the text parent tag here so that you can apply the extension here.
3. Background Type: You can choose the background type to be classic or gradient with this option. Here we have selected the background type as Classic.
4. Color: You can change the background color with this option.
5. Image: You can change the background image with this option.
Heading Widget (Gradient Background) #
Now, let’s see what we have when we use the gradient background –
1. Background Type: You can change the background type to be classic or gradient with this option. Here we have selected the background type as gradient.
2. Color: You can set the starting color of the gradient effect applied to the text with this option.
3. Location: You can control the position of the first color within the gradient transition.
4. Second Color: This option define the ending color of the gradient effect.
5. Location: You can adjusts where the second color appears within the gradient flow.
6. Type: Allows you to choose the gradient style, such as Linear or Radial.
7. Angle: You can control the direction and rotation angle of the gradient effect for Linear gradients.
8. Angle: Here, you can see the visual of changes that you have made by changing the value.
Button Widget (Classic Background) #
Select the Button widget first and then move to the Advanced tab. After that open the Text Gradient Background and let’s see what we have here –
1. Use Text Gradient Background: Enable the switcher to use the text gradient background on the selected element.
2. Class & ID Selector: You can add the class & ID selector of the text parent tag here so that you can apply the extension here.
3. Background Type: You can choose the background type to be classic or gradient with this option. Here we have selected the background type as Classic.
4. Color: You can change the background color with this option.
5. Image: You can change the background image with this option.
Now, let’s see what we have when we use the gradient background –
1. Background Type: You can change the background type to be classic or gradient with this option. Here we have selected the background type as gradient.
2. Color: You can set the starting color of the gradient effect applied to the text with this option.
3. Location: You can control the position of the first color within the gradient transition.
4. Second Color: This option define the ending color of the gradient effect.
5. Location: You can adjusts where the second color appears within the gradient flow.
6. Type: Allows you to choose the gradient style, such as Linear or Radial.
7. Angle: You can control the direction and rotation angle of the gradient effect for Linear gradients.
All done, You have successfully customised the Ripple Effects Extension on your website element.
Video Assist #
You can also watch the tutorial video about the Text Gradient Background Extension. Please visit the demo page for examples.
Thanks for staying with us.
