Use Creator+ Elements

Use Creator+ Insert Element to add dynamic components to your content without writing HTML. You can use Insert Element to create accordions, tabs, click and reveal elements, callouts, timelines, stylized quotes, flip cards, carousels, and hotspots.


This is the paper note and pencil icon used for notes.		 Note: Insert Element and Practices support the file language attribute so you can build content in the language of your choice. The language you set appears in content, on buttons that expand content, when viewing solutions and scores in Practices, and in ARIA labels. To use the language attribute in content, ensure that d2l.Tools.Content.ApplyPageLangAttribute is set.

To turn on Elements

  1. To open Organization Tools, navigate to Admin Tools > Organization Tools.
  2. Scroll down the tools list to Insert Element.
  3. To enable the tool, turn the Availability toggle to On.



This is the paper note and pencil icon used for notes.		 Note: You do not need permissions to use Insert Element; however, access to all Creator+ tools is controlled by the d2l.Tools.CreatorPlus.IsEnabled configuration variable. Contact your administrator for help.

Insert accordions

Use Insert Element to add an Accordion to your content. Accordions are useful when you want to present a list of items with additional details for each item. This structure helps learners focus on the main ideas first and then expand each section for more information.

To insert an accordion

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
    The Brightspace Editor toolbar with the Insert dropdown menu expanded, showing options for Insert Element, Insert Practice, Layouts, and Interactives.
     
  3. Click Accordion.
    The Insert Element dialog for Accordions. There are options to number Accordions as well as add titles and content.
  4. Select one of the Format Options to indicate if you want to number the accordion folders.
  5. To help learners use the element, enter text in Learner Instructions.
  6. To add accordion content, enter an Accordion Tab Title and Accordion Content for each accordion item.
  7. To add another accordion item, click + Add Accordion Item.
  8. To review and add the element, click Preview, and then click Insert.

The Accordion element is added to your content.

Insert tabs

Use Insert Element to add Tabs to your content. Tabs are useful for presenting related information in a series, such as the hypothesis, method, and findings of a scientific study.

To insert tabs

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Tabs.
    The Insert Element dialog for Tabs. There are format options, learner instructions, and tab title fields. The bottom has an add image option.
  4. To set the tab layout, select one of the Format Options for horizontal or vertical tabs.
  5. To help learners use the element, enter text in Learner Instructions.
  6. To add tab content, enter a Tab Title and Tab Content for the first tab.
  7. To add another tab, click Add Tab Item.
  8. To review and add the element, click Preview, and then click Insert.

The Tabs element is added to your content.

Insert a click and reveal element

Use Insert Element to add Click and Reveal elements to your content. Click and reveal elements encourage learners to reflect on a question, statement, or fact before revealing supporting information. You can also use them to provide optional learning materials.

To insert a click and reveal element

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Click and Reveal.
    Insert Element dialog in Brightspace showing fields to configure a Click and Reveal element, including options for introductory content, learner instructions, reveal and collapse button labels, and revealed content. The dialog also has Format Options for No Icon or Question, and buttons for Preview, Back, and Cancel at the bottom.
  4. To set the display style, select one of the Format Options.
  5. To introduce the element, enter text in Introductory Content.
  6. To help learners use the element, enter text in Learner Instructions.
  7. To add the reveal content, enter a Button Label and Revealed Content.
  8. To add another click and reveal element, click Back, and then add another element.
  9. To review and add the element, click Preview, and then click Insert.

The Click and Reveal element is added to your content.

Insert a callout

Use Insert Element to add Callout elements to your content. A callout is a bordered rectangle that separates supporting content from the main content. You can use a callout to highlight a key detail, definition, anecdote, or case study.

To insert a callout element

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Callout.
    Insert Element dialog in Brightspace displaying fields to configure a Callout element, including Format Options with No Icon, Question, Attention, and Jumbo. The dialog has fields for a title and callout content, along with formatting options for text styling. Buttons for Back, Preview, and Cancel are at the bottom.
  4. To set the display style, select one of the Format Options.
  5. To add callout content, enter a Title and Callout Content.
  6. To add another callout, click Back, and then add another element.
  7. To review and add the element, click Preview, and then click Insert.

The Callout element is added to your content.

Insert a timeline

Use Insert Element to add Timeline elements to your content. A timeline is useful for presenting events over time, the steps in a process, or items in a series. You can also use a timeline to show two sides of a conversation.

To insert a timeline

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Timeline.
    Insert Element dialog in Brightspace for creating a Timeline element. The dialog includes Format Options with Left-aligned and Alternating, and fields to configure multiple timeline panels. Each panel has fields for a title and text, along with text formatting options. Buttons for Back, Preview, and Cancel are at the bottom.
  4. To set the display style, select one of the Format Options.
  5. To add the first entry, enter a Timeline Panel Title and Timeline Panel Text.
  6. To add another timeline panel, click Add Item.
  7. To review and add the element, click Preview, and then click Insert.

The Timeline element is added to your content.

Video: Creating Timelines with Creator+

Insert a stylized quote

Use Insert Element to add Stylized Quote elements to your content. A stylized quote uses large quotation marks and color to distinguish quoted content from the surrounding content.

To insert a stylized quote

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Stylized Quote.
    Insert Element dialog in Brightspace for creating a Stylized Quote element. The dialog includes Format Options for Standard and Large focus, and fields for entering the quotation and its attribution. Buttons for Back, Preview, and Cancel are at the bottom.
  4. To set the display style, select one of the Format Options.
  5. To add the quote, enter the Quotation and Attribution.
  6. To review and add the element, click Preview, and then click Insert.

The Stylized Quote element is added to your content.

Insert flip cards

Use Insert Element to add Flip Cards to your content. Flip cards are useful when you want to present a group of related items that do not need to follow a specific sequence. They are especially effective when you include images.

To insert flip cards

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Flip Cards.
    Insert Element dialog in Brightspace for creating Flip Cards. The dialog includes a field for learner instructions and a section to configure flip card labels and related content. Each card has tabs for Front and Back, with fields for Title, Add Image, and Content. Options to add rows or cards and buttons for Back, Preview, and Cancel are at the bottom.
  4. To help learners use the element, enter text in Learner Instructions.
  5. To add front-side content, on the Front tab, enter a Title.
  6. To add an image to the front of the card, click Add Image.
  7. To define the image, select an image file, and then add Alternative Text or indicate that the image is decorative.
  8. To save the image, click Save.
  9. To complete the front of the card, enter text in Content.
  10. To add back-side content, repeat the process on the Back tab.
  11. To add another card on the same row, click Add Item.
  12. To add another row of cards, click Add Row.
  13. To review and add the element, click Preview, and then click Insert.

The Flip Card element is added to your content.


This is the paper note and pencil icon used for notes.		 Note: For best results, keep image content to 4 words or 25 characters or fewer.

Insert carousels

Use Insert Element to add Carousels to your content. A carousel is a slideshow of images and text. Learners view one slide at a time and move through the slides in sequence. Carousels are useful for presenting the steps in a process or a set of related items.

To insert a carousel

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
  3. Click Carousel.
    Insert Element dialog in Brightspace for creating a Carousel. The dialog includes a field for learner instructions and an expandable section for Carousel Slide 1. The slide options include Add Image, Add Title, and Add Text. A placeholder image is displayed, and buttons for adding or deleting slides and Back, Preview, and Cancel are available at the bottom.
    Figure: Select Carousel in the Insert Element dialog.
  4. To help learners use the element, enter text in Learner Instructions.
  5. To configure the first slide, click Add Image, Add Title, or Add Text.
  6. To add another slide, click Add Slide.
  7. To review and add the element, click Preview, and then click Insert.

The Carousel element is added to your content.

Insert a hotspot element

Use Hotspot to create an interactive image with selectable markers that reveal additional information. Hotspots support exploration-based learning and can include accessible micro alt tags for image regions.

To add hotspot markers to an image

  1. In the Content tool, create a new topic or edit an existing topic.
  2. Click Creator+ Authoring Tools, and then select Insert Element.
    The Brightspace Editor toolbar with the Insert dropdown menu expanded, showing options for Insert Element, Insert Practice, Layouts, and Interactives.
     
  3. Click Hotspot.
    The Hotspot tool highlighted in the Insert Element dialog
  4. To define instructions for learners, keep the default Learner Instructions or enter custom instructions.
  5. To add an image, click Add Image, select an image from your device, and then enter text in the Alternative Text field.
  6. To save the image, click Save.
    The Learner Instructions field telling learners to select each hotspot to learn more about the image. The Add Image button is below this field.
    Figure: Add an image in the Insert Element dialog.

This is the paper note and pencil icon used for notes.		 Note: The Hotspot element currently supports JPG and PNG image files only. AVIF images are not supported.
  1. To place a hotspot marker, click anywhere on the image.
  2. To edit a hotspot, in the right panel, select the hotspot you want to update.
  3. To identify the hotspot for authors and screen reader users, enter a name in the hotspot name field.
  4. To add hotspot details, in Hotspot Content, enter a description or add supporting content such as images, videos, and links.
    An image of a fruit platter is shown on the left. On the right, the Name field reads Grapefruit and the HotSpot Content box has a description of where grapefruit can be grown.
  5. To change the appearance of a hotspot marker, click Hotspot Marker, and then select an icon and color.
    The Hotspot Marker section showing different icons for markers like a location symbol, arrows, number, and more. The Hotspot Marker Color button is visible.
  6. To add more hotspots, click Hotspots, and then repeat steps 6 to 10.

This is the paper note and pencil icon used for notes.		 Note: You can insert up to nine hotspot markers for an image.
  1. To configure accessibility, below Learner Instructions, click Accessibility.
  2. To choose an accessibility option, under Accessibility, do one of the following:
    • Select Accessible hotspots only to add a micro alt tag for each hotspot.
    • Select Fully accessible image to divide the image into a grid and add a micro alt tag for each cell.
  3. To complete accessibility setup, add the required micro alt tags based on your selection.
    Under the Accessibility heading, the Accessible hotspots only option is selected. The Micro Alt Tags section describes each fruit on the platter and what is placed around them.
    Figure: Add Micro Alt Tags for hotspots or image grid areas.
  4. To add the hotspot to the content topic, click Save and Insert.
  5. To finish editing the topic, click Save and Close.

You have created a Hotspot element.


The image on the left shows nine hotspot markers with three showing checkmarks denoting they've been viewed. A progress bar at the top shows the number of hotspots viewed. The description on the right explains where kiwis are grown.

Figure: A Hotspot element in Content.

Video: Create content with the Hotspot Element

Edit an inserted element

To edit an inserted element

  1. In Brightspace Editor, click the element you added.
  2. To open the editing interface, click Edit using the icon at the top of the element.
  3. To move or remove the element, use the options in the same panel to move the object up or down, or delete it.

If the element is the first object on the page, the edit panel appears below the object.


This is the paper note and pencil icon used for notes.		 Note: You can edit some aspects of elements using the code editor; however, you cannot directly edit inserted elements outside the Insert Element edit workflow in the WYSIWYG interface.

 

Print Article