Manage content in HTML files.
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 text elements. Depending on what element the editable is applied to, editors will see different options in the editor.
To define an Editable Region:
class="editable"to the HTML element. If the element already has a class you can append the editable class, for example:
<div class="content editable">
Editor Links allow you to link to other sections of the CloudCannon interface from within the Visual Editor. Use them to create edit buttons for your collection items and blog posts that are not visible on your live site. You can also add front matter Editor Links to open the front matter Editor at specified fields.
Editor Links are prefixed with
cloudcannon: and match the URL structure of the CloudCannon app, for example:
Front matter Editor Links are prefixed with
cloudcannon:# and match the Liquid format used to reference them, for example:
Instead of only anchor tags, any element can have an Editor Link by using the
data-cms-editor-link attribute, for example:
To have edit links for posts in a list, add an Editor Link in the blog post loop:
To have an edit link on a collection item page, add the following to the page:
If you are using a custom
site.collections_dir in your editor link:
When generating Editor Links in Jekyll, collection items should use relative_path, while posts and pages should use path.
replace ‘content’ in the
href with the name of your content directory.
To show Editor Links inside the editor and hide them on the live site:
CloudCannon adds the
.cms-editor-active class to the body of your site in the Visual Editor. The class is not on the live site.
Front matter can be highlighted within the sidebar or displayed standalone in a modal popup. To change how an editor link opens:
Using modal-style editor links that point directly to hidden fields show the field in the pop up.
You can give Editor Links our default styles by adding the
cms-editor-link class. This provides a seamless experience alongside Editable Regions by using the same styles.
cms-editor-link-dirty is also handled with the default styles.
Set the default path to load when the Update Home action is clicked in the Dashboard.
Configured globally in
_config.yml with an
Configured within the
params of your site’s config:
Clicking the Update Home Dashboard action will load the
default_path. The example above will load
/about/ instead of loading the default of