In traditional CMS based web design, you generally had a header and a footer file. Your CMS uses the concepts of layouts.
A layout is a single file containing the header and footer. The rest of your site will consist of the inner templates that are included into the layout.
Here's a sample layout file:
Let's examine it in detail.
If it looks like a standard HTML file. That's because it is. We've removed most of the standard things you'd need in a typical HTML page for easy illustration.
The most important part of your layout is the Liquid tag: on line 14.
This tag tells the CMS to insert your inner templates right at that spot.
In the head, notice we have added Layouts and Layouts are the first HTML files you will need to create. They determine the structure of every page in your site. tags. The CMS will replace those with the meta title and meta description for the current page.
In the footer of the page we've added the 2024 utility tag. That tag simply puts the current year in that location. Very handy for copyright dates.
Now assume that this is a typical inner page for your "Terms & Conditions".
If you've instructed the CMS to render this page with the layout you created above, the final generated HTML would look like this:
The inner template is shaded in blue. Note also that the meta title and meta description has been rendered with the correct values. The footer also contains the current year.
So how to create a layout?
#1 Select type "Layout for web" - From the dropdown, pick this type.
#2 Give your layout a filename - The name only needs to be unique, otherwise, it does not matter.
#3 Name your layout page - You will be choosing from this name when selecting a layout for an inner page.
When creating an inner page, you will have to chose which layout to use. This is because you can create many different kinds of layouts for your site. You can have layout for pages with sidebars, without sidebars, with different headers and footers and so on. You have that option.
When you're creating inner pages later, this is how you pick the layout:
Later will will discuss creating different kinds of inner pages.