Align blocks

Total creative freedom! The SiteW editor has been created accordingly, and we are proud to offer you this tool to realize your plans. You can unrestrainedly drag and drop blocks, but you can also define your own building constraints. Rulers, guides, markers, this tutorial review the main techniques.

sitew tools

If you edit your website on a small screen, what will Internet users see on a large screen? On the contrary, if you create your website on a large screen, will it fit to small screens? Stop worrying about it and enable the Recommended maximum width button.

advised width on sitew editor

The arrows delimit an intermediate width adapted to all desktop screens.

Which width suits to smartphones and tablets?
Info warning
The recommended maximum width is just for desktop screens: it’s the desktop view. For smartphones and tablets, the settings are for the mobile view.

Rulers and guides

The tools that help you create your website are in the editor toolbar.


rulers on sitew editor

The Rulers button enables you to show or hide the horizontal and vertical rulers in the editor. The “0” is in the middle of the page. These rulers are graduated in pixels.

When the cursor moves in the creation area, two markers in the horizontal and vertical rulers highlight its coordinates.



The rulers are very useful to position guides. These guides also are very useful to structure your website pages. Be careful, you will no longer be able to do without them!

To position a guide, just click in the ruler. You can move the marker that appears in the ruler to adjust the guide position. To delete a guide, double-click on the guide marker.

The guides are fully realized when you move or resize a block: the selection frame automatically holds on to the guides when it passes near them. It’s very useful!

Automatic alignment

When enabling the Automatic alignment button, you align blocks against each other. When a block is moved or resized, leader lines appear as soon as an alignment is possible with another near block.

Three types of alignments can be suggested according to the context: edge to edge, by the middle or inside.

Next article
Use a colour palette

Last update: October 28, 2022