Create a Base Template

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 - Open the templates folder and click Add->File.


Step 2 - Copy and Paste the code from baseTemplate.tpl and click Publish

Note: Notice in the code above that we begin with our resources, in this case jQuery, Bootstrap and some custom CSS. We then have a top nav and several dynamic divs, also known as drop zones, underneath. Below the dynamic divs is the footer. All content will live in between the top nav and the footer in the dynamic divs provided.

Create a page using baseTemplate.tpl

Step 1 - Go to the www directory and click Add->Page

Step 2 - Name your file index and click Save

Step 3 - Select the drop zone until it turns blue

Step 4 - Select baseTemplate.tpl file from the left tree. 

Step 5 - 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 6 - Select the first dynamic div and select content.html from the left tree

Below is your Base Template with HTML content inserted into it.

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.


Please sign in to leave a comment.