Store these guides in WordPress

The same user guide is packaged as WordPress pages. LiveCanvas (Canvasly) stores that HTML in each page and can edit every heading, paragraph, list item, and table cell marked editable.

Import the pages

  1. In WordPress, go to Tools → Import.
  2. If needed, install the official WordPress importer.
  3. Upload html_docs/wordpress/vidcellar-user-docs.wxr.
  4. Assign the imported pages to an existing administrator. The file lists the author as vidcellar only so the importer has a name to map.
  5. Run the import. WordPress creates five published pages:
    • VidCellar user guide
    • Install VidCellar
    • VidCellar Lite
    • VidCellar Pro
    • Watching videos

The four child pages sit under VidCellar user guide. With normal page permalinks their addresses are /vidcellar-user-guide/, /vidcellar-user-guide/vidcellar-install/, /vidcellar-user-guide/vidcellar-lite/, /vidcellar-user-guide/vidcellar-pro/, and /vidcellar-user-guide/watching-vidcellar-videos/.

Add the illustrations

Copy the PNG files from html_docs/images into wp-content/uploads/vidcellar-docs/ on the site, keeping these names:

In LiveCanvas you can also click an image and replace it from the Media Library.

Edit with LiveCanvas

  1. Open a page in WordPress and choose Edit with LiveCanvas.
  2. Click a heading, paragraph, list item, or table cell. Those regions use editable="inline" or editable="rich", so the visual editor can change the words without rebuilding the layout.
  3. Use Edit HTML when you want to change the structure.
  4. Save. LiveCanvas writes the HTML into the page content WordPress already stores.

The page content is ordinary HTML with Bootstrap layout classes. It still displays if LiveCanvas is turned off.

Optional: child-theme page library

The same HTML fragments are in html_docs/wordpress/livecanvas-pages/. Copy that folder’s files into the child theme directory livecanvas/pages/ if you want them in the LiveCanvas readymade pages library.