Layout shift

jupebox · December 24, 2021, 1:07am

My website has a weird layout shift when loading. The cause is unknown.

prakash_s · December 24, 2021, 2:19pm

Thanks for writing to us.

It might be an issue of plugin conflict or a cache issue. I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

If none of those work, It would be best if you could copy your live website to your staging area. and send your details in a secure note so that we can investigate your setting without breaking your live site. Please provide the following details

WordPress Login URL
Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

jupebox · December 24, 2021, 11:03pm

Thanks. My team and I have checked, but unless we’re missing something, we can’t seem to figure this out.

ruenel · December 25, 2021, 5:12am

Hello @jupebox,

We cannot get past the Authorization screen. Please provide the access credentials for this as well.

See the secure note.

Thanks.

jupebox · December 30, 2021, 3:52am

Sorry. I added that to the bottom.

prakash_s · December 30, 2021, 11:07am

Hello @jupebox,

I tried to access your site but your WordPress admin page is locked. Please check it and let us know when it is ready to be accesiable.

Thanks

jupebox · December 30, 2021, 6:45pm

try /genesis/ as the admin page

ruenel · December 31, 2021, 2:35am

Hello @jupebox,

You are using the Elementor plugin in building the page. It is outdated along with the X theme and the Cornerstone plugin too. Please make sure that everything is up to date. Our latest updates are the following:

X theme 9.1.4
Cornerstone 6.1.4

As for the Element plugin, please do check the creator of the plugin site for any updates.

Best Regards.

jupebox · January 2, 2022, 10:40pm

How do I update Cornerstone? There is no update button in Wordpress.

jupebox · January 2, 2022, 10:42pm

Also, how do I update X within staging? It’s saying my website is not validated, but it is for my main site.

ruenel · January 3, 2022, 2:00am

Hello @jupebox,

You need to validate the staging site. Simply log in to your Themeco account and assign the staging URL to your license code.

See the secure note.

Once the staging site is validated, you can go to Dashboard > Updates and update both the X theme and the Cornerstone plugin.

Best Regards.

jupebox · January 3, 2022, 6:54pm

I updated X but that messes up my menu bar.

You’ll see it on staging.

jupebox · January 3, 2022, 6:58pm

Okay, maybe that resolved on its own, but the layout issue remains. It still jerks when loading.

christian · January 4, 2022, 4:53pm

Hey @jupebox,

The cause of the layout shift is because the logo in the header is being lazyloaded. While the page waits for the logo to load, the layout below the header couldn’t complete the display.

Please find where in your site to disable the lazyloading. images above the fold should not be lazy loaded as they’re the first thing you see when visiting a website.

None of my test sites are lazyloaded so this could be an isolated issue or happening only on your end. And with that said, this is not a theme issue.

Thanks.

jupebox · January 5, 2022, 1:45am

I talked with the plugin maker about Hummingbird for the lazy loading.

They requested this:
Please also check with the theme support to help with a workaround to add a unique identifier for the logo.

Then they can bypass the logo for lazy loading.

christian · January 5, 2022, 4:29pm

Hey @jupebox,

The logo (Image HTML element) does not have a Class nor ID but its link container has. It can be targeted by this selector.

.x-brand img

Other workarounds would require theme customization which is beyond the scope of theme support. Theme customization guidance is reserved for our One subscribers. You might want to consider subscribing to put your own identifier to the logo.

Another alternative would require upgrading to Pro so you can create a custom Header using the Header Builder.

Hope that helps.

jupebox · January 6, 2022, 1:23am

Thanks.

Can you explain the reason for upgrading? I think I saw it was free, correct?

I bought X theme years ago, so I’m curious what the changes are.

Will it change to a subscription or something in the future? I guess I’m confused about the purpose.

marc_a · January 7, 2022, 8:16am

Hi @jupebox,

The reason why my colleague advises you to upgrade your X to Pro is that you can customize your header using the header builder. It is also another way to add a custom identifier to your logo.

On the other hand, I check your account, and Yes, you can upgrade your X to Pro for free.

Hope that helps.

jupebox · January 7, 2022, 6:21pm

What is the difference? Why isn’t it just a normal part of the X theme?

prakash_s · January 8, 2022, 4:06pm

Hello @jupebox,

X and Pro are two themes. Pro theme has more powerful features compared to the X theme. In the Pro theme, you can create and design a custom Header/Footer and assign it for each of your pages, posts, archive page, and Woocommerce pages as well.

You would also get a Layout builder in the Pro theme. With the help of the Pro theme, you can create a custom design for the Blog page, Category archive page, Post details page(single post page), and Woocommerce pages as well.

You may check out this article to learn more about the difference between X and Pro

Thanks