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:
- Identify the HTML element you want editable
- 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:
- Create or open
_config.yml
in the root folder - 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.