Multimedia Design Editor
Position, style and label your buttons directly on the video – with rulers, guides, snapping, and edit-in-place controls.
Do your design work directly on the video frame. Buttons snap neatly into place as you drag them, you can lay down your own alignment guides, and you can change a button’s text, position, size and styling right where you can see it.
Aligning buttons: rulers, guides and snapping
Getting buttons lined up used to mean nudging by eye. The editor now gives you proper alignment tools built into the canvas.
Percentage rulers
Rulers run along the edges of the frame, marked as percentages. Because they’re percentage-based, your layout stays consistent whatever size the video plays at, so you can position buttons precisely and describe positions reliably.
Draggable guides
- Drag a guide out from a ruler and drop it wherever you want a reference line.
- Guides persist per project. The guides you set up are saved and will still be there next time you come back to the project, so a layout you’ve established carries across the buttons and islands you work on.
Snapping
As you drag a button, it snaps into alignment automatically. Buttons snap to:
- The guides you have set up
- Other buttons, so a row or column lines up cleanly
- The frame’s edges and centre, for balanced, consistent layouts.
Editing a button on the canvas
Everything about a selected button is editable right on the editor. Select a button to see fields for its position and size, as well as a field for its text.
Position and size
Drag the button to where you want it on screen. Use the timeline bar to scroll to the moment that your button appears so you can see exactly where your button will sit alongside the other media on screen.
Use the W and H fields to set the width and height of your button.
If you know the exact placement of your button on the screen, you can use the X and Y fields. These will allow you to set the position of the button using screen percentage.
Alongside the button you’ll find X, Y, W and H fields (the button’s horizontal and vertical position, and its width and height). Type into these for exact placement and sizing, or drag the button on the frame and let snapping help you (see above). The two ways of working go hand in hand.
Button text
Use the text field to update the text on your button.
If you clear the button text, the default text will show – this is the name of the Island that the button is linking to.
Styling Buttons in Place
Style your buttons directly in the editor for any state: regular, hover & clicked. Control your:
- Font, size and text alignment
- Text decoration (such as bold or underline)
- Colours
- Padding and borders
Choosing what your styling applies to
Use the dropdown to decide what level a style change applies to, so you can style broadly or precisely from the same place. You can apply a change to:
- The whole project and every button across it
- An island
- A variant
- Just the selected button.
Set the level to what you want to affect, then make your change. Working at the project or island level lets you keep a consistent look without restyling every button individually, whereas adjusting the selected button lets you customize a single one.
Tips and Tricks
- Use this feature alongside our Design Editor to customize colors, fonts and style settings – keeping your project on brand.