​

Use Text Over Media to add a section of large-sized text. This section type is often used to create chapter headings, as well as deliver pull quotes, highlight key data, and even to include full-screen images or looping video without text.

Text can be overlaid above a full-screen image or video, sit beside or above the media in half of the screen, or sit alone against a solid background color without accompanying media.

By default, one text field appears within the section but you can add more. The text fields can be moved, as a group, to one of nine positions using the arrow icons. Text within each of the fields can be resized using options that are shown to the left of the field on mouseover. Similarly, options for aligning the text left, right or centre within the field are available with an alignment button shown to the right of the field.

Video added to the background will be autoplayed, looped and muted. Autoplay video is not supported on all platforms, so a fallback image is also required and will show instead on those devices (e.g., mobile browsers and old versions of Internet Explorer).

Text Over Media 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 or video and overlaying text react to the page scrolling.

Text Over Media options include a Full width and a Half width layout. In a full width layout, the text appears overlaid on an image, whereas the half width option dedicates one side of the screen to the image, and one side to the text. As well as for stylistic purposes, this may be a preferred option when all other placements of 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 image to ensure that it sits well within the half-screen area.

Full-width sections also present options for the section to display at full height, half-height, third-height, and 150% of the reader's browser height.

The Overlay section option enables changing the visibility, opacity and style of a coloured layer that sits between the background image and text. The overlay can help text to appear clearer when it may otherwise blend in to the background colour and/or help the section blend into surrounding sections. Overlay options include a layer that fills the whole section as well as others that appear as gradients from solid-colour to transparent from the top, bottom, left, or right of the section or as a vignette surrounding the edges of the section:

​

The Background position section option changes the way the section responds to the sections that surround it : either scrolling up the page in the same way that text sections do, or appearing in a 'fixed' position as the rest of the page seems to scroll over the top of it.

Here's the "SCROLLS" option:

...and the "FIXED" option:

Background position is just one of a sub-set of section scroll effects. 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 what type of background media you have in the section.

​

To enable any of the scroll 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.

In most cases, buttons labelled 'IN' will apply the effect as the section scrolls up and into view, while buttons labelled 'OUT' will apply the effect as the section scrolls up and out of view.

In the case of the 'Zoom' effect for both text and background elements, the 'IN' button will cause the item to grow larger (zoom in) as the story is scrolled, while the 'OUT' button will cause the text or background to get smaller (zoom out) as the story is scrolled. The Zoom effect cannot be set to both IN and OUT, however other effects can be applied as both an IN and OUT effect: just click both the IN and OUT buttons so that both are highlighted with a green outline.

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 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 Text Over Media section, the padding changes will only be apparent if its foreground content (any content that isn't the background image or video) appears at the very top or bottom of the section.

For more information about section options, see: Section Options.

​