Content Designs
→ → →
Access Content Designs to create and design XDMB content. The following is an overview of the Content Designs homepage:
 |
1 | Create Content Design. Use the Content Designer to configure the screen components, including images, videos, and order confirmation units (OCU). To add a customer-facing tip screen, see Add Tip Screen. To add an OCU, see Add Order Confirmation Unit (OCU). | |
2 | Content Design Name | Specifies the name of the Content Design. |
3 | Description | Provides a description of the Content Design. |
4 | Resolution | Specifies the screen resolution. Select All under the column header to filter the Content Design list by resolution. |
5 | Content Layouts | Specifies the number of Content Layouts mapped to the Content Design. Select the Content Layouts value to view the names of each mapped layout. |
6 | Last Update | Specifies the date/time the Content Design was last updated. |
7 | 3-Dot Menu | From the dropdown, select an action to perform on the Content Design: |
Content Designer Overview
→ → →
Use the Content Designer to add and configure the content that is displayed on a screen.
 |
1 | "Hamburger" Menu | Select the "hamburger" icon to access the following options:
| ||||||||||||
2 | Toolbar | From the toolbar, access the following tools:
| ||||||||||||
3 | Content Design Title | Displays the name of the Content Design. Specify the name in the Content Design Name field of Content Design Settings. | ||||||||||||
4 | Zoom Settings | From the dropdown, select a zoom setting:
| ||||||||||||
5 | Preview Content Design | Preview the Content Design in a separate browser tab. | ||||||||||||
6 | Add Media | Upload image and video files and configure their size and location on the screen. | ||||||||||||
7 | Add Text | Add text components and define their size, location, font, and color. | ||||||||||||
8 | Add Component | Add and format the following components:
| ||||||||||||
9 | Manage Layers | Open the Layers pane of the Content Designer and manage the content layers of the current screen. | ||||||||||||
10 | Ruler | When Show Rulers is enabled from the "Hamburger" menu, a ruler is displayed along the vertical and horizontal perimeters of the screen. | ||||||||||||
11 | Content Design Body | Provides a visual representation of the content. Select a component from the content to configure its respective settings. | ||||||||||||
12 | Component Settings | From this pane, configure settings for the selected component. |
Create Content Design
→ → →
To create Content Design:
From the upper-right of the Content Designs homepage, select Create Content Design.
From the right pane, define the following:
Field
Description
Screen Name
Name for the screen.
Description
Description of the screen.
Screen Size
From the dropdown, select the desired resolution for the screen.
Background Color
Select the color tile to select a background color for the screen.
Use the Content Designer to add and configure the screen components:
Component
Description
Upload image files and configure their size and location on the screen.
Valid file types: PNG, JPEG, GIF, SVG
Maximum file size: 30MB
Add a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components.
For example, a carousel might include two (2) promotional images (where each image appears for five (5) seconds), followed by an eight (8) second video.
Add and format a product pricing component. Optionally associate a product with the component.
Add text components and define their size, location, font, and color.
Upload video files and configure their size and location on the screen.
Valid file types: MP4, MOV, WEBM
Maximum file size: 100MB
An OCU displays order details to the customer, including:
Order Item list with respective quantities and modifiers.
Order total summary, including sub total, tax, and applied discounts.
The benefits of an OCU include:
Improves order accuracy and speed-of-service.
Provides up-sell and cross-sell opportunities at time of purchase.
Reduces operating expenses and employee theft.
Enhances guest satisfaction.
Note
The Content Design is automatically saved after each user action.
From the upper-right of the Content Designer, select Preview Content Design to see a preview in a separate browser window.
From the upper-left of the Content Designer, select the "hamburger" icon.
From the dropdown, select Exit Content Design.
Add Image
To add an image:
From the left pane of the Content Designer, select Media.
From the file browser, select and add the image file.
The image is added to the design workspace and to the Layers pane on the left.
From the right pane, define the following:
Field
Description
Name
In the provided field, type a name for the image.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted, the X and Y field values are updated automatically.
W and H
Type the desired width and height of the component.
When the width and height of the component are manually adjusted, the W and H field values are updated automatically.
Scale Proportionally
Enable this option to automatically update the X, Y, W, and H values proportionally when one value is changed.
Add Media Carousel
A media carousel displays a collection of media files consecutively on an infinite loop where each file is displayed for a specified duration. A carousel can include any combination of images, videos, and/or price components.
To add a media carousel:
From the left pane of the Content Designer, select Component.
From the Component menu, select Media Carousel.
From the file browser, select the component(s) to add to the carousel.
Tip
Hold down Crtl on the keyboard to select multiple components from the same folder.
From the right pane, define the following:
Field
Description
Name
Type a name for the carousel. The default name is "Carousel".
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.
W and H
The values are set to the width and height of the largest component in the carousel. The values are non-editable.
Transitions
From the dropdown, select the desired effect to use when transitioning from one component to another.
From the lower-right of the Carousel Settings, sort the media files and specify the amount of time to display each file:
Select and drag the control to the left of each file to sort them in the preferred sequence.
In the Duration(s) field, type the number of seconds to display the file before transitioning to the next file.
Select Auto to play the video at its original length. This option is only available for video files.
The Loop field specifies the number of seconds it takes to cycle through one loop of the carousel.
From the Layers pane:
Select each component in the carousel and configure its respective settings.
Add additional components to the carousel as needed.
Add Product Pricing Component
Note
Product Pricing components are automatically formatted in accordance with the regional settings defined for the company.
Define regional settings in the Regional Settings section of the Company/Site Preferences editor.
To add a Product Pricing component:
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Product Pricing.
From the right pane, define the following:
Field
Description
Name
In the provided field, type a name for the component.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.
From the Text section on the right pane, select formatting options:
Option
Description
Font
From the dropdown, select a font to apply to the text.
To upload custom fonts, see Fonts.
Size
In the provided field, type the desired font size.
Style
From the dropdown, select a font style.
Color
From the color field, select a font color. The HEX# for the selected color is displayed.
Justification
From the right of the color field, select a justification option.
(Optional) From the Product section of the right pane, select Add Product to associate a specific product with the Pricing Component.
The name and ID of the selected product are displayed in the Product field.
Enable Show Max Spacing to view the maximum amount of space the component could occupy.
From the lower section of the right pane, define the following:
Option
Description
Decimal Places
Number of decimal places to display in the value.
Show Currency Symbol
Display currency symbol with currency value.
Show Decimal Point
Display decimal point and display decimal values in the same font size as the integer value.
If this option is NOT selected, the decimal point is NOT displayed. The decimal values are displayed in smaller font to distinguish them from whole integer.
Show Integer When Zero
Display leading zero (0) in whole integer when zero (e.g. 0.99).
Show Decimal When Zero
Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).
Swap Text When Sold Out
If the product associated with the Pricing Component becomes unavailable at the site, the product price on the screen is replaced with the Sold Out Text.
In the Sold Out Text field, type the text to display when the product is unavailable.
Add Text
From the upper-left of the Content Designer, select Text.
From the right pane, define the following:
Field
Description
Text
In the provided field, type the text to display on the screen.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted, the X and Y field values are updated automatically.
W and H
Type the desired width and height of the component.
When the width and height of the component are manually adjusted, the W and H field values are updated automatically.
From the Text section on the right pane, select formatting options:
Option
Description
Font
From the dropdown, select a font to apply to the text.
To upload custom fonts, see Fonts.
Style
From the dropdown, select a font style.
Size
In the provided field, type the desired font size.
Color
From the color field, select a font color. The HEX# for the selected color is displayed.
Justification
From the right of the color field, select a justification option.
Auto-Width
Adjust the width of the text box automatically to fit the content.
Auto-Height
Adjust the height of the text box automatically to fit the content.
Line Height
Adjust the height of the line of text. Type the desired height in the provided field.
Add Video
To add a video:
From the upper-left of the Content Designer, select Media.
From the file browser, select the video file.
The video is added to the screen workspace and to the Layers pane on the left.
From the right pane, define the following:
Field
Description
Name
In the provided field, type a name for the video.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted, the X and Y field values are updated automatically.
W and H
Type the desired width and height of the component.
When the width and height of the component are manually adjusted, the W and H field values are updated automatically.
Infinite Play
Enable the Infinite Play toggle to play the video in a continuous loop.
Disable the toggle to play the video a specified number of times.
In the Play Count field, type the number of times to play the video.
Align Components
When configuring a component, the following alignment tools are available from the top of the right pane.
| Align the component on the left side of the screen. | |
| Move the component to the center of the screen. | |
| Align the component on the right side of the screen. | |
| Align the component along the top of the screen. | |
| Move the component to the center of the screen without changing its horizontal placement. | |
| Align the component along the bottom of the screen. | |
| To equally distribute horizontal and/or vertical spacing between selected components:
|
Tip
Use the arrow keys on the keyboard to nudge an item on the screen one (1) pixel at a time in the respective direction.
To nudge an item ten (10) pixels at a time, hold down Shift and then select the applicable arrow key on the keyboard.
Manage Layers
From the Layers pane of the Screen Designer, manage the content layers of a DMB screen. Right-click a layer to open a popup menu and perform the following actions:
Action | Description |
|---|---|
Copy | Copy the selected component to the clipboard. |
Paste | Paste the contents of the clipboard. |
Hide | Hide the layer from view. |
Lock | Make the contents and properties of the layer non-editable. |
Bring Forward | Bring the selected layer forward if it is behind another layer. |
Bring To Front | Bring the selected layer forward to the foreground of the screen. |
Send Backward | Move the selected layer backward to position it behind another layer. |
Send to Back | Move the selected layer backward and make it the lowest layer. |
Group Layers | Create a group that contains multiple layers and define the coordinates for the group. |
Create Carousel | Add a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components. |
Delete | Remove the selected layer from the screen. |
Group Layers
To create a group of layers:
From the menu pane on the left, select Layers to open the Layers pane.
Hold down Ctrl on the keyboard, and then select the layers to include in the group.
From the Layers pane, right-click one of the selected layers.
From the popup menu, select Group Layers.
From the right pane, define the following:
Field
Description
Name
Type a name for the group.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.
W and H
Type the desired width and height of the component.
When the width and height of the component is manually adjusted, the W and H field values are updated automatically.
Description
Type a description of the group.
Tip
From the Layers pane, drag and drop layers to add them to an existing group.
Ungroup Layers
To ungroup a collection of layers:
From the Layers field, right-click the group folder.
From the popup menu, select Ungroup.
Create Media Carousel from Layers
→ → →
A media carousel is a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components.
To create a media carousel from existing layers:
From the menu pane on the left, select Layers to open the Layers pane.
Hold down Ctrl on the keyboard, and then select the layers to include in the carousel.
From the Layers pane, right-click one of the selected layers.
From the popup menu, select Create Carousel.
From the pane on the right, define the following:
Field
Description
Name
Type a name for the carousel. The default name is "Carousel".
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.
W and H
Type the desired width and height of the component.
When the width and height of the component is manually adjusted, the W and H field values are updated automatically.
Transitions
From the dropdown, select the desired effect to use when transitioning from one component to another.
From the lower-right of the right pane, sort the carousel components and specify the amount of time to display each component:
Select and drag the control to the left of the listed components to sort them in the desired sequence.
In the Duration(s) field for each listed component, type the number of seconds to display the component before transitioning to the next component in the carousel.
Select Auto to play the video at its original length. This option is only available for video files.
The Loop field specifies the number of seconds it takes to cycle through one loop of the carousel.
Tip
From the Layers pane, drag and drop layers to add them to an existing carousel.
Edit Content Design
→ → →
To edit the properties and components of a Content Design:
From the Content Designs homepage, select the square to the left of the Content Design.
In the Search field in the upper-right, type the name to quickly locate the Content Design from the list.
From the Actions dropdown, select Edit.
From the Content Designer, edit the components as needed.
From the upper-left of the Content Designer, select the "hamburger" icon.
From the dropdown, select Exit Content Design.
Delete Content Design
→ → →
Note
Any Content Layout assignments must be removed first.
To delete Content Design:
From the Content Designs homepage, select the square to the left of the Content Design.
In the Search field in the upper-right, type the name to quickly locate the Content Design from the list.
From the Actions dropdown, select Remove.
From the confirmation prompt, select Yes.
Duplicate Content Design
→ → →
To copy the properties and components of a Content Design to create a new Content Design:
From the Content Designs homepage, select the Content Design to duplicate.
From the upper-left of the Content Designer, select the "hamburger" icon.
From the dropdown, select Duplicate Content Design.
The Content Designer opens the duplicate content in a separate browser window. "Copy" is appended to the name of the duplicate content.