– Corporate Announcements –

How To Build HTML5 Layouts – Using QuickSign Pro Designer Logo

How To Build HTML5 Layouts – Using QuickSign Pro Designer – Corporate Directory 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

– Change Orientation to Portrait Mode –

Within the menu bar, click View > check Portrait Mode making sure it is highlighted. Hover over Resolution making sure your layout is set is 1080×1920.

– Add Image Zone –

On the left side of your Layout, within the Zones Menu, find the blue Image Zone. Drag and drop Image Zone into the layout, dragging resolution size to 1080×1920. Within folder of source images, drag and drop the background image into the Image Zone.

– Add Table Zone –

Next, you want to create the white floor numbers. Since each number needs to be perfectly aligned with each other, you will want to use the Table Zone. Drag and drop the light pink Table Zone into layout, resolution size 222×1720. Right click within Table Zone > select Zone Properties. Add 1 column and 8 rows.

To input the floor numbers, simply double click within each row. Designer will display Table Edit Mode on top left of table.

To change the font family, typeface, size, color and alignment of the text: Right click > select Text Properties. At the top of the tables 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.

Next, add another Table Zone for the room numbers and titles. Repeating the necessary steps, as stated above, for the Table Zone to get your final output. You need to repeat this 8 times and place them on designated floor levels within the layout.

You have just completed your Corporate Announcements 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.