Search code examples
jekyllliquidcloudcannon

CloudCannon visual editor is not working?

I have a Jekyll website deployed on netlify and I use CloudCannon to make a "template" of my site. I followed this tutorial but when I add class="editable" the visual editor doesn't let me save the changes when I change any of the text (The save button is disabled). This doesn't happen when I update the title of the page in the right panel for example.

This is how the page is shown:

enter image description here

And this is the code of it (I have the header and footer in a default.html layout):

---
layout: default
title: Inicio
permalink: /
---

<header>
    <div class="header-content editable">
        <div class="header-content-inner editable">
            <h1 class="editable">
                Esta es la p&aacute;gina de inicio del portal de jekyll y liquid
            </h1>
            <hr />
            <p class="editable">
                Este sitio web es un ejemplo del uso de jekyll 😃
            </p>
            <a class="editable btn btn-primary btn-xl page-scroll" href="/about.html">¿Quieres saber más?</a>
        </div>
    </div>
</header>
<aside class="bg-dark">
    <div class="container text-center editable">
        <div class="call-to-action editable">
            <h2 class="editable">
                &iquest;Quieres ver lo que te ofrecemos? 😀
            </h2>
            <a class="editable btn btn-default btn-xl wow tada" href="/services.html">Mira nuestros servicios</a>
        </div>
    </div>
</aside>

I added the class="editable" into every tag attempting to make it work because the class was working nowhere.

I cannot provide the site.

Solution

  • You have nesting divs that contain the editable class. That causes an error. Remove all editable classes and add just one on a single h2. That will fix your problem.