Support » Plugin: Elementor Website Builder » Loading glitch for full-width stretched sections

  • Resolved AnjanPhukan

    (@anjanphukan)


    Hello,

    Elementor is a great page builder plugin. But it seems like the full-width stretched sections takes fractions of a second to load in it. It first shows white spaces on either side of the section and then fills the full width of that.

    I have tried it with many themes like OceanWP, Astra, etc. Some of the examples are, Example 2, Example 1, Example 3.

    Is there any way to fix this issue?

Viewing 15 replies - 1 through 15 (of 26 total)
  • Use Elementor Canvas

    Thread Starter AnjanPhukan

    (@anjanphukan)

    Thanks, but sorry that doesn’t help because it removes the site’s header and footer.

    I have the same problem and i’ve been googling around for some time now. Seems to be a lot of people having the same problem but no one comes with a solution sadly.

    Plugin Support Lisa R

    (@lisaelementor)

    Hi @greken91
    The stretch section is a JavaScript based feature.
    The stretch section JavaScript only starts running once the page is finished loading.
    The heavier page you have, the longer time it’ll take for it to run.
    Hope this helps!

    Thread Starter AnjanPhukan

    (@anjanphukan)

    Hi

    Can it not be fixed somehow? Many of clients complaint for this issue.

    Hello, agreed. Its very annoying 🙁
    Anyone found a workaround?

    @lisaelementor thank you for you reply, sadly this doesnt help one bit, this is a big deal for my clients and this problem is forcing me to look for another plugin since its not professional at all when the website behaves like this.

    Has anyone found a solution? 75% of my pages use a stretch header image and the flickering looks horrible

    I encountered this problem before and found a solution.
    1. Make sure that you are set to full width on Elementor page layout.
    2. On the WP dashboard, go to your page and click on Edit.
    3. On the right side, you will see page attributes.
    4. Change the Template dropdown to default or Elementor Full width.

    This should do the trick. Check this tree service website for reference.

    My problem right now is that this happens on my Header, where it stretches out and goes back to it’s original size. Maybe you guys have a solution for this.

    Hope you can help me out. Thank you

    I have the same issue using Generate Press Theme, latest WP and Elementor. It happens in empty pages, there is no huge content loading before the full-width javascript loads. Still the image loads with white space left and right and then suddenly resizes to full width (1920 resolution). The image is even wider than the content box with before resizing itself to full-width. It looks terrible.

    The suggestion of jedp621 didn’t help. My page is set to Elementor Full width, the image still resizes after loading.

    https://daedalis.de/k-pop/idol-girl-groups/gi-dle/

    Hi guys, I found a solution to this problem. I go to my template, via elementor, and I add a fraction of a fade in animated delay. about 1000. This allows the menu to load properly and not resize.

    @grapa This worked perfect, nice workaround
    I added only 100ms and it’s nice now

    • This reply was modified 6 months, 4 weeks ago by tolba59.
    Thread Starter AnjanPhukan

    (@anjanphukan)

    Hi,

    In most of my websites I use OceanWP theme now. For the pages I use the “Fullwidth Elementor” template. Then make the header section “Stretched” and “Full-width”. Now the header is full width are rest of the sections are the way you set them. But the good thing is NO LOADING GLITCH now.

    Not sure if this works with only this theme or all themes.

    Hope it helps.

    @anjanphukan same for other themes too i believe, when you use elementor full width template it goes fine without the need to use the JS stretch.
    But in my case here, I had a theme which had no elementor full width template, so needed to use the JS full width option, and this workaround worked fine with it

    Hi everyone. Here is a tip for those who still need help.

    Most themes will have their own page width in the CSS somewhere. You need to find that element and then add some CSS to fix it.

    In the case of Generate Press Theme:
    body .grid-container{
    max-width: none!important;
    }

    The element name will vary in the case of a different theme.

    In case of left over padding:
    #content {
    padding : 0px!important;
    }

    Good Luck and let me know what other themes you guys get working 🙂

    • This reply was modified 6 months, 3 weeks ago by bernietoast.
Viewing 15 replies - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.