Use the visual editor: select, add, arrange, preview, and save

Orient yourself before changing the page #

The editor changes the real page draft. Its canvas is surrounded by controls that operate at different scopes:

Top bar

Switch pages, undo or redo, open edit history, change canvas zoom or device, preview the visitor experience, save, publish, ask AI, and open Site Styles or Editor settings.

Canvas

Select, add, duplicate, delete, and drag page elements. Links, videos, form controls, maps, and buttons do not perform their visitor action while you edit; use Preview to test them.

Right dock

Switch between Attributes and Ask Fronty AI. Drag the dock's left edge if a field needs more room.

Editor settings

Open Manage Data, Layer Manager, Shared Elements, Export Code, Show Rulers, or Auto Save.

Account menu

Return to the dashboard or open Profile, Analytics, Form submissions, dark mode, and Support without confusing those destinations with page content.

An empty page shows What are we building today?. You can describe a result and Generate, choose a business starter, browse ready-made blocks, or choose Start from a link you like. A link is used as inspiration for a new editable result; enter a valid full web address and choose Use this.

Select the exact element #

1. Click an element once. Its outline appears and the Attributes panel opens.
2. Double-click a heading, paragraph, or another text-first element to focus its primary text field.
3. For deeply nested content, use the clickable ancestor trail below the panel heading to move from the selected child to a parent.
4. Choose Find in Layers to locate the same element in Layer Manager. You can also open Editor settings → Layer Manager and search by friendly name or technical tag.
5. Confirm the selected outline before editing. The last selected item is the primary selection.

Hold Shift while clicking to add or remove items from a multi-selection. Duplicate and Delete operate on the outermost selected items. Width and spacing need one selection, so reduce the selection before opening layout controls.

Add an element in the intended position #

1. Hover a section or container and choose the Add component here plus control.
2. Choose Before, Inside, or After. After is the initial choice.
3. Search by element name, tag, or description, or browse Shared elements, Typography, Buttons & actions, Media, Feedback, Forms, Layout, Navigation, and Advanced.
4. Select the element, then edit its content in Attributes.

Inside is unavailable when the target cannot contain children. The picker also removes choices that would produce invalid markup, including unsafe nested interactive controls. If it says Nothing can be added here, select a parent container or choose Before or After.

Add a complete block or reusable section #

For a complete page region, hover an existing section and choose Add section. Use the Blocks tab for a ready-made layout or Reusable for a section saved by this site. Search or filter categories such as CTA, Footer, Forms, Headers, Image + Text, Logo Bar, Navigation, Pricing, Reviews, Statistics, and Text + Image.

The chosen block is inserted immediately after the section where you opened the gallery. From the empty-page start it is appended to the page. Replace all sample copy, links, imagery, and data before publishing.

Reorder content and adjust width or spacing #

Select an element before dragging it on the canvas. A blue insertion indicator shows whether the result will be before, inside, or after the target. If no valid indicator appears, that nesting is not allowed. A section may sit beside another section but cannot be placed inside one.

For a structural view, open Layer Manager and drag tree rows. Search, click to select, right-click for element actions, or use Up and Down Arrow to move the selection while the dialog has focus.

Choose Adjust width and spacing from the selection toolbar:

• Width: drag a left or right edge to the page grid.
• Outside: change margin around the element.
• Inside: change padding within it.
• Apply a value to one side, both sides, or all sides.

Focused handles support Arrow keys for a one-unit change, Shift+Arrow for four units, Delete or Backspace to reset, and Escape to cancel the drag. Width is full on mobile, so switch to Desktop to adjust columns. Spacing affects all screen sizes. On a shared instance, width and outside spacing belong to that placement; the shared content remains linked.

Duplicate, copy, paste, change, or delete #

The compact selection toolbar provides Adjust width and spacing, Duplicate, and Delete. Text also offers alignment; buttons may offer variant and outline controls; connected collections expose data and card-design actions.

Right-click an element for the fuller menu: Add element, Edit, link or click behavior, hover effect, safe element conversion, Duplicate, Copy, Paste, Share across pages, and Delete when each action applies.

• Duplicate inserts a fresh copy immediately after the original.
• Copy and Paste accept Fronty component markup, not arbitrary clipboard HTML or plain text. Browser clipboard permission can affect initial availability.
• Pasting on a leaf uses its parent. Pasting inside a linked shared instance is blocked until you edit the shared source or unlink the copy.
• Delete does not ask for confirmation for an ordinary element. Undo is the recovery path.
• Change element lists only conversions that can preserve compatible content, layout, and connected data. Inspect the result and undo if meaning changed.

Check the visitor experience at every viewport #

Canvas zoom offers 25%, 50%, 75%, 100%, 125%, plus incremental zoom controls. It changes only how large the editor canvas looks, never the published page.

Choose the eye-labelled Preview to open the real visitor experience in a new tab. Test links, menus, forms, media, keyboard focus, and conditional visibility there. Item-page templates need a representative item before a concrete preview URL can open. Device, schedule, audience, and location rules are applied in Preview, not hidden from you while editing.

If the editor window itself is narrower than 640 px, device toggles are hidden because there is not enough working room. Widen the editor, then check Tablet and Mobile. Also test the published page at widths between presets.

Save, recover, and publish deliberately #

With Auto Save enabled, an edit becomes Unsaved; after about 1.5 seconds without another edit it becomes Saving… and then Saved. Choose the save-status control to save immediately. A failure shows Save failed — click to retry. Do not close the tab until Saved appears.

Use Editor settings → Auto Save to change automatic saving. Manual saving remains available. The editor warns before leaving with pending, running, or failed work. If authorization expires, use Try again or Log in again from the Editing paused message.

Undo, Redo, and Edit history are page- and site-specific. History persists locally, shows the newest change first, and retains up to 50 changes. You can jump to a named point. A new edit after Undo replaces the old redo branch.

Use keyboard controls without losing work #

Reliable direct controls include Delete for the current selection, Arrow keys inside focused layout handles, and Up or Down Arrow inside Layer Manager. The AI composer submits with Ctrl+Enter or Command+Enter.

The editor also currently listens for Ctrl or Command combinations for undo, redo, interactive in-canvas preview, copy, paste, and Auto Save. Ctrl/Command+P toggles that in-canvas mode; it is different from the eye-labelled Preview, which opens the visitor preview in a separate tab. There is currently no visible control equivalent to the in-canvas toggle. Some browsers can intercept those combinations for bookmarks, printing, or native clipboard behavior. Use the visible editor controls as the dependable path, especially for Duplicate, visitor Preview, Undo, and Redo. Ctrl/Command+S toggles Auto Save; it is not a conventional one-time Save shortcut.

Before a large change, wait for Saved and confirm that Undo works. Keep focus visible while testing the visitor preview, and do not rely on hover alone for an essential action.

Resolve common editor problems #

The wrong element keeps being selected

Use the ancestor trail or Find in Layers, then confirm the selection outline before changing Attributes.

I cannot click a link, button, map, video, or form field

That is expected on the editing canvas. Open Preview to test visitor behavior.

Inside or Paste is unavailable

The target cannot contain that element, the result would create invalid interactive nesting, or the target is a linked shared instance. Select a valid parent or unlink/edit the shared source.

Width controls are missing

Select one element and switch from Mobile to Desktop. Mobile width is intentionally full; spacing remains editable.

A save remains failed

Choose the status to retry. If editing is paused, renew the session. Do not publish or leave until the state becomes Saved.

The live page does not contain my edit

Confirm Saved, publish the changes, then open the live URL rather than an older preview tab and refresh once.