TrainMeUK LogoTrainMeUK

Adding Content Blocks

Add text, images, videos, and buttons to your pages

Overview

Content blocks (also called widgets) are the building blocks of your pages. Each block serves a specific purpose:

Block TypeWhat It Does
TextDisplay text content
ImageShow pictures and graphics
VideoEmbed video content
ButtonNavigation and actions

Adding Blocks

1

Navigate to the Page

Go to the page where you want to add content.

2

Click Add Block

Click Add Block in the toolbar (or + button).

3

Select Block Type

Choose the block type you need from the menu.

4

Configure in Inspector

Click the block to configure its settings in the Inspector panel.

Tip

New blocks are typically added at the bottom of the page. You can reorder blocks after adding them.

Text Blocks

Text blocks display written content like paragraphs, headings, and lists.

Text Block Settings

SettingDescription
ContentThe actual text
Heading LevelH1, H2, H3, or Paragraph
AlignmentLeft, Centre, Right
FormattingBold, italic, lists

Formatting Options

FormatUse For
BoldEmphasis, key terms
ItalicTitles, definitions
Bullet ListUnordered items
Numbered ListSteps, sequences

Writing Good Text

DoDon't
Keep sentences shortWrite long paragraphs
Use clear languageUse jargon without explanation
Break up with headingsCreate walls of text
Highlight key pointsBury important info

Image Blocks

Image blocks display pictures, diagrams, and graphics.

Adding an Image

  1. Click Add Block → Image
  2. Block appears with placeholder
  3. In Inspector, click Upload Image
  4. Select image file
  5. Image appears in block

Image Block Settings

SettingDescription
Image SourceThe image file
Alt TextDescription for accessibility
SizeDisplay size options
AlignmentPosition on page

Supported Formats

  • JPG / JPEG
  • PNG (supports transparency)
  • GIF (supports animation)

Recommended Sizes

  • Full width: 1200px wide
  • Half width: 600px wide
  • Thumbnail: 300px wide
  • Keep under 1MB for best performance

Tip

Always add alt text for accessibility. Describe what the image shows, like "Fire extinguisher types: ABC, CO2, and water" rather than just "Image".

Video Blocks

Video blocks embed video content from external sources.

Supported Video Sources

SourceURL Format
YouTubeyoutube.com/watch?v=xxxxx
Vimeovimeo.com/xxxxxxxx
Direct URLhttps://example.com/video.mp4

Video Block Settings

SettingDescription
Video URLLink to the video
AutoplayStart automatically (not recommended)
ControlsShow play/pause controls

Video Length Guidelines

Video LengthBest For
30-60 secondsQuick demonstrations
2-3 minutesExplanations, overviews
5-10 minutesDetailed tutorials
10+ minutesConsider breaking up

Tip

Always add context before your video and ensure videos have captions for accessibility.

Button Blocks

Button blocks provide navigation and actions.

Button Block Settings

SettingDescription
LabelButton text
ActionWhat happens on click
StyleVisual appearance

Button Actions

ActionWhat It Does
NextGo to next page
PreviousGo to previous page
Go to PageJump to specific page
ExitLeave the course

Button Labels

ActionGood Labels
Next"Continue", "Next", "Continue to [Topic]"
Previous"Back", "Previous", "Go Back"
Start"Start Course", "Begin", "Let's Go"
Exit"Exit Course", "Finish", "Close"

Reordering and Deleting Blocks

Changing Block Order

  1. Select the block to move
  2. Use up/down arrows in toolbar
  3. Or drag and drop
  4. Order changes on page

Typical Page Order

  1. Heading (text block)
  2. Introduction (text block)
  3. Visual (image or video)
  4. Key points (text block)
  5. Navigation (button)

Deleting Blocks

  1. Select the block
  2. Click Delete (trash icon)
  3. Or press Delete/Backspace key

Warning

Deleted blocks cannot be recovered unless you undo immediately. Copy text content elsewhere if needed.

Best Practices

Content Quality

DoDon't
Proofread textLeave typos
Optimise imagesUse huge files
Test videosAssume they work
Check accessibilityIgnore alt text

Page Composition

DoDon't
Mix content typesAll text or all images
Keep pages focusedCram everything in
Use white spaceFill every pixel
Guide the eyeCreate visual chaos

Troubleshooting

Text not saving

Check for unsaved changes indicator, try manual save, refresh and try again.

Image won't upload

Check file format, reduce file size, try different browser.

Video not loading

Verify URL is correct, check video is public, try different video source.

Button not working

Verify action is configured, check target page exists, test in preview mode.

Next Steps

Content blocks added? Continue to: