Create a custom page design while keeping native site navigation

Guides

Choose the editing boundary

Custom design replaces native body blocks with reviewed HTML and scoped CSS. It does not convert arbitrary HTML into visually editable Beeboo objects. The visual body editor remains read-only, and later changes must use the saved custom source. The original native page can be recovered through revision history rather than a hidden synchronized native copy.

You need administrator access, an approved design brief, and a recoverable page revision. Choose the exact website, page ID, and language. Finish and approve content in native form first. A template-bound page cannot use a custom body; do not bypass that restriction by removing locked content without approval.

Confirm the deployed CMS, engine, and MCP support the required source contract before writing. If an assistant is involved, use read permission for inspection and obtain explicit approval before granting or using writes.

Prepare and save one custom body

1. Read the current page and retain its modification timestamp. Record the real header's section identity, metadata, links, media, and unrelated settings. Check whether a shared site shell is active so the design brief respects the chrome actually in use.
2. Choose Body only (default) as the intended scope. Keep the existing real header and engine-owned navigation and footer. Prepare exactly one supported custom body section alongside the header. Do not include document wrappers, another main landmark, a replacement website menu, or a duplicate footer in the HTML fragment.
3. Start body headings at H2 and preserve the canonical page title. Use scoped classes and CSS; custom HTML IDs must use the cb-<sectionId>- prefix. Load fonts through the site's font settings rather than importing a separate production stylesheet. Do not add scripts, inline event handlers, unsafe URLs, or CSS imports.
4. Review the proposed source before saving. Require responsive layouts, readable contrast, usable links, and a static reduced-motion presentation for any motion. Use only supported behavior modules when interactions are necessary. If a native form is required, reference an existing form belonging to this website through the supported placeholder contract.
5. Save the approved conversion through MCP with expectedPageModifiedAt, preserving the real header and unrelated page data. MCP updates save directly, without a cloud draft. Do not claim the conversion is still unpublished unless it genuinely is on a separate approved private website.
6. For later source corrections, use Custom design > SVG, layout source and native objects where available, or update the latest source through MCP. Those source saves also update directly. Scope changes use a different reviewed-draft process; do not confuse a scope draft with a draft of every custom-source edit.

Verify retained ownership

Read the saved page back, then inspect its normal public URL at desktop, tablet, and phone widths. Test the native menu, language controls, footer links, access behavior, keyboard focus, and heading structure. Confirm the design does not cover editor or consent controls.

If validation fails, correct the supported source rather than injecting global code. On an unexpected layout, compare against the saved source and latest revision. Read design and styling, assistant connections, and saving and recovery.