Site logo

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

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

Home Forums Support How do I make GB container full-width (no padding or margin)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1736462
    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!

    #1736582
    David
    Staff
    Customer Support

    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.

    #1736654
    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!

    #1736675
    David
    Staff
    Customer Support

    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 🙂

    #1736692
    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 🙂

    #1736745
    David
    Staff
    Customer Support

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

    #1736777
    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.

    #1736804
    David
    Staff
    Customer Support

    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.

    #1737131
    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.

    #1737242
    David
    Staff
    Customer Support

    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.

    🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.