Adding a versatile shape to your Showit site is easy. Shapes can be used to delineate, as borders, banners, headers, or as a slew of other design elements.

First select the canvas you wish to add your shape to. Then hover over the Add Element in the Bottom Toolbar of the Design App and choose the Rectangle or Oval option to add the shape to your selected canvas.
​

Once a shape has been added you can customize it in a variety of ways to . You can resize and position your shape wherever you would like on the canvas by clicking and dragging.

You can further customize this shape by adjusting specific settings by clicking on your new shape and navigating to the right side Properties Panel and selecting either the Shape Style tab or the Effects tab.

The Shape Style tab will allow you to make changes to a shape's Fill Type, its Border, and a handful of additional customization options.

There are three types of fill for a shape: Color, Gradient, and Advanced.

Setting your fill type as Color will allow you to set a single color for your shape, using either one of your preset colors from your Brand Colors in your Design Settings, or you can use the color picker. You can also adjust the opacity of the color that you choose.

The Gradient fill type gives you the option to set two color gradients on shapes. You can adjust the opacity of both colors, as well as the rotation of the gradient itself.

With an Advanced fill type you can customize the fill of your shape with several different effects including the shape's color and opacity, its blur, brightness, contrast, saturation, and even color inversion.

Alternatively you can choose from one of the ready made presets to quickly find a customized shape style to fit your design.

By clicking the + Customize button at the bottom of the Shape Style tab you will have the option to add additional settings to further customize your shape, such as Opacity, Blur, Drop Shadow, and Border Radius.

You can customize your shape's settings in your Mobile and Desktop design independently of each other. Find out more about how to use this function in this article here:

If you haven't visited our learning hub we highly suggest starting there to build the foundational knowledge you need to launch the site of your dreams with Showit!