Custom and inline HTML are available only on some Shorthand plans. To discuss adding these features, please get in touch.
Shorthand allows you to add HTML to stories, enabling the addition of custom components and creation of custom layouts that aren't natively supported by the Shorthand editor.
HTML can be added inline (into any text column), or via a standalone full-width section (Custom HTML section).
Inline custom HTML
Inline HTML can be added to text blocks in any section. Content added via inline HTML will usually be confined to the width of the corresponding text column, so it's a good option for when you need the content to fit within a specific context, for instance, in between paragraphs of text or in a grid item.
Custom HTML section
If your plan supports it, a section composed entirely of your custom code can be added from the same section chooser as other Shorthand sections. Within the Editor it will appear as a grey section with a scrollable content area in which to compose or paste your code.
A Custom HTML section within the Editor
Previewing the story will show the results of the code being applied rather than the code itself.
Within the Editor, Custom HTML sections can be reordered, deleted, linked to, and saved as section templates. Content added to a Custom HTML section will be subject to the full width of the page, which may require more care and coding to ensure that the content fits well within your story design.
Using media in Custom HTML sections
You can have your Custom HTML section reference images or video within the code, and these will be published with your story.
To do so, within the Custom HTML section code panel, place your cursor at the point at which you wish to reference the media, then click the ADD MEDIA button in the top-left of the code window:
This will open the media panel, in which you can select media from your computer or media library (and alternate versions for Large and Small screens if you wish). Within the code panel, the media is then represented as a green bar with a small preview of the image or video and an optional input field to assign it a class name. Within the code panel, the bar itself can be selected/manipulated like text in order to copy, paste, or delete it.
TIP: We recommend writing and editing your code in a dedicated code editor (such as Visual Studio Code) and pasting into Shorthand. This will be much more efficient and provide better formatting and debugging options, and you'll also have access to tools and revision tracking that are not available in Shorthand.
If you're embedding content from a third-party and they provide you with a URL for embedding, you can try using that URL with our Rich Embed feature, which may provide better results or be easier to use then embedding code.
For tips on third-party tools to explore, see Other Resources.
Note on responsive design: Whether you're using an embed code for a third-party tool or your own custom coding, please ensure that you thoroughly test how it behaves in your story and that it's fully responsive across screen sizes. You may find Embedresponsively.com helpful in fixing code that isn't responsive.