Overview

The Canvas rich content editor allows you to do quite a lot with your pages, but Cidi Labs DesignPLUS allows you to do much more! In this guide, we'll show you how to use the DesignPLUS Edit Current Element menu to make common edits to content that you may have already added onto your page using the rich content editor. (We won't cover every edit you can make, nor will we cover how to edit every kind of element, but we do provide resources for editing everything in our guide on adding elements to pages). Make sure you're familiar with the basics of using DesignPLUS before continuing through this page.

How to use the Edit Current Element menu

The Edit Current Element menu (A) in the DesignPLUS sidebar is what you'll use to edit elements that are already on your page.

This menu has a few consistent sections. At the top, it lists the element(s) you've currently got selected (B). This includes any elements that contain whatever you have selected (i.e., if you select an image, you'll also see the paragraph and content block element the image is contained in). Beneath that you'll find some resources and basic shortcuts for managing the element (C). The Content (D) and Style (E) tabs are what you'll use to do most of the editing. Generally speaking, the Content tab let's you change how an element is set up and the Style tab lets you change how it looks and functions.

You may also notice Quick Styles and Advanced tabs on some elements. The Quick Styles tab allows you to favourite element styles for reuse across pages, and the Advanced tab will provide additional information and/or styling options for certain elements (but not all). We recommend checking these out if you see them, but we won't focus them in our guides (except for when editing table styles).

Useful edits to make to common elements

Each element will have unique options for editing them under the Content and Style tabs. In the tabs below, we'll show you a few key ways to edit common elements.

Add image caption

Add image caption

DesignPLUS lets you add captions below or overlaying the bottom of your images (we've captioned the below image!).

To enable captions on an image, select the image and open the Content tab in the Edit Current Element menu [1]. Enable Caption [2] and then add in your desired caption [3]. You can set your caption as an overlay from the Style tab by choosing from the available Caption Styles [4].

The steps to enable captions on your images.

Align and wrap images

Align and wrap images

DesignPLUS gives you the option to align your images and wrap them around other content on your page, though, technically, you can also do this using the alignment button in the Canvas rich content editor. (Feel free to use whichever option you prefer).

To do this in DesignPLUS, open the Content tab in the Edit Current Element menu [1] and set an alignment option [2]. There are four alignment options:

Default : Left-align with no wrap.
Centre : Centre-align with no wrap.
Float Left : Left-align with wrap.
Float Right : Right-align with wrap.

For alignment options with wrapping, you'll need to make sure you insert your image immediately before the content you want to wrap, on the same line. The image we've used here has Float Right alignment and we placed it directly before 'DesignPLUS' in the first paragraph (at the icon).

Enable image popups

Enable image popups

Cidi Labs DesignPLUS lets you set images to open as full-screen popups when selected. All of the images in our training resources have this enabled. To enable popups on an individual image, open the image in the Edit Current Element menu [1a] and, under the Style tab, enable Set image as popup when selected [2a]. If you have multiple images in the same content block, you could even open the content block in the Edit Current Element menu [1b] and enable Set images in this block as popup image gallery [2b] from there. This will allow users to flick between nearby popups instead of having to open them one-by-one. We've used the image gallery option below.

Make tables easier to read

Make tables easier to read

DesignPLUS can be used to add captions (A), headers (B), row striping (C) and row hover (D) to tables (to make your tables easier to read, like the one we've got below). Setting a header option will indicate to screen readers the correct direction to read the table (column-by-column or row-by-row), row striping will colour every second row and row hover will highlight the row your cursor is on. Opening the table's Advanced tab in the Edit Current Element menu [1] will give you the option to enable each of these (you'll notice a few other neat options too!).

Example styled table
We've set column headers	Header column 2	Header column 3
This row has been coloured to make the striping effect	Content	Content
Content	Content	Content

While this is useful for editing tables you've created using the Canvas rich content editor, keep in mind that there's a special AU-themed table available using the DesignPLUS snippet element that you might prefer to use anyway.

Rearrange list items

Rearrange list items

The Canvas rich content editor doesn't have a way for you to reorder items in a list, but DesignPLUS does. If you select your list and open it in the Edit Current Element menu [1], you'll be able to select and drag [2] your list items to rearrange them (from under the Contents tab).

If you rearrange items in a numbered list, the numbering of each item will automatically be adjusted.

Turn links into buttons

Turn links into buttons

If you've got a link that you want to highlight, you can use DesignPLUS to turn it into a button. With your link selected in the Edit Current Element menu [1], open the Style tab and set a Button Style [2]. Setting a Button Style will turn your link into a button like the one below! You'll notice a few options to style your buttons as well. We cover how to style buttons in our guide on adding elements to pages.

Learning Centre homepage

Return to homepage Get support Give feedback about this page