Creating a Layout
Last updated on June 26, 2024.
This documentation guides you in creating a Layout on Insites. You can use one of two ways to create a Layout:
- Using the Instance Admin to create a Layout
- Creating a Layout via code
The primary objective of this guide is to showcase the process of creating a Layout using code.
Important
You may use the forms and other user interface elements on the Instance Admin to create and manage your Layouts. An overview of the steps is as follows:
- Select CMS on the main menu.
- Choose Layouts.
- You may choose to add a Layout by pressing ADD LAYOUT. Alternatively, choose an existing Layout from the list and click on its Edit row action item to make changes.
Please visit our documentation on Layouts for a complete guide on using and managing Layouts via the Instance Admin.
Prerequisites
To follow the steps in this tutorial, you must have the installed, an environment configured, and the codebase set up (or at least have an directory). You should also understand the concept behind layouts. You may review the topics mentioned above by visiting the following links:
Steps
Creating a Layout is a three-step process:
- Step 1: Create a directory for layouts
- Step 2: Create a layout file
- Step 3: Edit the Layout file
Step 1: Create a directory for layouts
To correctly communicate with the Insites engine and API, your codebase should be organized into a specific directory structure. The root directory of your project should contain the directory and layouts should be placed into the directory inside .
If you are starting from scratch (without having created the codebase), create a directory inside , then a directory inside .
If you have already installed the codebase, you can skip this step and locate your directory.
Step 2: Create a layout file
In the directory, create a Liquid file called .
Step 3: Edit the Layout file
Edit the layout file.
Find a sample layout file with explanations below:
The special variable renders the page content at the exact place where it has been included.
Save your Layout file.
Next Steps
Congratulations! You have created a layout file. Now you can create a page that uses this layout:
Creating a Page
