– Academic –

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 Video Zone First –

On the left side of your Layout, within the Zones Menu find the black Video Zone. Drag and drop the Video Zone into the top left of your layout, dragging it to resolution size 1320×743. Your video will be assigned to video zone after you have completed the Layout.

– Add Image Zone –

Drag and drop blue Image Zone into the top right of your Layout. Setting resolution size to 600×227. Then drag and drop the “Logo_Zone.png” image from folder, into the Image Zone.

– Add Slideshow Zone –

Drag and drop the green Slideshow Zone under the image zone you just created. Dragging to resolution size 600×517. Right click within Slideshow Zone > select Zone Properties. Drag all slideshow imagery from folder into the Zone Properties box. Here in the Zone Properties of the Slideshow Zone, you can add as many images you want showcased, change the order of which you want them shown, and also set the transition time.

– Add Text Ticker Zone –

Drag and drop the light blue Text Ticker Zone to the bottom of the layout, filling in the empty space below the zones you already created, dragging resolution to 1920×337. To add the background within the Text Ticker Zone, simply drag and drop the text ticker image from folder, into the Zone.

To add text within the Text Ticker Zone, right click and select Zone Properties. Type in desired text in which you want flipped through. Click “Add Text Page” to add more information. You can also set the transition time in which you want to the text displayed, just like you did in the Slideshow Zone.

To change the font family, size, color and alignment, right click > select Text Properties.

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