Add an HTML Block to a CLE Course

An HTML block can be added to the right-hand column in the sidebar of your course page.

It provides the standard text Editor for formatting text, adding images or creating links, and switching to HTML view, which allows any valid HTML code to be used. Audio, images, and other files can add unique elements to a course or site page.

 Examples of the HTML block

HTML_block.png

Add an HTML block

  1. Log into the CLE (cle.ucsf.edu),  and go to the course that you would like to add the HTML block.
  2. In the CLE course, click the Turn editing on button in the top right of the course. 
  3. Scroll down the course navigation panel and click Add a block in the bottom left of the course page. If your Navigation panel is collapsed, click the Navigation tray toggle (Hamburger menu icon, top left), and the Navigation panel will expand.

  4. Select HTML from the drop-down menu. The HTML block will appear below the other blocks in the right column, named (new HTML block).

    New_HTML_block.png

  5. At the right of the newly created HTML block, click the Edit icon (Moodle Update icon) and select Configure (new HTML block) block. The Configuring a (new HTML block) block page will open.

    Configure_Block.png

  6. In the HTML block title box, enter a Title for the block.

    Configure_HTML_block.png

  7. In the Content box, use text Editor to add formatted text, images, links or other content.

    Note: We do not recommend embedding video in a block as it is unlikely to fit within the width of the block. Images, however, will always resize in the text editor to fit the available space.
  8. (Optional) In the page content editor, click the show more buttons icon. show_more_buttons.png

  9. (optional)To enter HTML code, click the HMTL  icon (Embed icon) in the editing toolbar. The editor window will switch to a code view where can add any valid HTML code. You can click the HTML icon (Embed icon) again to view a preview in the Content box.

    HTML_editor.png

  10. Click Save changes to return to your course page and view. The block will appear on the right-hand side of your CLE course. 

    HTML_block_in_the_CLE.png

Editing an HTML block

  1. Click on the gear icon on the right-hand side of the HTML block.
  2. Select 'Configure (new HTML block) block'.

    Configure_Block.png

  3. Use text Editor to add formatted text, images, links, or other content of the block.

  4. Click Save changes to return to your course page.

Move or delete a block

    1. To move an item: Hover the mouse pointer over the four arrow icon and an alt text popup appears with the text 'Move item name'. Press and hold the mouse button, as you drag and drop the item into new location.

      Move_mouse_.png

    2.                               
    3. To delete an item: Click on the gear icon (cog icon) next to an item (block, resource or activity) and select 'Delete item name' from the action menu. A prompt will ask you to confirm that the item will be delet

      Delete_Block.png

      Blocks are very difficult to recover. If you are not certain that you wish to delete a block permanently, use the 'Hide block name' option in the block settings menu (see below).

Hide / Show a Block

You can hide a block from the student view (it will still be visible to editors) without deleting it.

      1. To hide an item: Click the Edit settings icon for the block that is to be hidden, click on the Eye icon with the label Hide block name.
      2. To show an item: Click the Edit settings icon for the hidden block that is to be shown, and click on the Eye crossed-out icon with the label Show block name.

 

Have more questions? Contact us