[Support request] Enable full width containers

[crosby87]

Hit there,

I would like to make something like this: https://imgur.com/jWOd7ih

So basically I would like full width containers going across my page completely (yellow area), while the text of the blog post remains set contained in a basic more narrow area like on the picture.

I would like to build this for certain individual pages, doesn’t need to be hooks, I can build it myself as well for each individual post.

This could probably be made in Elementor easily, but I don’t want my posts to be locked in into a specific page builder in case I switch later. I wanted them to be in core wordpress.

Could you please let me know your suggestions?

[crosby87]

Hi again,

I’d like to give some further clarification on the above…

Basically, what I would like is to make the width of the Classic Editor in WordPress more narrow, while I use containers like in the screenshot above full width across the entire page.

I know I could use plugins, but I don’t want my blog posts to be locked in into a specific plugin. Should something happen to the plugin, my blog posts would disappear (which would hurt from an SEO perspective).

Therefore, I was wondering if there is a way to make the width of the text (Classic Editor) narrow using CODE, while allowing containers to be full width.

[David]

Hi there,

will you wanting full width container within the Post Content or just the ‘hero’ section above the post content ?

[crosby87]

Hi David,

If I understand you correctly I think within the post.

See the exact post that I referred to in the screenshot above: https://backlinko.com/content-marketing-this-year

I am talking about the big colored blocks marking each chapter basically. That’s also what I would like to create

[David]

Theres a few ways to do this. As it sounds like you’re going to add all content via the post editor then – these steps:

1. Create a new Layout Element in Appearance > Elements
https://docs.generatepress.com/article/layout-element-overview/

1.1 On the Content Width tab – leave the setting as Default and set a width to narrow the post content.

1.2 Set the Display Rules > Location to Posts > All Posts.
This will keep the Customizer Width for pages and archives.

2. In the Post editor – you can use the GenerateBlocks Plugin:
https://generateblocks.com

2.1 For you Full width sections – add a Container Block.
2.2 From its Block Toolbar set the Full Width option:

https://www.screencast.com/t/jICO7dZcrLvW

2.3 in the Block settings sidebar you can now set the Inner width to match your requirements, add background colors etc. and margins for that section.
2.4 Repeat #2 for each full width section you want to create.

[Author]

Posts