02 February 2017

Anyone creating a page in the WebWaveCMS creator wants it neat and arranged properly. Scattered elements spaced apart by a few pixels do not look well, and aligning each component can be very wearisome.

For your convenience we thought about how to facilitate arranging of elements on the web page in neat rows, exactly where you wish. There are two ways to do so.

 

Guides

Align multiple elements

 

Guides

 

The guide is a vertical or horizontal line, to which elements can be snapped. The guides are visible in the editor on every subpage, which will help you customize each page so that they are similar.

 

You can add as many guides, as you need. You can easily delete, hide them or make that the elements do not snap to them. Guides are only visible in the editor, you don't have to remove them, they will not be visible on the published website.

 

Adding guides

 

Vertical or horizontal guide can be added in two ways.

From the top menu, in the “Edit” tab click "add vertical guide" or "add horizontal guide" to add the appropriate one:

 

 

Additional guide appears in the center of the screen editor.

The second way is to "drag" the guide from the ruler on the edge of the screen.

Hold down the left mouse button on the top ruler, and move the mouse to the workspace to create a horizontal guide.

Hold down the left mouse button on the left ruler, and move the mouse to the workspace to create a vertical guide.

 

Moving guides

 

To change the position of the guide in the WebWave editor, just drag and drop it. When you start doing it, the guide will show the number, it is the distance from the top in pixels.

It looks like in the screenshot below.

 

 

Removing guides

 

To remove a guide you no longer need, drag and drop it outside the editors workspace.

Remember that by doing so you remove the guide, not only from the pages on which you are working, but from all over the editor. Are you sure you won't need it to create another subpage?

 

Hiding guides

 

If for some reason you want to hide all guides in the editor, you can do this by selecting the "hide guides" button in the Edit tab.

 

 

Turning off snapping to guides

 

When you add an element that you want to place regardless of the guides and the guides are bothering you, you can prevent it. Do not delete them, they can still be useful. Just click “Do not snap to guides” in the Edit tab and the guides will no longer interrupt your work.

 

 

To turn on snapping to guides, click the exact same place.

 

If you want to move just one object without snapping to guides, you can do so by holding Ctrl key while dragging the element. It will then ignore the guides.

 

Align multiple elements

 

If you want to make a few elements aligned to each other, vertically or horizontally, or lined up with equal spacing, you can use the “align elements” option.

 

To align several items to each other, you must first select them. You can do this by selecting the first, and then clicking additional elements while holding down Ctrl key, or click and drag over selected objects to draw a rectangle over them.

After selecting multiple items in the bottom panel there will be two new boxes: Alignment and Arrangement.

 

 

Alignment

 

In the Alignment box we can align elements horizontally and vertically.

 

Icons in the first row are used for vertical alignment.

 

Left - aligns the selected items to the left of the leftmost element.

 

Center - aligns the selected items to the shared center, which is half way between the left edge of the leftmost element and the right edge of the rightmost element.

 

Right - aligns the selected items to the right of the rightmost element.

 

Icons in the second row are used for horizontal alignment.

 

Top - aligns the selected items to the top side of the uppermost element.

 

Center - aligns the selected items to the shared center, which is half way between the top edge of the uppermost element and the bottom edge of the lowermost element.

 

Bottom - aligns the selected items to the bottom side of the lowermost element.

 

Arrangement

 

In this box you will find two options that will help you evenly arrange the selected elements in space.

 

Equal vertically – uppermost and lowermost elements remain in the same place, while the selected items in between will be arranged so that they are all in the same distance vertically.

 

Equal horizontally – the leftmost and rightmost element will remain in the same place, while the selected items in between will be arranged so that they were all in the same distance horizontally.

 

GO BACK             

Align of the elements

 

 

Copyright © 2011 — 2018

All Rights Reserved

PRODUCT

CONTACT 

contact@webwave.me 

YOU SHOULD USE WEBWAVE TOO!

Try - it's free

SIGN UP

SUCCESS STORIES

HELP & SUPPORT

LANGUAGE

SIGN UP

LOG IN

SIGN UP

LOG IN