# How to create a page template

The page template is the foundation for every page of your website. It typically consists of a header, footer, and dynamic divs for adding content. As the name implies, the base template acts as the foundation for your site and can include your Google Tag Manager includes, tracking codes, scripts, and more. Because they are universal, any changes made to a base template will be reflected across all pages of your site.

# Page Template

The first step in creating page templates in Solodev is to build your base template, which will serve as the foundation for page templates in your website. For the purposes of this tutorial, you will be adding a folder and file structure for building a homepage and content templates as shown in the SpaceJet theme example.

Step 1: Log into your website and enter the main dashboard. Under web files, click on the templates folder.

base template

Step 2: Using the right-hand menu, click Add Folder.

base template

Step 3: In the Name field, add a folder called base. You can also add an optional title and description. Once complete, click Submit.

base template

Step 4: Click back on the templates folder. Using the same right-hand menu, click Add File.

Step 5: In the fields provided, give your file a Name (such as “base-template”) and remember to use the .tpl extension. From the File Type dropdown, select Code, and click Submit.

base template

Step 6: On your new file paste the sample code below into the editor. The sample includes dynamicDiv classes for the top navigation, hero, content, and footer. Once complete, click Publish.

base template

<div role="main">
  <!-- Top Nav -->
  <div class="dynamicDiv"></div>
  <!-- End of Top Nav -->

  <!-- Hero -->
  <div class="dynamicDiv"></div>
  <!-- End of Hero -->

  <!-- Content -->
  <div class="dynamicDiv"></div>
  <!-- End of Content -->

  <!-- Footer -->
  <div class="dynamicDiv"></div>
  <!-- End of Footer -->
</div>

Step 7: Under the www folder, click on the index.stml file – which will become your homepage. Then, click in the main content area where the two dots are located.

base template

Step 8: After clicking on the two dots, the areas will become active, displaying the dynamic divs as a stack of rectangular boxes set in a light blue color. The name of your base template file will also appear in the upper left.

base template

Step 9: Next, click on your base template file under the templates folder in the left menu. This will apply your base template to the dynamic div. Then, click Publish in the upper right corner.

Step 10: Once published, your index.stml page will refresh, displaying your dynamic divs in white. You are now ready to build your page templates.

base template