Working with Layouts and Nested Layouts within Content Blocks - MODX 2.4.2
Transcript
Hi. I’m Jason from Dash and in this video, I will be covering layouts within Content Blocks.
I’m already editing a page with Content Blocks. So I’m just going to scroll down until we can see the content.
So here we can see the content field and just to make things easier to read, I’m going to collapse our layouts here. So as we can see, I’ve got the two – I currently have two layouts. One is called “single column” and one called “two columns”.
At any point, we can add a layout either before our single column here. So I’m going to go ahead and add a layout at the very end here.
Now we get a few options. We have single column, which we’ve already used. Two columns which we’ve already used, but we also have these content and sidebar or sidebar and content depending on which side you like to be the smaller or larger side. So there are three columns and a centred column.
So I’m just going to go ahead and choose this content plus sidebar layout and as we can see, we’ve got – and you can see here that we now have two distinct content areas and one is actually smaller than the other. If we compare that to the two-column layout here, where they’re all the same size, then we scroll down, we can see that this is actually smaller on the right hand side.
This just lets us add layouts where we might have some small images or some utility content on the right hand side of our page. Now, I’m just going to collapse these again so that we don’t have to deal with the content within them.
It’s also easy to rearrange these at any time. So if we wanted our new layout to sit above our two-column layout, I can just click this arrow here and now we see that our single column comes first along with our new content plus sidebar layout and then our two-column layout.
There is one other special use case for layouts we should talk about and that’s called “nested layouts”. So I’m just going to come into our single column layout here and I’m going to add a new field called “nested layout”. So we can see we’ve got the Add Layout dialog box again. Only this time there are a few extra options. So we have these new layouts that are all called “nested,” so there’s nested content plus sidebar, nested sidebar plus content, nested two-column, nested three-column and nested centre column.
So whenever you’re using a nested layout, it’s always the best idea to use these. They’ve just got some subtle styling differences that we’ve made sure that they fit nicely when you’re using them within other layouts. So I’m just going to take these nested two-column and just for the sake of the video, I’m going to throw in some headings and I’m just going to save this and I’m going to reload the frontend of our site just to show you how that has worked.
So we have our single-column section here and then we have our nested two-column and then after that, we have our normal two-column layout that we’ve already had that was already here.
For more training videos, visit DashMedia.com.au.
