Create an Interior Template

The interior template is typically placed in the base template and serves as the interior of a "Section" of your website. The benefit in a content template is it can be re-used for sections of your website that require multiple pages, allowing you to re-use your content template to build out your web pages. In this article we will show you how to create a content template that we will re-use to create pages for difference services.

Below is a screenshot of a content template in Solodev.

Note: In the screenshot above you may notice the base template is still in place and another template has been added to it. The template that was added was to layout the page, in this case with a breadcrumb, left nav, and content area to the right. This is perfect for a services content template.
Let's start with what template was added to the base template to create this content template.
<div class="container contentTemplate-container">
  <div class="dynamicDiv"></div>
<div class="row"> 
<div class="col-md-9 ct-content"> <!--<h2>Page Title Goes Here</h2>-->
<h1 class="h2">[page_title]</h1>
<div class="dynamicDiv"></div>
<div class="dynamicDiv"></div>
</div>
<div class="col-md-3 text-center-md text-center-sm text-center-xs ct-aside">
<aside>
<h2 class="aside-header">[parent_title]</h2>
[parent_nav]
<div class="dynamicDiv"></div>
<a class="btn btn-arrow btn-motive" href="/contact-us.stml"><span>Contact Us</span>
<img src="/core/fileparse.php/8/urlt/assets/images/arrow-right.png" alt="Arrow Right"></a>
</aside>
</div>
</div>
</div>

<script>
// Add styles to left nav
$(document).ready(function () {
$('aside ul.nav').addClass('aside-list list-unstyled').removeClass('nav');
});
</script>

Note: The code above uses Bootstrap to layout the page with a left nav along with multiple drop zones to insert content. 

Using Content Templates

To begin, we need to turn the content template into a re-usable template.

Click here to learn more about creating page templates.

Step 1 - Open the www directory and click Add->Folder


Step 2 - Name your folder "services" and click Submit.


Step 3 - Click Add->Page


Step 4 - Select contentTemplate from the Template Dropdown. Click Save.


Step 5 - Click on the left nav drop zone until it turns blue.


Step 6 - Select the 'services' folder from the left tree. Click Publish.


Step 7 - Click on the content drop zone until it turns blue


Step 8 - Select design.html from the left tree


Step 9 - Click Publish and you have your first services page as shown below


Note: Now that you have your content template ready you can build out the rest of your service pages by adding new pages, selecting the content template in the drop down, and adding the HTML content for the respective service.

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request