Infographic Component

This component is NOT recommended for use when creating accessible courses.

The infographic component lets you display text items over an image. Since images are responsive in Evolve, the text item automatically scales to the current image size. On mobile devices, the infographic can be opened fullscreen and navigated using the touch screen.

Text items are displayed using html, making them accessible and translatable. The text item can also be made interactive, for example displaying a tooltip when clicking on the text item. The item can be styled and animated; even a background image can be displayed.

This article provides a quick setup guide for working with the infographic component, offers a full overview of component settings, and provides tips for working with the infographic component.

Component: Quick Setup

This section is aimed at getting the component setup for the first time. For in depth information about this component, go to the Full Component Guide.

Add an image:

First add an image in the Graphic section. We recommend using an image at least 1024px wide. The Image Max Width field controls the maximum size the image will be displayed. This size is important since it is used as a reference point to scale all items. Changing this size after all the items have been positioned will cause them to become misaligned.

Add an item:

In the Items section the image that was added earlier should now display. To add a new item, click on the blue + button above the image. This will add a new item in the corner.

Editing an item:

The item can now be dragged and resized. Use the move handle on the item to place the item in the desired location. The item can be dragged to resize the item to the required size. Double click on an item to begin editing or click on the blue pencil icon on the top toolbar. An editor panel will display allowing you to edit the text, styles, animation and add interactivity.

Live Preview

Open up the live preview to check how the infographic component is displayed. The text entered should display exactly where it is in the editor. Try changing the size of the live preview window; you will notice the text scale up and down relative to the actual image size displayed in the course. The position of the item will always stay the same regardless of the current image size. You can also enable the outline to display in the live preview by going to the Behavior section. This outline will not display in the published course.

Styling

Each item can be styled in a number of ways. Each numerical style (font size, padding etc.) will be scaled up/down automatically relative to the actual image size displayed in the course. The styles set in the item editor are used when the infographic is being displayed at the Image Max Width setting in the Graphic section. This allows you to set the styles just once and have them work across a variety of screen sizes.

Interactivity

Adding interactivity to the item can be done in the item editor. Switching the item’s Interactivity toggle to Interactive will add a number of new styling and behaviour settings to the item editor panel.

3 types of interactivity can be added:

• Tooltip
• Navigation
• Show Hidden Item

The interactivity type can be set in the Interaction Type dropdown. Below is an example of the tooltip interaction.

Hover and Interacted styles

Switching the item’s Interactivity toggle to Interactive will allow using Hover Styles and Interacted Styles. These styles override the default styles even when there is no style set. For example, if no hover text color is set then the item’s text will display as transparent when the user hovers over the item.

Animations

Items can be set to animate when they first display. An item can animate to change its position, opacity, and scale. Item animations are enabled in the item editor panel. Once enabled, further settings become available in the item editor to control the animation start position, end position, opacity, and scale. The item will animate from these values to the position and size shown in the editor.

Setting up the initial position can be done in the item editor panel using numerical values or by clicking on the Animation Start Position control along the top of the editor. When this control is activated only items that have animation enabled will display. Use the drag handles to position where the item should animate from.

Full Component Guide

Editor controls

1. Add Item - Adds a new item to the infographic.
2. Items - Shows a panel where item stacking order can be changed and items hidden in the editor. Hiding items can be useful when building complex infographics. Items hidden will still display in the course. Note: This is not the same as the item Visibility setting in the item editor which does hide the item in the course and make it selectable as an item to display in an interactive item.
3. Zoom controls - Zooms the graphic in/out. Can be reset to the original size using the Reset Zoom button.
4. Animation Start Position - Enables positioning of any item with animations enabled. The position of the item set is where the item will animate from.
5. Animation Hide Position - Set the position the item will animate to when it is hidden
6. Lock Horizontal Dragging - When enabled, an item can only be dragged horizontally.
7. Lock Vertical Dragging - When enabled, an item can only be dragged vertically.
8. Snap - Use this to align items and "snap" them to nearby items
9. Undo/Redo Last Change - Undos any change made. Can undo the last 20 changes.
10. Full Screen - Switch to fullscreen editing for more space.

Item controls

1. Item Name
2. Edit Item - Opens the item editor panel.
3. Switch Item arrows - go from one item editor to the next item
4. Duplicate Item - Duplicates the item, this also copies across all styles, animations, and interactive behavior.
5. Position - Edit and see the item X and Y position.
6. Size - Edit and see the item size.
7. Lock the Item - Lock the item position and size once it is in the correct place.
8. Reset animation position - reset the start/hide animation position of the item.
9. Delete item

Resize the item by dragging sides or corners.

Item editor settings

• Editor Label - Sets the label visible in the editor and the items panel.

• Editor Outline Color - Sets the color of the outline in the editor and live preview. A lighter color can be used if the default black is not visible on a dark image.

• Visibility - Sets whether the item is visible or hidden in the course. Hidden items can be made visible using an interactive item. “Hidden” text will also be added to the item’s editor label.

• Interactivity - Setting the item to Interactive will allow the item to change styles when hovered and trigger an action when clicked.

• Text - The text inside the item. If this text is intended to be translated, make sure the item size is larger than needed for languages that display longer such as German.

• Aria Label - Text that the screen reader will read out. This is useful if there is no text inside the item or it is interactive.

• Font Size (px) - Sets the font size of the text. The font size will scale up/down relative to the actual image size displayed in the course.

• Text Align - Sets the horizontal alignment of the text.

• Vertical Text Align - Sets the vertical alignment of the text.

• Auto Line Height - If Automatic, the line height is set based on the item’s height. Automatic is useful for text that is intended to be translated since the text will be less likely to break outside the item.

• Line Height (px) - If Auto Line Height is set to custom, this setting will appear. Controls the line height of the text in this item. The line height will scale up/down relative to the actual image size displayed in the course.

• Text Color - The color of the text.

• Background Color - The background color of the item.

• Border Style - The style of the border around the item. This does not affect the item outline used for resizing the item.

• Border Color - The color of the border around the item. This does not affect the item outline used for resizing the item.

• Border Width (px) - The width of the border around the item. This does not affect the item outline used for resizing the item. The border width will scale up/down relative to the actual image size displayed in the course.

• Border Radius (px) - Use this setting to set rounded corners on the item. The border radius will scale up/down relative to the actual image size displayed in the course.

• Top Padding (px) - Adds padding inside the item at the top. Text will not flow into this padding. The top padding will scale up/down relative to the actual image size displayed in the course.

• Bottom Padding (px) - Adds padding inside the item at the bottom. Text will not flow into this padding. The bottom padding will scale up/down relative to the actual image size displayed in the course.

• Left Padding (px) - Adds padding inside the item on the left. Text will not flow into this padding. The left padding will scale up/down depending on the current image size.

• Right Padding (px) - Adds padding inside the item on the right. Text will not flow into this padding. The right padding will scale up/down relative to the actual image size displayed in the course.

• Background Image - Sets a background image on the item. The background image will always be centered and “fit” inside the current item’s size.

• Hover Styles - When enabled, applies the Hover styles when the item is being hovered over. This setting is only available if the item is set to interactive.

• Hover Text Color - The color of the text when the item is being hovered over. This setting is only available if the item is set to interactive. If no color is set, then the text will appear transparent on hover.

• Hover Background Color - The background color of the item when the item is being hovered over. This setting is only available if the item is set to interactive. If no color is set, then the item background will appear transparent on hover.

• Hover Border Color - The border color of the item when the item is being hovered over. This setting is only available if the item is set to interactive. If no color is set, then the item border color will appear transparent on hover.

• Hover Background Image - The background image when the item is being hovered over. The hover background image will always be centered and “fit” inside the current item’s size. If no image is set, then no background image will display on hover.

  • Interacted Styles - When enabled, applies the Interacted styles when the item has been interacted with. This setting is only available if the item is set to interactive.

• Interacted Text Color - The color of the text when the item has been interacted with. This setting is only available if the item is set to interactive. If no color is set, then the text will appear transparent once the item has been interacted with.

• Interacted Background Color - The background color of the text when the item has been interacted with. This setting is only available if the item is set to interactive. If no color is set, then the background color will appear transparent once the item has been interacted with.

• Interacted Border Color - The border color of the item when the item has been interacted with. This setting is only available if the item is set to interactive. If no color is set, the item border color will appear transparent once the item has been interacted with.

• Interacted Background Image - The background image of the item when the item has been interacted with. This setting is only available if the item is set to interactive. If no image is set, then no background image will display once the item has been interacted with.

• X Position (px) - Sets the position of the item along the x-axis. The x position will scale up/down relative to the actual image size displayed in the course.

• Y Position (px) - Sets the position of the item along the y axis. The y position will scale up/down relative to the actual image size displayed in the course.

• Width (px) - Sets the width of the item. The width will scale up/down relative to the actual image size displayed in the course.

• Height (px) - Sets the height of the item. The width will scale up/down relative to the actual image size displayed in the course.

• Animation X Start Position (px) - Controls the horizontal animation of the item when it is first displayed. The item will start animating from the value set to its current x position in the editor. The amount animated will scale up/down relative to the actual image size displayed in the course.

• Animation Y Start Position (px) - Controls the vertical animation of the item when it is first displayed. The item will start animating from the value set to its current y position in the editor. The amount animated will scale up/down relative to the actual image size displayed in the course.

• Fade Animation - Controls the fade animation of the item when it is first displayed.

• Scale Animation - Controls the scale animation of the item when it is first displayed.

• Animation Easing - This easing is applied to all animation properties set.

• Animation Delay (ms) - Delays the start of the animation in milliseconds.

• Interaction Type - Sets the interaction that occurs when the item is clicked. This setting is only available if the item is set to interactive. Each type is further explained below.

Tooltip

• Tooltip Text - The text that is displayed inside the tooltip.

• Tooltip Media Type - Sets the type of media to be displayed inside the tooltip. Depending on the type selected, further options will appear.

• Tooltip Media Layout - Sets the layout of the media relative to the text inside the tooltip.

• Tooltip Display - Sets whether the tooltip should display over the image or as a dialog. If the dialog is selected, then the below options are no longer available.

• Tooltip Position - Sets where the tooltip appears for this item. If Anchor to Item is selected, the tooltip will appear next to the item. The position will depend on where the item is positioned on the infographic. On mobile devices, the tooltip will always use the Cover Image position.

• Tooltip Fade Animation - Controls the fade animation of the tooltip when it is first displayed.

• Tooltip Scale Animation - Controls the fade animation of the tooltip when it is first displayed.

Show or Hide Items

• Select Items To Show - Set which items should be set to visible when this item is clicked. Only items that have their Visibility set to Hidden can be selected. Multiple items can be selected. When an item is displayed through this interaction, its animations will also run.
• Select Items to Hide - Set which items should be hidden when this item is clicked.

Behavior

Live Preview

• Display Item Outlines In Live Preview - Enable to show the editor item outlines in live preview. Once the course is published, the outlines will not display.

Completion

• Completion Method - Sets how the component will be completed.
  • Component In View - Sets the component to complete once the component has been scrolled into the browser viewport.
  • All Items Visible - Once all items are visible, set the component to be complete. This is useful when using the Show Hidden Item interaction.
  • All Interactive Items Interacted - Once all interactive items have been interacted with, set the component to be complete. This is useful when using multiple interaction type items.

Fullscreen

• Allow Fullscreen - Allows the infographic to be viewed fullscreen. A button is placed over the image that is used to open fullscreen. This is useful for mobile viewing.

• Open Fullscreen Button Position - Sets the position of the button relative to the image.

• Open Fullscreen Button Aria Label - Aria label for screen readers.

• Close Fullscreen Button Aria Label - Aria label for screen readers.

Accessibility

• Show Item Hover Styles on Focus - Enable to display the item's hover styles when an interactive item is focused.

• Allow Focus on All Items - If enabled, all items can be focused instead of just items that are interactive.

• Item Focus Outline - Set whether the focus outline comes from the theme or set a custom outline.

• Item Focus Outline Style - Sets the focus outline style for all items. This setting is only available if Item Focus Outline is enabled.

• Item Focus Outline Color - Sets the focus outline color for all items. This setting is only available if Item Focus Outline is enabled.

• Item Focus Outline Width - Sets the focus outline width for all items. This setting is only available if Item Focus Outline is enabled.

Tips

• If the course will be translated, consider making the items as large as possible. This will allow the text more room to expand into if the language has more words.
• Items don’t need to have text. This means you can place the item over areas on your image and make the item interactive. This results in similar behavior to the hotgraphic but is a lot more flexible and doesn’t require a pointer to be displayed.
• To control the focus or stacking order of the items, you can reorder the items by clicking on the Items control above the image. The item at the top of the list is the first to receive focus (if interactive) and appear underneath any other item overlapping it.
• Sometimes using the item position and resize controls can make it tricky to perfectly line up multiple items. You can edit the position and item size numerically by opening the item editor.
• Remember to set Image Max Width before adding and positioning items. The scaling applied to the item’s position, size, style, animation all use this setting as a reference point to scale up or down relative to the actual image size displayed in the course.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.