Interactive tiles are powerful tools for boosting learner engagement and breaking up heavy text. By requiring learners to actively click, flip, sort, or explore, you can transform passive reading into an immersive learning experience.
Try it yourself and see these interactive tiles in action in the interactive lesson below.
Buttons Tile
Buttons are a versatile way to guide learners through your course or direct them to external resources. You can add multiple buttons to a single tile and customize their layout.
To customize a buttons tile:
Click on the tile to open its context menu.
Use the alignment options to adjust horizontal positioning (left, center, right) and vertical positioning (top, middle, bottom).
Select your preferred button size (small, medium, large) and choose whether they should fit the text or stretch to full width.
Click on an individual button in the menu to edit its specific details.
For each button, you can set the destination type:
Next: Moves the learner to the next consecutive page.
Page: Jumps to a specific page. If the lesson is part of a course, you can select any page from any lesson in the course.
Link: Opens an external URL in a new tab.
File: Prompts the user to download an uploaded document or resource.
Flashcards Tile
Flashcards are excellent for vocabulary, definitions, and quick knowledge checks. You can display them in a standard grid layout or as a swipable carousel.
To edit your flashcards:
Click the flashcards tile to open the editor menu.
Choose your display mode by clicking either the Grid or Carousel icon at the top of the menu.
Add new cards by clicking the Add button, or reorder existing ones by dragging them in the list.
Click on a specific card in the menu to edit its front and back sides.
For both the front and back of each card, you can choose the content type. Select Text to type a rich-text message, or choose an image option. If using an image, you can set it to Image Full to cover the entire card, or Image Fit to ensure the whole image is visible.
Accordion Tile
Accordion tiles let you stack collapsible text sections on top of one another. This is perfect for FAQs, step-by-step instructions, or reducing visual clutter on text-heavy pages.
To build an accordion tile:
Click the tile to open the accordion editor.
Click Add to create a new expandable section.
Click on an item in the list to edit its content.
Type your section title in the header field, and add your main text in the content editor.
You can also enrich accordion items with media. Below the text editor, click Add to insert an image, upload a video, or embed external content. If you add an image, use the alignment tabs to position it to the left, center, right, or fill the space.
Tabs Tile
Tabs organize information horizontally, allowing learners to click through different categories without scrolling down the page. They are ideal for grouping related concepts.
To configure a tabs tile:
Click the tabs tile to open the editor.
Click on a tab item from the menu to open its specific settings.
Type a short, clear title in the label field (this becomes the clickable tab text).
Use the rich text editor to add your main content.
Just like accordions, you can add media to any tab. Click the Add button to insert an image, video, or web embed. This ensures each tab can be as visually engaging as a standalone page.
Process Tile
The process tile guides learners through a sequential, step-by-step flow. Learners click "Next" or "Back" to navigate through the interactive slides without leaving the page.
To set up a process tile:
Click the tile to open the process editor menu.
Toggle the Introduction or Conclusion switches to add optional starting and ending screens to your process.
Click Add to insert new steps, and drag them to rearrange their order.
Click on any step to add text, change text alignment, and upload supporting media.
You can also customize the background color of the entire process tile. Click the Background button at the bottom of the process editor to open the color palette and select a shade that matches your lesson's theme.
Hot Button Tile
Hot button tiles let you overlay clickable hotspots onto a background image. When a learner clicks a hotspot, a text box appears explaining that specific part of the image. This is highly effective for software walkthroughs, diagrams, and maps.
To create a hot button tile:
Click the tile and use the image uploader to add your main background image.
Click Add in the menu to create a new hotspot.
Click on the new hotspot item in the menu to add a heading and descriptive text.
Drag the hotspots directly on the image to position them over the correct visual elements.
Sorting Tile
Sorting tiles provide a hands-on activity where learners categorize different items. It is a highly engaging way to test comprehension and classification skills.
To build a sorting activity:
Click the sorting tile to open its menu.
Click Add under the Categories section to create your buckets (e.g., "Do's" and "Don'ts").
Type the category names directly into the menu list.
Add the sortable items that learners will drag and drop into these categories.
Chart Tile
Chart tiles allow you to visualize data directly within your lesson. You can choose between Bar, Line, Pie, Scatter, Radar, and Area charts.
To build and customize a chart:
Click the chart tile to open the context menu.
Use the Chart Type dropdown to select your preferred visualization.
Click the Edit Data button to open the spreadsheet interface.
Click Aria Label to add a descriptive summary of the chart for screen readers.
Inside the Edit Data interface, you can build your chart exactly like a spreadsheet. Type your category names in the left-hand Row Labels column. Add your data points into the columns on the right. You can also customize the color of each data column by clicking the color picker dot next to the column's label.