Archived topic
How do I make GB container full-width (no padding or margin)
9 replies · Started by Baz on April 16, 2021
I'm working on a test site (local) using the latest GB plugin and GP Premium 2.0-rc1
The website will mainly consist of pages, with a 'page number' before the page title, for each page. I'm using a GB container block for each page to construct the page number and page title.
I would like this to look similar to a hero page (full-width, no padding/margin). When I use the 'Make page full-width' toggle, the container block layout is perfect. However, this means the whole page including the body of text is now also full-width.
I created a Layout Element for page width (Content Width 960px) but then can't use the 'Make page full-width' toggle to keep the block full-width.
Is there a way to make the container block full-width, but keep the rest of the page at 960px width?
Please see an example at https://ibb.co/LgWzR5H
Thank you!
Hi there,
if this is in the Post editor then you would set the Page to Full Width.
Then use multiple container blocks.
First container block 'title' element that has a full width background.
Second Container Block for the rest of your content below it.
That's a great idea, thanks David.
The other option I was considering was to use was a Block Element (page hero) for every page, as required. But wasn't sure if it was worth the hassle, or would cause performance issues with so many elements.
Thanks again!
Block Element would be a good way to go.
In GPP 2.0 you can add Dynamic Content to the block editor. So you could create 1 block element for all your pages:
https://generatepress.com/introducing-the-gp-theme-builder/
We're nearing the end of release candidate stage - so should be live next week :)
Yes, Dynamic Content is a great addition.
I used it to create a page header for all the pages, but I couldn't figure out how to add 'Page 1', 'Page 2' etc above the title for each specific page - this is essential.
That's when I thought of just manually creating a custom page header for each page, which allows me to do the above easily, but with the full-width issues :)
Are the these for a paginated post ? Or what does the Page 1, Page 2 refer to.
Thanks David, it's basically an online guide book in the form of web pages e.g. '14 Days to a better...'.
So the homepage will contain a grid block listing the each of the '14 Days' with an icon and button linking to that page.
The simple solution is to use 'Day 1 - Headline Title' as the title but I wanted to separate 'Day 1' from the main title.
You could add a Custom Field to each of your Pages that stores the Day 1 value. And then use the Post Meta dynamic text type to output that content in the block element.
Thanks David, I'm not that technically proficient, so wouldn't know where to even begin!
Appreciate you taking the time to make these suggestions though, so thank you :)
It's not a big issue, as I can just use the manual method you suggested previously.
If you did want to try - its not too difficult.
First off in the Post Editor - the 3 dot menu in the top bar, Click Preferences > Panels. And enable Custom Fields. It will ask you to click the button to enable and reload.
You will then see the meta box as shown in this document:
https://wordpress.org/support/article/custom-fields/
Under the first field click: Enter New.
Then in the Name field above, give your CF a name eg. baz_page.
Now set its value eg. Page 1
Finally Click the Add Custom Field button.
Then in your Block Element template.
Add a Headline Block.
Give it some text eg. Page
Select the Dyanmaic Text Type > Post meta from the Block Toolbar
In the Meta field name add your CF name. ie. baz_page
Whenever you create a new post the Custom Fields meta box should be visible, and from the drop down you can select your baz_page custom field, give it a value and click the Add Custom Field Button.
:)
