- Creating a Flexible Layout Story
- Adding Content Blocks
- Resizing Content Blocks
- Rearranging Content Blocks
- Removing Content Blocks
- Content Block and Section Menu
- Story Content Width
- Mobile Responsiveness
The Flexible Layout is a brand new feature in Stories for users to dynamically drag and drop, resize, and rearrange blocks. It arrives as a beta experience on all Data & Insights domains in October 2022.
Creating a Flexible Layout Story
There are two options when creating a new Story: Classic Mode and Flexible Layout.
Classic Mode*: What you know Stories as today, they contain specific content block configurations, and templates, and offer a section toolbar to move and rearrange blocks within your Story.
Flexible Layout*: Drag and droppable blocks that may be resized or rearranged within your Story. You are not limited to moving things via the section menu.
*Note: Once you’ve chosen a layout mode for your Story, you cannot select a new one. If you decide at any point that you’d like to switch to either Classic or Flexible, you will need to create a new Story.
*Note: If you create a new story with flexible layouts and remove all the blocks, it will automatically become a Story with Classic Mode.
Currently Supported with a Flexible Layout
Beta users are able to do the following:
Add a media block to their Story
Add a text block to their Story
Add a Global Filar Bar block to their Story
Drag and drop all blocks into their Story
Drag and drop all blocks within a single section of a Story
Resize media blocks within their Story
Resizing text blocks within their Story
Currently Not Supported with a Flexible Layout
Beta users will not be able to do the following with the initial release (but you can expect this functionality to improve and be added to):
Resizing non-Socrata Visualizations within media blocks in their Story, including:
Resizing HTML Embeds
Resizing YouTube embeds
Resizing Story Tile Embeds
Editing an existing Story within a Flexible Layout
Adding an author block to their Story
Adding a spacer or divider to their Story
Adding a Hero image to their Story
Adding a Table of Contents to their Story
Using Templates in a Story using Flexible Layout
Dragging and dropping blocks between sections
Adding Content Blocks
Because this is a Beta, we’ve focused on a few key elements: Text, Media, and the Global Filter Bar.
To add blocks to the Story, click and drag one from the Content Block side panel and into your Story. You can also double-click a block and it will appear at the bottom of a Story in a new section.
Note: To get a text block above the global filter bar, double-click on the text box icon in the panel — this will add a new section with the text box in it. Then, hover over the section and use the up arrow on the section menu to move it to the top of the page.
We’ve automatically added a media block to any newly created Story so you can get started.
Wondering where the Templates are? They are coming later! We want to make sure we can improve and iterate on the base functionality in this flexible layout.
We’ve provided a handy guide for where the block will land as you drag it around the Story.
blocks will rearrange based on where you drag and drop other blocks.
If you don't see the block you're looking for, don't worry! They will be added soon!
You can copy blocks while using a flexible layout, to learn more click here.
Resizing Content Blocks
Once placed in your Story, you can easily click and drag it to resize the block.
Click and drag the bottom right of a media block to resize it.
Click and drag the right side of a text block to resize it.
Blocks are resized based on a minimum height and width.
You will notice that some blocks, like the Global filter bar, remain full width.
Rearranging Content Blocks
Rearrange blocks by clicking and dragging the top bar on a block.
Blocks will dynamically rearrange to optimize the overall layout. More specifically, we’ve optimized the layout for vertical compaction.
You can drag a new block from the Content Block side panel into a new section, but currently, you cannot drag existing blocks between sections.
Removing Content Blocks
Use the trash icon to remove a block from your Story.
Content Block and Section Menus
Remove a block by clicking on the trash icon.
Drag the block using the top menu bar to rearrange it in your story
Click the “Edit” button to change the content in the block.
Click the kebob to Swap, Copy, or Paste into a content block.
Sections still have the same menu options, to learn more, click here.
Story Content Width
Content width options will remain the same as Classic Mode, to learn more, click here.
Story Layout Mobile Responsiveness
We have not yet implemented responsiveness for Stories using a flexible layout.
Please sign in to leave a comment.