Editing / Editors

Visual Editor

The Visual Editor is the main way to edit content in CloudCannon. Editable Regions have yellow borders. To make an update, click inside a yellow box and edit the content inline. Navigate to other pages by clicking links on the site.

The Page Selector shows a list of pages, posts, drafts and collection items to navigate to. Use the Related Files button in the top right corner to access it.

Visual Editor

Default Editor Path

Set the default path to load when the Update Home action is clicked in the Dashboard. Configured globally in _config.yml with an _editor object:

  default_path: /about/

Clicking the Update Home Dashboard action will load the default_path. The example above will load /about/ instead of loading the default of /.

Editor Content

Create content that only appears in the Visual Editor with CSS or JavaScript.

The Visual Editor adds the .cms-editor-active class to the body of the page. Use this to show elements that are hidden on the live site:

.editor-content {
  display: none;

.cms-editor-active .editor-content {
  display: block;

Alternatively, check window.inEditorMode with JavaScript to find out if a page is being viewed inside the Visual Editor:

if (window.inEditorMode) {
  alert("Inside CloudCannon!");
} else {
  alert("Not in CloudCannon.");

Editing / Navigation


Read previous doc

Editing / Editors

Content Editor

Read next doc