CloudCannon Documentation logo Documentation

Define Editable Regions to set the content clients and team members can update in the Visual Editor.

Editable Regions have yellow borders in the Visual Editor, indicating what areas are updatable. Define large sections to give full control, or limit access by defining select images and areas of text.

To define an Editable Region:

  1. Identify the HTML element you want editable
  2. Add class="editable" to the HTML element

Define multiple classes if the element already has a class, for example: <div class="content editable">.

The Visual Editor supports JavaScript, however, HTML rendered with JavaScript is not editable.

The Editable Region interface used depends on the defined element:

Text Elements

p h1 h2 h3 h4 h5 h6

Editable text elements provide an interface to enter text, create hyperlinks, and format with bold and italics.

Text editable region in the Visual Editor

Image Elements


Editable image regions provide options to replace or crop the existing image, and update the image description. Images are replaced with external URLs, file uploads or previously uploaded images.

CloudCannon ensures that new images do not break layouts by cropping them to the size of the image being replaced. Users move and resize images to specify how they are cropped in place. The original and cropped images are placed inside the uploads and uploads/versions folders respectively.

To change the uploads folder:

  1. Create or open _config.yml in the root folder
  2. Add an uploads_dir variable with the path set as required
uploads_dir: "assets/images"

To enable the option to enter a URL directly:

  1. Create or open _config.yml in the root folder
  2. Set the _editable_regions.image.url_src to true
    url_src: true

This option is disabled by default to avoid breaking design changes, since the image size can’t be guaranteed when setting src directly.

Image editable region in the Visual Editor

Block Elements

div section article aside footer header nav

Editable block elements are rich editable regions with options to format and add: headings, bold, italics, hyperlinks, quotes, lists and images.

Block editable region in the Visual Editor

Inline Elements

a span small strong em i b sub sup li dd dt td th

Editable inline elements provide an interface to change smaller sections of text without formatting.

Inline editable region in the Visual Editor

Markdown Content Elements

<div>{{ content }}</div>

Markdown content elements are elements which only contain {{ content }}. CloudCannon makes this element editable on any page with a Markdown file as the source. The editing controls are determined by the surrounding element: div elements are block level editables, span are inline level editables.

Elements containing other elements and {{ content }} are not editable. Layouts containing more than one {{ content }} are not editable. For these cases, the Content Editor is available for editing.