Browse Articles

Browse Articles

Rise 360: How to Use Labeled Graphic Blocks

Article Last Updated

This article applies to:

Rise 360

Labeled graphics provide lean-forward moments that engage learners. With the labeled graphic block, learners can explore key components and learn about a concept in a novel, interactive way. It’s as simple as uploading an image and then adding interactive markers to describe each element. Here’s how.

  1. Insert a Labeled Graphic Block
  2. Modify a Labeled Graphic Block Image
  3. Add, Reorder, and Remove Markers
  4. Modify Markers
  5. Customize the Block Settings
  6. Accessibility Information

Step 1: Insert a Labeled Graphic Block

  1. Open a Rise 360 course, then edit an existing lesson or create a new one.
  2. Select labeled graphic from the blocks shortcut bar.
    OR
  3. Click the insert block icon that appears when you mouse over a boundary between blocks.
  4. From the sidebar that appears, choose the Interactive category in the block library, then select Labeled Graphic.

Step 2: Modify a Labeled Graphic Block Image

You can replace and modify the default image for a labeled graphic block.

  1. Hover over an existing labeled graphic block to access the left-hand design toolbar. Click the Content icon.
  2. Under the image, click Edit. From here you can upload your own image, search the Content Library 360, crop the uploaded image, or edit the alt tag for screen readers.
  3. Click Close in the upper right corner to return to your block lesson.

Step 3: Add, Reorder, and Remove Markers

You can add more markers with one click!

  1. Click the Content icon.
  2. Click the image where you want to add a marker, and it automatically appears.
  3. If you don’t like its placement, click and drag the marker to its final location (don't cover or overlap other markers, as doing so makes it hard to click them). 
  4. To reorder your markers, click Markers at the top of the sidebar to return to the markers list. Drag markers up and down to reorder the list.
  5. To delete a marker, hover over the entry for the marker you want to delete in the list on the left (it’ll be highlighted on the right), then click the trash icon that appears.
  6. Click Close in the upper right corner to return to your block lesson.

Step 4: Modify Markers

There are lots of ways you can modify your markers, from adding text to importing media.

  1. Click the Content icon.
  2. Select the marker you want to modify in the list on the left, then do any of the following:

    Add Text

    Edit (or delete) the marker's title and description in the sidebar.

    Choose a Marker Style

    In addition to numbers 0-9, there are lots of additional marker styles and icons to choose from. Select a new style for your marker from the Marker Style drop-down window. It displays below the title text when you expand the marker.

    Add Media

    Click Media to upload an image or video, browse the Content Library 360, or embed web content (such as a YouTube video). It displays below the title text when you expand the marker.

    Add Audio

    Upload an audio file or use the Record Audio tool. You can pause, but your in-progress recording won't be saved until you click Stop Recording.
  3. When you’re finished, click Markers at the top of the sidebar to return the markers list.

Step 5: Customize the Block Settings

Modify how your content looks on the screen by hovering over an existing block to access the left-hand design toolbar. Click the Style icon to access block background options. The Format menu provides options for changing the padding, image width and marker color options, and the ability to disable image zoom on click.

Your image displays at medium width (1100 px wide) by default, but you can select small (760 px wide) or full width from the Image Width dropdown menu in the design tab. Note that we respect image ratio, so pictures that are taller than they are wide will take up a large amount of space when expanded to full width.

You can also change the color of your markers by entering the hex code or manually selecting a color.  

Tips: 

  • Labeled graphic blocks always restart when learners revisit the lesson.
  • Add a continue block after your labeled graphic block when you want learners to complete it before moving on.

Accessibility Information

Labeled graphic blocks are accessible. Remember to add alternative text (alt text) to describe the background image. If you use media on any markers, ensure images have alt text and videos have closed captions. Conduct testing with keyboard navigation and screen readers to ensure accessibility. For further guidance on creating accessible content, refer to our accessibility design tips below: