Working with the design tool user interface
The Edition Digital Design Tool’s user interface is constructed from the following segments: Menu, Context menu, Tools, Animations, Properties, Elements, Actions, Additional, and Library panels.
Starting at the top you will first notice the menu bar. This is where you are able to find different commands to use in the Design tool. For example, from the Edition menu you can preview, save, and close the edition you have currently open. You can also open a different edition or return to the Workflow. The Edit menu lets you undo or redo the actions you’ve made, cut, copy, paste, and delete elements on the page, add them to your Library, align and arrange them, and select all or deselect the elements on the page. The View menu contains different options for adjusting how the Work area is displaying the current page; you can zoom in and out, fit the page to the available space, and enable the grid, guides, and contours for a more accurate element positioning. Clicking the Preview menu will open your edition with all the changes made up to that point in a new browser tab. And lastly, the Help menu contains a list of all keyboard shortcuts the Design tool supports.
Just below the menu is the context menu where we’ve made available a select number of the most important commands for arranging and positioning elements on the page. If you’re wondering which command each button represents, just hover your mouse cursor over any button to reveal a tooltip with the command’s name and the corresponding keyboard shortcut.
The context menu essentially enables you to quickly reach for the save, undo, redo, copy, cut, and paste commands, which we all know are absolutely indispensable.
To the right there’s a set of buttons that enable determining the selected element’s order of appearance. Say you have a few images overlapping one another and you want to bring one of them to the front, so it’s more prominent - that’s when you use these commands.
A bit further to the right are the Align commands that enable you to align multiple selected elements relative to one another.
Over on the far right of the context menu you will find the arrow buttons for navigating to the previous or next page, the current page number, the pages button for returning to the workflow to select a different page, the zoom percentage, and the fit button to fit the page to the current Work area size.
Starting at the top of the tools panel there’s the select tool for selecting elements from the Work area. Below is the Direct selection tool, which enables adding, removing, or editing vertex points of a polyline shape. Speaking of shapes, this panel also contains three tools for creating different shapes: Ellipse, Rectangle, and Polyline. The image and gallery tools are next in line. These enable placing single images or/and a gallery of images on the work area. Following that are the Video tool for adding videos, the Audio tool for adding audio, the Textblock for adding text elements, and the Survey tool for adding surveys and forms.
Finally, there are also a few helpful tools that will simplify maneuvering and operating with elements on page. The first bunch is called Visual helpers and enables you to display a Grid and Guides, to which you can snap and align elements. And, of course, there are also the Zoom and Pan tools, which are indispensable when fine tuning details. To open a list of all available keyboard shortcuts you will need to click the last question mark icon in the Tools panel.
The bottom panel is reserved exclusively for animations and is where you can see a detailed display of the animations which are triggered by the currently selected element. At the same time you can create new, remove, and fine-tune existing animations’ parameters to perfection. You can learn more about how to animate in our Tips&Tricks section.
At the centre is the glorious work area. This is where all the magic happens, so to speak. All the text, images, galleries, videos, audio, shapes, and other elements, which you’ve added to the page will be displayed in the work area where you can move them around, resize them, animate them, and a bunch of other fun stuff as well.
The Elements panel on the right hand side is a list of all elements that were placed on the page. Here you can remove elements, hide them from view (only from the work area), lock their position, and change their order of appearance.
Within the Properties panel, you can specify the selected element’s name, size and position on the page. When the selected element is a shape, you can also specify its fill and border colour and opacity. What’s more, the border width and radius can also be specified.
The Additional panel is quite special because it displays a different set of options, which are unique for the selected element’s type. For example, if you select a text element, the Additional panel will enable you to specify the Font, which is obviously not something that you would need when working with audio files.
The Actions panel displays available events associated with the selected element. Events allow for a number of actions that are triggered when the events occurs. If no element is selected, page events are displayed.The panel enables you to add new, edit or remove existing actions of the selected element. To learn how to add actions to an element, check out this article.
The library panel consists of two tabs: My assets and Cliparts. All elements added to My assets will be conveniently available for reuse throughout the whole edition. Here’s a quick guide that will teach you how to create your own library of assets.
Cliparts is available in every edition and offers a wide range of ready-made elements organised in dedicated groups. Have a look at this guide to learn more.
Animations, Properties, Actions, Additional, Elements, and Library panels can be collapsed. To do that, simply click on the dash icon that’s located on the right-hand side of each panel’s name. The panel will expand back if you click on the dash again. If you want to adjust the height of a panel, grab its bottom edge and drag it up or down. What’s more, the panels on the left and right can be reorganised. To relocate a panel, move your mouse cursor on top of that panel. When you see the mouse cursor turn into a hand, that’s when you can grab the panel and drag it to the other side, or in between two other panels for example. Whenever you do that a green highlight will show you where the panel will be placed once you release your mouse button. All these options enable you to adapt the workspace to what works best for you.