Manage pages, Site Styles, shared elements, languages, and AI edits

Switch pages without losing the current draft #

Select the current route in the editor's top address area to open the page switcher. Every entry shows its route and name. The open page is marked Current; a page outside the current plan allowance is marked Upgrade.

1. Wait for the current page to show Saved.
2. Open the route list and choose an available page.
3. The editor obtains authorization for that page and navigates only after the request succeeds.
4. If it says This page could not be authorized for editing. Reopen it from the dashboard., return to the website dashboard and open it there.

The editor switcher is for navigation between existing pages. Use the website dashboard for the full page-management workflow, including creating, renaming, reordering, removing, routing, and page-level settings that your role and plan allow.

Apply Site Styles at the correct scope #

Choose Site Styles in the top bar for repeated design decisions. The available groups include:

Each scoped style control indicates whether it applies to the whole site with a globe or to the current page only with a page icon. Choose that scope control to switch. Use whole-site scope for the brand system; use page-only scope for a justified exception.

The font catalogue used by the editor is also published to the hosting layer, so a listed webfont can be loaded by the live page rather than falling back to an unrelated family. Still check the live page after publishing: loading, language coverage, and layout shifts are visitor-runtime concerns.

Restore defaults resets the supported theme variables in the current page's <fy-settings> and is reversible through editor history. It does not call the whole-site theme persistence path, and it does not reset font family or the accent, text, and background colors. Wait for Saved, restore, inspect the current page at several viewports, then keep or Undo the result.

Build and verify navigation as a complete interaction #

1. Select the navigation or menu with the canvas, ancestor trail, or Layer Manager. Edit each visible label and destination.
2. Include the pages a visitor needs to understand the offer, trust the business, and complete the primary action. Do not mirror internal page structure when it makes the menu harder to scan.
3. Preview Desktop, Tablet, and Mobile. At narrow widths, open the collapsed menu, reach every item, close it, and confirm content does not scroll behind it unexpectedly.
4. Repeat with a keyboard. Focus must be visible, order must be logical, and a dropdown or menu must not require hover alone.
5. Open each destination in visitor Preview, including logo/home, call to action, language choices, and footer navigation.

When the same navigation appears on many pages, make it a shared element. Keep its inner labels and destinations shared, while allowing placement width and outside spacing to remain local to each page when necessary.

Create and place a shared element #

1. Select the complete component or section that should repeat. Do not select only one child of a header, footer, banner, or call to action.
2. Right-click and choose Share across pages.
3. Give it a recognizable name of up to 60 characters. Use letters, numbers, spaces, dashes, or underscores. Fronty normalizes the internal key.
4. If the editor finds identical copies, review whether they should become references to the same shared source.
5. Add it elsewhere from Shared elements in the element picker, from the Reusable section tab, or through Editor settings → Shared Elements.

A shared element cannot be nested inside another shared element. Share the outer stable unit once rather than creating overlapping sources. Use clear names such as “Primary header” and “Lead capture footer”, not “Section 2”.

Change shared content without surprising other pages #

Select a shared instance and choose Edit shared. The shared editing bar identifies the source, shows usage information and Saved everywhere, and provides Done when you finish. Review the listed pages before changing a header, footer, legal notice, or site-wide call to action.

Selecting the shared wrapper itself also makes Attributes explain that the named element is shared, that editing changes every page using it, and—when there is more than one—how many copies are on the current page. Choose Edit the shared element directly from that explanation.

The instance wrapper offers actions such as Edit shared, Unlink this copy, Duplicate, and Remove from page. Unlink creates independent local content; future shared edits no longer reach it. Removing an instance from a page does not delete the shared source from the library.

Unlink is complete only after the forced page save succeeds. While the editor shows Saving this independent copy, do not leave the page. If it fails, choose Retry save before continuing.

Inner content and styling belong to the shared source. Placement width and outside spacing belong to the page instance. This lets one header remain the same while fitting different page layouts. After a shared edit, Preview at least one typical page, the narrowest layout, and a page with unusual surrounding content.

Switch editing language only after saving #

The language switcher appears in the top bar when the website has at least two languages. Choosing another language first requests a save of the current page. Navigation continues only when that correlated save succeeds; a failed save keeps you on the current language so work is not silently abandoned.

Translate meaning rather than word count. Recheck navigation width, buttons, forms, database-backed labels, image descriptions, page metadata, item routes, and directionality for each language. Shared content and connected data can have different localization boundaries, so confirm the visible source before editing.

Preview each language on Mobile as well as Desktop. Longer labels can reveal overflow and truncated controls that do not exist in the source language.

Review every AI edit before keeping it #

1. Wait for Saved, then select the narrowest element that contains the intended change. Selection defines the assistant's working scope.
2. Open Ask Fronty AI. Use a contextual quick action or describe the outcome in any language. Submit with the visible action or Ctrl/Command+Enter.
3. Watch the provisional canvas result. Choose Stop if the direction is wrong. Provisional AI output is not autosaved.
4. When AI changes are ready appears, changed elements already in view have dashed outlines. If a changed element is outside the canvas viewport, Show changes appears to scroll to and select it; it is a locator, not a textual diff. Inspect content, structure, links, responsive layout, accessibility, and data bindings.
5. Choose Keep changes to accept the result as one undoable change and save it, or Undo changes to restore the exact prior state.

The editor locks conflicting mutations while a generated result awaits your decision. Closing, stopping, or rejecting rolls the provisional change back. Availability and quota depend on the account and plan.

Resolve site-wide editing problems #

A style changed on more pages than expected

Check whether the control used whole-site scope. Undo, switch it to page-only scope, and apply the exception again.

A shared edit appeared everywhere

That is the purpose of the shared source. Undo, unlink the exceptional copy, then edit the local content.

A page-specific shared copy will not update

It may already be unlinked. Replace it with the library source if it should follow shared changes again.

The language did not switch

Resolve the current save failure first. The editor cancels language navigation when it cannot preserve current work.

I cannot edit while AI changes are ready

Show the changes and choose Keep changes or Undo changes. The lock prevents provisional output and manual edits from becoming mixed.

A page is marked Upgrade or cannot be authorized

Check the current plan and role, then reopen the page from the website dashboard.