Layout shift (image jump) on hero slider

Hello,

I’m trying to recreate a slider similar to the “COLOR SCHEME LIGHT SLIDER”
demo shown here: https://woodmart.xtemos.com/sliders/ (XTEMOS ELEMENT
section).

I built my own single-slide hero slider first and noticed the image causes
a visible layout shift/jump when it loads on the live site — the content
appears to resize or reposition briefly as the image finishes loading,
even though the slider height is set to a fixed 600px on desktop.

To rule out a configuration mistake on my end, I also imported the
official “Color Scheme Light Slider” template directly from your library
— and the exact same jumping/shifting happens with the imported template
too, unmodified.

I originally added the image via the “Image” option in the slide settings.

Questions:

1. For a slide with a fixed custom height, is it recommended to use the
“Background” option instead of “Image” to avoid this kind of layout
shift? My understanding is that Background images are always sized to
the container via CSS background-size, while the Image option might
not reserve space the same way — is that correct?

2. If “Image” is still preferred (e.g. for responsive srcset support),
is there a setting to make sure width/height are properly reserved to
prevent layout shift (CLS)?

3. I already excluded the image from lazy loading and set it as the
preloaded LCP image, but the jump/shift still happens — could this be
unrelated to lazy loading and purely a missing width/height reservation
issue?

4. Since this also happens with your own unmodified template import, could
this be a known issue with this particular slider template?

Thank you for your guidance.

Hello,

First of all, update the new version of the theme “WOODMART WordPress NEW: 8.5.7 RELEASED”, update the required plugin, and check the issue.
https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, turn off all of the plugins not related to the theme, refresh your cache, and check if the problem persists.

If the issue still remains, let me know and I will check and give you a possible solution.

Best Regards

Hi Aizaz,

Thanks for the suggestions. I updated to WoodMart 8.5.7 and the required plugin as advised, but unfortunately the layout shift/jump issue on the slider is still there.

After further testing, I think part of what I was seeing may actually be a local rendering issue on my side — even Elementor’s own editor preview doesn’t display it correctly in my browser, while the slider renders fine on other devices/browsers. So that specific symptom may not be a theme bug.

However, testing across multiple devices has surfaced a related but more serious issue: whenever the slider is set to a custom height (different from the default), it glitches/stutters and elements overlap on top of each other — this happens on PC, mobile, and other devices alike. Screenshot attached. Could you advise how to fix this?

Separately, after the update I also noticed that on mobile, category and subpage headings are no longer fully visible (they get cut off) — second screenshot attached.

Thanks in advance for your help.

Best regards,
Dominik

Attachments:

You must be logged in to view attached files.

Hello,

01. I have checked your site and have not seen the slider issue. Can you please share a small video of the issue for a better understanding of the issue so I will check and give you a possible solution.

02. Due to the Header Overlap style, it might be happening on the archive pages.

Navigate to WoodMart > Header builder > edit default header (highlighted star icon), or you can go through the admin bar directly.

Click on the Settings button and disable the Make it overlap option.

If you want to disable the overlap only on this specific page. Please try creating a new header and disabling the header overlap, and setting it as the Custom header for the page.

You can read our detailed documentation for further help: https://xtemos.com/docs/woodmart/options-for-pages/

But If you use header overlap on archives pages too let me know i will check and give you a possible css code to fix this.

Best Regards

Hello,

01. Thank you for checking. I’m attaching a video showing the issue – the sliders overlap, the original slide doesn’t disappear, and the buttons end up displayed on top of each other.

02. Yes, I also use the header overlap on subcategory (archive) pages, so I would need more spacing between the menu and the heading there as well. Could you please provide the CSS code to fix this?

Thank you very much!

Best regards

I can not upload the video file.

Hello,

01. I have checked the website currently provided in the Private Content, but I’m unable to reproduce the slider issue there. Also, the screenshot/video you mentioned appears to be showing a different website than the one currently provided.

Could you please share the correct website URL where the slider overlap/stuttering issue is currently occurring? This will allow us to check the exact slider configuration and reproduce the issue on the affected site.

02. Try to use the below custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.

.wd-page-title .container {
    margin-top: 20px;
}

Best Regards

Hello,

thank you. The website is https://healingnature.cz/.

Regards.

Hello,

Could you share your admin login details in the Private content field? Then we can check your settings and find what’s actually causing this instead of guessing. Only our support team can see that field, and we keep your details confidential.

Best regards,
XTemos Studio

Thank you, there are the information for log in

Hello,

We have identified the issue with the slider and will fix it in the nearest theme update.

In the meantime, you can add the following custom CSS in Theme Settings > Custom CSS > Global CSS:

.wd-slider>.wd-carousel-inner>.wd-carousel {
    overflow: var(--wd-carousel-overflow, clip);
}

Regards.

Thank you. Now its every perfect. 🙂

Sounds Great! that your issue has been solved.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts