-
Hi,
I need to change a theme from 1300px wide to full width and I’m hoping you can advise on the best way to do it.
The main reason for the change is that I need to put sections/containers on some pages with background colours where the background is full width but the text is still 1300px wide. Typically this would be for the home page and one or two other pages. The rest of the pages would stay at 1300px.Is the best way to do this to use the customiser to change the page width site wide to full width and then add container blocks in the page editor to set text width and background colours?
And for pages that I want to remain at 1300px is it best to add a 1300px wide container to each page and then move all the content into it? Or is it better to use a template or something else?Thanks,
Phil -
Hi Phil,
You can leave the default 1300px for the rest of the pages. To set a specific container to full-width in the editor, access the Page settings on the right-hand side and navigate to Layout > Content Container:
https://app.screencast.com/FyrfBEsZjbPxeMore about Content Container:
https://docs.generatepress.com/article/content-container/ -
Thanks for the info Alvind.
What would be the cleanest way to define these page widths system wide, possibly with some accompanying CSS so that I can select either a full width or 1300px wide page at the page level without having to edit the settings for each page?
I know I can create page templates like this:
https://generatepress.com/forums/topic/can-not-find-template-in-pages-attributes/#post-2306945Is there a better way than this?
Thanks,
Phil -
Will these settings apply to the entire page or only to specific containers on that page?
-
Hi Alvind,
I would want the settings to apply to all non full width containers on all pages.
Thanks,
Phil -
So if I understand this correctly, you want to apply all the predefined width settings to the existing pages, is that correct?
If your existing container uses the Global max-width setting, you just need to adjust the Container Width under Customize > Layout > Container. However, if not, then you will need to apply the settings for each page individually.
-
No, I want to have 2 versions of the predefined width settings. A full width version and a contained width version. And I want it to be really easy to apply either setting to any page.
At the moment I’m thinking I’ll set the Container Width under Customize > Layout > Container as you say so that all existing pages have a container width of 1200.
Then I’ll create a ‘Full Width’ page template that simply has a class=”full-width-page” in the <body> so that I can define some styles to make any pages that uses this template full width.Then to switch from 1200px to full width I simply edit any page and change the page template to full width and I don’t have to remember any other settings.
I can’t see a simpler way than that but if there is one please tell me.Or is it tidier to use an element to control the page container width than using styles?
Thanks,
Phil -
In that case, I think using the Layout Element would be the easiest way. Simply create a new Layout Element with the Full Width setting, then add the pages you want to apply this setting to under Display Rules.
-
Hi Alvind,
I really want to use the page template setting in the page editor to control the layout of the pages, not rules in the elements because setting rules in a layout element is a lot less obvious.
Is there a way to set a rule in the layout element that is based on the template used by a page? Or perhaps based on the value of a custom field or some other attribute assigned to a page?Thanks,
Phil
- You must be logged in to reply to this topic.