Archived topic
Elements Content Area
2 replies · Started by Jordan on November 17, 2018
Hi Tom,
Very excited to use the new Elements features on GP Premium. I do have a question though...
How do you create a custom sized content container for a specific element? When I choose the Elements>Content Area tab, there are three options: default, full width & contained. I was hoping that when selecting contained, I'd have the option of specifying a content container width for the new element I am creating, and then be able to apply the element to select posts/pages using the display rule.
Perhaps there is a way to do this that I am missing, or perhaps there is another way? I've done this in the past by creating additional page templates, but I thought maybe the Elements addtion might be able to handle this.
What's the best way to have a few different content container sizes that I can select from for displaying certain posts/pages if desired?
Thanks!
Following up on this, I'm playing with the "container width" options in the customizer and I see that maybe the container width is not actually what I want to change using elements as the content container also seems to change the width of the primary navigation, at least by default.
I'm really just looking to have several width options to set for the page/post body content area. If you look through the following two links (not my site), you will see my goal:
See this page, where the body container has nice wide margins: https://www.adventure-journal.com/2018/11/the-tricky-and-sensitive-restoration-of-a-classic-coastal-cabin/
But, in other areas on the site, their body container has narrower margins: https://www.adventure-journal.com/category/historical-badass/
So I'm looking for a way to have the header/navigation stay pretty consistent, but have a variety of custom sizes I can select for the body container for certain pages/posts.
Thanks!!
Hi there,
We have plans to add the container width option to Layout Element module.
For now we can use some CSS. For example, you can set the width of single posts:
body.single .site.grid-container {
max-width: 800px;
}
Or set the width for a specific page like:
body.page-id-xx .site.grid-container {
max-width: 800px;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)