Where an object can go depends on the type of page and what the object is inside. On a Centered Layout page, you can place objects anywhere. On a Responsive page, objects flow in order down the page unless you tick Allow free dragging. Inside a Container, the layout you set for that Container decides, and Allow free dragging works there too. It has no effect inside a Responsive Row, so change Responsive Rows to Containers.
To see which you have, select the object and look at Inspector > Metrics (the third icon). The page type is under Inspector > Page Settings > Page Layout.
| Where the object is | What dragging does |
|---|---|
| Centered Layout page | Moves it anywhere within its section (header, content or footer) |
| Responsive page, Full width ticked | Moves it up or down the page, not sideways |
| Responsive page, Allow free dragging ticked | Moves it anywhere on the page |
| Inside a Responsive Row (deprecated) | Changes its order in the row. Allow free dragging has no effect here |
| Inside a Container set to Row or Column | Changes its order in the Container |
| Inside a Container set to Free Flow | Moves it anywhere inside the Container |
Centered Layout pages
If you've used iWeb, these will feel the most familiar. Drag an object wherever you want it within its section.
If a blue line stops you at the header or footer, tick Allow free dragging in Inspector > Metrics. You can also hold Command on a Mac or Alt on Windows while you drag. See moving objects into the header.
Responsive pages: place an object anywhere
In EverWeb 4.5 or later, you can place an object anywhere on a Responsive page, as you can on a Centered Layout page.
- Select the object and go to Inspector > Metrics.
- If Full width is ticked, untick it. EverWeb asks Set [object] to Free Dragging? Click Yes.
If Full width wasn't ticked, tick Allow free dragging under Position.
- Drag the object where you want it.
- Click Pin Settings.
- Under Pin Vertical, click top, center or bottom. Under Pin Horizontal, click left, center or right.
Pinning ties an object to an edge or the center of the page, or of its Container, so it keeps its spot as the screen gets narrower.
To check it, make the EverWeb window narrower and watch the object, then look at the page on your phone. An object placed freely doesn't push anything else down, so it can overlap other content on a small screen, and a wide one can stick out. If that happens, see My website looks fine on my computer but is cut off or jumbled on my phone.
Is the box ticked already? That's normal. When you add an object to a Responsive page and it isn't Full width, EverWeb may tick Allow free dragging and pin the object to the left, center or right for you, depending on where it sits.
To put it back in the flow of the page, untick Allow free dragging. The object becomes Full width if it can. Some widgets can't, and EverWeb will tell you the object has to stay Free Dragging.
To remove a pin but keep placing it freely, click the selected pin button again.
Inside Containers
A Container arranges the objects you put in it. To see or change its layout, select the Container and go to Inspector > Widget Settings (the cog, the last icon), then Display > Layout.
| Layout | What it does | To move an object |
|---|---|---|
| Row | Places objects side by side. Set Wrap to Wrap if you want them to stack on a narrow screen | Drag to change the order |
| Column | Stacks objects top to bottom | Drag to change the order |
| Free Flow | Lets you place objects anywhere inside it | Drag it where you want it |
To place one object freely inside a Row or Column, such as a badge in a corner, tick Allow free dragging on that object and pin it. Tick Constrain to edge in Pin Settings to hold it right at that edge.
An object set to Full width stays centered in its Container. To move it sideways, untick Full width first.
To drag an object out of a Free Flow Container, hold Command on a Mac or Alt on Windows as you drag.
Inside a Responsive Row
Responsive Rows are deprecated, so change them to a Container set to Row. Allow free dragging has no effect inside a Responsive Row. It only works on objects placed directly on the page, and inside Containers.
To change a Responsive Row to a Container:
- Add a Container with the Containers button in the toolbar.
- Select it and go to Inspector > Widget Settings (the cog, the last icon), then set Display > Layout to Row.
- Drag each object from the Responsive Row into the Container. You can also right-click an object and use Embed In.
- Check that everything is in the Container, then delete the empty Responsive Row.
What Max Width doesn't do
Max Width sets how wide that one object can get. It doesn't act as a fence for what's inside it, so an object inside a Container can stick out past the Container's edge. If that happens, drag it back or use Undo.
Max Width is also greyed out until Full width is ticked.
Getting something back
| What happened | What to do |
|---|---|
| You've just made a change you don't want | Choose Edit > Undo (Command+Z on a Mac, Ctrl+Z on Windows). Changing the Page Layout is the exception, as that can't be undone |
| An object dropped into a Container or Responsive Row by accident | Right-click it (or Control-click on a Mac) and choose Remove from Container or Remove From Responsive Row. Then check Inspector > Metrics, as it may now be Full width or placed freely |
| An object is in the wrong Container | Right-click it and choose Embed In, then pick the right one |
| You can't click the object you want | Right-click that spot, choose Pick Layer, then pick the object from the list |
| An object has gone outside its Container | Right-click the Container, choose Select Child, then pick the object |
| An object has gone off the page | Select it with Pick Layer or Select Child, then untick Allow free dragging, or type new X and Y values under Position |
| An object has vanished at one screen size | It may be hidden on that device. Choose Window > Show Hidden Objects, then check the Show on boxes under Responsive in Inspector > Metrics |
| It's in the right place but behind something | Select the object you want in front, and tick Always On Top in Inspector > Metrics. Make sure it isn't ticked on the object behind |
Still stuck?
Send us the name of the page, the object you're trying to move, and a short screen recording of your whole screen as you drag it. We can't see your project file (the editable copy of your website, saved on your computer), so please send that too. This article explains how.