Content

To access the Pages Editor go to the page you want to edit and click the pencil icon at the bottom right to open the editor.

This will open up the editor with the editor on the left and the page preview on the right.

Overview

This section describes the main building blocks of a page, found under the content tab of the page editor.

Moving Content

After you’ve placed a block, you can move it to a different location on the page if you wish.

Select and hold the two bars at the bottom of a block and drag it to its new location.

Audio Basics

Adding Audio

Select the Add Audio button to add an audio block to the page.

Then select Choose audio to open the upload dialog box to select an audio file from your computer.

Deleting an Audio Block

If you need to delete an audio block, select the trash bin icon on the right-hand side of the block. 

Audio Options

Require play to end to proceed

This option will require the user to listen to all of the audio before they can move on to the next page.

Disable scrubber

This option will disable the scrubber on the audio player so the user cannot skip forward.

Note: Most common file types can be uploaded. Look at the audio file types at the bottom right of the upload dialogue box for more detailed information.

Enable Global Audio Player

Enabling the global audio player on an audio block will change it from a page audio feature to one that will play regardless of where you are on the app.

Once enabled, clicking on it will now show an audio play button in the right side of the toolbar that will display audio controls once opened.

Image Basics

Adding an Image

Select the Add Image button to add an image block to the page.

Then select Choose image to open the upload dialog box to select an image file from your computer.

Deleting an Image Block

If you need to delete an image block, select the trash bin icon on the right-hand side of the block.

Alternate Text

An accessibility option that allows you to add a few lines of text to describe an image to users using a screen reader. While not required, it’s recommended to help increase accessibility.

Note: Most common file types can be uploaded.  Look at the image file types at the bottom right of the upload dialogue box for more detailed information.

Image Display Options

Display Options will allow you to change how an image will appear on the page.

Toggling on use percentage width will let you change the size of the image on the page, from 5% of its size to 100% of its size, in increments of 5%.

Note: Most common file types can be uploaded. Look at the image file types at the bottom right of the upload dialogue box for more detailed information.

Percentage Width

Toggling on use percentage width will let you change the size of the image on the page, from 5% of its size to 100% of its size, in increments of 5%.

Margin 

This allows you to choose a percentage amount to fine tune where the image is displayed, moving right and left aligned images closer to the center. This only works on images where Start or End has been selected.

Alignment

This will change where an image is displayed on the page. Center is the default value, with the image automatically centered on the page.

Start will align the image on the left side of the page.

End will align the image on the right side of the page.

Border radius

Border radius lets you choose an amount, in percent, to curve the corners of an image.

You can set each corner to 5% to add gentle curves to a square image, or 50% to turn the square into a circle!  Each corner has its own separate value, so you can mix and match the curves to add even more visually interesting images to the page.

Text Basics

Adding a Text Block

Select the Add Text button to add a text block to the page.

Type or paste your text into the text box. Use Markdown for formatting.

Deleting Text Blocks

If you need to delete a text block, click the trash bin icon on the right-hand side of the block.

Options

Narration — An accessibility option allows you to upload an audio file version of the text that will display as an audio icon next to the text block that users can click and listen to.

Video Basics

Adding Video

Select the Add Video button to add a video block to the page.

Then select Choose video to open the upload dialog box to select a video file from your computer.

Deleting Video Blocks

If you need to delete a video block, select the trash bin icon on the right-hand side of the block.

Options

Add Closed Captions — You can add closed captions to a video by uploading a .vtt file here.

Require play to end to proceed — This option will require the user to watch all of the video before they can move on to the next page.

Disable scrubber — This option will disable the scrubber on the video player so the user cannot skip forward.

Enabling force premiere video mode on wide screens — will make the video fill the screen regardless of video size.

Most common file types can be uploaded. Look at the video file types at the bottom right of the upload dialogue box for more detailed information.

PDF

Adding a PDF Block

Select the Add PDF button to add a YouTube block to the page.

Deleting a PDF Block

If you need to delete a PDF block, select the trash bin icon on the right-hand side of the block.

Renaming a PDF Block

If you need to rename a PDF block, use the Name field to do so.

YouTube

Adding a YouTube Block

Select the Add YouTube button to add a YouTube block to the page.

Type or paste a YouTube video link into the box to have it display on the page.

Deleting a YouTube Block

If you need to delete a YouTube block, select the trash bin icon on the right-hand side of the block.

H5P

Add H5P allows you to add an H5P embed to the page to include interactive elements on the page. H5P content creation must be done separately outside of T-BIDS, this feature only allows you to embed already created content.)

Select the Add H5P button to add a link to your created H5P content.

The H5P content will show up on the page, and can be moved and rearranged like any other content piece.

Great job! You now know how to use the Content Editor, the next step is learning how to edit Features.

Onwards to editing Features!