How to edit blocks with design mode on and off (vertical block spacing etc.)

Please note: vertical block spacing and block width adjustments are currently in beta. Please reach out to support@rocketspark.com if you would like early access

Design mode is the toggle that decides how much control you see on the page. With it switched off, you get a simple set of tools for changing content. With it switched on, the same blocks open up into a full design surface, with handles for spacing, width, columns and alignment all sitting right there on the page.

Knowing which mode you're in makes everything else make sense, so this guide is worth five minutes before you dive in.

Where to find the design mode toggle

Log in to your dashboard and open the editor. The design mode toggle is the small Rocketspark icon in the editor toolbar. Click it once to switch design mode on, and click it again to switch it off.

Design mode is off by default. If you've opened your website and you're wondering where the extra handles have gone, that toggle is the first place to look.

Your choice sticks for your session, so you can flick it on while you're laying a page out and flick it back off when you're just updating words and pictures.

With design mode off, changing content

This is the everyday mode. It's the one to stay in when you're updating content rather than reworking a layout.

Hover over any block and the block toolbar appears with three tools.

• Edit pencil, opens the block so you can change the text, swap the picture, update a link, or change any of that block's own settings.
• Move arrow, drag this to pick the block up and move it somewhere else on the page.
• Rubbish bin, deletes the block. You'll get a confirmation first.

You'll also see a small + below the block. Click it to add a new block underneath.

With design mode on, designing in context

Switch design mode on and the page becomes something you can shape directly. You'll now have access to the stack level controls, plus two new block level ones.

At stack level you get the handles covered in our guide on how to turn on design mode and edit in-context, which include the left and right external spacing handles, the top and bottom external spacing handles, the gap between columns, the diamond for resizing column widths, and vertical alignment.

At block level you now also get:

• The space between blocks, a horizontal bar at the top edge of each block that you drag up or down. See how to adjust the space between blocks for the full walkthrough.

  

• Block width, handles on the left and right edge of a selected block so you can narrow it independently of its column. See how to change the width of a block for the full walkthrough.
  

Hover versus click, and why it changed

Here's the main thing to get your head around, because it's the one real difference in the way editing feels.

On hover, design mode shows you two things and only two things: the spacing bar at the top edge of the block, and the + at the bottom to add a block underneath. The edit pencil, move arrow and bin are not shown on hover.

On click, the block is selected. A blue outline appears around it, and the block toolbar floats just above it with the edit pencil, move arrow and bin. The width handles appear on the block's edges too.

There's a nice side effect of selecting a block. Every stack level control on the page steps out of the way, so the diamond, the gap between columns and the stack spacing handles all disappear while a block is selected. You're left with a clean view of just the block you're working on, which makes a real difference when you're nudging things into place. Click anywhere off the block, or press Esc, and everything comes back.

Because hover is looking after spacing, clickable blocks take one extra click.

1. First click on a button, link, accordion, file download or map selects the block and shows its toolbar.
2. Second click does the thing, so the link opens, the accordion expands, or the map lets you pan and zoom.

With design mode off, that first click works straight away as it always has.

If you're a designer building for clients, this split is your friend. The in-context settings are there when you want them and out of sight when you don't, so you can go back and forth between designing and writing content without a wall of handles in the way.

Moving and copying blocks

Moving blocks got a lot easier in design mode.

To move a block, click and drag from anywhere inside it. You no longer have to aim for the little move arrow, although that still works if you prefer it. Press and drag in one motion and the block lifts straight away. A quick click without dragging just selects it.

To copy a block, hold Option on a Mac or Alt on Windows while you drag. You'll get a copy of the block that you can drop wherever you like, and again you can start that drag from anywhere in the block.

When you drop a block, it keeps whatever state it was in. Drag an unselected block and it lands unselected. Drag a selected one and it stays selected, ready for the next tweak.

Copying the text out of a block

Because the whole block is a drag surface in design mode, dragging across words to highlight them will move the block instead. So there's a tidier way to grab the words.

Select a text or heading block, then press Cmd + C on a Mac or Ctrl + C on Windows. The whole block's text is copied, ready to paste anywhere. If the block has a heading and a paragraph, the line break between them is kept so the text doesn't run together when you paste it.

A few things worth knowing:

• Double-clicking a word or triple-clicking a paragraph still highlights it as normal, and copying then grabs only what you highlighted.
• If you've highlighted text anywhere else on the page, copying takes that highlight instead.
• You'll see a small Text copied badge next to the block to confirm it worked. It fades away on its own.
• This works on text and heading blocks. Other block types are unaffected, and copying leaves whatever was already on your clipboard alone.
• The text comes across as plain text, so bold and links aren't carried over.

With design mode off, copying works exactly as it always has.

A quick side by side

Common questions

I've turned design mode on and my edit pencil has disappeared. Where's it gone?

Give the block a click. In design mode the pencil, move arrow and bin appear when a block is selected rather than when you hover over it. Hovering shows you the spacing bar instead.

Can I stop my client from moving things around?

Yes, and you don't need to do anything special. Design mode is off by default, so your client sees the simple set of content tools. If you'd like to lock a finished layout down further, you can also use Lock Design on the stack.

Does design mode change how my live website looks?

Not at all. It only changes what you see while you're editing. Your visitors see the same website either way.

Can I still select text inside a block?

Yes. Double-click a word or triple-click a paragraph and it highlights as usual. It's only dragging across text that now moves the block instead, and Cmd + C or Ctrl + C on a selected block covers you for grabbing the whole thing.

What's the arrow on the left of the stack toolbar?

That collapses the stack toolbar down to a small bubble so it's not in the way while you're placing blocks near the top of a stack. Click it again to slide it back open. It also tucks itself away automatically when you select a block in that stack, then reappears when you deselect. If you'd rather keep it collapsed, just close it yourself and it'll stay that way for your session.

Why can't I select a block in this stack?

Linked stacks and footers aren't selectable unless you're editing the linked content itself. That's on purpose, so a change in one place doesn't surprise you somewhere else.

Still not sure about something? Get in touch with our support team, we'd love to help you get your layout looking exactly how you pictured it.