The power of CloudCannon’s Content Management System (CMS) is that you can configure it to match your team’s workflow needs, all while maintaining your site's design. We’ve developed three key ways for non-technical team members to use our editors to shape content exactly as they need.
- Visual editing — On-the-page edits in the Visual Editor.
- Input editing — Editing content, data and front matter in the Visual, Content, and Data Editors.
- Structured editing — Editing complex content with Arrays and building pages with Structures in the Data Editor.
Visual editing#
In CloudCannon, the Visual Editor lets people edit your site exactly as it appears live. In most cases, you’ll need to configure which parts of the page are editable. To enable editing, add class="editable" to your chosen HTML elements. You can add this class to most elements, including divs and sections containing multiple elements. You have full control over what is editable in the Visual Editor.
Editing in the Visual Editor
When you open a page in the Visual Editor, you will see a yellow box around any element that is ready to edit. Simply click into this box to begin editing. You’ll see helpful editing tools depending on your element style.
Learn more about Editable regions.
Input editing#
Along with the Visual Editor, all of your site data and front matter can be edited using Inputs in the Sidebar or the Data Editor. These inputs are similar to ‘custom fields’, but give you more control over what they determine and where they appear. Inputs come in a variety of types linked to your keys and values (such as text, date picker, colour picker, etc.). Defining your inputs means you can design the best editing experience for your team.
Learn more about choosing your Inputs.
Editing in the Data Editor
You can easily manage and edit the content of your front matter and data files with Inputs in the Data Editor.
Examples of how you might use inputs in the Data Editor include:
- For all content on a page
- Repeated content sections in a page, such as testimonials or a gallery
- A site navigation or footer
- Front matter for a page or blog, such as SEO metadata
Editing data in the Visual editor
The Data Editor appears to the left of your page content in the Visual Editor and Content Editor. It allows you to see your inputs next to the content they control.
Examples of how you might use inputs in the Sidebar includes:
- For all content visible on a page
- Front matter for a page or blog, such as SEO metadata
- Repeated content sections in a page, such as testimonials or a gallery
Linking data editing to the Visual editor
Some of the data on your page may come from front matter or data files. Editor links let you place buttons or links on the page that navigate you to that data in CloudCannon. This lets your editors navigate to relevant data files quickly and simply. These buttons will only show up in the Visual Editor, so you don’t have to worry about them showing up on your live site.
Learn more about Editor Links
Structured editing#
Arrays are one of the most powerful parts of any static site generator, so we’ve made editing them super easy. Structures in CloudCannon make it easy to edit simple lists of strings and arrays of objects, such as components. CloudCannon will read your files and automatically make your arrays editable in the Data Editor. Here, you can not only edit existing items but also add, rearrange and remove them.
Examples of how you might use Arrays includes:
- List of related content such as a list of staff members
- Any repeated component, such as testimonials or a gallery
Page builder with Structures
You can also use Structures to build pages from components. With Structures you can define complex components, making them editable with Inputs. Then you can add, arrange, edit, and remove them with the Data editor.
Learn more about Array Structures
