Align blocks

Help center > Customize your website design 5 minutes

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.

Recommended maximum width

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.

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

Rulers and guides

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

Rulers

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.

Guides

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.