– Restaurant Menus –

How To Build HTML5 Layouts – Using QuickSign Pro Designer Logo

How To Build HTML5 Layouts – Using QuickSign Pro Designer – Restaurant Menu Layout

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

page break

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.

page break

– 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.

page break

– Now What? –

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