Overview
The base template is the most important template in that it contains the essential resources that will be included in every web page on your website. A base template typically consists of a header and footer, references to asset files, and dynamic divs to place content. Note that any changes you make the base template will reflect your entire website. In this article we will show you how to build a base template and demonstrate its value in a real world situation.
Below is a screenshot of a base template in Solodev:
Note: Your base template contains your core includes (CSS, JavaScript, Fonts, Images), a header and footer, and dynamic divs (drop zones) in between to insert HTML content.
Step 1 - Create a Base Template file
Open the templates folder and on the right side, click on Add File. Name the file "baseTemplate.tpl" and click Publish.
Below is the code of a sample base template. It includes the code for Google Analytics (Google Analytics code need to be on every page), a dynamicDiv class for the top navigation, hero, breadcrumbs, content, footer contact form and footer.
We'll talk in detail about the Dynamic Divs in the next article. In Solodev, Dynamic Divs make laying out web pages easy and completely customizable while removing the need to duplicate HTML. Dynamic Divs allow you to use HTML markup to create drop zones where you can insert content onto a web page.
Step 2 - Create a Page using baseTemplate.tpl
We created a base template and added code in it but in order to get it to display on the website, we actually need to create a page to put the template in. As an example, let's create a homepage. Since the homepage is the first and the default page when the website is opened, we will create an index.stml right inside the www folder. The homepage shouldn't be inside any subfolders.
Go to the www directory and on the right-side menu, click on Add Page.
Step 2.1 - Name your page index.stml and put the title as "Index Page".
If you'd like to, you can add a description of the page. Click Publish.
Step 2.2 - Select the index.html page
On the tree, select the index.stml page you created, select the drop zone until it is blue as shown below.
Step 2.3 - Insert the baseTemplate.tpl in the page
Find and click on the baseTemplate.tpl file from the left tree and it will be placed on the page.
Step 2.4 - Click Publish and you can begin adding content
Note: The page we just created will be used on every page of the site as a template. Now let's insert some HTML content in the drop zones and publish our first page using our base template.
Step 3 - Select the first dynamic div and select home-ships.tpl from the left tree
Note: Although this was a simple example of creating a base template and then using it to create a page, it is important to understand the advantages of using a base template. First and foremost, it speeds up development time and negates the need for duplicate HTML. This allows you to rapidly build web pages without having to hardcode the same HTML over and over again.