Overview

Cidi Labs DesignPLUS allows you to add lots of cool and engaging elements onto your pages to help you organise your content and highlight important information. We'll provide a run through of these elements below. Make sure you're familiar with the basics of using DesignPLUS before continuing through this page.

How to use the Add Elements menu

To add new elements to your page, you'll select the Add New Elements menu (A).

In the Add New Elements menu, you'll see a long list of the DesignPLUS elements available to you. To add a new element to your page, simply select the desired element from the list (B). Elements you add will be placed at the location of your cursor (except for Content Block elements, which will be added underneath the block your cursor is in).

Once you add an element, you can select it to edit it in the Edit Current Element menu.

Examples of common DesignPLUS elements

There are lots of elements available to you, but there are a certain common few that you're most likely to use. We'll show you examples of these common elements in the tabs below.

Accordions/expanders/tabs

Accordions/expanders/tabs

Accordions, expanders and tabs allow you to organise your content into expandable and collapsible panels (like the tabs you're in right now!). This can be useful if you have content that isn't intended to be read in sequence, so learners can choose which parts of the content they'd like to read, or where you need to condense a content-heavy page. Note that accordions and tabs only allow for one panel to be open at a time, whereas expanders allow for multiple. Editing this element in the Edit Current Element menu will let you rearrange tabs, change tab styles and colours, and more! We've got example accordion and expander panels below.

Accordion (panel header 1)

You'd put your content in here.

Accordion (panel header 2)

Note you can't have both panels open at the same time!

Expander (panel header 1)

This is where your content would go.

Expander (panel header 2)

Note you can have both panel 1 and 2 open at the same time!

Tabs (panel header 1)

Here's another tabs example (remembering that all this is already within some tabs).

Tabs (panel header 2)

Like with accordions, you can only have one panel open at a time.

Buttons

Buttons are a form of link. Instead of just having a link embedded into text (like this link to the Learning Centre homepage), you can put them in buttons! We've provided an example of that same link below, but as a few different buttons. If you open your button in the Edit Current Element menu, you'll be able to modify their base and hover colours.

Learning Centre homepage

Learning Centre homepage

Learning Centre homepage

Calllouts

Callouts

Callouts are used to draw attention to and highlight certain pieces of information on a page. For example, you could use a callout to highlight important information, the definition of a key term, or to prompt learners to reflect on their learning. There are four main styles of callouts for you to choose from (which we show below), though additional callouts are available using the snippet element. You'll select between these options in the Edit Current Element menu, where you'll also be able to modify a callout's width and alignment.

Default

This is the default callout style.

Title bar

This is the title bar callout style.

Solid

This is the solid callout style. This style is not recommended for use as it can be hard to read.

Icons

This is the icons callout style. You can modify the callout's icon.

Dialog boxes/popovers

Dialog boxes/popovers

Dialog boxes and popovers let you add additional information to your text that only appears when you select certain text/phrases, called trigger text. These can be used to define words or add additional notes about the content for learners. Dialog boxes are generally more appropriate for longer pieces of text, as you can customise their size.

Select this example dialog box or this example popover to see what they look like. You'll notice we've inserted dialog boxes over icons in some of our training resources to create an 'info' type of button.

It's recommended that you briefly explain to students how to use dialog boxes/popovers at the start of your course.

Icons

Icons

The icons element allows you to embed icons onto your page. There are lots of different options available! You can embed them into text, or even into other elements like headers, buttons and callouts. You may even notice some of the AU Course Template's custom content blocks come with icons in their headers! We've provided some example icons below.

While icons can add some character and fun to your course, make sure not to overuse them to the point where they distract from your page's content.

Snippets

Snippets

The snippet tool allows you to insert a variety of themed versions of other elements that have been developed specifically for myLearning. These snippets include things like custom callouts, fancy themed lists, a styled image embed, an educator profile card, a styled table and more! We've provided examples of all of the snippets further below.

This is the 'Fancy ordered list' snippet
List item
List item

This is the 'Fancy stepped list' snippet
List item
List item

Alert box

This is a key piece of information - if students do not engage with what this box concerns, it may affect their grade (for example, this box will alert them that their assignment is due this week)

Content Warning

This cue box denotes a content warning; something that the learners should be aware of before continuing.

Watch

This box is used to direct a student to take an action - watch the following video

Read

This box is used to direct a student to take an action - read this resource

Discuss

This box is used to direct a student to take an action - discuss this in your discussion board/tutorial/session

Action

This box is used to direct a student to take an action - anything that doesn't fit into the other prepped options but can be configured using DesignPlus. This will just be a catch-all or default state.

Example

A specialised callout for examples inside the content

Summary

This is a summary box - typically used at the end of a module or at the end of a particularly complex piece of learning. We would recommend not over-using this (i.e: not on every page end if possible)

References

This box will contain the references for the page

Heading 1	Heading 2	Heading 3
This is the 'Styled table' snippet	Table cell text	Table cell text

Your name

course coordinator

Adelaide, Australia

course.contact@adelaide.edu.au

Mon-Fri 9am-5pm

Write additional information here. (This is the 'Profile card' snippet)

Photo of a dog in snow — **Figure:** This is the 'Centred image with attribution' snippet

*Source: Image attribution*

Note that adding the snippet element to your page won't automatically make one of these appear. Instead, you'll just see the text '[Snippet]' added to your page. To turn this into one of these elements, select [Snippet] [1] on your page then open the Edit Current Element menu [2] and Snippet [3]. You'll then be able to choose which of the snippet types you want to use [4].

All elements and how to edit them

If you want to learn more about all of the elements available, including those we've already looked at, check out the vendor training resources below. These resources include instructions on how to use the Edit Current Element style to further style your elements. Note that all enabled Cidi Labs DesignPLUS elements meet WCAG 2.1 AA accessibility standards.

Element		Description
	Accordion/expander/tabs	Create expanding panel groups in which one or more panels can open at a time.
	Button/link	Create and customise buttons and links directing to other content.
	Callout	Create a text excerpt, used as a visual cue to draw attention to the text.
	Columns	Split text into columns.
	Content block	Structure page content into distinct and easily-arranged blocks (this is what the AU Course Template uses to structure pages).
	Description list	Create a glossary of terms.
	Dialog box/Popover	Set trigger-to-reveal popups over text.
	Divider	Add a line divider to split page content.
	Icon	Add icons.
	Link grid/Link list	Create grids or lists of links directing to other content.
	Module list	Create a grid of links to modules in a course (this is used on the AU Course Template homepage).
	Snippet	Add custom AU elements to your page.
Exclusions: Several elements were excluded from this list, but are available in the Add New Elements menu, because we recommend adding them via the Canvas rich content editor instead of DesignPLUS. The excluded items (hyperlinked vendor resources included) are course links, embed, image/image & caption, list: ordered/list: unordered, table, text and text highlight. Action item: notes were also excluded as you won't need to use these - they're only used to provide instructions on AU Course Template custom content blocks.

Coming from UoA MyUni?

Several elements available in UoA DesignTools are not available in AU DesignPLUS because they do align with the Adelaide University Attainment Model and accessibility standards.

This includes Progress Indicators, Read Times and Quick Checks (it's recommended that Quick Checks be replaced with H5P quiz activities as these track learner progress and analytics).

Get pedagogical/design support

For more detailed advice on styling DesignPLUS elements, please refer to the AU LMS Style Guide in Course Development Essentials.

How to add language accents and symbols

DesignPLUS can also be used to easily add language accents and symbols into your page. Check out the presentation below to find out how.

Select the expand button to open in full-screen or open in a new tab if not loading. Follow the navigational cues in the presentation to move between pages.

Return to homepage Get support Give feedback about this page