The only marquee code that really works in Elementor container based design. Thanks a lot for this great video. I have watched few videos for marquee in elementor, the code just breaks somehow making your design messy, despite trying multiple times.
Great video, greetings from Colombia. Starting today I'm subscribing to your channel. Everything is super clear and simple. I also have a question. Is there a way to make the text stay still when you hover over it?
thanks for the awesome tutorial and easy to listen explanation, the customizable heading is also a plus point although we can also modified any other widget that have more than 1 line, not just for heading
nice tutorial but still your marquee is feels like laggy so you can use this for better smoother animation: .marquee { overflow: hidden; display: flex; white-space: nowrap; } .marquee h1 { display: inline-block; padding-right: 100%; /* Ensures space between repeated texts */ animation: marquee 45s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
Thank you, this works. But I changed the H1 in the CSS to p and took a paragraph Element instead of H1 Headings, to avoid having 3 different H1 Elements on a page. It works too.
Same here - there is a double Header beneath the animated one... not sure why.. Okay, I think I found what I did wrong in the first attempt: needed to make sure hat I chose the same title tag (in my case H2) in the Title Element and in the HTML code aswell... make sure that I really use the same class (in my case marquee2) both in Title widget and HTML widget, and also check that I pasted the css in the correct field (into the Title widget CSS) , while I am using Elementor Pro... thanks... it works like a charm!
Can I do 3 Elements? For me the third doesnt move no matter what I do... Im trying to do 3 on top of each other: right to left, left to right, right to left and no matter what I do (new class, h1,h2 and h3 etc) the third one wont move Edit: I fixed it by renaming all the classes in the html code, for some reason it didnt register because I used a Capital M instead of small m. Amazing tutorial thank you!!!
i used the code but it was duplicated the heading underneath and the top heading was moving and the bottom was still. Even though i didnt create another heading underneath but still it was showig the content which was moving buit was still. Why is it duplicating?
Hi, Thanks for upload the video which is very useful. I did not find the css code link ( for stroke & others) in your description. I can see the only text scrol code link ( left & rigt ). Where i can get css code?. kindly guide me. thanks
I want to use this in a post title in a loop-item, the idea is to only show it on hover. The problem is that the marquee only plays in the first post item.
I can confirm it works with Elementor 3.24.4 and Pro 3.24.2. If you're on versions 3.24.0 you should upgrade, there was some display bugs with the first version of 3.24.
The only marquee code that really works in Elementor container based design. Thanks a lot for this great video. I have watched few videos for marquee in elementor, the code just breaks somehow making your design messy, despite trying multiple times.
hey, it is not working. I have 2 rows of text and one of them has a gap problem
it worked for me. thank you
Great video, greetings from Colombia. Starting today I'm subscribing to your channel. Everything is super clear and simple. I also have a question. Is there a way to make the text stay still when you hover over it?
thanks for the awesome tutorial and easy to listen explanation, the customizable heading is also a plus point although we can also modified any other widget that have more than 1 line, not just for heading
nice tutorial but still your marquee is feels like laggy so you can use this for better smoother animation:
.marquee {
overflow: hidden;
display: flex;
white-space: nowrap;
}
.marquee h1 {
display: inline-block;
padding-right: 100%; /* Ensures space between repeated texts */
animation: marquee 45s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
Thanks man, it works for me perfectly. I used it to scroll logos.
Thank you for this! Is this mobile friendly? Mines is not scrolling outside of desktop
thanks
Thank you, this works. But I changed the H1 in the CSS to p and took a paragraph Element instead of H1 Headings, to avoid having 3 different H1 Elements on a page. It works too.
Very helpful ❤🎉
Same here - there is a double Header beneath the animated one... not sure why..
Okay, I think I found what I did wrong in the first attempt: needed to make sure hat I chose the same title tag (in my case H2) in the Title Element and in the HTML code aswell... make sure that I really use the same class (in my case marquee2) both in Title widget and HTML widget, and also check that I pasted the css in the correct field (into the Title widget CSS) , while I am using Elementor Pro... thanks... it works like a charm!
Thank you works like a charm! Appreciate :)
Can I do 3 Elements?
For me the third doesnt move no matter what I do... Im trying to do 3 on top of each other: right to left, left to right, right to left and no matter what I do (new class, h1,h2 and h3 etc) the third one wont move
Edit: I fixed it by renaming all the classes in the html code, for some reason it didnt register because I used a Capital M instead of small m.
Amazing tutorial thank you!!!
Awesome tutorial, thank a lot!
Thank you! It works great!! :)
it works! thanks :)
i used the code but it was duplicated the heading underneath and the top heading was moving and the bottom was still. Even though i didnt create another heading underneath but still it was showig the content which was moving buit was still. Why is it duplicating?
I had the same issue but found that the cause was that the CSS uses H1 but I was using H2. Make sure they match and you should be good.
Hi, Thanks for upload the video which is very useful. I did not find the css code link ( for stroke & others) in your description. I can see the only text scrol code link ( left & rigt ). Where i can get css code?. kindly guide me. thanks
Pro Version in Require to use this code?
Yes you will need Pro to add custom code to the website.
I want to use this in a post title in a loop-item, the idea is to only show it on hover.
The problem is that the marquee only plays in the first post item.
How can I get the code?
tanx but its not work in newest Elementor version
I can confirm it works with Elementor 3.24.4 and Pro 3.24.2. If you're on versions 3.24.0 you should upgrade, there was some display bugs with the first version of 3.24.
&Nbsp; does not work, there is still a gap in between the last word and the first word
Try it with a lowercase n:
Thanks