[Resolved] Different layouts per page with a combination of full and narrow width panels.

[Author]

Posts

[MichaelR9215]

Hello, I use Layouts on a regular basis. When Toolset first came out with page specific layouts, I began using Layouts to create parent templates for the base template, and then the page specific layouts when I needed something special.

I currently am running WordPress 5 with the Gutenberg update. I have a client that would like me to create the base templates, but then he would like to create special layouts on every (or many) pages using the page editor. He wants many of these page layouts to have full width responsive panels ... kind of like how the Divi editor lets you create panels, and give them 100% width, and even give them a parallax effect.

I could swear the old Layouts page editor had 100% width panels for both content, or just background. Am I remembering incorrectly?

Is there a good way to do this? Are you still integrating with other tools, like Visual Composer and Divi ... Or is the Gutenberg update changing all of this?

I look forward to your help!

[Christian Cox]

I think the feature you are referring to is in the Layout editor area. If you click the pencil icon in the top right corner of a Layout row, you have the ability to choose from some different settings for background and content widths. Some of that is still available, based on Bootstrap grid and containers. Some themes like Divi or Avada had custom options available here, that were enabled by the Layout integration plugins. Those plugins are no longer recommended or actively developed. See the attachment for the current popup display.

So full-width, per-Layout options really depend on the theme your site uses, how it implements the_content(), and which options it exposes to Toolset. For example, the Astra theme provides theme options that will let you adjust sidebars and full- or partial-width content display, per post Layout. If a theme implements the_content() within an area of the site that is constrained in width, then Layouts will only work within that constrained area. It doesn't break out of that container. Other themes are not integrated to the point that you can select specific theme options per Layout. Some themes don't provide a full-width option at all. Some themes provide a full-width option for posts but not archives. In those cases, custom PHP is required to create a template that allows you to extend to the edge of the page, and custom PHP is required to help you manage that per Layout.

We recommend theme authors join the Beyond Pages program for more information about compatibility: https://toolset.com/documentation/beyond-pages-program/

The old Toolset Starter Theme was referred to as being "fully integrated" with Layouts, meaning the header and footer of the site were fully managed within Layouts. In most other themes, Layouts only manages the area rendered by the_content(), which typically does not include the header and footer. The Toolset Starter Theme is no longer actively developed, so I don't recommend starting a new project with it.

https://toolset.com/documentation/user-guides/develop-layouts-based-themes/
https://toolset.com/documentation/user-guides/layouts-theme-integration/

[MichaelR9215]

Christian,

I am specifically referring to the Full-Width Background/Constrained Width Content type of row. Would your explanation also cover this? It seems you are referring to if the content itself is 100% width. There was an option in Layouts at one point that allowed for a row with 100% background, and constrained width content. Is there a way to tap into this per page?

Thanks!

[Christian Cox]

There was an option in Layouts at one point that allowed for a row with 100% background, and constrained width content. Is there a way to tap into this per page?
The third row option "Row as wide as Bootstrap .container, its background extends to full width" is what you're talking about, I believe. No, there's no way to manage a single row's settings per page. Per Layout, yes. So you can create multiple Layouts that have the correct settings applied, and manually or programmatically choose between those Layouts. Whether or not this option will actually extend to the edge of the page, however, depends on your theme and how it implements theme options. Let me try to explain with some pictures.

layout.png - My Layout for a CPT. You can see some Theme Options present here, including options for sidebars and Content Layout. Those options are specific to the Astra theme. Not all themes offer this type of integration, and require a code-based solution.

1st row is set to "Row as wide as post content" and contains a visual editor cell with this code:

<div style="width:100%; border:1px solid red;">
<p>This is a 100% width div outlined in red.</p>
</div>

2nd row is set to "Row as wide as Bootstrap .container, its background extends to full width" and has a grid of cells. The background of this row is light yellow. The background of each grid cell is dark yellow.

astra.png - the front-end results with Astra theme active. Note the red outline and the light yellow background extend to the edges of the screen in both cases.

2019.png - the front-end results with Twenty Nineteen active. Neither the red outline nor the light yellow background extend to the edge of the screen. The content inside is spilling out of the container as well because Twenty Nineteen isn't really designed for Bootstrap grid compatibility. Twenty Nineteen theme does not offer a full-width theme option. If you want to extend full-width, you would have to create a PHP template that allows your content to extend to the edges of the screen.

So you can see that it depends on how the theme's layout system works, and whether or not it's possible to achieve a full-width design in that theme.

[MichaelR9215]

Christian,

I understand all of your examples, however, you didn't test anything from a per-page perspective. All of these examples were related to creating a Layout for each specific case.

Have you worked with Astra on a per-page basis? Are there options that let you do the full-width and constrained width combinations on a per-page basis with this theme? If so, this theoretically means that I can make my custom theme work in the same way, correct?

Thanks for talking this out with me.

[Christian Cox]

I understand all of your examples, however, you didn't test anything from a per-page perspective. All of these examples were related to creating a Layout for each specific case.
I know that you cannot set Toolset Layouts' Theme Options per page when using a Template Layout. Those are set at the Layout level, and apply to all pages using that Layout. I will ask about per page Astra settings when using a Template Layout, because I'm not quite sure what the expected behavior is. In my local tests, the per-page settings are overridden by the Template Layout settings.

[Christian Cox]

Okay my second tier team has informed me that the expected behavior is the Template Layout Theme Options will override the post-level Astra Settings. However, it makes sense to me that you would be able to override that per post. If that per-post option override is something you would like to see added, I encourage you to submit a feature request over here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[MichaelR9215]

My issue is resolved now. Thank you!