The Title section is often the first section to appear in Shorthand stories as its default text fields are well suited to contain a title, subtitle, and author name.
Those fields can, however, contain any text content. It is also possible to start your story with any other section type, and to have none, or multiple Title sections in a story.
Along wih text, Title sections may include a background image, background video, or contain only text, with no background media.
The block containing title and subtitle text can be moved using the green arrow icons that appear to the left, right, top and bottom of the block, to one of nine positions across the screen.
Text within the block can be aligned left, right, and centre. It is possible, therefore, to have a title block on the right side of the page, but in which the text is left-aligned.
Text within the blocks can be resized and styled using the options that appear on hover:
H1, SEO, Titles, & Screen readers:
The First field in the Title section sets its text in the style H1. This lets search engines and other automated indexing systems and screen readers know that this text is the most important text on the page. While not essential, if you choose not to use a Title section as the first section in your story, or choose not to have a Title section, you may wish to mark another text field in your story as H1 to help these systems recognise it as the true title of the story. 'Best practice' for search engine and screen reader purposes is to have a single element on the page marked as H1, though it is technically possible to have multiple or none.
The Shorthand editor also uses the first text block styled as H1 in a story (or H2 if no H1 is present) to populate the story title in the HTML code of the story, and the other fields in a Title section to define a description and author in the HTML. These, again, are useful for a variety of automated systems that index or read the content of web pages. If your story doesn't contain a Title section, or if a Title section isn't the first section in your story, be sure to check the Settings tab in the Editor and make appropriate changes to the Title, Description, and Author fields. The text in those fields does not need to be drawn directly from text within the story.
Highlighting text shows other formatting options such as bold, italic, underline and more.
The Title Section also features a third text field (pre-filled with the name of the user that created the story, but can be used for whatever is most appropriate). This can be moved to the left, centre or right of the screen. You can also delete the text if you don't wish to use that field.
Media guidelines:
Images:
Full-screen landscape image: 2560px wide x 1440px JPEG at 100% quality,
Full-screen portrait image: 1080px wide x 1920px JPEG at 100% quality,
Prepare and crop images with a text area in mind. Use the overlay toggle to adjust the filter applied to your background, from 0-100%, to help your text stand out,
Images will be automatically cropped to the centre on portrait screens. You can use the focus point to adjust the crop, or upload a different image to be shown on portrait screens,
Please refer to our image templates for text safe area guides to ensure no detail is lost in cropping, and
Shorthand will automatically compress your JPG images for multiple device sizes.
Video:
You may choose to either upload a single video that will be cropped to fill both wide and tall screens, or upload videos specific to each format so that, for instance, your readers on a portrait-orientation phone are shown a different video to that shown to a reader on a laptop or desktop ('landscape') screen,
Landscape format - will fill wide screens: 1920px X 1080px (1280 x 720px can also be used),
Portrait format (optional) - will fill tall screens such as phones in portrait orientation: 1080px X 1920px,
100mb MAX (much smaller if possible),
Muted - (we recommend removing sound in editing to reduce filesize), and
Fallback image (same aspect ratio as your uploaded video). These images are shown before the video loads.
Section Options
Title sections support a number of section options including, if your theme allows for it, changes to the text colour, colour and opacity of an image overlay, change to the section height, and changes to how the background image and overlaying text react to the page scrolling.
The Title section options include a full width layout, a half width layout and one with text only (no background media). In a full width title layout, the title text appears overlaid on an image, whereas the half width option dedicates one side of the screen to the title image, and one side to the text. As well as for stylistic purposes, this may be a preferred option when all other placements of title text are likely to obscure important parts of the image.
The half width options also enable you to specify which half of the screen contains the image, and which half is for text. For landscape devices, the image can be placed to the left or right of the screen. On portrait devices, you may choose to have the image at the top or bottom half.
When changing from a full width to half width layout, you may find that you need to adjust the focus point of your Title image to ensure that it sits well within the differently-shaped image area.
Title sections using the full-width layout option can be set to display at full height, half-height, third-height and 150% height of the reader's browser.
Overlay options enable changing the opacity, colour and style of a layer that sits between the section image and text. An overlay can help the text to be more legible against a complex background image, help to blend the section into the following section, or simply as another stylistic approach:
Various styles for the Overlay section option
Scroll Effects
A sub-set of section options are effects that are triggered as readers scroll. There are scroll effects that affect the text in the section, and some that affect the background image/video. The range of effects available will depend on the type of backgrbamound media in the section.
A Title section with zoom, blur, and grayscale scroll effects
To enable any of the effects, click one of the square buttons next to the effect name. Applied effects will show a button outlined in green. To remove an effect, click the button again and the green highlight will disappear.
Multiple effects can be applied simultaneously: both text effects, and background effects. In combination, this allows for a wide variety of styles.
By default, text effects apply to all of the text in the section at the same time: ie, if the 'Blur' effect is applied, all of the text in the section will blur at the same time. A PER LINE toggle enables changing the effect behaviour so that text effects will instead occur line by line (eg, the first line of text will blur or fade or zoom before the second line, etc).
To test the effects you have applied, scroll through your story in the editor, or as a preview.
Section padding
To change how close the content of the section can appear to the section top or bottom, the padding can be set to small, medium, or large for each. In a Title section, the padding changes will only be apparent if the foreground content (any content that isn't the background image or video) appears at the very top or bottom of the section.
For more general information about section options, see: Section Options.