Text Block
Margarita Berezyanskaya
Last Update pre mesec
You can use the Text block to display course information, instructor contact details, announcements, or other formatted text. The TinyMCE editor also allows you to enhance the block by embedding images or graphics (such as a program logo), adding hyperlinks to frequently used websites, or including welcome videos and audio messages.
The power and flexibility of the Text block can be further enhanced by adding HTML code. To enter HTML directly, select the Source code tool in the TinyMCE editor and insert the desired code.
Entering HTML code may seem complex at first, but it is often easier than expected. Many websites and social media platforms provide ready-to-use HTML code that can be copied and pasted into a Text block to create interactive content.
For example, HTML code can be used to embed widgets such as YouTube videos, dictionaries, photo slideshows, clocks, or Padlet boards with custom messages. This feature provides many opportunities to enhance course content and create a more engaging learning experience.
Two examples of HTML blocks are found in the Stage 2/3 Exemplar course.
The Avenue Help block was created using the HTML editing tools in the TinyMCE editor. Specifically, the block was developed using the Insert Image and Insert Link tools to add images and hyperlinks.
The course also includes an example of an embedded YouTube video. To add the video, the YouTube Embed code was copied from the video page (by selecting Share) and pasted into the Text block using the Source code tool.
1. At the top of the Course Homepage, click on the Edit mode toggle button in the upper right corner of the screen to activate the editing tools.
Note: The toggle moves to the right, indicating that course editing is now on. Look for editing icons on the course page, this indicates that course editing is now on.
2. On the right side of the screen, click on the Open block drawer icon.
3. Click on the Add a block button that appears.
4. In the Add a block pop-up that appears, choose the Text... option.
Note: The Add Text block setting screen appears.
5. Type a Text block title.
6. In the Content box, enter text or add media as needed.
7. Click on the Save changes button.
1. With Edit mode on, ensure that the Block drawer is open.
2. Locate the Text block you want to configure.
3. Click on the block's Edit icon.
4. Choose the Configure (block name) option.
The Configuring a Text block page opens.
5. Enter or update the title in the Text block title text box.
6. Enter or edit the content in the Content box.
7. To add an image, click on the Reveal or hide additional toolbar items icon.
8. More icons appear. Click the Image icon.
Note: The Insert image pop-up appears.
9. Drag and drop an image into the upload area, or click the upload area to select an image from your device.
Note: The Image details window appears.
10. In the Image details window, review the image preview, enter a brief description (recommended for accessibility), and adjust the image size if needed.
Note: If the Keep proportion option is selected, the image's proportions will be maintained automatically.
12. Click the Save changes button in the Add Text block pop-up.
Note: The image will appear in the Text block similar to this.
Adding a Hyperlink
Use the following steps to create a hyperlink from the Text block.
13. Select the text or click on the image you want to turn into a hyperlink. When an image is selected, it is highlighted with a blue border.
14. Click on the Link button.
Note: The Create link window opens.
15. Enter the destination URL (web address) in the Enter a URL field.
16. To have the link open in a new browser tab or window, select the Open in new window checkbox. Leave it unchecked if you want the link to open in the current tab.
Note: For links to external websites, it is recommended to select Open in new window. This allows learners to easily return to the course by simply closing the new tab or window, rather than using the browser's Back button. For the best learner experience, be consistent in how hyperlinks are configured throughout your course.
16. Click on the Create link button.
Note: The process for creating hyperlinks is the same for both text and images. Simply select the text or image, click on the Link icon, enter the URL, choose whether the link should open in a new window, and then click Create link.
These instructions explain how to embed a YouTube video in a Text block. Before adding the video to your course, you will need to copy the video's embed code from YouTube.
Locating and Copying HTML Code for a YouTube Video
1. Open the desired video on YouTube.
2. Click the Share link located below the video.
3. In the sharing options, select Embed.
4. In the Embed video window, click Copy to copy the HTML embed code.
Note: The embed code is now copied to your clipboard and is ready to be pasted into a Text block.
Embedding the YouTube Video in a Text Block
1. With Edit mode turned on, ensure that the Block drawer is open .
2. Locate the Text block you want to configure.
3. Click on the Text block's Edit icon.
4. Choose the Configure (block name) option.
5. (Optional) Enter or update the Text block title.
6. In the Content box, add any text or instructions you want learners to see with the video.
7. Place the cursor where you want the video to appear.
8. From the TinyMCE toolbar, select View, then choose Source code.
The Source code pop-up appears.
9. Paste the YouTube embed code into the Source code window and click Save.
9. Click on the Save changes button.
The embedded video is displayed in the Text block on the course page. Learners can play the video directly within the course, expand it to full screen, or open it on YouTube.
Note: Avoid embedding a large number of videos on the same course page, as multiple embedded videos can increase page load times and affect performance.
Video Resources
Resources