English

FAQ: Is it possible to edit text appearance, style, effects, and paragraphs in Esri Story Maps?

Question

Is it possible to edit text appearance, style, effects, and paragraphs in Esri Story Maps?

Answer

Yes, it is possible to edit text appearance, style, effects and paragraphs in Esri Story Maps. Generally, this is done through the configuration interface provided in each story map template. To overcome the limitations of the configuration interface, HTML tags can be used in text sections of the app templates. For even more customization, the story map app can be hosted locally and the source code can be altered as needed.

Editing text appearance, style, effects, and paragraphs through the configuration interface provided in each story map template

The table below lists the different capabilities and limitations in editing text appearance, style, effects and paragraphs using the configuration interface provided in each story map template:

TemplateAppearanceStyleEffectsParagraphsAdd Link
FontColorSizeBold / ItalicUnderlineStrikethroughIndentAlignmentBulletNumber
 
TourNoNoNoNoNoNoNoNoNoNoNo
JournalYesYesYesYesYesYesYesYesYesYesYes
CascadeYesYesYesYesYesYesNoYesNoNoYes
SeriesNoYesYesYesNoNoNoYesYesYesYes
ShortlistNoNoNoYesYesNoNoNoNoNoYes
Swipe / SpyglassYesNoYesYesYesNoNoYesYesNoYes
BasicNoYesNoNoNoNoNoNoNoNoNo

Editing the text appearance, style, effects, and paragraphs by altering the HTML code
To edit the text appearance, style, effects, and paragraphs in Esri Story Maps templates, add the HTML tags where the pencil icon This is the pencil icon. appears. This is applicable to the following sections:

Note:
Adding HTML tags in fields without the Edit icon (pencil) does not alter the text formatting. Instead, the tags appear as words on the screen.

The table below summarizes the HTML tags used to edit text appearance, style, effects and paragraphs. For more information, refer to ArcGIS Online: Supported HTML.

DescriptionHTML Tags
Bold<b>Text</b>
Italic<i>Text<i>
Underline<u>Text</u>
Horizontal rule<hr>
Font color<font color="#xxxxx">Text</font>
Font size<font size="x">Text</font>
New paragraph<p>Text</p>
New line<br>Text</br>
Unordered list<ul>
   <li> (Text 1) </li>
   <li> (Text 2) </li>
</ul>
Ordered list<ol>
   <li> (Text 1) </li>
   <li> (Text 2) </li>
<ol>
Email<a href="mailto:text@text.com">Email</a>
Hyperlink<a href="http://www.text.com">Text</a>
Insert image with alignment<img src="URL"align="left">
The cent symbol&cent
The copyright symbol&copy;
Registered trademark&reg;
Trademark&trade;

The image below shows the HTML tags used inline at the header (the title and subtitle sections).

This is HTML tags used in the header section.

The following image shows the HTML tags used for the image caption.

This is the HTML tags used in the picture caption section.

Creating media with different text appearance, style, effects, and paragraphs in a different graphic program before uploading to the Story Map template

Due to certain limitations in editing text in Esri Story Maps, create the text appearance, style, effects and paragraphs of interest using external graphics programs such as Adobe Photoshop, CorelDraw and GIMP. Upload the media to Esri Story Maps through the Add and Import options.

Hosting the story map app code in a local (own) server

To have more freedom in customizing a story map, download the app code from GitHub, customize the story map according to the desired styling, and host the Story Map app on a local server. For more information on hosting a Story Map app, refer to Story Maps Developers' Corner: An introduction to hosting your own Story Map.

Note: 
Hosting a story map on a local server in this instance means only hosting the configurable app code, which is downloaded from GitHub. Customizing the app code enables editing of text appearance, style, effects, and paragraphs according to preference. The content (text, images, maps, scenes) is still hosted on ArcGIS Online.

Hosting a Story Map app enables editing the font according to individual preference. Selection of fonts can be made from external sources such as Google Fonts. For more information, refer to Story Maps Developers' Corner: Jazz up your story maps with Google Fonts.

Related Information