How to edit shapes

To organise and edit the shapes on your page in order to create a good looking and functional layout, you have a number of options at your disposal. For starters, using just your mouse and the select tool, you can select and drag any individual shape to a different position on the page. You can also select a bunch of shapes and drag them all at once.

However, dragging shapes across the work area is not the only way to change their position. Sometimes you just want to nudge the shape slightly and you can do that by using the arrows on your keyboard; the arrow keys alone will nudge the selected elements for one pixel, but if you hold down Shift at the same time, the nudge will increase to 10 pixels.

The shape size can also be manipulated using your mouse. To do that, grab the Select tool and click on the shape that you want to resize. You’ll notice the selected shape’s corners, as well as the center of each side display handles, which you can click and drag away or towards the opposite side of the shape to change its size. And to do that proportionately, just hold down the Shift key.

When any shape is selected, its current size and position on the page are displayed within the Properties panel. These properties can be edited, which means that you are able to accurately determine the shape’s size and position down to the last pixel. You can do so by using the width, height, x, and y value fields to type in a specific value, or click on the upward and downward arrows to increase or decrease the current value by a fraction of 1 pixel. However, when larger shifts are required, just grab one of the arrows and drag the mouse up or down. Using the Properties panel is a nice alternative to visually editing shapes on the page, although, when used in combination, the benefits are immense. Just note that when it comes to positioning the shape, the upper-left corner of the page is referenced as x=0, y=0.

The Properties panel also enables you to determine the shape’s fill and border colors. To do that simply click on the colored rectangle, which will open a color picker, where you can select a color you like. In addition, you can also determine the border’s radius and width. These two properties can be adjusted by using their value fields to type in a specific value, or click the upward and downward arrows. What’s more, you can copy a shape’s style, which consists of the fill and border properties, and apply it to any other shape within that edition. Just use the Copy style and Apply style buttons located right of the Fill and border label.


To make the tool even more useful, we’ve also added a few features that work very well when operating with a multitude of shapes. The most obvious thing you would want to do when you have a lot of overlapping shapes on the page is to change the order in which they appear. That’s easily done by using the four order functions in the upper context menu: Bring to front, Bring forward, Send backward, Send to back. Every time you use one of these functions notice that the selected element will also change its place in the Elements panel. That’s because the Elements panel is not only highlighting the selected elements, but also displaying the order of elements on the page; the top ones are displayed first. You can also drag the elements up and down the elements panel and change the order that way.

And of course, where would we be without the ability to copy and paste, right? These two functions are also present in the upper context menu, but you can use the universally known keyboard shortcuts Ctrl+c (Cmd+c on MAC) for copying and Ctrl+v (Cmd+c on MAC) for pasting. One thing to note though, the pasted shape will appear on top of the copied shape so don’t go on a wild goose chase the first time you use the functionality.  



In this article

    Have something specific in mind? Don’t worry, just type what you are looking for. Here is our searchy searched.