– Restaurant Menus –
How To Build HTML5 Layouts – Using QuickSign Pro 
– Click here to view video tutorial or continue below to begin walkthrough tutorial –

Download Source Files – Please download the source files before you begin.
1. Prepare Content
Create folder on Desktop, or desired location, containing all files (images, videos, music and fonts) needed to build layout.
It is imperative that your image and video sizes are the exact size of your desired zones you will be creating.
2. Import Source Files
Open QuickSign Pro Designer and import image files through the
Image Page and video files through the
Video Page.
3. Creating Layout
Through the
Layouts Page, click the “New Layout” button. Designer will automatically set your Layout resolution to 1920×1080.

– Add Image Zone –
On the left side of your Layout, within the
Zones Menu find the blue
Image Zone, dragging and dropping it into the top right of your Layout. Setting resolution size to 640×540.
Designer will display the Zones dimensions in red, around the zone, as you drag. Designer will also display the dimensions in the toolbar, directly above the Layout being created.
Within the folder containing all your source files, drag and drop ‘Image_Zone1.png” into the Image Zone.
Repeat this step 3 more times. You should now have
4 Image Zones on the left side of your Layout. All 4 Image Zones should be 640×540. Two on top of two.
PRO-TIP: By default, Designer sizes your zones in increments of 10 pixels as you drag. For more control of sizing Zones, click View > Uncheck ‘Snap to grid’.
– Add Large Image Zone –
Drag and drop another
Image Zone on the right in the Layout, dragging to resolution size 640×1080. Drag and drop the ‘Varieties.png’ into that Image Zone.
– Add Text Zone –
Now you need to create the menu titles and pricing. Drag and drop the green
Text Zone onto first
Image Zone you created. (Top left Image Zone). Double click within the Text Zone to edit text. To change the Font Family, Typeface, Font Size, Font color and alignment: Right-click >
Zone Properties.
To change the Background Color, Background Opacity, Background Image and Background Corner Radius: Right-click >
Background Properties.
With Designer, you can
layer zones on top of each other. In this tutorial, there are two Text Zones on top of each other for the ‘Savor the Season’ title, to create depth and give the effect of a drop shadow.
Repeat the
Text Zone step 3 more times for the menu titles. Place each title on the rest of the
Image Zones you previously created.
– Add Table Zone –
For the menu labels, under the menu titles you just created, drag and drop the pink
Table Zone onto the pink bar you created, with the use of the Image Zone.
Right click on the Table Zone > select
Zone Properties to add/delete however many rows/columns you want in your table. For this table, you will need 3 columns and 1 row.
Then, drag the table zone to the size of the pink bar you placed it on top of. Just as you did with the Image Zones, right click > select
Background Properties to change the background color, background opacity, background image and background corner radius. In this table, set your background color to transparent.
To input text in your table, simply double click within each column. Designer will show
Table Edit Mode on top left of table.
Right click within the Table Zone > select
Text Properties to change the font family, typeface, size, color and alignment of the text. At the top of the Table Text Properties, you can choose from the drop down: All rows and columns, or by individual columns and rows. Here you can assign different text characteristics to individual rows and columns. Or change them as a whole.
Repeat this step 5 more times and place on the green and pink bars in the other 2 Image Zones, editing your prices as you go.
– Add Frame with use of Image Zone –
To add the green frame on top of the entire menu, simply drag and drop another
Image Zone on top of entire layout, resolution size 1920×1080, then drag and drop the ‘Frame_Zone_Green.png’ image from source folder into the Image Zone.
– Add Text Ticker Zone –
Now, you need to add the large pricing numbers ($2 & $5), that have a text ticker function, on top of the frame. Drag and drop the light blue
Text Ticker Zone, dragging resolution to 120×120. To add the numbers within the Text Ticker Zone, right click > select
Zone Properties. Type 2, in a Text Page box, type 4 in the other Text Page box. Add two extra Text Page boxes for more effect.
Right click within the Text Ticker Zone > select Text Properties for desired font family, size, color, alignment.
You won’t see the Text Ticker animation in the layout template, however, you will see it on your display after deploying your layout.
If you need to edit any zone under the green frame Image Zone you placed on top of the entire layout, simply right click >
Order > Send to Back.
You have just completed your Restaurant Menu Layout! Within the Menu, click File > Save.

– Now What? –
To deploy your content and manage your players, follow the
QuickSign Pro Designer How-To Guide.