Box

The SiteW Box 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 Box block on your page
  • Click on the Design tab or button in order to customize your box

Customize your box:

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, 5-point star, 8-point star, Tooltip
Rectangle
(with gradient)
Create free blog
Round How to create a website using html
5-point-star Web template
8-point-star How to create a website wikihow
Tooltip How to create a website using php
  • 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
add box to website

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 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.

Last update: November 10, 2016