[Resolved] How do I make GB container full-width (no padding or margin)

[Baz]

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!

[David]

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.

[Baz]

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!

[David]

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 🙂

[Baz]

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 🙂

[David]

Are the these for a paginated post ? Or what does the Page 1, Page 2 refer to.

[Baz]

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.

[David]

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.

[Baz]

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.

[David]

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.

🙂

[Author]

Posts