Skip to main content
Home  ›  Learn › Getting started with creating stuff › First Content Template

Create your first content template

 The goal is to give you a step by step tutorial, how to build your own content template for your website.

The result

  1. Content template to diplay team members
  2. Full responsive
  3. Very easy to add and edit (enduser secure)
  4. 100% control over output

Create your content type

The content type defines what kind of content you can add and display. (Inputfields for the edit dialog)

Core steps

  1. Insert the Content module
  2. Create Content Type
  3. Create and define the fields
  4. Set title to be required
  5. Add the preview / demo entry

Insert the Content module

Create Content Type

  1. Hover edit button
  2. Select "Admin"

Select "Data" and add new "Content Type"

Add Name and Description

Create and define the fields

Click Fields button

Add fields

Add the fields of your Content Type

  1. Define technical Fieldname (no spaces or hyphens, best to use PascalCase)
  2. Data Type (what kind of data you enter)
  3. How the inputs can be entered (f.ex. default field, wysiwyg, pagepicker, ...)
  4. Save

Set title to be required

Open field settings

  1. Click anywhere on the first row "Name"

Enter field settings

  1. Provide help text for the user
  2. Set this field required

Add the preview / demo entry

This item will be used inside your template to provide a nice preview when the user is picking the view.

  1. Close fields dialog
  2. Click on the blue pill to quickly create a new Team member 

Enter demo values for your template

These demo entries will be displayed when someone selects the template.

  1. Enter all information & save
  2. Call him "John Smith" for now (you'll need to pick him in a dropdown later)
  3. the image you can just drag in from your pc and drop on top of the field

Add template / view

Core steps

  1. Add a template
  2. Add the HTML template text with placeholders

Add a template

  1. Click on Views
  2. Add a new template

Choose template settings

  1. Name of your Template - let's call it "TeamMember"
  2. Template - for this example we'll use "C# Razor"
  3. Choose template location
  4. click "Create new" link to generate a new template file
  5. Select the Content Type "Team member" you've just created
  6. Select the Demo Data "John Smith" you just created
  7. Update

Close all dialogs and reload page (CTRL + F5)

Add the HTML template text with placeholders

To work on a template you must always first show it (so you will see what your changes do), then go into editing it in a separate browser window.

So after reloading the page, you must select your content-type and your template first.

Open template editor

  1. Hover edit button
  2. Edit template

Add the Demo Template

  1. Paste Demo Template (Download Template.txt)
  2. Save

Note that the edit window stays open. You can now switch back to the other window and refresh it for a preview. Since the code-editor stays open, you can always undo again if you want to. 

Test it by adding content

Everything should look right now. Let's edit it to be sure everything works...

Core steps

  1. View result & add content

View result & add content

  1. View the result of you template with the demo content displayed
  2. Hover over the template to see the edit toolbar
  3. Click on  to enter real content