Heading Widget Focused Title issue

Resolved Aurora
(@aurorazhubiz)

3 years, 1 month ago

Hi,
I wanted to create a title with a moving filling similar to the one you have on this page (“Elementor Widgets and Features”). I used the Heading widget and tried to play around with the menu of the Focused Title by enabling “Use text fill”: I chose an image and the position, and I tried choosing different options for attachment, repeat, and display size, but I cannot manage to make the filling image to move within the words. It’s just static. Am I doing something wrong or is there an issue with the widget?

Thank you a lot in advance.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Support Ahmed Amir Hossain
(@ahmedamir)

3 years, 1 month ago

Hi @aurorazhubiz,

Thanks for contacting us and extremely sorry for the delayed response.

I understand what you are looking for. We have used custom CSS for the color effect. Could you share the page URL with us? We will check it and update you as soon as possible. Looking forward to your response.

Regards,
Amir

Thread Starter Aurora
(@aurorazhubiz)

3 years, 1 month ago

Hi Amir,

Sorry for the late reply, but I didn’t notice your response.

This is the page URL: https://aurorazhu.com/jordan-ultimate-travel-guide/

I would like to replicate the effect for the word “UNEXPECTED” which is in the upper right corner of the post content.

Thank you very much in advance for your support.

Best,
Aurora
Plugin Support Ahmed Amir Hossain
(@ahmedamir)

3 years ago
Hi @aurorazhubiz,

Hope you are doing fine and am extremely sorry for the delayed response.

Please use the below CSS code to Appearance → Customize → Additional CSS to stylize your expected text.
```
@keyframes textGradientAnimate {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.unexpected h2 span {
font-weight: 800;
background-size: 200% 200%;
animation: textGradientAnimate 10s ease infinite !important;
background-image: linear-gradient(90deg, red, green, blue, yellow) !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent !important;
}
```
I have made a screencast for you where I explain how to implement this animation. Please follow it.

Let us know if you need further assistance.

Regards,
Amir
Thread Starter Aurora
(@aurorazhubiz)

3 years ago

Hi Amir,

Thanks a lot for the thorough explanation! That was extremely helpful.

Best,
Aurora

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Heading Widget Focused Title issue’ is closed to new replies.