Point - Page template builder

Introduction

A page template decides what elements you may build into any given page. Page templates are used to maintain a consistent design and ensure your user get a predictable experience.

Every page must use a page template and if you go into "edit" mode on any page, you are able to see which components are used.

Blue cog allows you to edit a component, where the blue plus allows you to edit the "WYSIWYG" editor. The template decides which components (cogs and plusses) you have on the page. Which page template are used on a page is managed in the "page admin". Read up on "page admin" to learn more.

Requirements

• To manage page templates, you need a very high level of access. Typically this is reserved to system owners or core system administrators.

Important to remember

• One page template may be assigned to multiple pages. If you alter a page template (which already is connected to one or more pages), all connected pages will also be affected.
• There are some exception to the above. Navigation, left navigation, footer and extended footer. These components are edited on one page and applies across all areas where these components are used, meaning if you edited them once, you do not need to edit again if you add the component to a template.
• Try to re-use existing page templates before you create new ones. It might get harder to remember what the page templates do if you create too many.
• Use good explanatory names for the page templates. When editing pages, it will be easier to remember what they do.

Accessing the page template builder

The Page template builder is accessible trough "page admin".

Page template builder: Clicking here will take you to the template builder.

Edit template: This will open the template connected to your currently selected page. Makes it easier to quickly check on and edit the currently used template.

When you open the template builder, you see 3 sections.

The template list

This is a list of all your page templates. 

New template: Will open the center panel with no components AND add a new entry in your list of page templates.

• Blue box with number: How many pages currently use the template. (if you alter this page template, you alter all the connected pages at the same time)
• Clone: Copy the page template. Remember to rename it after.
• ( i ): Clicking this will show you a list of all pages currently using this template.
• Bucket: Delete the template. Make sure to reassign all currently connected pages to other templates or you may lose content.

The editor

Clicking on an existing template OR clicking the "+ new template" button will open it in the center panel.

This is where you add the different components and name the template.

• Arrows: Move the component up or down in the list. You may also drag and drop to rearrange.
• Bucket: Delete the component from this template. The component may still be added from the right hand side.
• Additional check boxes: These will be described below.

The components list

While editing a page template, you may add or drag in components from this panel. This panel contains all page templates and you may add one or more onto your template. Individual conditions and details will be listed below.

Once you are happy with your changes, "save template" in the top right corner. Note that changes made on a template may require you to update the content on all connected pages.

Creating a new page template

1. Open page admin
2. In the page overview, click on Page template builder in the upper right corner, and a new area inside page admin will open
3. In this area, click on + New template and a new window will appear
4. In this window, give the template a name and click create
5. You will now have an empty template that you can utilise to create your own template. In order to build your own, find the modules you would like to use in the right hand sidebar (content,Navigation, Header, Integrations and Footer) and click-and-drag the modules into the field in the middle to build your own page template
6. As soon as you are done customising your own Page template, click on Save template in the upper right corner
7. You have now created your own page template. Now, remember to activate it by selecting it when editing a specific page

The components

Short description of each component. Search trough our other Help Center articles to read more in detail.

Content:

• Tiles: Navigation buttons which may be styled. Supports having multiple on a page.
• Inline pages: Load additional chapters onto a page.
• Custom HTML: Limited support for custom coded HTML content on a page.
• WYSIWYG editor: The main content editor. Add text, material from Place or Produce, color swatches, font viewer and a host of other content. Supports having multiple on a page.
  
  The additional buttons under "WYSIWYG editor" are not in use. They are used in legacy applications only.
• WYSIWYG editor with tabs: Tabbed view with an editor inside each tab. For shortening down very long pages.

Navigation:

• Navigation: Top navigation component.
  
  The "new navigation" check box lets you use the new "mega menu" options.
• Breadcrumb navigation: A small string of where you are in the page structure. Lets you navigate to neighbor pages and navigate back to parent pages.
• Chapter navigation: Forward and back button to navigate like pages in a book.
• Anchor: If you use "Header 2" on your text headlines, the anchor will automatically add buttons which quick navigates users down to that chapter on the page.
• Quick links: Almost like tiles. Simpler design, horizontal layout.
• Side navigation: As opposed to the top navigation, lists pages on the left hand side.

Header:

• Header carousel: Hero banner for your page. Single image with text, or a slideshow, or a search box.

Integrations:

• Search view: Allows you to automatically publish content from Place. Also supports searching for pages. Limited to one pr page template.
• Table of components: For the design system integration. Lets you show a list of components. More options for publishing and displaying design system contents is available in the WYSIWYG editor.

Footer:

• Footer: Simple footer for the bottom of your page with few options.
• Extended footer: More advanced footer with different layout options. This one is most commonly used as it also supports a simple view, which mostly replaced the "footer".