Skip to main content

Text section

One or more columns of text.


​

By default a Text Section includes a single column of text, which can be placed to the left, centre or right of wide screens. The column will be central on small screens such as portrait-mode phones.

Text is rendered on the page in blocks. Each block can be styled using the button shown at the top-left of each block on mouseover. Style options include:

  • Paragraph text (the default text styling)

  • One of six heading styles (H1 - H6)

  • A Quote

  • Text with a styled drop-cap (large initial letter)

  • A numbered-point list

  • A bulleted list

  • An indented paragraph

  • A breakout box

Text within blocks can also be aligned left, right or centre using the alignment button:

More complex block-level text formatting is available with the 'Text formatting' button:

Changes available with this menu include font and alignment, colour (and opacity), font size, letter spacing, line height, and block spacing (the vertical space between adjacent blocks of text). The "Apply to all in section" button at the bottom of this menu will apply the settings to all of the text blocks within the same story section.

Highlighting text within a block enables other style options including:

  • bold

  • italics

  • underline

  • superscript

  • subscript

  • linking text

This menu also has advanced text-formatting options available to apply to selected words:

Along with font, colour, and size, these options allow for letter spacing (between letters), line height, vertical offset, and rotation.

Adding inline media

Images, video (files you upload or ones hosted at YouTube) and SoundCloud clips can be added between paragraphs of text, by clicking Media. You can also easily attach a link to inline images.

Other media items can be added too. If your subscription allows for inline HTML, you can add a wide variety of media (charts, maps etc). Click on the HTML button between paragraphs and paste the relevant HTML code. Use Embed Responsively to ensure the HTML is responsive so that the items will look good at multiple screen sizes.

Inline image guidelines:

  • The widest that inline images will appear is 800px (apart from in tablet portrait view, when they are shown at 110% the width of the text column). To ensure your inline images fill the full width of the column, upload them at at least 800px wide.

Adding an extra column of text

A text section can contain two columns in a desktop view.

To add the additional column, click one of the green boxes that appear to the left or right of your current column. You'll be given the option to choose whether the new column is used for Scrollmation images (in which case, the section behaves as if the Scrollmation section type was chosen from the section chooser), or text.

The position of the two columns can be swapped by clicking the grey double-arrows shown between them.

A section with two columns will display with just a single column on narrow browsers such as phone/mobile screens. In that instance, the text that appears in the left column in desktop mode will render at the top of the page in mobile mode, followed by the text from the other column.

Adding a column for images

Adding an extra column for images uses the same basic process as adding an extra text column, and will convert a text section into a Scrollmation section.

Adding background images

Click the "ADD BACKGROUND MEDIA" button in the top left of a text section that contains a single column, and the section converts to a Background Scrollmation section.

Adjust column width

Text columns can be adjusted to best suit the text and images in your story.

Note: Text column width can only be adjusted within Text, Scrollmation, and Background Scrollmation sections.

To adjust a text column, hover over either of the outside lines at the edge of the text column. The line will be highlighted and a handle will appear.

For more, see adjust text column width.
​
​

Section Options

Text sections support options including, if your theme allows for it, changes to colours for the text and background and options for setting the padding at the top and bottom of the section: changing how close it appears to the preceeding or following section.

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

Did this answer your question?