Creating custom page layouts on your web page - MODX 2.4.2
Transcript
Hi. I’m Jason from Dash and in this video, I will be covering a quick introduction to Content Blocks.
So here we can see I’m already editing a page with Content Blocks enabled. So if I just scroll down beneath the main settings of this page, we will see this new section labelled “content”. In here, we can see I’ve already got some sample information entered.
So just to give you an idea of how this works, I’ve also got the page we’re editing here opened in the front end. So I’m just going to switch to that tab and here we can see that same content that we’ve got entered in the backend. So let’s just break this down a little bit further.
We can see here that within Content, we have what we call a layout labelled “single column” and next to that is a small arrow which I’m just going to use which will let us collapse this entire layout, so we can see the content that’s after it, which here is another layout labelled “two columns”. So I’m just going to collapse that.
So in essence, we have two layouts. One is a single-column, full-width layout and the other is a two-column layout. So within each layout, we then have fields which are where the content itself is actually entered. So here we can see a rich text field and in the right-hand column here we have an image field.
It’s also easy within Content Blocks to move fields from column to column. So I’m just going to grab this rich text field and move it to our right-hand side column. We can see here it gives us an outline showing us where this content is now going to sit in this new column. If I hit Save and refresh our front end, you should see that that content is now sitting beneath the image instead of underneath the text where it was before.
So I’m just going to move that back quickly and save. Now within Content Blocks, it’s also possible to rearrange layouts. So I was just changing fields but we can also click these arrows within – on the layouts title bar to move the layouts up and down. So here we’ve just swapped the positions of two-column and single column. So if I hit Save and then refresh the frontend of our site, we will see that our two-column block is now above our full-width content block.
For more training videos, visit dash.marketing.
