dotCMS provides a graphical Template Designer to create dotCMS templates without the need to write HTML. Templates rely on themes installed in your dotCMS instance.
The Templates tool can be found under the Site tool group — the same one that contains the Site Browser). Browse to Site → Templates.
Creation
To create a new Template, click the + button in the upper-right corner of the page.
This will open a window prompting the choice between the Template Designer and Advanced templating, which requires the use of HTML or VTL. Select the Template Designer.
You'll be prompted to name your new Template, and to select a theme.
Designing
The Main Grid
The Template Designer displays a grid of 12 column divisions. By clicking the + button, again in the upper right corner, you can add columns. Once added, columns can be resized horizontally — to a minimum of 1 division and a maximum of 12 — or dragged to a different position on the grid, including to a new row beneath the existing rows. There is no limit in the number of rows that can be added to a Template.
Rows may be assigned custom CSS classes by clicking the ... button to the right of each:
A column can be removed by clicking the x in its corner:
To become capable of displaying content, each column must have at least one Container. Click Add a Container to select one from a searchable dropdown.
Note: You can only add containers that do not contain the main HTML tags.
Containers can be removed from the template by clicking the trashcan icon beside their name. This doesn't delete the selected Container; it only removes it from the current Template.
Perimeter Structures
Between the buttons to add columns and change the selected theme, you'll note a Layout button. This can be used to toggle on or off key perimeter structures: a header, footer, or a left or right side column.
Side columns have their own width, independent of the 12 body-column divisions — a selector on a toggled side column allows you to select Small (1/6 of the screen), Medium (1/4), or Large (1/3).
Saving and Publishing
When working with the Template Designer, draft changes are auto-saved. When you're satisfied with your changes, simply click the Publish button for the changes to take effect.