Columns, Text & Media

Overview

Use the Columns, Text & Media paragraph type to create content arranged in up to six columns. Each column can contain images, text, links, or downloadable files. You can also display image-based columns as a slideshow and choose whether image captions appear below the image or only when users hover over it.

Add Columns, Text & Media

Add Columns, Text & Media to any Basic Page, then customize the paragraph’s general settings and display options.

  1. In Main Administrative Menu, navigate to Content.
  2. In the Content Overview table, locate the page you want to edit and click Edit. The page editor opens.
  3. Scroll to the bottom of the page editor. From the Add Section dropdown, select Add Columns, Text & Media.
  4. In the Headline area, enter a name or introductory text (optional). Use the text editor toolbar to apply formatting and styles.
  5. Choose one of the following layouts: Content Teaser or Text & Media.
    • Note: The Content Teaser element is still available but is no longer actively developed and is marked as deprecated.
  6. Set up Display Options (see Field Reference below).
  7. Click Save.
    • You can review any change before saving it with the Preview button.
    • To make new content visible on your website, turn on the Content is live (published) option.

Field Reference

Headline
Use the text editor tool to add free-form text at the top of the paragraph type. For more information about text editing options, see Text Editor.

Column
Choose a layout to structure your content into columns:

  • Add Text & Media:
    • Text content (with all text editor features)
    • Clickable image (when a link is provided)
    • Link
    • PDF file with a preview image
  • Add Content Teaser (deprecated):
    • Link
    • Clickable image
    • Brief description (limited text editor functionality).

Display Options

Number of Columns
Set the number of columns to display (1-6 columns in a row).

Spacing Size
Choose the spacing for the elements. For best results, use larger spacing sizes with layouts that have fewer columns or larger content areas.

Spacing Mode
Select how to apply the spacing. Compact adds spacing only between items, while Balanced also adds spacing around the outside of the section.

Background-Colour Paragraph
Set the overall paragraph's background color.

Item Background-Color (Text & Media only)
Define a background color for column items to add visual emphasis. The selected color is applied consistently to all items in the column.

  • Background-Colour Paragraph and Item Background-Color settings work independently and can be combined as needed.

Show as slideshow
Display columns as a slideshow. Only the specified amount of columns is visible at once. On mobile devices only one item is displayed.

Text on hover
Show image text on hover instead of showing it below the image.

Show full width
Expand the section to the full available page width.

Published
Make the content visible to site visitors. If disabled, the content remains visible only to editors.

Advanced Settings

Anchor Label
Enter a unique anchor label to enable page jump links and sub-navigation. Avoid using a label that already exists elsewhere on the page.

Additional CSS Class(es)
Use this field when a content item requires a special display style. Available classes are typically used for custom layouts, highlighting, or other design variations.

Quick Demo: Access controls to add and configure Columns, Text & Media.

Layout examples

You can find layout examples on our Demo Page.