Editor keyboard shortcuts, right-click menu and toolbar

Most things you do to a selected element can be done three ways: a keyboard shortcut, the right-click menu, or the floating toolbar that appears above it. This page lists all three.

Keyboard shortcuts

On Windows use Ctrl, on a Mac use Cmd.

• Undo: Ctrl/Cmd+Z.
• Redo: Ctrl/Cmd+Shift+Z, or Ctrl+Y.
• Copy the selected element: Ctrl/Cmd+C. A note says what was copied, for example "Button copied".
• Paste: Ctrl/Cmd+V. It pastes below the selected element, or inside it if it can't go below (for example a widget pasted into an empty column). A copied section pastes below the selected section.
• Duplicate: Ctrl/Cmd+D places a copy right after the selected element. It doesn't work on a whole section: copy the section and paste it instead.
• Delete: Delete or Backspace removes the selected element. It doesn't delete the whole header, footer or phone menu (use right-click > Delete for those).
• Preview: Ctrl/Cmd+P. Press Esc to go back to editing.
• Inside a Free Layout: the arrow keys move the selected item by 1 px (10 px with Shift). Ctrl/Cmd+] brings it forward one step and Ctrl/Cmd+[ sends it back one step. Add Shift (Ctrl/Cmd+Shift+] or [) to bring it to the front or send it to the back. This changes only the screen size you're on.
• Inside an Advanced Grid: the arrow keys nudge the selected item by changing its outer spacing, 1 px at a time (10 px with Shift). Ctrl/Cmd+] and [ (with or without Shift) change which item sits on top when items overlap.
• Resize handles in a Free Layout or Advanced Grid: click a handle to focus it, then use the arrow keys. In a Free Layout each press grows or shrinks the item by 8 px. In an Advanced Grid each press adds or removes one column or row from the item's span.

When the shortcuts don't fire:

• While you're typing (in text on the page, a panel field, a search box) the keys do what they normally do in text.
• While a dialog or window is open.
• Arrow keys, Delete and the Ctrl/Cmd+[ / ] keys only work in Edit mode, not Preview.
• There's no publish shortcut, so you can't publish by accident.

How undo works

• Undo covers your edits on the page (the canvas): adding, moving, deleting, text and Design changes. It doesn't undo changes in the side panels such as the Theme, Pages, Site Settings or Business Info.
• It keeps the last 50 steps for the whole page.
• One drag is one step, however far you drag. A Zeus chat reply that changed several things undoes in one step.
• Switching the language you're editing clears the undo history.
• Undo only steps back through your own edits. A section that someone else changed while you had it open starts a fresh history.
• A deleted section shows a note with an Undo button for 10 seconds.

The right-click menu

Right-click any section, column, box or widget. What you see depends on what you clicked and on your permissions.

• Header row: the element's type (for example SECTION or BUTTON) and two arrows to move it up or down (left or right in a row).
• The main action for a widget, such as Edit Text or Manage Image.
• Edit Design: opens the Design panel.
• Select Layer: pick a parent (the column, the section) to select it instead. Handy when a widget fills its column and you can't click the column.
• Add (sections, columns and boxes): Column, Inner Column or Widget. A section, header or footer offers all three, a column offers Inner Column and Widget, an inner column offers Widget. Widget opens the Add panel.
• Reset to Theme Spacing (sections, columns, inner columns): removes this element's own padding on every screen size, so it goes back to the theme's spacing. Grayed out when there's nothing to reset.
• Save as Section (sections, agency people only): This Section Only, Multiple Sections (choose more sections on the page) or Entire Page. This saves to your agency's section templates.
• Duplicate (grayed out for whole sections), Copy, and Paste Above, Paste Below or Paste Inside when what you copied can go there.
• Edit CSS and CSS Class Names: see below. A tick shows when the element already has some.
• Add Comment: starts a site comment pinned to this element (needs Site Comments).
• Lock Editing for Client (sections and columns, agency people only): client people can't change, move or delete anything inside it. Click again (Unlock for Clients) to undo it.
• Set as Anchor (sections, columns and inner columns): gives the element a name so buttons and links can jump to it. Once set, the item shows the name, for example Anchor: get-a-quote.
• Hide From: All Screen Sizes, Ultrawide, Desktop, Tablet or Mobile. A tick shows where it's hidden. Each size is separate: hiding on Desktop doesn't hide on Ultrawide.
• Delete: removes the element. On the header or footer this removes the whole header or footer from every page.

Client people with only Widget content, Blog or Popups rights see a shorter menu without the move, add, copy, hide and delete items.

The floating toolbar

Click an element and a dark toolbar appears above it.

On a widget

• The main button, named for the widget: Edit Text, Manage Image, Manage Button, Manage Photos and so on.
• Edit Design: opens the Design panel.
• Duplicate.
• Alignment: quick alignment (see below). Only on widgets that have an alignment setting.
• Move arrows (up / down, or left / right in a row). Inside a Free Layout these become Bring forward and Send backward.
• Delete.
• More: Copy, Duplicate, Bring to front and Send to back (Free Layout only), Paste Above / Paste Below when you have something copied, Connect to Data (or Manage Connection once connected), Hide From and Delete.

Widgets in the header have their own main buttons: Manage Links on Nav Links, and Open Menu / Close Menu on the Menu Icon (it opens the phone menu so you can edit it). A green chip shows when a widget is connected to data; click it to manage the connection.

On a section, column or box

• Select parent: selects the box this one sits in.
• Design: opens the Design panel.
• Link / Edit Link (columns, inner columns and Free Layout boxes): makes the whole box clickable, using the link picker.
• Change Preset (header only): pick a different header layout.
• Add: Column, Inner Column and Widget (a short list of common widgets), then Blank Section and Zeus-generated section to add a new section below. Zeus-generated section is for agency people only.
• Duplicate (grayed out for a whole section), Alignment, the move arrows (not on the header or footer) and Delete.
• More: Copy, Duplicate, Save as Section (sections, agency people only), Redo this section with Zeus (sections, agency people only, see Zeus in the editor), Paste Above / Below / Inside, Lock for client editing / Unlock for clients (agency people only), Connect to Data / Manage Connection where the element can be connected, Hide From and Delete.

Alignment

Select a section, column, box or widget and click Alignment on its toolbar. It changes the same settings as the Design panel, so the two always match, and undo works the same way.

• Sections, columns and boxes: under Contents, pick one of nine spots (left, center or right, at the top, middle or bottom) to place everything inside. Spread spaces the items out (between, around or evenly).
• Position (a column or box inside a stacked column or section): places this box itself left, center or right when it's narrower than its parent. Same as Design > Size > Position.
• Widgets: where the widget sits, plus text alignment where it has text. Buttons (and Click to Call, Click to Email, Download, OpenTable), the Google Reviews badge, Social Icons and Share have Horizontal (left, center or right). With none picked, a button or the reviews badge follows its column's alignment.
• It changes the screen size you're editing. On Tablet or Mobile a small icon shows whether the value is set there or comes from a larger screen; click it to go back to the larger screen's value. A setting shared by every size says All screen sizes.
• Use Tab and Enter to move through it, and Esc to close it.

Edit CSS

Right-click > Edit CSS adds CSS to this one element, in the editor and on the live site.

• Plain lines style the element itself, for example color: #1f2937; or letter-spacing: 1px;.
• Use & for hover or for parts inside it: &:hover { opacity: .85; } or & img { border-radius: 8px; }.
• If a Design setting still wins, add !important.
• Up to 20,000 characters. Imports and script tricks are removed when it's saved.
• Remove CSS clears it.

CSS Class Names

Right-click > CSS Class Names adds your own class names to the element, so you can style several elements the same way from Settings > Custom code (CSS).

• Separate names with spaces, for example quote-card highlight. Up to 12 per element.
• Letters, numbers, - and _ only, and not starting with cf-. Names that break the rules show under Not used: and aren't saved.
• Used elsewhere on this site lists class names you've used before. Click one to add it.
• Remove classes clears them.

Set as Anchor

1. Right-click a section or column > Set as Anchor.
2. Type a name, for example get-a-quote. Spaces and symbols are turned into dashes; a note shows Saved as with the final name.
3. Click Save.
4. On a button or link, choose Anchor in the link picker, pick the page and this anchor. It works from other pages too.

Anchor names must be unique on their page. To remove one, open it again and click Remove anchor.

Examples

• Move a hero photo by a few pixels: inside a Free Layout, select the photo and tap the arrow keys. Hold Shift to move 10 px at a time.
• "Get a quote" button that scrolls down the page: set the contact section as an anchor called get-a-quote, then link the button to it with Anchor.
• Same card style on three pages: give each card the class quote-card with CSS Class Names, then style .quote-card once in Custom code.
• Stop a client breaking the header layout: right-click each section you want protected > Lock Editing for Client.

Limits and what it can't do

• Undo keeps 50 steps, only covers edits on the page, and is cleared when you switch language.
• Ctrl/Cmd+D doesn't duplicate whole sections, and Delete/Backspace doesn't delete the header, footer or phone menu.
• Arrow-key nudging and Ctrl/Cmd+[ / ] only work inside a Free Layout or an Advanced Grid.
• Anchors go on sections, columns and inner columns, not on single widgets, the header or the footer.
• Lock for client editing is for sections and columns. You can't lock a single widget; lock its column instead.
• Element CSS: 20,000 characters. Class names: 12 per element.

Who can use it

• Agency people with the Mount Olympus tool get everything.
• Client people (see Client permissions): Editor gives the move, add, copy, paste, duplicate, hide, delete and Design items, and the keyboard shortcuts for them. Edit CSS and CSS Class Names need Dev Mode. Add Comment needs Site Comments. Client people never see Save as Section, Lock, or the Zeus items, and can't change anything inside a locked section or column.

Troubleshooting

• Ctrl/Cmd+Z does nothing: click on the page first so your cursor isn't in a text box or panel field. Undo also doesn't cover side-panel changes like the Theme.
• Ctrl/Cmd+D doesn't duplicate: a whole section is selected. Copy it (Ctrl/Cmd+C) and paste (Ctrl/Cmd+V) instead.
• Delete key doesn't remove the header: that's on purpose. Right-click the header > Delete.
• Arrow keys scroll the page instead of moving the item: nudging only works for items inside a Free Layout or Advanced Grid.
• "Another element on this page already uses this anchor.": pick a different anchor name. Save stays grayed out until the name is unique.
• Edit CSS isn't in the menu: you're a client person without Dev Mode.
• My Edit CSS doesn't change anything: a Design setting may be winning. Add !important to the line.
• "Not used: …" under CSS Class Names: the name has a symbol other than letters, numbers, - or _, starts with cf-, or you've hit 12 names.
• Can't find Connect to Data: use the floating toolbar: More > Connect to Data. It only shows on widgets and boxes that can be connected (see Connect to Data).