Every webmaster creating a website in website builder WebWave CMS wants its project to look neat and tidy. Elements alignment if a very important factor to achieve it. In this article, you will learn how to align elements on the same level with accuracy up to 1px. 

 

For your comfort, WebWave created two ways to set elements on a website in equal rows, exactly where you want it.

 

Guides

 

Align a few elements at once

 

 

Guides

A guide is a horizontal or vertical line, that allows you to easily snap elements to it. Guides are visible in website builder on every subpage, so creating a similar page won't be a problem.

 

You can add as many guides as you need. They can be easily removed or hidden. You can also make elements don't snap to guides.

 

Add guides

The vertical or horizontal guide can be added in two different ways:
 

  • In website builder select "Edit" from the main menu and "Add vertical guide"/"Add horizontal guide".



    New guide will appear on the center of the website.

 

  • You can also drag a vertical guide from a scale on the left side of the builder or a horizontal guide from the scale at the top. 

 

 

Move guides

In order to change guide location in website builder WebWave, you need to click on it and simply move it wherever you want. When you start doing it, you will see a number in pixels, which represents a distance from the beginning of a website.

 

 

Delete guides

In order to remove a guide, click on it and drag it outside the working area.

 

Keep in mind, that while deleting a guide, you remove it from every subpage in the builder.

 

Hide guides

If, for some reason, you want to hide all guides in the builder, go to "Edit" and select "Hide guides".

 

 

Snap to guides

When you add an element to your website and want to place it independently of guides, go to "Edit" and select "Don't snap to guides". Now, elements won't automatically snap to guides and you can place them wherever you want.

 

 

If you want elements to snap to guides again, go to exact same place.

 

If you want to align only one element without snapping to guides, press Ctrl while moving element. It will make element ignore guides.

 

 

Align a few elements at once

When you want a couple of elements to be aligned on the same level, use elements relations.

 

To align a few elements, select them all. In Settings Panel go to "Align multiple elements" and set:

 

Same space vertically

This feature places elements vertically in the same distance from each other.

 

 

Same space horizontally

This feature places elements horizontally in the same distance from each other.

 

 

To left 

This feature aligns elements to the left edge of the most propounded element.

 

 

To center (horizontal) 

This feature aligns elements to the center (vertically).

 

 

To right

This feature aligns elements to the right edge of the most propounded element.

 

 

To top

This feature aligns elements to the top edge of the most propounded element.

 

 

To center (vertical)

This feature aligns elements to the center vertically.

 

 

To bottom

This feature aligns elements to the bottom edge of the most propounded element.

 

Quick and easy elements alignment

15 January 2019

Back

This website has been entirely created using our web design software WebWave. We use cookies to give you the best possible experience. Read more.

FIND US ONLINE

HELP DOCS

WEBWAVE

FOR CUSTOMERS

OFFER

WEBSITE BUILDER

Click here to chat with us.

CONTACT

contact@webwave.me

PANEL WEBMASTERA

GET STARTED

Free website builder WebWave makes creating websites effortless. You can start building your website either from scratch with a blank page or, if you are looking for some inspiration, with a free template.  Web design software for free? It is easy!

Didn't find a solution to your problem? Contact us on live online chat or ask on Facebook group.

 

Missing any feature? Share your ideas with us.

 

PANEL WEBMASTERA

LOG IN

GET STARTED