Overview
In the Solodev CMS system, dropzones or DynamicDivs are the building blocks of .stml pages. While it is certainly possible for users to insert all the html content or elements for their pages into one dynamic div, Solodev recommends using a combination of html and .tpl files to build each page using components based upon sections of your html.
The components can include html body content, headers, footers, navbars, forms, or even DynamicDivs themselves.
This tutorial shows users how to split their page content out into multiple DynamicDivs.
Templates
There are numerous ways in which a user can organize these components, but Solodev recommends organizing page components into the following templates:
Base Template -- This template includes the essential resources that is included in every webpage on the site. A base template can consist of a header and footer, references to asset files or dynamic divs. Since the creation of each page, produces one dynamic div or dropzone, Solodev recommends adding additional dropzones to the base template using the following line of html code:
<div class="dynamicDiv"></div>
Interior Template -- This is placed in the base template and serves as the interior Section of your webpage.
Sectional Template -- A sectional template is a high level overview page with links to different sections of your website.
This example will create a product page for the SpaceJet themed website using the base template, nav template and footer template provided. This example will show the user how to create and insert a two column interior template and insert into the page along with a sectional template inserted into the right most column of the interior template.
Step 1 -- Create a page
Open the www folder.
Click Add Page.
Enter the Name, Title and Description of the page.
Click Submit.
The user is directed to the page.
Step 2 -- Insert he base template, nav bar and footer
On the newly created product page, select the empty dropzone.
Click the base-template.tpl file located in the web files -> templates -> base-template folder to insert the template into the dropzone.
Click Publish.
The user will see three empty dynamic divs.
Click the dynamic div at the top of the page.
Click on the top-nav.tpl file located in the web files -> templates -> navigation folder to insert the top-nav bar into the drop zone.
Click Publish.
Click the dynamic div at the bottom of the page.
Click the footer.tpl file located in the web files -> templates -> footer folder to insert the footer into the dropzone.
Click Publish.
Step 3 -- Create an interior template and insert it into the page
Expand the web files folder and open the template folder.
Click Add File.
Enter the Name and Title of the file.
Set the File Type to Code.
Click Submit.
The user is directed to the template file.
In the template file, enter the following lines of code:
<section class="container py-5" id="maincontent">
<div class="row">
<div class="col-md-8 col-lg-9 order-md-1">
<div class="dynamicDiv"></div>
</div>
<aside class="col-md-4 col-lg-3 order-md-0 mt-3 mt-md-0 pr-4">
<div class="dynamicDiv"></div>
</aside>
</div>
</section>
Click Publish.
Open the products.stml page located in the www folder.
Click the empty DynamicDiv.
Click the interior.tpl template file located in the web files -> template folder to insert it.
Click Publish.
Step 4 -- Create a left-nav template and insert it into the interior template
Expand the web files -> templates folder and open the navigation folder.
Click Add File.
Enter the Name and Title of the file.
Set the File Type to Code.
Click Submit.
The user is directed to the template file.
In the template file enter the following lines of code:
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Yamal-601</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sputnik</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Spektr-R</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Persona</a>
</li>
</ul>
Click Publish.
Open the products.stml page located in the www folder.
Click the left DynamicDiv in the interior template.
Click the left-nav.tpl file located in web files -> templates -> navigation to insert the navbar.
Click Publish.
Step -- 5 Create a section template and insert it into the interior template
Open the folder that will contain the template or html file. In this example it is web files -> content -> products.
Click Add File.
Enter the Name and Title of the file.
Set the File Type to Code or HTML.
Enter the following lines of code:
<div class="jumbotron jumbotron-fluid text-centered">
<div class="container">
<h1 class="display-4">Yamal 601</h1>
<p class="lead">Communications satellite.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h6 class="display-5">Yamal 601 v 1.0</h6>
<img class="img-fluid" src="/_/images/img1.jpg" />
<p>Zyhys onoso jehikagon Aeksiot epi, se gis hen syndrorro jemagon. Skoros morghot vestri? Avy jorraelan. Hen syndrorro, onos. Hen nuqir, perzys. Hen morghot, glaeson. Sikudi nopazmi!</p>
</div>
<div class="col">
<h6 class="display-5">Yamal 601 v 2.0</h6>
<img class="img-fluid" src="/_/images/img2.jpg" style="width: 70%;" />
<p>Nevakhi vekha ha maan: Rekke, m'aresakea norethi fitte. Shekh ma shieraki anni. Fini hazi? Shekh ma shieraki anni. Yer affesi anni.</p>
</div>
</div>
</div>
Click Publish.
Expand the www folder and open the products.stml page.
Click the empty column in the interior template.
Click the products.html file to insert it into the div.
Click Publish.
