Page Builder Overview

Overview

In version 4.9, we introduced a new method to create and edit web pages in our core product called Page Builder.  Drag and drop content with CIMcloud’s Page Builder, where no coding experience is needed to build more comprehensive web pages.

CIMcloud’s Page Builder was built off of the open source framework GrapesJS and has extensive documentation on their website.

Page Builder is currently supported on new Web Pages and Homepages if you are using a Retail template.  We will be adding this for dashboard templates in the future.

This feature is currently in BETA and can be turned on by reaching out to our team via Extranet.

How it works – Creating

Webpage Builder

1. In the Worker Portal, head to Content -> Pages and click the “+” to add a new Page, or the “+ Add Page” button in the top right of Manage Pages
2. Select either the Page Builder Editor or Legacy Editor
   1. Page Builder Editor: What this article covers
   2. Legacy Editor: A traditional WYSIWYG editor
3. Submit your new page after filling in details
4. Your page will reload, allowing you to click the “Launch Page Builder” button
   1. You can also “Launch Page Builder” from the Manage Pages interface under the “Actions” column

Homepage Builder

1. In the Worker Portal, head to Customer Sites
2. Select the site you’d like to replace your Home page with Page Builder
3. Head to the Design tab
4. Under “Retail Landing Page Settings” you will be able to click “Launch Page Builder” to start making changes
5. Once you have saved your Page Builder changes, you can publish your template under Customer Sites -> Design by setting “Publish Page Builder Content?” to “Yes” and submitting the page

How it works – Making Changes

Page Builder is comprised of Header Actions and your Editor.

Header Actions allow you to:

• View History and revert Changes
• Preview on the sitefront
  • Note: You will need to Save before you can Preview your current Canvas
• Modify Page Settings (for Webpage Builder only)
• Save your changes

The Editor is made up of three main sections:

• Header Panel
  • Switch between different response types, like Mobile, Tablet, and Desktop
  • View the source CSS and HTML of the Components in your Canvas
  • Undo / Redo actions
    • Note: These are only for local changes.  Once you Save, you can revert to a previous version with the History dropdown
  • Clear the entire Canvas
  • Actions for the Selection Panel
    • Edit Components
    • View Component Layers
    • Select Blocks to add Components
• Selection Panel
  • Select Blocks and drag them to your Canvas to create Components
  • Clicking on Components will display additional configuration and settings in the Selection Panel
    • Open the “Settings” tab to see Block specific settings
    • Change CSS rules on Components under General, Dimension, Typography, Decorations, Extra, and Flex tabs
• Canvas
  • The main interface that will display on your site
  • Drag Components to your desired location
  • Select Components to edit text, add links, copy Components, or delete Components

How it works – Saving Changes

Once you have made your changes, you can click on the “Save” button in the header.  These changes will be logged and versioned, so that you can easily revert your changes in the future (Note: You will need to reload the page if you would like to see the history, or it will load automatically the next time you visit Page Builder).