The Designer

The designer is the most creative place of Bizplay. It is here that you'll construct and/or rearrange an individual page.

Basic Elements

It all starts with basic elements. You can create colored sections on a page using the "Box" element. Just drag it from the top left "Basic elements" box onto the canvas and a basic box shape will appear that you can now configure, resize and rotate.

Basic box element

It gets more interesting with the text element. When you add that to your canvas, it will automatically select the element and thereby open the associated properties box on the left hand side. Here you can configure the element as you like. You can edit the text within the element itself on the canvas.

Text element

Looking at the left hand side you'll see a number of properties of the text element, like the overall font type, the font size variant (of individual text snippets), the color, several styling options, list controls, alignment, ability to add a table, presence of an (overall) drop shadow, etc. If you change any of these settings, you'll see that reflected in the element on the page design immediately.

Refer to the Page Elements sections to read all about the elements you can put on a page.

Element Info

At the bottom right hand side of the canvas you'll find basic information of the element you hover over with your mouse pointer. If you select the element, most of that information will become directly editable.

Element info

Info Explanation
X The horizontal position of the element.
Y The vertical position of the element.
Angle The rotation angle of the element in degrees.
W The width of the element.
H The height of the element.
Start If a page start animation is configured, this will display the corresponding timing.
End If a page end animation is configured, this will display the corresponding timing.
Stopwatch (For video elements only) Shows two numbers as "X/Y", where X is the current time during video playback and Y is the total video duration in seconds.

Note that the reference resolution of a 16:9 page is 1920x1080 pixels, but that does not mean you can only play back at that resolution. Upon playback, the player will always seamlessly resize to the resolution of the playback screen.

Page Settings And Controls

On the bottom left hand side of the canvas you'll find a few clickable icons and some buttons to configure and control the page and the designer.

Designer settings and controls

Control Explanation
Gear icon Opens the page properties on the left hand side, which lets you configure your page.
Grid icon Displays a 20x20 pixel grid to help you align your elements.
Play icon If you configured any animations on you elements, this lets you play the animations in the configured order.
Save & back Saves all changes and takes you back to the dashboard.
Save Only saves all changes, you stay in the designer.
Back to dashboard Discards all changes and takes you back to the dashboard.

Page Properties

You can change the following basic properties of your page:

Property Explanation
Ratio and orientation This lets you set the desired aspect ratio of your page to match your playback screen. Most common is the default 16:9 ratio, but you can also use the older 4:3 ratio.
For a vertical (or portrait oriented) screen, choose the 9:16 ratio.
Please note: the aspect ratio is remembered; the next blank page you create will have the same aspect ratio that you select here.
Change background page You can select another page to be shown in the background of the page you are editing. By using one common background page for many of your pages, you can easily create a consistent layout.
Remove background page Let's you remove a background page.

Draft Pages And The Approval Process

When you have the role of an author, any changes you make will result in the page entering a draft state. This means that the changes are saved, but will not yet be visible in any playlists or channels.

If an editor or company administrator opens the designer of a draft page, he will get the option to approve or reject the changes. If he approves these, the changes are immediately available in playlists and channels that contain the page. If he rejects the changes, they will be undone and the page will return to the state before the changes made by the author.

Shortcut Keys

In the designer you can use a number of shortcut keys to make editing even easier. Here's an overview:

Windows or Linux MacOS Explanation
Backspace Backspace Delete the currently selected element.
Esc Esc Unselect the currently selected element or close the currently open dialog box.
Ctrl + C ⌘ + C Copy the currently selected element.
Ctrl + V ⌘ + V Paste the last copied element onto the canvas. This also works across tabs and windows within the same web browser.
Ctrl + Z ⌘ + Z Undo change.
Ctrl + Y Shift + ⌘ + Z Redo undone change.
Ctrl + S ⌘ + S Save the page.
Alt + ← Alt + ← Move currently selected element left 1 pixel.
Alt + ↑ Alt + ↑ Move currently selected element up 1 pixel.
Alt + → Alt + → Move currently selected element right 1 pixel.
Alt + ↓ Alt + ↓ Move currently selected element down 1 pixel.
Alt + dragging Alt + dragging When you drag the element with your mouse while holding down the Alt key, the element will move with steps of 20 pixels, making it easier to align elements.
Alt + resizing Alt + resizing When you resize the element with your mouse while holding down the Alt key, the element will resize with steps of 20 pixels, making it easier to align elements.
Tab Select the next element. This is very convenient if the element is hard to select with the mouse or invisible.
Shift + Tab ⇧ + ⇥ Select the previous element. This is very convenient if the element is hard to select with the mouse or invisible.
Double click Double click Double click on an element with your mouse to switch it to full page size. Double click again to switch back to its previous size.

Media (Images And Videos)

You can upload both media types (images and videos) to our platform. To do this, add the respective element to the canvas and a catalog of that media type will open up. You can then select the image or video to be shown in that element, or first upload a new one.

Image catalog

Use the "Upload image(s)" button to select one or more images on your hard drive to upload. Or simply drag images of your choice from your hard drive into the image catalog and the uploading will start.

Select the uploaded media file you like to use and click the "Use selected image/video" button. Alternatively, you can also double click the image or video to select it and return to the canvas.

Supported Media File Types

Media type Supported file types
Image jpg, jpeg, png, gif
Video virtually any type (it will be converted to a format that can be played in any browser, immediately after the upload has completed)