Use the visual editor to arrange sections, add content blocks, and adjust a page's layout without writing code. This guide explains how to work on the canvas and check the result at different screen sizes.
For a new page's title, address, search settings, and release steps, follow Creating and publishing a website page. The instructions below focus on building and editing its content.
Open the builder and check what you are editing
Go to Site → Pages, find the page, and choose Edit page. Open Visual Builder if the editor has several workspaces. For a new page, choose New page → Use Page Builder, then give the page a title and address before saving it.
Check the status before making changes. Save draft keeps a new, unpublished page in draft. On an already-published visual page, Save and Save and exit publish the changes. Review the entire update before using either action on a live page.
If the page shows Page content fields for a shared template, use those fields to edit this page's content. Edit template changes a shared layout; publishing it can affect other linked pages. See Reusing a shared layout across pages before changing the shared design. Do not switch into template editing merely to change one page's text.
If the controls are missing or read-only, check Why can’t I see or edit a feature?. Custom-coded pages and extension-provided blocks may offer different editing fields from the standard blocks described here.
Understand sections, blocks, and the inspector
The Builder view has three main areas:
- Add to page, on the left, contains starting designs and content blocks. Use Search blocks… to narrow the choices.
- The canvas, in the middle, shows your sections in page order. A section provides the layout and background; its cells hold blocks.
- The inspector, on the right, edits the selected section or block. Check the name at its top before changing a field.
A section can contain one or more columns and rows. A block supplies content, such as text, a hero, an image, or a button. Select the section's label to change its layout. Select a block on the canvas to edit that block's content. From a block's inspector, Edit section takes you to its containing section.
When nothing is selected on a page with content, the inspector can show Page outline. Choose an entry to select that section. On an empty page, Nothing selected means you need to add or select something before the inspector has fields to show.
Clicking a block on the canvas selects it for editing. Use Preview and the final public page to check what visitors see and where links lead.
Add sections and place blocks
For a simple section with a heading and a paragraph:
- On an empty canvas, choose Start with an empty section. On a page with content, choose + Add section.
- Select the empty cell in that section, then choose Text Content from Add to page. The new block opens in the inspector.
- Enter your heading in Text. Keep Text Type as Headline and choose an appropriate Headline Type, such as Section (H2) for a main section heading.
- In the left library, open More options for Text Content. Choose After … for the heading you just added. This inserts another block after it.
- Select the new block, change Text Type to Body Text, and enter the paragraph. Check that the heading comes before the paragraph in the canvas and preview.
Use headings to describe the content below them. Choose heading levels for the document's structure, not just to make text larger. Check whether the page already has a main heading before adding another one.
Choose the insertion point deliberately
Clicking a library block fills a selected empty cell when possible. Otherwise, Cedros looks for an empty cell in the selected section, then elsewhere on the page; if none is available, it adds a new section. A new block may therefore appear somewhere other than immediately after the block you were editing.
For a specific position, use the library block's More options menu. Depending on the page, it offers Before …, After …, named empty cells, and End of page. Check the referenced block and section before selecting the destination.
You can also drag a library block into an empty cell. Dropping a new library block onto an occupied cell replaces that cell's block. Use an empty cell or the Before/After menu when you want to keep the existing content. Dragging a block already on the canvas moves it instead; watch the insertion position and check the order afterward.
Start from a design adds a set of starter sections. Adding a design to a populated page appends sections rather than rewriting the existing ones. Replace sample content and check for repeated sections before release. See Using a page template to choose between a copied starter and a linked shared layout.
Choose and edit the right block
The library offers blocks for different jobs. Use the choices present on your site; installed extensions and the page's setup can affect availability.
- Hero introduces the page with prominent text and supporting content.
- Text Content provides a heading or body text. Raw Markdown is useful when you want to write formatted text in Markdown.
- Features and Cards group related information. Stats, Testimonials, Chart, and Table can present evidence or comparisons when you have real information to supply.
- Media Content and Carousel display visual content. Review their media selections, descriptions, and cropping.
- CTA and Buttons give visitors a next step. Check both the label and destination.
- Form and Calendar connect the page to interactive services. Select and configure the intended service, then test its customer flow separately.
- Separator, Spacer, and Accordion help organize content. Avoid using large spacers to compensate for a layout that needs changing.
For an explanation before inserting a block, open its More options menu and choose View details. This describes its purpose and what it adds. Choose Add to page only when you want to insert it.
After selecting a block, edit its content fields in the inspector. Some controls are grouped under disclosures such as Layout, Appearance, Container, or Animation. Expand the relevant group rather than assuming a field is missing. Available groups depend on the block.
Keep the editing task small: replace the sample copy, check it on the canvas, then adjust presentation. Use the block's supported fields instead of pasting a complete page into a single heading field.
For links, enter the intended destination rather than a placeholder. A same-site path such as /contact must lead to an available page; an external address should include https://. Review descriptive button text, images, and any list of repeated items before moving to the next block.
Generate with AI is optional. Check the requested scope before generating, especially if it offers to replace the page. Review all generated content before keeping or publishing it; it may include unsuitable claims or destinations.
Adjust section layout and backgrounds
Select the section's label, or choose Edit section from a block's inspector.
Under Width, choose Full, Standard, or Narrow. Use a narrower reading width for long text and wider layouts when the content benefits from the space. The site's theme and outer page layout still affect the final width, so judge the result in Preview.
Under Columns, choose One, Two, or Three. Expand Advanced layout for Height and Rows. Adjust to content lets the section follow its contents; View height is the option for a viewport-height section. Check short screens before using a tall section.
Before reducing columns or rows, move out any blocks you want to keep. Blocks in cells removed by the smaller grid can be removed from the section. Increasing the size again is not a recovery method. Start with a simple layout and save a suitable draft checkpoint before making a major rearrangement.
Under Background, choose None, Solid color, Gradient, Image, Video, or Effect, then complete the fields shown for that choice. An image or video background belongs to the section; a Media Content block is a separate piece of content within it.
Check that text remains readable over the background on desktop and mobile. Image cropping can change with the screen shape. Keep essential instructions in text rather than only inside an image or video, and use motion sparingly.
Reorder or remove content
To move a whole section, open its actions menu and choose Move up or Move down. You can also drag its reorder handle to a different position. Moving the section keeps its blocks together.
To move a block, use its reorder handle. Within a section with multiple cells, movement buttons can appear as Up/Down or Left/Right, depending on the layout. Check the result after moving, particularly when changing sections or working with several columns.
For keyboard reordering, focus the reorder handle, press Space or Enter to pick up the item, use Up Arrow or Down Arrow, and press Space or Enter to drop it. Escape cancels the active keyboard reorder. The editor announces the item's position.
To remove content:
- Select a block and choose Delete in its inspector. Read the Delete block confirmation; it removes that block from its cell.
- Select a section and choose Delete, or use Delete section… in its actions menu. The confirmation covers the section's layout and every block inside it.
Use Cancel if the confirmation names the wrong content. Do not rely on a general Undo action for a confirmed deletion; the confirmation warns that it cannot be undone. If you need content from an earlier saved version, use revision history and review the restored draft before releasing it.
An empty cell or section can remain after removing a block. Review the layout and remove unwanted empty space deliberately, without deleting neighboring content.
Check visibility and responsive previews
A block's Visibility controls where it appears:
- All surfaces includes web pages, the mobile app, and Markdown output.
- Web only includes the website, including phone browsers, but hides the block from the mobile app and Markdown output.
- Mobile app only hides the block from web pages, including phone browsers.
These are not desktop-versus-phone layout switches. Choosing Mobile app only will not make a block appear specifically in a phone's web browser.
Open Preview and compare Desktop, Tablet, and Mobile Web. Multi-column sections can stack at narrower widths. Changing the preview size does not create an independent mobile copy of the page: edit the shared content and supported layout fields, then check each size again.
Review:
- The reading order when columns stack.
- Headings, paragraph lengths, and button labels that wrap.
- Image crops, backgrounds, and contrast.
- Tables, embedded content, and any horizontal scrolling.
- Empty gaps, overly tall sections, and overlapping content.
- The availability and usability of the main action.
Use Mobile Web to check the website on a phone.
The builder's Live preview shows current edits without publishing them. A saved share preview can be older. Save the intended draft and update its share link before asking someone to review that saved version; follow the page preview and publication steps.
Save your work and handle interruptions
For an unpublished page, choose Save draft at useful checkpoints and wait for confirmation. If you leave through Exit with unsaved changes, the editor offers Keep editing, Exit without saving, and Save and exit. Discard only work you no longer need.
For a published visual page, remember that Save and Save and exit release the update. If you need a private replacement draft while the existing page stays live, use the draft-only workflow guidance.
Cedros can recover unsaved edits from the same tab, but recovery is not a substitute for a confirmed save and may be unavailable. If you see Recovered unsaved changes from this tab, review the recovered content against the current saved version before saving or publishing it. Do not assume those edits are already live or available on another device.
When the page is ready, follow Publish and verify the public page. Check the public result as a visitor, including the main links and any connected form or booking action.
Fix common editing problems
The inspector shows the wrong fields. Check its title. Select the block for its text or media fields, or select the section for width, columns, and background. Expand the relevant inspector group.
A new block appeared in the wrong place. Clicking a library card can fill an available empty cell. Use its More options menu for a named Before/After position or End of page, then verify the canvas order.
Content disappeared after a layout change. Check whether you reduced rows or columns, replaced an occupied cell, or changed Visibility. Increasing the grid again will not restore removed content. Preserve any other edits you need and inspect an earlier saved revision if necessary.
The block is visible in Builder but missing from Preview. Check Visibility and the selected preview mode, then check required content, media, or connected-service settings. An editor representation does not guarantee that an incomplete block renders for visitors.
The phone layout looks wrong. Use Mobile Web, check the stacked reading order, and simplify crowded content or layout settings. Recheck the desktop version after each change rather than assuming edits apply only to the active preview size.
A block or setting is unavailable. Clear Search blocks, check your permissions, and confirm the feature or extension is available on the site. Do not replace a working custom or shared layout just to expose a different set of controls.
If the problem remains, see Getting help and reporting a problem. Include the page's normal public address, the selected block or section, the exact message, and which preview size or output is affected. Keep private preview links and credentials out of public reports.