Archived topic
Enable full width containers
4 replies · Started by crosby87 on April 25, 2021
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?
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.
Hi there,
will you wanting full width container within the Post Content or just the 'hero' section above the post content ?
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
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.
