Create forms with SiteW

The SiteW Shape block will allow you to work easily and effectively on your website design. You can create strips, backgrounds and add shapes and containers to your website.

Add a shape to your website:

• On the website creation page, drag and drop a Shape block on your page
• Click on the Design tab or button in order to customize your box

Customize your shape:

The Examples button will enable you to choose some predefined examples of shapes and to load their configuration.

To totally customize your shape:

• Choose your shape among the options available: Rectangle, Round, Triangle, 5-point star, 8-point star, Tooltip

Rectangle (with gradient)
Round
5-point-star
8-point-star
Tooltip
Triangle

• Choose its color by clicking on the field and by using the color selector or by directly entering your color code

You can add a gradient to the Round and Rectangle shapes:

Choose your gradient type in the drop down menu: Vertical, Radial, Horizontal or Diagonal.

To customize your gradient:

• Click on the color squares to modify their color with the color selector
• Add color squares by clicking on the gradient bar
• Delete the color squares by clicking on them then click on the white X on the right of the black window
• Move the squares along the bar to modify your gradient
• The gradient radius can be modified for Vertical and Diagonal gradients, by moving the dot along the elliptical tool

You can add a shadow to the Round and Rectangle shapes:

• Check the Shadow box
• Select the shadow color by using the color selector or by directly entering your color code in the input field
• Define the Horizontal and Vertical lengths of the shadow by using the little slider or the input field
• Set the Border radius in the same way

You can add rounded corners to the Rectangle shape:

Set the Border radius using the slider or the input field in the Design panel.

You can enable the Container feature for the Rectangle and Tooltip shapes:

By clicking on the square icon located on the upper border of your selected block, you can make your Rectangle or Tooltip shape a container. That is to say that when you move it, you move all the elements that it contains at the same time.

You can enable the Full width option for the Rectangle shape:

In this case, we advise you to activate the Lock feature (padlock icon located on the upper border of your selected block) once it is configured in order to avoid accidental modifications.