A sectional template is a high level overview page with links to different sections of your website. Sectional templates can be used "at will" and there are 1,000s of iterations of what a sectional template should look like. For example, recent blog posts, recent news and testimonials sections on a homepage are sectional templates.
Below is a screenshot of a sectional template in Solodev:
Note: As you can see, sectional templates contain a lot of content, most of which direct you to other sections of the website such as the Recent Events, Blog, Photo Gallery sections. Everything on this page lives somewhere else on the website and the sectional template is the page that users will likely use as a starting point to decide where to go next.
Creating a Sectional Template
In order to add a Sectional Template, we first need to add a page then insert the template into the page.
Step 1 - Add a Page
Go to the www folder. On the side menu, click on "Add Page"
Step 2 - Name the page and click Save
Step 3 - Add the base template to your drop zone. Click Publish.
Go to the www folder and select the sectional template stml file you created. Then go to the web files folder and under the templates folder, find the basetemplate.tpl. Inside the sectional template file click and select the drop zone until it is blue then click on the basetemplate.tpl to insert it in the sectional template page.
Step 4 - Add the top level templates
Since components such as the navigation, hero section etc. will be at the top of the page, begin by adding them first:
Step 5 - Add the sectional content templates
In the screenshot above, we have sectional templates such as recent blog posts, recent news and the testimonials section. Let's see how we can select and them to the sectional page.
Here is the list of the sectional template files we'd like to add by order:
- Recent news
- About boxes (Meet Out Team, Latest Events, Photo Gallery)
With the sectional stml page open, we go to the web files folder then select the template files and click on the blue zones inside the sectional page to place them inside the page respectively:
Step 6 - Add the remaining templates
These templates will come after the sectional templates towards the bottom of the page such as a contact form at the end, the footer etc.
If you followed the instructions your sectional template should appear as below:
Note: If you would like to insert more templates in a page and can't find enough blue zones to drop them into, you can create more DynamicDivs to increase the number of drop zones. In the next article, we'll talk about what DynamicDivs are and how to create them.