Restaurant Menus Layout

– Restaurant Menus –

How To Build HTML5 Layouts – Using QuickSign Pro Designer


– Click here to view video tutorial or continue below to begin walkthrough tutorial –

Download Source FilesPlease 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. Follow the steps below to create the Restaurant Layout.

You can click on the thumbnail images to view them larger.


– 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.
Image Zone
Add Image Zone

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.
Image Zone
Image Zones
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 in to the first top left Image Zone you created. Double click within the Text Zone to edit the text. To change the Font Family, Typeface, Font Size, Font color and alignment: Right-click > Zone Properties.
Text Zone Properties
Text Zone Properties
To change the Background Color, Background Opacity, Background Image and Background Corner Radius: Right-click > Background Properties.
Background Properties
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.
Layering Zones
Layering Zones
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.
Table Zone
Table 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.
Table Zone Properties
Table Zone Properties
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.
Table Zone Background Properties
Table Zone Background Properties
To input text in your table, simply double click within each column. Designer will show Table Edit Mode on top left of table.
Table Edit Mode
Table Edit Mode
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.
Table Zone Text Properties
Table Zone Text Properties
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.
Image Zone - Green Frame
Image Zone – Green Frame

– 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.
Text Ticker Zone
Text Ticker Zone
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.
Layer Order
Layer Order

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.