[Support request] Assistance in Replicating Parts of This Layout…

Home Forums Support [Support request] Assistance in Replicating Parts of This Layout…

Home Forums Support Assistance in Replicating Parts of This Layout…

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #354340
    Coulter

    Howdy, I hope this isn’t too complicated. I’m looking to replicate a few aspects of this design:
    http://backlinko.com/link-building

    Specifically, two things:

    01. The “Contents” Section.
    I like this 3 columns layout with images and text linking to each chapter. Is it best to use a plugin like “Lightweight Grid Columns” for this, or are some simple CSS styles enough?

    02. Full Width Chapter Headers.
    Each chapter has a full-width header, but the content does not. I would like to replicate this. I’ve added custom DIV IDs to each chapter header on my site, but I’m not sure how to actually expand the header to full width.

    Anyhow, any assistance would be greatly appreciated, thanks!

    #354362
    Leo
    Staff
    Customer Support

    Hi there,

    1) Lightweight grid columns will definitely work. A gallery plugin might also work as well.

    2) The page header add-on should be able to accomplish that. Check out the video here: https://docs.generatepress.com/article/page-header-overview/

    Let me know if you need more info 🙂

    #354364
    Coulter

    Thanks, I’ll give both of those a shot. However, I’m still not clear on how to get full-width chapter headings when my content is contained. If you look at the example, he’s got most of the content contained at 1000px, but the section headers all span the full-width of the browser.

    Is there some HTML & CSS I can use to replicate this?

    I already have special DIV IDs for all my chapter headers. I just don’t know the CSS to break the background colors out of the container and display them full-width – just like in the example site.

    Thanks!

    #354368
    Leo
    Staff
    Customer Support

    You can select Full Width as the container type in page header: https://docs.generatepress.com/article/page-header-content/#container-type

    Fullscreen is also available: https://docs.generatepress.com/article/page-header-content/#fullscreen

    #354369
    Leo
    Staff
    Customer Support

    Wait sorry I misunderstood. You were actually referring to Sections add-on.

    You can get the same layout by selecting Full width in box type and contained in Inner box type:
    https://docs.generatepress.com/article/sections-overview/#layout

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