D. Advanced Slide Design

In this module, we discuss advanced slide design requiring a little HTML.

As you make more use of StoryMap, you may become frustrated with the default slide layout options. With HTML, we can circumvent some of these limitations.


Estimated time: 10 mins.

Formatting text in the headline, caption and credits fields

We’ve already seen that the main text box on StoryMapJS includes buttons to create bold and italic text. But what if we want to italicise some text in a headline?

All the text boxes on a slide will accept HTML. You can include HTML tags directly in Heading, Credits, and Caption. So we can use the <i> tag to italicise selected text in the picture caption box.

HTML in the main text field

In the main text box, any tags you enter will be automatically ecaped. To enter HTML here, click the </> button for HTML view.

Using HTML in the main text field is quite powerful. If you put an image in the ‘media’ box, it will always appear above the main text. But what if we want an image to appear underneath the main text on the slide? We can achieve this with html. We insert the tag <img src="URL"> (where URL is the URL for our media) at the position of our choosing in the text box.

We can also use <iframe> tags to add additional media and content into the slide at our chosen locations. You can even use an iframe to embed a StoryMap within another StoryMap – though it is too small to use.

With HTML tags, we can lay out all the content of a slide using only the main text box, without relying on the default formatting and positioning of the Heading, Credits and Caption boxes.