Skip to main content

Add and configure sidecars

Sidecar blocks are a combination of media and story narrative that fill the display, creating an immersive experience in stories. Sidecars are made up of slides, and each slide has a media panel, which can contain one piece of media, and a narrative panel that can contain a mix of text, media, and maps. As readers navigate through a sidecar, the media panel changes what it shows for each slide. With sidecars, you can also adjust a map's location and visible layers in the media panel through map choreography and map actions.

Add a sidecar to a story

Use the following steps to build a sidecar:

  1. In the story builder, click the Add content button to open the block palette.

  2. Select Sidecar.

  3. Choose a sidecar layout: Docked, Floating, or Slideshow.

    A sidecar with one slide is added to the story.

    Note:

    You can change the layout at any time in the authoring process by selecting Change layout from the Options menu in the sidecar slide panel.

  4. Add content to the media panel by clicking one of the available options: image, video, code, map, chart, infographic, 360 image, embed, ArcGIS app, swipe, or color.

    Note:

    For more information about adding images or video to a media panel, see What media file types and sizes are supported in ArcGIS StoryMaps.

    Note:

    When adding an embed to the media panel, it is recommended that you also add an alternative image to the embed properties. The alternative image appears on smaller screens when there is not enough space to show the full, interactive embedded content.

  5. To add content to the narrative panel, click the Add content button and choose one of the available options: text, button, separator, code, map, media action, chart, infographic, table, image, video, audio, embed, ArcGIS app, or timeline.

  6. Click the New slide button in the slide panel to add a slide.

    A new slide is added to the sidecar after the currently selected slide.

  7. Repeat steps 4 through 6 above to add more slides.

When the sidecar is complete, continue building the rest of the story by scrolling past the end of the sidecar. The slide panel and the rest of the sidecar scroll out of view.

Action buttons

Actions are a useful storytelling tool. They are simple interactive elements that allow readers to trigger content updates. For example, you can configure a button that navigates a map from one location to another, or you can create a link that changes a "before" image to an "after" image of the same location.

There are two types of actions:

  • Map action—Updates a map by changing its location, zoom level, visible layers, feature pop-up, or any combination of these things. Map actions can be added to a briefing, frame, or story sidecar.

  • Media action—Replaces content in a sidecar media panel with a different piece of content.

Note:

In addition to action buttons, described here, you can also add action links to text in a sidecar narrative panel. For more information, see Action links.

Create action buttons

Use the following steps to add an action button to a sidecar narrative panel:

  1. Add a web map, web scene, or express map to the media panel of a sidecar slide.

  2. Click the Add content block button in the narrative panel to open the block palette, and select Map or media action.

    An empty, unconfigured action button is inserted in the sidecar narrative panel.

  3. Hover over the action button and click Add action on the toolbar to configure the action that will occur when the button is clicked.

    The actions menu appears.

  4. Choose from the available options to create a map action (to update the map view), or a media action (to show a different piece of content).

    • For a map action, configure the map view.

    • For a media action, select the type of media and add the media.

  5. Label the action button with a description of the action.

A configured action button is added to the sidecar narrative panel.

Tip:

You can add more than one action to a slide. Update the action labels so readers understand the action each button performs.

If you create a map action and do not configure its map view, it will act as a reset action. When clicked, the reset action returns the map to its initial view after another action has been activated.

Manage action buttons

Use the following steps to view, edit, unlink, and delete an action button:

  • To view an action, hover over the action and click View.

    The media panel updates to show the configured action state. When a map action is being viewed, click Edit action on the toolbar over the map to configure the action map view.

  • To reset an action, hover over the action and click Reset.

    The media panel updates to show its initial state. When the media panel contains a map, click Edit map on the toolbar over the map to configure the map's initial view.

  • To remove the action configuration, hover over the action and click Unlink.

    The configuration is removed, but the action remains.

  • To delete an action button, hover over it and click Delete.

    The action button is removed.

Duplicate a sidecar

Use the following steps to duplicate a sidecar with all of its slides:

  1. Click the More options button ⋯ in the sidecar slide panel.

  2. Select Duplicate sidecar.

The sidecar is duplicated below.

Delete a sidecar

Use the following steps to delete a sidecar and all of its slides:

  1. Click the More options button ⋯ in the sidecar slide panel.

  2. Select Delete sidecar.

The sidecar is removed from the story.

Sidecar building tips

Consider the following when building a sidecar:

  • Docked and floating layouts provide a vertical, scroll-based navigation experience for readers.

  • Slideshow layout provides a horizontal, click-based navigation experience for readers. It is a good choice when you have a small amount of content to add to the narrative panel.

  • In the docked layout, click the Switch panel placement button to switch the media and narrative panels and click the Change panel size button to change the size of the panel to small, medium, or large.

  • In the floating or slideshow layout, click the Panel appearance button to change the color, position, and size of the narrative panel.

  • Show different views of a map in the media panel across several slides by duplicating the slide and changing the extent and visible layers in each slide. This is called map choreography.

  • Slideshow layout is optimized for tablets and phones. On smaller screens, a reader can tap or swipe through the slides, and tapping Expand map allows them to pan and zoom the map.

  • Docked and floating layouts are optimized for tablets and phones. On smaller screens, sidecar slides are stacked with the media panel at the top of the display and the narrative panel below.

  • When building a sidecar, a slide panel appears across the bottom of the display. You can use the slide panel to do the following:

    • Add, delete, duplicate, or hide a slide.

    • Add background audio.

    • Navigate between slides.

    • Reorder slides.

    • Change the transition style between slides.

Additional resources