24/7 U.S. Support – 877-595-4482
One of the strengths of Modx is its ability to use any number of templates for the construction of its front end website. You can assign each page a different template. Templates are basically HTML and CSS code with Modx Tags (see Commonly Used Tags in Modx for more information on Tags) to provide the structure and content of the webpage. Tags can be used to provide static or dynamic content on the page while the HTML and CSS provide the rest of the page design. The following tutorial will simply explain how to create a new template.
As you can see, creating a template can be a relatively quick task. If you want to simply add a template without worrying about any of the other settings and tabs, you can also use the QUICK CREATE TEMPLATE option seen by right-clicking on the TEMPLATE icon in the tree-view.
Here's the abbreviated form:
To use the form, click on each field to add your entries, then click on SAVE (located in the bottom right hand corner in this form) in order to save your template.
In order to understand the template's relationship to the web page created by Modx on the front end, we need to show the page and the template assigned to it. The following screen shots shows how the template is used for the web page ultimately displayed:
This template is assigned to the DEMO WEB PAGE and appears in the RESOURCES tab and the Modx dashboard as follows:
Taking a closer look at the settings for the DEMO WEB PAGE, we can see that it is assigned to the BASE TEMPLATE and that its page title is "Demo Web Page". The assignment of the template is on the right under Uses Template.
Note that if you hover over the fields, you can see a pop-up description similar to the one for [[*pagetitle]] in the above screenshot. We are looking at these settings in order to understand the correlation between the page and a template. When viewing the page that is created by Modx, you will see something similar to the following:
Using your web browser, you can right-click on the page and select VIEW SOURCE. You will see the following:
We are using the view source option of the web browser in order to see the code outputted by Modx when a page is displayed. The Modx template pulls the SITE NAME (represented by the [[++site name]] tag) from the system settings. The PAGE TITLE (represented in the template by the tag [[*pagetitle]]) is shown beside it as per the template format. You can see this in the third line of the base template code. The content (represented by the [[*content]] tag) is the rest of the page.
The template is an important part of using Modx. In essence, it is the skeleton of your website while the content is assigned per each created resource page to provide the body of your website. As you become more familiar with the different parts of Modx you can build more advanced structures to meet your website needs. For the next tutorial on using Templates of Modx, please go to Assigning Templates to Resources in Modx.
|1.||Creating your first Modx document|
|2.||Adding a Picture to your Modx Website|
|3.||How to use a Chunk Tag within Modx|
|4.||Commonly Used Tags in Modx|
|5.||Understanding the Resources Tab in the Modx Revolution Dashboard|
|6.||Understanding the Elements Tab in Modx|
|7.||Understanding the Files Tab in the Modx Resource Tree|
|8.||Quick Start to Using a Snippet in Modx|
|9.||Using the Modx Template|
|10.||How to Load Modx Templates|
|11.||How to Create a Static Resource in Modx|
|12.||How to Create a Snippet in Modx|
|13.||Adding Google Plus to MODX pages|
|14.||Add Facebook Like button to MODX Page|
|Email:||support@WebHostingHub.com||Ticket:||Submit a Support Ticket|
|Chat:||Click To Chat Now|