Canvases are layout elements that house containers and content. A publishable object (such as a page, blog post or story) can have more than one canvas and each canvas can be styled to reflect your design.

To add a canvas:

Drag the canvas icon into the page, above, below or in between existing canvases.

Click on the Canvas to edit it. The Canvas toolbar will appear with Canvas settings at the top of the screen.

Canvas Settings

Canvas Label

Enter a label to identify your canvases. Be as descriptive as possible, for example: Slideshow Top Canvas.

Full Width Canvas (off by default)

Turn on full width canvas on when you want your canvas to stretch all the way to the edge of the website browser. This often is used for background colors or images.

Full Width Content (off by default)

Turn on full width content on when you want your content to stretch all the way to the edge of the website browser. When off, your content will stay fixed within the defined website content width, the details is 1400 pixels.

Hide for Device Options

Click the Mobile, Desktop or Tablet button(s) to hide the canvas for a particular device. This often is used to display different content for devices, for example a slideshow appears on the desktop version, but not the mobile version.

Canvas Toolbar

Reorder/Move a Canvas:

1. Click on the compass tool.

2. Drag the canvas up or down into position.

Delete a Canvas:

1. Click on the trashcan button.

2. When the “Are you sure you want to delete this canvas” prompt appear click OK.

3. Click CANCEL to cancel.

Style a Canvas

1. Click on the paintbrush button.

The Canvas Settings will change to include options for editing the canvas Background, Padding, Borders, Box Shadow, and to apply Style Favorites.

2. Edit your canvas. See documentation below on various ways to edit your canvas.

3. Click Save or Save as Favorite. If you Save as Favorite your style will be saved in your stylesheet and appear in the Style Favorites Tab in canvas settings.

Remove Canvas styles:

1. Click on the paintbrush button.

2. Click on the Clear All Styles link.

3. Edit the CSS source code and/or click Save to commit your changes.

To View Source and update a Canvas:

1. Click on the paintbrush button.

2. Click on the View Source link.

3. Edit the CSS source code.

4. Click Update when done.

5. Click Save to commit your changes.

To edit Canvas Backgrounds:

1. Click on the paintbrush button.

2. Click on the Background tab.

3. Edit the Background Options

Image

1. Click the image icon.

2. Add an image

Either from the media selector or Click Upload files to upload the image.

3. Click Add Selected

4. Select Repeat options

Horizontally, Vertically or Don’t Repeat

5. Select Position for your background image

6. Select Size for your background image

Stretch to Fill

Your image will size so that entire width of the images stretches to fill the entire canvas. This sizing will crop the image based on your positioning. This sizing will also change the crop of your image based on the device width. You will see more or less of your image based on the device width.

Scale to Fit

Your image will size so that the entire image is visible.

Manual Positioning

You can also manually position your image from the Top or Left or Both.
Any CSS valid unit will work: px, %, em, rem, pt, etc.

If you put one number it's from the left. (20px) If you put two numbers the first one is from the left second is from the top. (20px 10px) Positive numbers go right or down (20px), negative numbers go left or up (-20px).

7. Click save.

Padding

1. Click on the Padding tab.

2. Click a Quick Pad option or key in a padding amount in pixels, em, or % units.

3. Click Save

Borders

1. Click on the Border tab.

2. Click a the border type, all sides, left side, top side, right side or bottom side.

3. Select the border color.

4. Select or key in the border width.

5. Select line type: Solid, Dotted, Dashed, Inset, Outset, Double.

6. Click Save.

Box Shadow

1. Click on the Box Shadow tab.

2. Select the position.

3. Select the width.

4. Select the blur distance.

5. Select the color.

6. Click Save.

Favorites

If you have favorites saved they will appear in this tab. See Favorites tutorial for more information.

1. Click on the Favorite icon to apply the favorite. You can apply more than one favorite. Note: certain styles could conflict with one another.

2. Click Save.

Containers make up the underlying layout of your page, blog post, story or global content. Each container represents an area where content where can be placed. Containers can be added to create layout grids with one or more columns. Containers are placed into Canvases and each container can be styled to reflect your design.

Containers can also be placed inside containers. These child containers are designated by a green dashed line.

Content is added into the containers. Text, images, video, galleries, stories, and more can be added. Content is editable and can be styled to reflect your design.

To add containers:

Click on the number of columns you want to add to your page and drag it into your canvas. (You can also drag columns into an existing container.)

To add nested Containers (containers inside containers):

Click on the number of columns you want to add to your page and drag it into the existing container.

To Edit a container:

Click on the container you want to edit.
Use the Container Tools and Container Settings tab to edit the container.

To Edit the component width:

Click and drag the width button (left or right) to change the grid percentage width or left margin(grid prefix) of the container. You can also use the width pulldown menu to set the width.

To add Margin Top or Bottom:

Click and drag (up or down) to set the top and bottom margins for a container. You can also key in Margin Top or Margin Bottom.

Default Padding

Default padding, found in the Margins and Padding tab, is turned on for a container by default. Each container will have 10px of inside padding on the left and right sides of the container unless this is turned off.

Compass Tool

To move a container up or down:

1. Click on Compass Tool.

2. Then Click on the up or down arrows to move the container.

Style a Container

1. Click on the paintbrush button.

2. Click on the Background tab.

3. Edit the Background Options

Remove Container styles:

1. Click on the paintbrush button.

2. Click on the Clear All Styles link.

3. Edit the CSS source code and/or click Save to commit your changes.

Background Color

Choose a color with the color selector.

Image

1. Click the image icon.

2. Add an image

Either from the media selector or Click Upload files to upload the image.

3. Click Add Selected 

4. Select Repeat options 

Horizontally, Vertically or Don’t Repeat

5. Select Position for your background image

6. Select Size for your background image

Stretch to Fill

Your image will size so that entire width of the images stretches to fill the entire canvas. This sizing will crop the image based on your positioning. This sizing will also change the crop of your image based on the device width. You will see more or less of your image based on the device width.

Scale to Fit

Your image will size so that the entire image is visible.

Manual Positioning

You can also manually position your image from the Top or Left or Both.
Any CSS valid unit will work: px, %, em, rem, pt, etc.
If you put one number it's from the left. (20px) If you put two numbers the first one is from the left second is from the top. (20px 10px) Positive numbers go right or down (20px), negative numbers go left or up (-20px).

7. Click save.

Padding

1. Click on the Padding tab.

2. Click a Quick Pad option or key in a padding amount in pixels, em, or % units.

3. Click Save

Borders

1. Click on the Border tab.

2. Click a the border type, all sides, left side, top side, right side or bottom side.

3. Select the border color.

4. Select or key in the border width.

5. Select line type: Solid, Dotted, Dashed, Inset, Outset, Double.

6. Click Save.

Box Shadow

1. Click on the Box Shadow tab.

2. Select the position.

3. Select the width.

4. Select the blur distance.

5. Select the color.

6. Click Save.

Favorites

If you have favorites saved they will appear in this tab. See Favorites tutorial for more information

1. Click on the Favorite icon to apply the favorite. You can apply more than one favorite. Note: certain styles could conflict with one another.

2. Click Save.

Container Lock

Lock a container to prevent editing. Only users with administrative or designer roles can unlock a locked container

To lock a container:

Click the lock icon.

Click OK in the dialog box to confirm.

To unlock a container:

Click the unlock icon to allow content to be edited.

Click OK in the dialog box to confirm.

Content is added into layout containers. Text, images, video, galleries, stories, and more can be added. Content is editable and can be styled to reflect your design.

See specific tutorials on Components for more information.

To add content to a page, story, blog post or global content:

Drag and drop the content component into the layout container.

Use the Content Toolbar and Content settings to edit the component.

Note: Toolbar selections may change based on the component.

Edit Content:

To edit the component’s content or settings, click the content icon.

To resize the component width:

Click and drag the width button (left or right) to component. You can also key in the width.

To add margin above and below a component:

Click and drag the height button (up or down) to change the percentage height of the container. You can also key in a Margin Top and Margin Bottom.

To move or reorder a component:

1. Click on the compass tool.

2. Drag the component into the container you want to move it too.

To duplicate a component:

Click and drag the component to anywhere in the layout. Or drag and release in place to create a copy immediately below the existing component.

To delete a component:

1. Click on the trashcan button.

2. When the “Are you sure you want to delete this component” prompt appears click, OK.

3. Click CANCEL to cancel.

To complete edits, click the Close button or press Escape.

You can preview your design by clicking on the Preview tab. Most content previews will display within their appropriate master page, so pages and stories will appear just as they will look when published to the live site. Please note that Global Content previews will not display within a master page.

Use the device icons to review your design for each device. Use the responsive slider to view how your design looks between breakpoints.

Saving a Draft

To SAVE AS DRAFT click the CLOSE button. The page you were working on will be marked changed.

Pages auto-save unless prompted. During the course of building a page you will be prompted to save to commit specific changes.

The page will be in draft mode until you click PUBLISH. Once you click publish the draft page and the live page will be the same.