The Icons

Every editable item in Elucidat has a set of Icons which allow you to edit it.

The icons will depend on the design of the page and what the item is, for example a text box will have a ‘Typography’ icon:

…and an image box will have an ‘Image’ icon:

You will encounter a few different icons during your time in Elucidat. Here is an overview of them:

Edit icon

Every item that is editable will have an Edit button in the top right.

When you click an item’s Edit icon all of the parameters you can control will be displayed.

Typography icon

The Typography icon allows you to change the Typography of individual items or the whole page.

By default we use Google fonts, these can be viewed here.

You can only select one font per project. This is in order to maintain fast download speeds particularly on mobile phones.

You can have more than one font in your theme, please get in touch if you would like to.

Position icon

The Position icon allows you to move an item around the page.

Resize icon

The Resize icon allows you to change the size of the item.

Note: Not all items are re-sizeable both ways. Some will only allow you to resize the height or the width.

Colour icon

The Colour icon allows you to select colours for the item you are editing.

You can choose both Text and Background colours.

Background colours are arranged as a gradient going from top to bottom.

If you would like a single solid colour only add a colour to the ‘Top’ field.

A colour picker is included for your convenience.

Image icon

The Image icon allows you to upload an image to your page.

The image size preview tells you how big you should make your image before uploading it, this is important if your Learners are using Internet Explorer 8, learn more about this here.

To upload images you can drag them onto the area titled ‘Drop images here to upload’.

Once you have uploaded an image you can reposition it or resize it using the image controls:

The ‘Image mode’ selector allows you to choose between image modes:

Cover: Ensures that the image fills out the entire box leaving no gaps.

Contain: Makes sure that the entire image is always shown - by sizing it so that it fits within the box.

Fixed: Allows you to choose a zoom level, using the Image size slider.

Original: The image size will not be altered at all.

If you don’t have any images ready, why not try the ‘Image Library’.

For more information on images click here.

Delete icon

The Delete icon removes an item from the page.

If you delete an item accidentally, don’t worry, just don’t save the page.

Animation icon

The Animation icon allows you to add motion effects to your items.

Borders icon

The Borders icon brings up a panel that allows you to round the corners of the item you are editing and/or choose the amount of padding (space around the item) you want.

Note: Rounded corners are not supported in Internet Explorer 8.

Add Option icon

The Add Option icon adds a new option to your page.

  • In the case of Hotspot templates, it adds a new Hotspot.
  • For Questionnaire templates, it adds another Answer.
  • For Sequence templates, it adds another sequence screen.
  • In Multiple Boxes text and image screens, it adds another text box/image field.

Answer is icon

The Answer is icon allows you to set whether an answer is correct or incorrect in Questionnaire screens.

Video icon

The Video icon allows you to upload video to your page.

You can drag video files onto the drop area, or enter a URL of a YouTube video.

For more information on Videos, click here.

Link Icon

The Link Icon allows you to link elements of your project to other Pages.

The Link Icon can be found in 'Menu' pages.

Audio Icon

You will encounter the Audio Icon when uploading audio, for more information, see here.

Drop target icon

The drop target Icon allows you to specify the destination of answers in ‘Drag and Drop’ interactions.

Icon control

The Icon control:

allows you to specify an icon that will display on the area you have chosen to edit.

You will be able to choose from this assortment of icon options: