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 and narrative panel that can contain text, media, and maps. As readers navigate through a sidecar, the media panel changes to match the narrative panel content 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:
- Click the open button
to open the block palette. - Select Sidecar.
- 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 slide panel.
- Add content to the media panel by clicking one of the available options:
- Image or video—Upload or link to an image or video file. For more information, see What media file types and sizes are supported in ArcGIS StoryMaps.
- Map—Choose a web map or web scene from the map browser and configure it, or create an express map.
- Embed—Enter a URL link or iframe code.
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.
- Swipe—Compare two maps or images with the swipe block. You can adjust the map configuration or image display from the swipe options panel. For more information, see Add swipe blocks.
- Color—Set the media panel to be displayed as a solid color. Use the color picker to select a color or type a hex code.
- Add text, maps, media, audio, and timelines to the narrative panel. Add Media action buttons to allow readers to show different pieces of media or update the map view in the sidecar media panel.
- 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.
- Repeat steps 4 through 6 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.
Sidecar building tips
Consider the following when building a sidecar:
- Slideshow layout provides a horizontal, click-based navigation experience for readers.
- Docked and floating layouts provide a vertical, scroll-based navigation experience for readers.
- Slideshow 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.
Add map actions
Map actions are a useful storytelling tool that allow you to add simple interactive elements to your story.
Use the following steps to add a map action:
- Add a web map, web scene, or an express map to the media panel of a sidecar slide.
- Choose a button-styled or link-styled map action.
- For a button-styled map action, click the open button in the narrative panel to open the block palette and select Map action.
- For a link-styled map action, highlight the text you want to control the action and click the map action button
from the text editing toolbar.
- For a button-styled map action, click the open button
- Configure the map action button.
- For button-styled map actions, hover the pointer over the action button and click Edit on the toolbar to configure the map action that will occur when the button is clicked.
If you do not configure the map view for a button, it defaults to an Initial map view reset button. When clicked, this reset button returns the map to the initial map view.
For link-styled map actions, the map designer opens automatically when you click Map action on the text editing toolbar. This is where you configure the action.
- Label the map action button with a description of the map action.
- For button-styled map actions, hover the pointer over the action button and click Edit on the toolbar to configure the map action that will occur when the button is clicked.
A configured map action is added to the sidecar's narrative panel.
Note:
You can add more than one action button to a slide. Update the button labels so readers understand the actions the buttons perform.
Duplicate a sidecar
Use the following steps to duplicate a sidecar with all of its slides:
- Click More options
in the sidecar slide panel. - Select Duplicate sidecar.
The sidecar is duplicated below.
Remove a sidecar from a story
Use the following steps to delete a sidecar and all of its slides:
- Click More options in the sidecar slide panel.
- Select Delete sidecar.
The sidecar is removed from the story.