Skip to main content Skip to navigation

Add a HTML block

A HTML block is a blank block used to add text, multimedia, widgets etc to a site front page or course page.

The HTML block is one of the most flexible and versatile blocks in Moodle. It uses the standard Moodle Text editor for formatting text, adding images or creating links, switching to code view and, importantly, allows any valid HTML mark-up to be used.

It therefore enables the creation of custom menus, embedding video, sounds and other files, as well as Twitter or other social media feeds. You can add mutiple HTML blocks to a single Moodle space.

See these pages for information on adding, moving and deleting blocks.

Add HTML block from menu

To setup your new HTML block, click on the cog icon, then 'Configure (new HTML block) block'.

New html block

This will open a window with an optional Block title field (1), and a Content box (2) that will be familiar if you have added activities or resources previously that have a 'Description' field (see the 'Text editor' guide for more information on the options available).

HTML block editor

The content toolbar includes options to change between WYSIWYG and HTML views (3), add and remove links (4), and insert images and videos (5).

Creating a link

Add HTML Link

  1. Add text for the link and select it.
  2. Click on the 'link' button to add a hyperlink.
  3. Add a URL.
  4. Choose if you want this to open in a new window or replace this one.
  5. Click 'create link' to finish.

Add as many links as you wish. You can also insert an image, select this and add the link to it.

Save the block - if this step is not done and you navigate away, the changes will be lost.

Adding a twitter feed

An HTML block can be used to display the latest tweets from any Twitter account.

  1. Log in to Twitter
  2. Go to https://publish.twitter.com/
  3. Enter the Twitter address e.g. https://twitter.com/warwickuni then click the 'Create widget' button
  4. Add and configure a new HTML block to your Moodle space (as above)
  5. Click the 'Edit HTML source' button (< >) then copy and paste the code provided by Twitter into the HTML sourcemoodle-html-twittter-code.png
  6. Click the 'Save changes' button

The new block will appear in the right hand column.

HTml Block with tweets

Using a HTML block as a menu

One of the more effective uses for the HTML block is in providing a consistent module / department wide navigation menu - particularly for links to external (SiteBuilder and elsewhere) pages. Below you can see an example from Classics.

HTML Menu from Classics

As you can use any standard HTML including Bootstrap, it is possible to create horizontal menus using tabs or pills, with panes, and even collapsible accordions to create more complex versions:

HTML Menu from Chemistry

For more information on this, please contact moodle at warwick dot ac dot uk.


Moodle.org - HTML Block

The information on this page relates to Moodle v3.4 and was last updated October 2018.

Contents

Filter by tool, task or content