Self-service Terminal - Template Designer

GENERAL COMPONENTS

Tip: The Canvas

• The canvas is the area highlighted below in orange.
• The canvas represents the space where we create our designs to display on the SSTs.
• The canvas is relative to the size of the SSTs display.

Tip: Device Layout

• At the top left of the designer, you will find the device layout. In this case it is set to portrait.

Tip: TOGGLE VIEW COMPONENTS

• Click this button to toggle the components outline and get a cleaner view of your design

Tip: PREVIEW

• Click on the indicated button to view a preview of your design.
• Close the preview by clicking the eye icon at the top left.

Tip: TOGGLE FULL SCREEN

Tip: ZOOM CONTROLS

Tip: UNDO

• TIP: CTRL+Z also works

Tip: REDO

• TIP: CTRL+SHIFT+Z also works

Tip: SAVE

• At the top of the designer, you will see a button which will allow you to save your changes.
• Changes are automatically saved, but it is always best to regularly save your changes.

TEMPLATE COMPONENTS

Tip: LAYOUTS

• Click on the layouts button that looks like a grid to access the layouts that are available to this template.
• The images and text in these layouts are placeholders and will be populated by your store and menu data on the actual SST.

NOTE: Only layouts available to the current template will be displayed. Different templates will have different layout options.

Tip: WIDGETS

• Widgets will be displayed under the respective widgets sections.
• Only widgets available to the template will be displayed. Different templates will have different widget options.

Tip: BUTTONS

• Buttons available to this template will be displayed under the Buttons section.
• Different templates will have different buttons available.

Tip: BASIC COMPONENTS

• Columns can be added to act as containers to add components to.
• Columns can also be styled separately and gives you the ability to get even more creative with your design
• Add an image or some text and style them too.

EDIT ELEMENT PROPERTIES

1. Click on an element

2. Click on the paint brush to access the element's properies

Tip: The properties refer to the CSS properties of the element.

Edit the properties of the element to manipulate the design.

You can edit the behaviour, colours, fonts, spacing, dimensions, add animations, and more.

TIPS & TRICKS

Tip: After clicking on an element, you can jump to its parent element by clicking on the little up arrow

Tip: LAYER MANAGER

• The layer manager shows you a view of the hierarchy of the elements of the page.
• You can see relationships between elements both parent and children.
• Double-click to rename an element to easily identify it (example: Menu Header)
• You can select elements from this menu as well