To centre one object on the page, select it and choose Arrange > Align Objects > Center. To line several objects up with each other, select them all and choose an option under Arrange > Align Objects. To make the gaps between them equal, use Arrange > Distribute Objects. The same buttons are in Inspector > Metrics, under Object Alignment and Distribute objects.
Centre an object on the page
- Click the object once to select it.
- Choose Arrange > Align Objects > Center. The object moves to the middle of the page, left to right.
- For the middle from top to bottom, choose Arrange > Align Objects > Middle. This uses the whole height of the page, so on a long page the object may jump well down the page.
If the object is inside a Container, it's centred inside that Container instead of on the page.
On a Responsive page, EverWeb may ask Maintain center alignment on different screen sizes? Click Yes. EverWeb pins the object to the centre (ties it to the centre line), so it stays centred on a phone and on a wide screen too. If you click No, it's centred for the window size you see now only.
Line up several objects with each other
- Select the first object, then hold Shift and click each of the others. (On a Mac, holding Command also works.)
- Choose Arrange > Align Objects, then Left, Center or Right to line up their edges or centres side to side, or Top, Middle or Bottom to line them up top to bottom.
With more than one object selected, Center lines them up with each other, not with the page. To centre two objects of different sizes on the page, one above the other, select each one on its own and choose Center for each.
Make the gaps between objects equal
- Place the first and last objects where you want them, such as the left and right photos in a row.
- Select all the objects (Shift-click each one).
- Choose Arrange > Distribute Objects > Horizontally for a row, or Vertically for a column.
EverWeb keeps the first object where it is and spaces the rest so every gap is the same.
Guides while you drag
As you drag an object, lines appear when its edges line up with another object, and the object snaps into line when it gets close. You can also show a line when the centres line up:
- Open EverWeb > Settings on a Mac, or Edit > Options on Windows.
- Click General.
- Under Alignment Guides, tick Show guides at object center. Show guides at object edges is ticked already.
To drag without snapping, untick both boxes. The guides compare objects with each other, not with the page, so centre the first object with Arrange > Align Objects > Center, then line the others up with it.
Place an object exactly
- Arrow keys: select an object and press an arrow key to move it 1 pixel. Hold Shift to move it 5 pixels.
- Exact numbers: go to Inspector > Metrics (the third icon). Type the position in X and Y under Position, and the size in Width and Height under Size.
- Distances: select an object, hold Option (Mac) or Alt (Windows) and move the pointer over another object. EverWeb shows the distance between them in pixels.
Keep objects in place
- Lock: select an object and choose Arrange > Lock so you can't move it by accident. Locked objects also stay put when you use Align or Distribute. Use Arrange > Unlock to move it again.
- Keep objects together: on a Responsive page, put them in a Container. Select them, then choose Arrange > Contain As and Row, Column or Free Flow. On a Centered Layout page, Arrange > Group also works, but we recommend Containers.
Inside a Container
A Container (Row or Column) arranges what's inside it, so Align Objects and Distribute Objects are greyed out for those objects. Use the Container's own settings instead:
- Select the Container by clicking an empty part of it.
- Go to Inspector > Widget Settings (the cog, the last icon).
- Under Alignment, set Vertical to Top, Middle or Bottom, and Horizontal to Left, Center or Right.
- For even spacing in a Row, set Horizontal to Justify (first and last objects at the edges, equal gaps between) or Justify-Center (equal space around each object).
To change the space between objects, select each object and use Inspector > Metrics > Margins & Padding. In EverWeb 4.6 and later, you can also set one gap for the whole Container with Row Gap and Column Gap in Widget Settings.
To change the order, drag an object to its new place. In EverWeb 4.6 and later, you can also select it and press Command plus an arrow key (Ctrl plus an arrow key on Windows).
An object with Allow free dragging ticked can still use Align Objects, inside its Container.