Editing / Interfaces

Editable Regions

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

p h1 h2 h3 h4 h5 h6

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

---

Block

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.

---

Inline

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.

---

Link

a

Editable link elements are extended inline elements, providing an interface to change smaller sections of text without formatting, as well as the href and target attributes.

---

Image

img

Image Editable Regions provide options to change the image and description. Images can be replaced with new file uploads, previously uploaded images or external URLs.

CloudCannon ensures that new images do not break layouts by cropping them to the size of the image being replaced (not the element). After choosing a replacement image, users move and resize images to specify how they are cropped in place. The original and cropped images are placed inside the /uploads folder, but this can be changed in File Upload options.

Retina versions of images are generated from uploads and suffixed with @2x, resolution permitting.

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

_editable_regions:
  image:
    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.

---

Markdown Content

<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.