# How to create a sectional template

A sectional template is a high-level overview of a "section" of your website's content. Think of it as a jumping-off point to areas that fall under a specific content theme or topic. Sectional templates can be used in a variety of ways, but most provide a collection of snippets and links to relevant areas. For example, if a website has a section called "Departments," a sectional template might include an overview along with a list of links to all the departments. Because they are used sparingly, sectional templates generally have a distinct design from your content templates, helping them stand out.

# Sectional Template

As previously noted, a sectional template is a high-level overview of a "section" of your website's content. They are typically reserved for larger sites with more pages to organize and are completely optional. In this lesson, you will learn how to add a sample sectional template from the SpaceJet theme package.

# Setting up your folders and .tpl files

Step 1: Under web files, click on the content folder.

Step 2: Using the right-hand menu, click Add Folder. Under content, add folder called about. Click Submit, when complete.

about folder web files

Step 3: Now you will need to add a new .tpl file into the folder you have just created. Under content, click on the about folder and on the right menu, click Add File. Create a new file called about.tpl and select Code for the File Type. Once complete, click Submit.

about file web files

Step 4: You will also need to add a new .tpl file into the folder listed below. Under templates, click on the correct folder and on the right menu, click Add File. Create a new file under the folder and select Code for the File Type. Once complete, click Submit:

  • content: full-width-template.tpl

full-width-code

Step 5: Click on the www folder and on the right menu, click Add Folder, and add folder called about. Click Submit, when complete.

about-folder-www

# Adding templates to your dynamic divs

Step 1: Click on the about folder and on the right menu, click Add Page. Create a new page called index.stml. Once complete, click Submit.

Step 2: Just like in the case of homepage, with the base folder opened, click in the top dynamic div. Once activated, click on the base-template.tpl file. Once complete, click Publish.

Step 3: Repeat step 3 from the homepage steps, and add top-nav.tpl, and the footer.tpl in correct places. Once done, click Publish.

Step 4: Repeat step 3 from the homepage steps, and add the full-width-template.tpl with the following code:

<div>
  <div class="dynamicDiv"></div>
  <div class="dynamicDiv"></div>
  <div class="dynamicDiv"></div>
  <div class="dynamicDiv"></div>
  <div class="dynamicDiv"></div>
</div>

Step 5: Repeat step 3 from the homepage steps, and add about.tpl containing your about page content, for example:

Here is my about page.