Home › Forums › WoodMart support forum › Marquee
Marquee
- This topic has 12 replies, 4 voices, and was last updated 1 year, 1 month ago by Luke Nielsen.
-
AuthorPosts
-
November 7, 2023 at 4:55 pm #510595
gianlucacontentoParticipantHi, we are testing the Marquee function on our site, but we have encountered some critical issues that we would like to resolve.
We are talking about a Marquee block inserted in Topbar, as a Header Banner using an Html Block in which we created it.
1 – First of all, since the block contains useful promotional information, we would like to make it Sticky.
2 – then the question of scrolling speed. Practically speaking, since Desktop and Mobile screens have very different widths, if you now have the possibility of entering only one scrolling speed, you will get an unpleasant effect, i.e. scrolling that is too slow on one device and/or too fast on the other. We partially remedied this by using media queries, but it doesn’t seem like an optimal solution to us.
Do you plan to set different speeds for different screens, as is now planned for other parameters?
Or is there a snippet that can be added to the theme to make up for it temporarily?Thank you.
November 8, 2023 at 3:07 am #510666
Elise NoromitMemberHello,
Unfortunately, it is not possible to make this banner sticky, you can disable the close button not to allow closing this banner.
As for the site speed, please check this manual: https://space.xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021
If you have any questions please feel free to contact us.
Best Regards
November 8, 2023 at 10:38 am #510736
gianlucacontentoParticipantSorry but did you read the topic before replying???
1- to make the banner Sticky a bit of CSS would be enough, it doesn’t seem impossible to me.
2- what answer is this? a guide on optimizing site speed? I repeat, did you read the question??? We are talking about the (horizontal) scrolling speed of the Marquee block, not how to optimize the speed of a site!!!
November 8, 2023 at 5:24 pm #510903
Bogdan DonovanKeymasterHi,
Sorry for misunderstanding. To provide solutions for both of your issues, we need to check your site configuration and theme settings. Please provide us with a link to your site and admin access to WordPress dashboard. Once we have the access details, we will get to work immediately to resolve the issue as quickly as possible.
Thank you for bringing this to our attention, and we look forward to hearing back from you soon.
Best regards
November 9, 2023 at 11:27 am #511050
gianlucacontentoParticipantDear Bogdan, it seems that you too, although responding in a way that is not off topic, have not read the request.
Access to the backend of the site is used to resolve specific issues affecting a specific site.
In this case, however, I have asked you, and I invite you to reread the request, for changes to improve the functioning of a part (the Marquee block) of your theme, which you could experiment with on any site that uses your Woodmart theme.
To make your task easier, I will list again here the requests (points 1 and 2):
1 – First of all, since the Marquee block, inserted into the Header Banner via Html Blocks, contains useful promotional information, we would like to make it Sticky.
2 – then the question of scrolling speed. Practically speaking, given that by inserting the same content (in our case text, and always used in the Header Banner) in the block, and applying the same speed, since Desktop and Mobile screens have very different widths, the same block will scroll very quickly on the smaller device (Mobile) or very slowly on the larger device (Desktop). So we wonder if you now have the possibility of entering only one scrolling speed for both devices, you will get that unpleasant effect, i.e. scrolling that is too slow on one device and/or too fast on the other. We partially remedied this by using media queries, (creating two different Rows with two different Marquee Blocks, with the same contents but two different scrolling speeds, which with media queries we made visible only one from Desktop and one only from Mobile), but it doesn’t seem like an optimal solution to us.
Do you plan to set different speeds for different screens width/devices, as is now planned for other parameters as design options?
Or is there a snippet that can be added to the theme to make up for it temporarily?About point 1, making part of a Theme “Sticky” should be as simple as applying CSS to selectors
position: sticky;
top: 0;
It would only be necessary to understand which selector to apply this rule to.
It seems strange that this isn’t possible with your theme, or that you have to log in to our site to specify the selector.Furthermore, still using the Marquee block, we noticed that:
3- by inserting only Images into the scrolling content (without text and without links), from Mobile if you click on the image, the (horizontal) scrolling stops and there is no way to restart it. I think this case needs to be resolved too, right?I hope that this time the request is clearer and is treated appropriately with valid indications with a view to a solution (at least to the first two requests).
Thanks again.November 9, 2023 at 1:59 pm #511130
Bogdan DonovanKeymasterHi,
1. Our “Header banner” option (https://prnt.sc/FTE2x6sS_jJ6) doesn’t have “sticky” option and unfortunately making it “sticky” via custom CSS also isn’t possible because such functionality is not built into it during development, main reason of this that Header Builder already has three rows each of them has own option that can make it sticky (https://prnt.sc/cdIfhZ6LmVY2).
Even if ignoring this circumstance, simply applying
position: sticky;
wouldn’t do the desired results because of the theme HTML structure..header-banner { position: sticky; top: 0; }
And using
position: fixed;
like this:.header-banner { position: fixed; top: 0; }
Won’t work either because it will collide with other fixed elements and options that calculate their own position from the top of the screen like side sticky navigation, off-canvas sidebars, sticky header, sticky column, and others. Fixing all these conflicts between sticky elements and options requires a lot of custom code that unfortunately can’t be covered by our theme support and can’t be maintained in future updates.
In this case, the only way to create a sticky Marquee element at the top of the site is to place an HTML-block with a Marquee element in the Header builder top bar row and enable a sticky row option for that particular header row. But this method of setting may require different manipulations with HTML-block content, sticky header settings, top bar row layout and to provide valid step-by-step instructions on how to set it up we need to know your site layout type, page builder plugin, marquee element content and setting, sticky header setting, and top bar row settings, etc. This is the reason why we requested your site link and admin access since the easiest way to know all listed above is to see your site configuration in person and provide valid instructions.
2. Our Marquee element animation is done via pure CSS animations. This allowed us to make it without the use of JS, with a small amount of CSS code, minimal impact on site performance, and relatively easy to modify with a single custom CSS, but the main downgrade of this approach that is you cannot set a strict “speed” value since initial speed of scrolling is depending on from individual marquee content and in this case you can set only time of one animation cycle.
In this situation, initial scrolling speed depends on the combined value of the amount of content and screen width. Currently, we already plan (in the 7.4 theme update) to add a responsive setting to the “Scrolling speed” option with the ability to set speed separately for Desktop, Tablet, and Mobile which will allow adjusting scrolling speed for each individual Marquee element depending on its content. But in your first reply you also requested a temporary code snippet to change following scrolling speed, and to prepare such a snippet we need to inspect your issue with Marquee element, knowing where element was added and which page builder is used since both WPBakery and Elementor builder has different media query breakpoints and generate its CSS code differently. This is the reason why we requested your site link and admin access since the easiest way to know all listed above is to see your site configuration in person and provide a valid code snippet with instructions on how to apply it.
3. Our Marquee element has a “Pause on hover” option (Elementor https://prnt.sc/W1irjbNPhq4J, WPBakery https://prnt.sc/mU_EgCXFD8Ac). If this option is enabled, your scrolling content will stop if the mouse cursor is placed on it. On desktop devices, it’s working as it’s shown in the following video (https://gyazo.com/317a2257fcabc4ca9053fe7468be003b), but since mobile devices don’t have a mouse cursor – “hover state” is working differently on mobile browsers with touch screens devices. By default, on mobile devices “hover state” is activated by a single tap on the screen, working similarly to “focus state” on Desktop, since “Pause on hover” will be working on mobile devices with a single tap on marquee content and to “unhover” you need to tap in anywhere else other than the marquee content. Here is a video of how it works on a mobile emulator with the visible cursor (https://gyazo.com/25cdb0c7b523513fa607d940c90f5963) and how it’s working on real mobile device (https://monosnap.com/file/1wvlxWS6UVWscPwEtl7aaCplz9vb6h).
So if you are facing the following behavior with the Marquee element related to “Pause on hover” you have different options to sort it out:
A. Disable “Pause on hover” to prevent scrolling from stopping after the interaction.
B. If your content stops after tapping on it, tap on any other place to renew the scrolling animation.
C. Fill Marquee content items with real links, so the user can go to another page, ignoring the subsequent animation state.Kind Regards
November 9, 2023 at 5:56 pm #511209
gianlucacontentoParticipant1. Everything is technically clear. I have no problem showing you my site which by the way I think you can already see. But there is no particular setting compared to what I have already written to you (2 Header Banners created with HTML blocks, one with a slower speed than the Maruqee visible only from mobile, the other with faster scrolling visible only from desktop), hiding one of the two blocks on each device with media queries (even if someone, like google bot, sees anyway that I have two blocks with the same repeated information), a temporary solution. I don’t expect a huge amount of work dedicated only to my site on your part. Better a solution that can be shared by everyone, because I assure you that the Marquee element is also useful on a communicative level in sticky mode. You do.
2. Okay, it was enough to say that in the next update you will include this solution. Thank you.
3. We have already seen that by inserting links the problem does not arise, simply because navigation continues on another page. The fact that to resume scrolling the user (who does not know how the site was built) must click outside the carousel is not very intuitive. Most click on the same carousel and think there is a malfunction. Try taking a survey.
Thank you for your reply and time.
I therefore await an update for point 2, hoping that you will find a solution for point 1 too.
Hi.- This reply was modified 1 year, 1 month ago by gianlucacontento.
November 9, 2023 at 6:20 pm #511216
gianlucacontentoParticipantOne last thing, which I think would give a better appeal to your theme, would be to also make the “Upselling” and Crossselling” product carousels at the bottom of the product pages, horizontally scrolling, with the same modality as the Marquee, in this case I think with a selection/choice to make in the Theme settings.
what do you think?
Could you implement it in the future?
Thanks again.November 9, 2023 at 7:08 pm #511230
Bogdan DonovanKeymaster1. As was said in the previous reply, the header banner can’t be made sticky with the simple custom CSS code. The only solution in this case is to place the Marquee element in the top bar row and make it sticky using header builder options.
2. These options will be added in the next theme update. Before that, you can try to add the custom class “custom-marquee” to the parent column of your marquee which speed you want to adjust (https://prnt.sc/g-LAwQdNoDR5). And change the speed of this particular marquee with the following custom code. Code needs to be added to the Global Custom CSS area in Theme Settings.
@media (max-width: 1024px) { .custom-marquee .wd-marquee .wd-marquee-content { --wd-marquee-speed: 30s; } } @media (max-width: 768px) { .custom-marquee .wd-marquee .wd-marquee-content { --wd-marquee-speed: 25s; } }
3. Try to use the following custom code to disable interaction with sliding content on mobile devices with “Pause on hover” option enabled.
@media (max-width: 1024px) { .wd-marquee.wd-with-pause:hover .wd-marquee-content { animation-play-state: running; } }
We also consider adding these changes in our next theme update.
4. Thanks for your suggestion, we will consider this as a feature request.
Kind Regards
November 9, 2023 at 7:17 pm #511232
gianlucacontentoParticipant1- Yes, but in this way we lose an important line in the most important part of the site, the first screen.
2- ok.
3- ok.
4- ok.Thanks
November 10, 2023 at 10:39 am #511341
Bogdan DonovanKeymaster1. This header banner functionality requires quite a lot of code changes both for the backend/frontend and testing alongside other sticky options already present in our theme. Unfortunately, we can’t simply add such a feature because it competes with header rows’ sticky functionality and before was never asked by our clients.
But in these case, you can visit our feature request page (https://woodmart.canny.io/feature-requests), describe this option in more detail and why such header banner functionality will be important for our clients. If it is supported by our community, this option may actually end up in our development queue for future updates, as most of the community feature requests do.
Kind Regards
November 10, 2023 at 5:49 pm #511529
gianlucacontentoParticipantThanks again Bogdan.
I believe it is very useful for communicating Promotions and Purchase Conditions in an e-commerce site, visible from both Desktop and Mobile in the same way.
I will follow your advice.November 14, 2023 at 5:34 pm #512328
Luke NielsenKeymasterHello,
You are welcome! Always remember that you can reach out to us with any questions you may have.
We wish you a splendid day!
Kind Regards
-
AuthorPosts
The topic ‘Marquee’ is closed to new replies.
- You must be logged in to create new topics. Login / Register