Rectangle Tool

To add a piece of block, select the Rectangle tool from the toolbar or press R, then click anywhere in the page or canvas or just click and drag until you’ll reach the perfect size.

There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, stretching, setting opacity, adjusting rotation and corner radius, adding a new state, swapping through 3 types of shapes (rectangle, circle or line), choosing the right fill, border, adding a drop shadow or perform a click to action.

Refer to the image above to identify rectangle properties panels.

1. Width and height
2. Stretch to Width
3. Opacity
4. Rotation, corner radius
5. Shape
6. Fill Image
7. Border
8. Drop Shadow

Learn more about how to use rectangle properties below.

Width and height

Those properties allow changing the size of the rectangle, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, just click and drag, and release after the perfect size was reached.

Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).

Once the lock icon is pressed it will change to a locked one, this means that when the rectangle property will change the size it will change proportionally.

Stretch to Width

Clicking this property will set the rectangle to 100% which is equal to the width of the browser window.

Opacity

Once dragging or typing another value, rectangle transparency will change accordingly, it could be from 0 to 100.

Rotation, corner radius

Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, just click and drag, and release after the ideal angle was reached.

Right drag - rectangle will rotate in the right (positive value) direction, left drag - it will rotate to the left (negative value).

Alternatively pressing on the number will allow typing the exact degree amount.

The corner radius works in the same way as the angle, but once the action performs it will change the radius.

It could be combined with rotation.

Pressing the icon that indicates corners on the right side just close to the corner radius will allow changing the radius per corner.

The order is:

• Top right corner

• Bottom right corner

• Bottom left corner

• Top left corner

Shape

There are 3 shapes that could be changed at any moment, just click on the preferred shape.

Choose between a rectangle, circle or line.

Fill Image

Clicking this property will allow choosing the fill of the rectangle, it could be any image from your device or any photo from Unsplash.

Or just drag and drop.Choose any photo from the larger free-to-use photo stock.

Border

Clicking this property will enable the border inside the shape, default it will be 1px width, solid with the black color with 50% of opacity.

It could be adjusted to any dimension and/or transparency.
Border style could be changed from solid to dash or dots by clicking on the border type title.

Drop Shadow

This property is usually used for giving the impression that the object is raised above the objects behind it. Just press on the plus icon to add it.

By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.
Drop Shadow could be hidden or unhidden, just pressing on the eye icon, also it could be totally removed by pressing on the minus icon.
Drop Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.
Play around with all the options, once happy just click anywhere on the canvas or proceed straight to any other property or element.