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.
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.
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.
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.
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:
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:
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
Arrays are one of the most powerful parts of any static site generator, so we’ve made editing them super easy. Array 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:
You can also use Array Structures to build pages from components. With Array 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