Learning with the Developer Demo

With CloudCannon, your website can be set up for editing via two main concepts. (The best sites use a mix of both!) Simple HTML content can be configured to be edited directly on the page in our Visual Editor. Complex — usually repeated — data and collections are best suited for editing using Inputs and Arrays, in the Data Editor.

To help you get a feel for these two ways of editing, we’ve built a functional developer demo site with examples of how visual editing can work in CloudCannon.

  1. Sign up for a free CloudCannon account or log in with your existing account
  2. Head to Sites.
  3. Click Load the developer demo (or if you already have a site, click Add new site and select Load the developer demo.
  4. The site will load in less than a minute.
  5. Once loaded, you’ll see a model confirming what the site is. Read and click Let’s get started and you’re in!

Editable regions

On the first page you’ll find an example of editing content ‘on the page’. Editable regions are wrapped in a yellow frame, and you can set any of your HTML content up to be edited like this by adding the class {editable} to their element. Try changing the text and adding a new image.

Play with Editable regions in our Developer Demo

Further down, is an example of adding the same editable class to a section or div. All the elements within are editable from a single region. While this might seem convenient, please be careful with a setup like this as your team might remove styling they cannot set back. 

Note

We strongly recommend adding classes to individual elements as it helps you maintain your style guide.

To see how editing data and collections works, scroll down to the bottom of the page and click Show me the sidebar.

Front Matter and Arrays

The second page is an example of how to edit in CloudCannon with Front Matter inputs. First up, you’ll find the same design as the previous page. This one is editable with the inputs found in the sidebar. With a range of input types to select from, you can configure your inputs to meet your ideal editing structure. Click on it to open your sidebar and see the difference. 

Further down, you can see the power of inputs in Arrays. These are especially useful with repeated content and adds a structure that means similar content can be added, removed and reordered. Arrays are used to give editors control over content such as slideshows, gallerys, testimonials, configurable navigations and even to build a full page. 

In this example we have repeated testimonial blocks with the same layout and varying content. Try adding, removing and reordering them. 

Short video showing how to edit content with the Front Matter sidebar.

Remember to click Save in the top right to commit your changes. 

Was this article helpful? or Suggest an improvement >