Archived topic
Best Way to Migrate to GP + GB for Full Width Pages
9 replies · Started by Ian on August 4, 2022
At one point, the suggested method to run a full width hero on pages was to use Elements to make the Page full width. Then drop in a GB Container and move all current page content into said container to utilize the inner container function. Is this still the best way to achieve a full width hero on a page? Some sites have hundreds of pages due to their longevity online. Not sure how feasible it is to manually add a container and then move everything in as many long standing sites are coming over from Classic Editor. Any thoughts on the most efficient way to handle this migration?
Hi Ian,
You can use a Block Element - Page Hero for the full page hero on all pages.
Then, use a Layout Element to control the width of the content. Alternatively, you may also set the content width in Appearance > Customize > Layout > Container.
Hi Fernando,
Thank you for your suggestions. I was under the impression that the old Page Hero function was not being recommended anymore. I see it's been moved into Blocks, I see it now. Thanks.
So to be clear, the content width for pages can be 1200 but the Block Element – Page Hero will always be Full Width? If so, does it use the "Full Width" button in GB to do this? I remember that button caused some horizontal scroll bars in the past and may still do? Thoughts?
If you set the Container Block within the Block Element - Page Hero to be full width. It will be full width even if you set the content width to 1200px in the Customizer or a Layout Element.
It shouldn’t cause a horizontal sidebar.
Hi Fernando,
You know what is interesting. I have tested both methods (Block Element – Page Hero on contained content page vs Full Width Element and using GB Container to do the content containment). The only major difference I can see in the output HTML is:
style="--background-image: url(path/filename-960x638.jpg)
versus
style="background-image: url(path/fiename.jpg
Both backgrounds were created using GB Container and inline.
No wonder the Full Width Element method gave consistently better CLS scores. It was loading the smaller image size whereas the 2nd other method was loading the full image. This was using Lighthouse to test for mobile only.
Odd, interesting or by design?
Hi there,
in the Container Blocks - Background settings theres an option to select an Image Size.
If you used a Page Hero template in block elements, you may need to change the placeholder image to see the Image size setting.
Hi David, doh! That was the answer all along, thank you!
So just to be clear, we can still achieve full width using the Block Element – Page Hero method as long as we hook into the footer area of above content as they have the capability to be full width even though pages are set to contained correct? maybe above inside_container_hook and below before_footer_hook? Does that sound about right?
if you want a full width element then the following hooks that are before / in-between / after the 3 main containers are the ones to use:
Hook: before_header
<site header>
Hook: after_header
<site main>
Hook: before_footer
<site footer>
Hook: after_footer
Note you can have multiple elements occupying the same Hook, and the Priority field allows you to set the order of display ( lower numbers display first ).
But if you want Full Width content from the post editor then using the Layout Element is the way to go, then then entire page and every hook on it will be full width.
Thanks David, I have copied those hooks down for safe keeping. Yes, I normally use Layout Element to control this but some long standing sites have hundreds of pages so trying to find the best option. Thank you kindly!
You're welcome
