- This topic has 9 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hi there,
most of our projects have full-width sections, with background colors. So until now, we have set the layout for every page to “full-width” in the layout panel when working on the page in the Block Editor. But I’m still wondering if I understand everything correct.
I found a lot of topics refering to Elements and setting up a layout there. But I can’t figure out how to set it up that it behaves like the before mentioned workflow. If I set a layout Element with the full-width option and set a content width, the outer container will still only cover the content area, since the content width is applied to #content.
The goal is to have the outer container cover the full-width, with the inner content area using the content width.
Like I said, until now we achieved this by setting the page template on a per page basis to full-width, but it’s kind of a hassle and hard to tell the clients in workshops. Am I missing something? Even if it’s not possible via Element, is there a filter to set the default page layout or something?
Thanks!
Oops. Fast update. I think I missunderstood the Elements content width setting. I thought it will apply instead of the width set in the customizer. But looking at it right now, it seems that the container width from the customizer is still applied to new container blocks. Seems that this is what I was looking for.
I set the layout Element to 1920px and full-width now and the container is still using the 1300px for it’s inner width.
Padding will be added by us later.But another related question: We have some layouts with multiple inner container widths.
Is it possible to extend the “Inner container width” select field of the container block with additional options? Or another handy way to allow clients to set the inner container width on a per block (container) basis without having to use pixel values.Another update. I guess there is still an issue somewhere.
When I create a new page, it will have the content container option in the Page -> Layout panel greyed out and the Block Editor is looking like I expect the page to look. The container will stretch over the full-width with the inner container keeping its max-width of 1300px. But after publishing the page and refreshing it, the Page -> Layout option will become available again without the full-width option selected and the whole page again is limited to 1300px max-width.
I thought the option is greyed out because the layout Element, no?
Customer Support
Hi there,
if you want to have full width content on a page then there are 2 methods of doing so:
1. WP provides an Align option in most Blocks Toolbars. One of the options is Full Width.
This method uses a CSS negative margin hack to force the block to fill the viewport regardless of the content width.
This method however is something we advise against as the CSS hack can lead to unintended horizontal scroll.2. GP specific – set the Content Container to Full Width.
This will remove any content width and padding added by the theme.
You will then need to build out your content using GB Container Blocks, where individual control to define full width and contained content is given in the block settings.Hey David,
thanks for the reply. I forgot to mention that we are using GenerateBlocks too. So when refering to container, I was talking about the container block. Can you say something about my last post. I mean it seems like it does exactly what we are trying to accomplish, but to get reset at some point. It looks like the layout element (Elements) stops working. Or am I missing something?
We tried adding the full-width class per PHP on every page and it kinda seems to work, but I don’t understand why the page shows correct at first and then loses the full-width.
Never noticed that the container has WP owns container width option in the tool bar. Thanks for the info!
But after publishing the page and refreshing it, the Page -> Layout option will become available again without the full-width option selected and the whole page again is limited to 1300px max-width.
Can you share a screenshot of the
Page -> Layout option?Note: Container Blocks, you can set its default max-width in the GenerateBlocks > Settings.
Sure. But I can’t figure out what causes this. At first I thought it was because I created the page before I created the layout element (Elements), but a later created page shows the same behaviour. When creating it, it shows correctly in the Block Editor and Frontend. But the same was the case with the page shown on the third screenshot, which now has the Layout Option unlocked and has lost the full-width.
I’m trying to reproduce the issue with the new test page, but so far the option doesn’t unlock and everything looks right.
If GP detects a Layout Element is set to display on that page, then you should NOT be able to change its Content Container layout in the editor. It should remain disabled (greyed out). So i am not sure what is happening there.
Is it possible to get a login to the site and the page where the issue has occurred ?
Hey again David.
On my way home I remembered a discussion I had with a coworker. 🙂
He told me that an element won’t work on the frontpage even when selecting “All pages”. So I selected a different page as frontpage and the Element is working again. Seems a bit confusing to be honest. But now we know why the Element wasn’t working. I will give this setup a try now. Seems like that is exactly what we were looking for.Thanks again for your help!
Ah ok.
Thats correct – Frontpage has its own special place in WordPress, so it has its own specific location 🙂
Glad to be of some help
- You must be logged in to reply to this topic.
