Website design
Visual editor
Arrange the available components, connect content, and understand the limits of the canvas.
What the visual editor changes
Visual editor opens a full-window workspace in the current browser tab. It arranges a resource's composition: an ordered set of components and their settings. Pages, templates, and shared sections expose this action. Other content can gain a composition through Add a custom page composition. Back to content returns to the entry's fields without discarding unsaved work; browser Back and Forward also switch between views. Puck supplies the canvas, nested slots and rich text; GroCMS determines components, permissions, saving and public behaviour.
A composition is separate from the entry's Title, Excerpt, and Body. A Rich text block contains its own text. Content body displays the entry's stored rich-text Body. Choose the latter when one template should show different articles; choose a Rich text block for a fixed introduction or callout that belongs to the layout.
Sources: Puck integration and editor configuration; Resource editor and design resource fields; Configured website components; Slot field; Rich Text Editing.
Build and inspect a layout
- Open the resource and select Visual editor. Choose a component from Layout, Content, or Connected content, and place it on the canvas or inside a container's drop area.
- Select a component to edit its fields. Reorder, duplicate, or remove components using the editor's available controls. Changes are saved through the CMS's normal autosave process.
- Open Patterns and choose Welcome & latest stories, Editorial article, Two-column story, Three feature cards, or Questions & answers, then select Insert a copy. This appends blocks and can be undone; it does not replace the existing layout.
- Inspect Phone, Tablet, and Desktop canvas sizes. These are 375, 768, and 1280 pixels respectively. Open the full saved Preview before publishing.
Pattern copies receive new component identities. Editing the copy will not change the original pattern. The menu can also offer recent shared sections as copies; a copied section becomes independent. To retain a live connection, use a Shared section component instead.
Sources: Puck integration and editor configuration; Built-in layout patterns; Resource editor and design resource fields; Editor browser verification.
Keyboard and tablet editing
Wide workspaces show Blocks and Outline on the left, the canvas in the centre, and Block settings on the right. Smaller windows show one sidebar at a time; phones use bottom panel navigation. Select a named block in Outline and choose Edit block settings to focus its inspector. Back to Outline returns to the selected block. Ordinary selection keeps focus in place. Panel widths provides keyboard controls and a reset action. Help explains the workspace controls.
Use Move up, Move down, Duplicate block and Delete block without dragging. Move into places the selected block at the end of another container. Add a block offers a component type and destination. A container cannot move into itself or its descendants. Deleting a container removes its nested blocks too; Undo can restore that change during this editor session. Normal autosave and revision history remain separate.
Tab and Shift+Tab move between controls; Enter or Space activates a button. Separate canvas drag handles keep text and links outside draggable buttons. Preview zoom changes magnification, while Phone, Tablet and Desktop change the website preview width independently of editor panels. A zoomed-out canvas scales its handles, so use the full-size Outline controls for precise touch work.
Undo and Redo survive switches between content and visual editing in the same open resource. The temporary cache holds up to 100 history entries within 8 MiB; large layouts can retain fewer entries. Reopening restores selection and the device width, with zoom recalculated to fit. Reloading, private Preview, changing resources or accounts, or replacing a draft starts a new session. Saved revisions and tab recovery remain available separately. The workspace header shows the real save state, and its publication controls act on saved revisions. Return to the editor in private Preview reopens the originating visual workspace.
In rich text, select text and press Ctrl+K (Command+K on macOS) to insert or edit a link. Alt+F10 moves into formatting controls. Apply, Cancel and Escape in the link dialog return focus and the selection to the text. Interactive preview inspects the current composition without editing; open the separate saved Preview before publishing.
Sources: Puck integration and editor configuration; Resource editor and design resource fields; Website component styles.
Layout and content controls
| Component | Controls and result |
|---|---|
| Section | A nested drop area; Paper, Soft, or Dark tone; Compact, Comfortable, or Generous spacing. An optional anchor gives the section a destination such as #features: begin with a lowercase letter, use lowercase letters, numbers or hyphens, and keep it unique within the composition. main-content is reserved. |
| Columns | A nested drop area with Two or Three columns. Child components fill the grid; responsive styles stack them on narrow screens. |
| Hero | Eyebrow, title, supporting text, primary and secondary button labels and links. An empty label hides that button. Choose Editorial, Split, or Stacked layout, optional image and alternative text, and Asterisk or None decoration. |
| Stack | Group related blocks vertically, for example a feature heading, explanation and button. Choose Small, Normal or Large gap; Left or Center alignment; and Plain or Panel surface. A Stack fits inside Columns to make each column a complete card. |
| Rich text | Formatted text in the Text field, including supported headings and links. It has its own content rather than borrowing the entry Body. |
| Image | Search and choose a library image, then set Alternative text and an optional caption. Natural fit displays the image at its usual proportions; Contain keeps the complete image within its allotted area. The component uses the library alternative text when its own value is empty. |
| Button | A label and Link destination, with Primary, Secondary or Text appearance. Use a safe web address, local path, section anchor, or supported link scheme. |
| Site logo | Displays the shared brand identity. Choose Follow section, Light background or Dark background, Small/Medium/Large size and an optional link. It uses the published brand's official logo, custom image or text choice; do not recreate the official wordmark in Rich text. |
| Contact form | A fixed enquiry form with editable heading, explanation and submit label. The installation must enable enquiries before this component can be published. It offers demo and quote requests; the recipient is controlled by the operator. Forms are disabled in private previews so testing a draft does not submit an enquiry. |
Blocks expose the supported layout, typography, spacing and responsive controls from the shared native component catalogue. Design Studio can associate reviewed, parsed and scoped CSS with a native design revision. It does not execute uploaded scripts or introduce a second page renderer. Brand & Theme remains responsible for shared identity.
Sources: Configured website components; Puck integration and editor configuration; Website component styles.
Connected content controls
| Component | What it reads |
|---|---|
| Content title | The current entry's title and excerpt, with its content type as the small label. |
| Content body | The current entry's canonical rich-text Body, rendered as formatted content. |
| Content details | Available author information, content type, and the selected published revision's date. |
| Content collection | A title, exact Content type key, and limit of 1–24. Cards come from eligible published content. |
| Site navigation | A selected published Navigation resource, or the site default when no menu is bound. Optional featured button text and destination add one clear action beside the menu. |
| Shared section | A selected published shared section, rendered wherever this component appears. |
Connected blocks can look incomplete in a design canvas without a representative current entry. Check the public Page or a saved Preview before replacing them with fixed text. The full website also supplies global header and footer content outside the main composition; adding another navigation block inside the body may intentionally or accidentally create a second navigation area.
Sources: Configured website components; Public page selection and resource resolution; Puck integration and editor configuration.
Nesting and document limits
Section, Columns and Stack accept nested children. A composition may contain at most 200 components, its nesting-depth value must not exceed eight, and its serialized layout must remain within 500,000 characters. Shared-resource references have separate depth and cycle checks. An Image or Shared section must have a selected resource before publication. Optional section anchors have a maximum of 80 characters and must not repeat within the same composition.
Unknown components are preserved in saved drafts but cannot be published. The editor offers a preserved-data view instead of silently replacing an unsupported layout. Restore the renderer or a compatible earlier revision. Splitting a large composition into reusable sections can improve organization, but it does not permit recursive references or bypass publication checks.
Sources: Content and composition validation; Revision and publication service.
Saving, access, and recovery
Wait for autosave to finish before Preview or Publish. If another person saved a newer revision, the conflict notice keeps your local draft and offers Download my changes and Load latest. Preserve your work before loading the newer version. A saved draft remains separate from the published version.
Editing controls follow the resource's permissions. Administrators and designers manage templates and shared sections; administrators and editors manage Pages. A designer viewing content they cannot edit receives a read-only view. If deleting all blocks unexpectedly produces an empty public page, remember that an empty custom composition still overrides the inherited template; use Revision history to recover the intended arrangement.
Sources: Resource editor and design resource fields; Role and resource permissions; Editor browser verification.