Archived topic
Assistance in Replicating Parts of This Layout...
4 replies · Started by Coulter on July 24, 2017
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!
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 :)
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!
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
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
