The visual editor
Pages and posts are built from blocks: a heading, a paragraph, an image, a set of columns. The editor shows your real page, in your site’s theme, as you work on it.
The editor has three parts:
- Left panel: Outline (the blocks on the page, as a tree) and Add (the block library).
- Canvas in the middle: the page itself. Click a block to select it.
- Right panel: the selected block’s settings (the inspector), or the page settings when nothing is selected.
Editing on the page
Section titled “Editing on the page”When you open a page, you edit it as visitors will see it, with your site’s header and footer around it. A slim bar along the top holds everything else: go back to the list, add blocks, open the outline or the page settings, undo and redo, preview on a tablet or phone, and save or publish. If you’re coming from Concrete CMS, this works like edit mode there: the page is the editor.
Adding blocks
Section titled “Adding blocks”Move the pointer over the page. A round + appears in the margin above and below the block you’re pointing at, and at the start and end of sections, columns, and accordion items. An empty column shows Add block here. Click a + and the block library opens on the left, showing only the blocks that fit in that spot. Click one to add it there. New text blocks are ready to type into right away; other blocks open their settings so you can pick an image, a link, and so on. + Add block in the top bar adds after the block you’ve selected, or at the end of the page. Patterns are in the same library, below the blocks.
| Block | Use it for |
|---|---|
| Heading | A section title. |
| Text | Paragraphs with bold, italic, and links. |
| List | Bulleted or numbered items, one per line. |
| Quote | A quotation or testimonial, with who said it. |
| Image | A photo or illustration, with alt text and a caption. Optionally a link, “Enlarge when clicked”, or a second image shown on hover. |
| Gallery | Several images as a grid, a masonry wall, or a slider. Optionally shows captions and opens images larger when clicked. |
| Button | A call to action: a link styled as a button. |
| Embed | A video, map, or post from YouTube, Vimeo, Wistia, Simian, Google Maps, Facebook, or Instagram. Paste a link or the embed code. |
| Divider | A horizontal line. |
| Spacer | Extra vertical space. |
| Section | Groups blocks, with a width (normal, wide, full) and a background. |
| Columns | Side-by-side columns that stack on small screens. |
| Accordion | Questions or sections that open and close, such as an FAQ. |
| Audio / Playlist | An MP3 with a player; a playlist groups several. |
| Popup | A button that opens blocks (or a synced pattern) in a popup. |
| Feature | An icon or small image with a title, a few words, and a link. |
| Content list | The latest posts, testimonials, or any content type, or chosen pages side by side. |
Extensions can add more blocks, such as a contact form or a Buy button. They appear in the library while the extension is active.
Special blocks
Section titled “Special blocks”- Accordions. Each item has a title (double-click to edit it) and holds any blocks. Turn on First item starts open or Only one open at a time. Choose the Title heading level that fits your page: one level below the heading above the accordion.
- Embeds. Paste the address of the video or map, or the whole embed code the site gives you. Only the address is kept. The Title is required: it’s what screen readers announce. Pick a Shape, or Fixed height for maps and Simian reels. Links from other sites are refused.
- Popups. The popup opens when visitors click the button and closes with Close, Esc, or a click outside. Popups can’t open by themselves after a delay or when someone is about to leave; that needs scripts, which sc-cms doesn’t add to your pages.
- Columns. Pick a layout (two equal, narrow + wide, wide + narrow, sidebar + wide, wide + sidebar, three, four, or six equal), or type your own widths out of 12 under Custom widths, like
3 + 9or2 + 8 + 2. You can have up to six columns, and the widths must add up to 12. Choosing more widths adds empty columns; the editor never deletes one, so delete columns you don’t need yourself. Stack columns on chooses whether columns stack on tablets and phones, or only on phones. - Galleries. Columns goes from 1 to 8. Phones show two images (one for a single column), tablets up to four, and wide screens all of them. For the slider it’s how many images show at once.
- Content lists. Choose The latest items of a content type (optionally only one category or tag, in the order you pick), or Items I choose. Quotes suits testimonials. Side by side shows the full content of the chosen pages, for comparisons. Lists show published items in the page’s language and update when you publish.
- To show only some items, choose a field under Only items where (for example Style or Language) and a value under is or includes. It works together with the category and tag filters.
- Show page numbers turns How many into the number per page and adds previous, next, and numbered links under the list.
- Show as a slider (Design mode) puts the items in one row that visitors swipe or scroll, which suits rotating testimonials. Sliders don’t move by themselves.
- Animation (Design mode). When it scrolls into view fades or slides a block in as visitors scroll to it. Visitors whose device asks for less motion, and browsers that don’t support it, simply see the block.
Editing text in place
Section titled “Editing text in place”Double-click any text to type into it. A small toolbar appears above it:
- B for bold and I for italic (or Ctrl+B and Ctrl+I).
- The link button (or Ctrl+K) adds a link: type an address like
/contactorhttps://…, or pick one of your pages. - On Text, Heading or List turns the paragraph into one. On a heading, choose its level.
- Done (or Esc) finishes.
Press Enter for a new paragraph and Shift+Enter for a line break. When you paste from Word or Google Docs, bold, italic, and links come along; other styling is left behind so the page keeps your site’s look.
Arranging blocks
Section titled “Arranging blocks”Point at a block to see its toolbar:
- Edit opens its settings on the right.
- The arrows move it up or down; Duplicate makes a copy; the bin deletes it (Undo brings it back).
- ⋯ has more: design and layout options, selecting the block around it, adding a block before or after, and saving it as a pattern.
To move a block somewhere else, drag it by the dotted handle at the left of its toolbar. A line shows where it will land, even inside another column or section. With the keyboard, select a block in Outline and use Alt+↑ and Alt+↓; Enter opens its settings.
| Keys | Action |
|---|---|
| Ctrl/⌘ + Z | Undo |
| Shift + Ctrl/⌘ + Z, or Ctrl/⌘ + Y | Redo |
| Alt + ↑ / ↓ | Move the selected block |
| Ctrl/⌘ + D | Duplicate |
| Delete | Remove |
| Alt + F10 | Go to the block toolbar |
| Esc | Deselect or close |
The header and footer are shared by every page, so they’re greyed out here. If you can change the site’s design, Edit header or Edit footer takes you to them.
Settings, modes, and layouts
Section titled “Settings, modes, and layouts”Page settings holds everything about the page that isn’t on it: title, address, and parent page; fields, categories, and visibility; publishing, scheduling, and review; history, comments, translations, and AI suggestions. Block settings open in the same panel. Click Pin to keep it open beside the page while you work.
Content, Design, and Developer choose how much the settings show: just words and pictures, also layout and style (including Visibility: hide on phones, tablets, or desktops), or also anchors and CSS classes. Desktop, Tablet, and Phone preview the page at different screen sizes.
Prefer the old layout with the outline and settings always showing? Click Panels in the top bar. The editor remembers your choice on this computer, and you can switch back at any time.
Spacing and colors
Section titled “Spacing and colors”Every block has a Spacing and colors panel in its settings:
- Spacing: space above, below, and beside the block, inside or outside its edge, in pixels. Space outside can be negative, to pull a block closer to the one before it.
- Colors: the text, link, and background color. Pick one of your theme’s colors, so the block follows the theme if it changes, or enter an exact color.
- Border, rounded corners, alignment, and text size.
Backgrounds and videos
Section titled “Backgrounds and videos”A Section can stretch edge to edge and have a background image or a background video. Background videos play silently on a loop. Visitors who’ve asked their device for less motion see the image instead, so give the section an image too. Add a shade to keep text readable, a minimum height, and a narrower, centered content width.
To show a video people can play, add the Video file block and choose a video from the media library. Videos on YouTube or Vimeo go in the Embed block.
Patterns
Section titled “Patterns”A pattern is a ready-made group of blocks. The library includes Hero, Testimonial, Pricing, Team, FAQ, and Contact, plus any your team has saved.
To save your own, select a block (often a Section) and use ⋯ → Save as pattern in its toolbar, or Save as pattern in the inspector:
- Synced (the default): every page using the pattern shows the same content. Editing the pattern updates them all. Use Edit pattern to change it, or Detach to turn one copy into ordinary editable blocks.
- Not synced: inserting the pattern makes an independent copy.
Problems
Section titled “Problems”If a block has a problem, such as an image with no alt text, it’s listed above the page. Click the problem to jump to the block.