Hi guys,
I use your products for years now and really love it! However I am facing an issue now which I do not know how to tackle. Hopefully you can help me out or point me in the right direction.
The issue is a high Cumulative Layout Shift (CLS) on a background image, the background image is set on the hero widget.
I would like to have a full width stretched image (this is set under row proporties => row layout) and fixed (this is set under the widget design => show background image). When applying these settings it results in a high CLS.
The only way to get a low CLS is to set the row layout (under the row proporties) on standard. But this results in an undesired design.
I have also tried to solve the issue with different widgets (like a simple image or header) but the result is the same.
Is there any way to reduce the CLS and have a full width stretched image with a hero?
PS: currently I am using the Hero widget only as a text overlay. Theme is corp, widget bundle and page builder.
My site is https://protecco.nl . Thanks in advance,
Regs, Niek.
Forgot to add the below:
I have set a test site where you can see the result with the high CLS. look at https://protecco.nl/protecco2/
on the above site the design is as desired (row proporties => row layout on full width). It is an empty row (no widgets yet).
Awaiting your reply…
Hi Niek
Thanks for reaching out.
Page Builder uses JavaScript for full-width rows. JavaScript allows full-width rows to function with any theme. Page Builder offers CSS-based full-width containers as an optional customization. The required filters are documented at the below URL.
Page: Advanced Customizations
The filters can be inserted using a plugin like Code Snippets or a child theme.
Hi Andrew,
Thanks for your reply and advice.
I have created a child theme for corp and tested your recommendations. However no improvement. There are 2 options mentioned in the link, I have tried both simultainiously and seperate, does not make a difference.
Meanwhile I have found out that the cause for the high CLS is the below element:
div.siteorigin-panels-stretch.panel-row-style.panel-row-style-for-229-0
Is there a way to tackle this problem via the child theme or differently?
Thanks and regards, Niek.
Hi Niek
This is a bit of a challenging one for us in our free support scope. The reason we didn’t add this as a setting is the filters require the correct values. There are usually one or two small CSS changes required after the filters are in place. We do our best within our free support scope to help with any basic settings or usage. This change is more suited to our premium support scope where we have a budget to work with.
Did you change the values in the filters to match your theme? The filters will have no effect if you leave the values as they are which are for the SiteOrigin Corp theme.
Hi Niek
A quick follow-up message. Are you making progress?
Thanks
Andrew
Hi Andrew,
YES! It worked. First I couldn’t get it working and whilst replying to you explaning what I’ve done, tested again and it worked.
For those who are looking for a sollution on the high CLS due to using full width page rows, this is what I have done:
Using corp theme with SO page builder and widget bundle.
1. create a child theme for copr and activate it.
2. add the below filters to the style.css of the corp child
3. use the desired width value (here I used 1920px).
4. use a background picture on the row with the desired width (for me 1920px)
5. set the value of the “row style”=>”row layout” to full width.
I used lighthouse to test and the CLS is reduces to 0!
add_filter( ‘siteorigin_panels_theme_container_width’, function( $container ) {
return ‘1920px’;
} );
add_filter( ‘siteorigin_panels_theme_container_selector’, function( $selector ) {
return ‘.site-content .corp-container’;
} );
Thanks again Andrew and the SO team!
Regs, Niek.
Hi Niek
Thanks for the detailed update; I’m glad to hear you’re making progress. That’s great news!
I can’t see because of your caching plugin but please, check that you aren’t loading the Corp parent stylesheet twice. We’re using a minified stylesheet so it’s easy to load the parent stylesheet twice via a child. Please, refer to our starter child theme for Corp as a reference:
Page: Child Theme
Hi Andrew,
I have used the corp child theme from your site. Currently the only entries (besides the header) are the filters as described before.
Do you mean that in case I copied the style.css from the parent theme and left all entries in there, things go bad?
If not, how would I make sure that the Corp parent stylesheet isn’t used twice? How to check and resolve?
Thanks again…
Hi Niek
If you’ve used the demo child theme then you’re all sorted. The Corp child is slightly different to the normal child theme setup because we’re using a minified stylesheet in the parent:
https://github.com/siteorigin/siteorigin-corp/blob/develop/functions.php#L172
Cheers for now :)
Andrew