The designer is the most creative place of Bizplay. It is here that you'll construct and/or rearrange an individual page.
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.
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.
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.
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.
|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.
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.
|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.|
You can change the following basic properties of your page:
|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.|
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.
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.|
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.
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.
|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)|