Visual editor best practices

Overview

The Visual editor in CloudCannon is the main way to edit content in CloudCannon. In this tutorial we’ll go over some tips so help you get the most out of the visual editor.

Editable regions

Editable regions are a great way give update access to an editor for content you define. It’s always a good idea to give editors the smallest scope possible to prevent them from updating things they shouldn’t or breaking the layout.

For example instead of setting an editable on the whole content div:

<div class="content editable">
  <h1>Hello World!</h1>

  <p>Hi there, I'm learning Jekyll</p>

  <div class="image">
    <img src="/pooch.jpeg" alt="Pooch"/>
  </div>
</div>

Set the editable on each element:

<div class="content">
  <h1 class="editable">Hello World!</h1>

  <p class="editable">Hi there, I'm learning Jekyll</p>

  <div class="image">
    <img src="/pooch.jpeg" alt="Pooch" class="editable"/>
  </div>
</div>

This won’t always be possible as you might want the editor to add extra paragraphs. If this is the case then try to keep the content inside the <div> as simple as possible so it’s paragraphs and images. Anything more complex you’ll probably have a better experience using front matter.

Editor content

You can create content that shows in the editor but not on the live site. This is useful for Editor links which allow you to create inline buttons on your site for editing blog posts or collection documents. See the e

It’s also possible to disable JavaScript functions from running in the editor. If you have a pop up for a mailing list sign up or something like that, you probably don’t want that appearing while you’re editing the site.

See the Editor content documentation for more information.