CMS Page Builder – User Training Guide
This guide explains how to use the CMS Page Builder to create, edit, preview, and publish pages using reusable components. It is written for content editors and administrators and is suitable for VuePress documentation.
Overview
The CMS Page Builder allows you to:
- Edit page content using structured components
- Upload and manage images directly inside fields
- Preview pages in real time (desktop, tablet, mobile)
- Save drafts and publish pages
- Manage SEO metadata
- View version history and JSON output
The interface is split into three main areas:
- Header actions
- Component editor (left panel)
- Live preview (right panel)
Page Header Actions
Located at the top of the page, the header contains the main actions.
Back to Pages
- Returns you to the CMS page list
- Unsaved changes will be lost
Save Draft
- Saves your current changes without publishing
- Use this while working on content
- Drafts are not visible on the live website
Publish
- Makes the page live immediately
- Publishes the latest saved content
JSON
- Opens a modal showing the raw page JSON
- Useful for debugging or advanced users
History
- Opens version history
- Allows you to view or restore previous versions
SEO
- Opens the SEO metadata editor
Add Component
- Opens the component selector
- Used to add new sections to the page
Component Editor (Left Panel)
The left panel displays all page components in an accordion layout.
Page Components
- Each accordion section represents a component
- Components are rendered in the order they appear
Editing Fields
Fields are generated dynamically based on the component structure:
Text Fields
- Standard text inputs
- Used for titles, labels, links, etc.
Content Fields
- Multi-line text areas
- Used for longer content blocks
Image Fields
- Automatically detected by field name (e.g.
image,banner,logo,thumbnail) - Uses the ImageField component
- Allows selecting or uploading images from the Asset Manager
Editing Array Fields
Some components contain repeatable fields (arrays).
Adding Items
- Click Add New to insert another item
- New items inherit the structure of existing ones
Removing Items
- Click Remove on an item to delete it
Nested Objects
- Objects inside arrays are expanded into individual editable fields
Live Preview (Right Panel)
The live preview updates as you edit content.
Refresh Preview
- Manually reloads the preview iframe
- Useful if content appears out of sync
Device Modes
You can preview the page in different screen sizes:
- Desktop
- Tablet
- Mobile
Open Preview in New Tab
- Opens the preview URL in a new browser tab
- Uses
?preview=trueto prevent affecting live content
SEO Metadata
The SEO modal allows you to manage search engine metadata.
SEO Fields
- Title – Page title used by search engines
- Description – Meta description
- Image (OG Image) – Used for social sharing previews
Saving SEO
- Click Save to apply changes
- SEO data is stored with the page version
Version History
The version history modal allows you to:
- View previous versions of the page
- Track content changes
- Restore older versions if needed
This helps prevent accidental data loss.
JSON Viewer
The JSON viewer displays the full structured page data:
- Includes components, fields, and SEO data
- Read-only view
- Intended for developers or advanced debugging
Loading States
Initial Loader
- Displayed while page content and versions are loading
Preview Loader
- Displayed while the iframe preview is refreshing
Best Practices
- Save drafts frequently
- Preview on mobile before publishing
- Keep SEO titles under 60 characters
- Use descriptive image names
- Avoid deleting components unless necessary
Common Use Cases
- Building landing pages
- Updating marketing content
- Managing reusable page sections
- Previewing changes before publishing
Notes
- Changes are not live until Publish is clicked
- Image fields integrate directly with the Asset Manager
- All content is versioned automatically