How to Create Your Programme Using the Stacked Layout

The Stacked Layout is a modern programme display option available in ShowOff, alongside our existing Table, Calendar, Columns, Timeline, and Masonry layouts.

Designed specifically for conferences, exhibitions and multi-day events, the Stacked Layout presents sessions in a clear, structured schedule view, making it easy for attendees to browse what's happening by day, time, location and stream.

See It in Action

Want to see the Stacked Layout before configuring it?

View our live demo here:

https://composer.showoff.asp.events/seminars/stacked

The demo showcases a typical multi-day conference programme and demonstrates how the layout behaves across desktop and mobile devices.

What Does the Stacked Layout Look Like?

When configured for a multi-day event, attendees will see:

Date Tabs

A row of date tabs displayed across the top of the programme.

Attendees can switch between event days by selecting a different tab.

Time Navigation

A time navigation panel displays alongside the programme, allowing attendees to jump directly to a specific time of day.

On mobile devices, this navigation automatically moves to the bottom of the screen.

Session Cards

Sessions are displayed as individual cards containing information such as:

• Session title
• Description
• Time
• Location
• Speakers
• Streams
• Sponsors
• Session image
• Add to Calendar button

The layout can automatically highlight the current day and time when attendees view the programme during the event.

Getting Started

To create your programme using the Stacked Layout:

1. Add a Seminars widget to your chosen page.
2. Select Stacked from the Programme Layout dropdown.
3. Open Advanced Settings to configure the appearance, content and navigation options available within the layout.
4. Save your changes and preview the page to see your programme displayed in the Stacked Layout.

Settings are organised into four sections:

• General
• Content
• Date Tabs
• Time Navigation

General Settings

Stream Key

The Stream Key displays a colour-coded legend above the programme, helping attendees identify different streams or tracks.

You can choose whether this legend is displayed.

Note: Stream Keys must also be enabled within the library settings.

Filter Counts

Enable or disable the session count displayed next to filter options.

For example:

• Workshops (12)
• Keynotes (4)

Disable this option if you prefer a cleaner appearance.

Show Empty Filters

Choose whether filter options with no matching sessions remain visible.

Enabled

All filter options are shown.

Disabled

Filter options with no matching sessions are hidden.

Session Card Settings

Navigate to:

Content → Session → Content Settings

These settings control the information displayed on each session card.

Session Title

Session titles are always displayed.

You can customise the title colour to match your event branding.

Description

Control how session descriptions are displayed.

Options include:

• Show or hide descriptions
• Customise description text colour
• Set the number of characters displayed before a "Read More" link appears

If a session has an Abstract, this will be displayed. Otherwise, the session content will be used.

Session Image

Show or hide images on session cards.

Images are pulled from the session's Related Image field.

Note: If no related image has been assigned, no image will appear for that session.

Time

Control how session times are displayed.

Options include:

• 12-hour or 24-hour format
• Custom time text colour
• Show or hide the clock icon
• Custom clock icon colour
• Display the attendee's local time alongside the event time

Location

Display session locations on session cards.

Options include:

• Show or hide location
• Custom text colour
• Custom icon colour

Note: Locations must be linked to a valid room or stand record within the CMS.

Date

Display the session date within each card.

This is most useful when sessions are grouped by something other than date.

Options include:

• Show or hide date
• Custom text colour
• Custom icon colour

Stream

Display stream information for sessions.

Options include:

• Show or hide stream indicators
• Display the stream name as a coloured label

Sessions must be assigned to a stream for this information to appear.

Sponsor

Display sponsor information on session cards.

Options include:

• Show or hide sponsor details
• Customise the sponsor label text
• Customise label colours

Example:

Sponsored by: ABC Company

Speakers

Control how speakers appear on session cards.

Options include:

• Show or hide speakers
• List or grid layout
• Show speaker photographs
• Select image size
• Show speaker titles (Dr, Prof, etc.)
• Show speaker group headings

Additional Speaker Groups

If your event uses additional speaker roles such as:

• Panellists
• Moderators
• Facilitators

you can choose which groups appear on session cards.

Add to Calendar Button

Enable an Add to Calendar button for attendees.

When selected, attendees can add the session to:

• Google Calendar
• Outlook
• Apple Calendar
• Other compatible calendar applications

You can also select the button style from your theme settings.

Break Session Styling

Navigate to:

Content → Session → Break

You can customise the background colour used for:

• Breakfast
• Break
• Lunch
• Dinner

This helps attendees quickly distinguish programme breaks from standard sessions.

Session Tags

The Stacked Layout supports three session badges:

• Featured
• Sponsored
• New

Each badge can be configured independently.

Options include:

• Show or hide badge
• Background colour
• Text colour

Badges only appear on sessions that have been marked accordingly within the CMS.

Date Tab Settings

Navigate to:

Date Tabs

These settings control the appearance of the day selector displayed above the programme.

Date Display Format

Choose how information appears within each date tab.

Style 1

MON
5 MAY

Style 2

5 MAY
MON

Alignment

Choose whether content is aligned:

• Left
• Centre
• Right

Day and Month Formats

Choose between:

Short Format

• Mon
• Jan

Full Format

• Monday
• January

Day Number Format

Choose from:

• 05
• 5
• 5th

Date Tab Styling

Customise:

• Background colour
• Text colour
• Font
• Border colour
• Border width
• Corner radius

Separate styles are available for:

• Default state
• Active state
• Hover state

Past dates automatically appear with reduced opacity.

Time Navigation Settings

Navigate to:

Time Navigation

These settings control the hourly navigation menu.

Navigation Position

Choose whether the navigation appears on the:

• Left side of the programme
• Right side of the programme

On mobile devices, the navigation automatically appears along the bottom of the screen.

Styling

Customise:

• Background colour
• Text colour
• Font
• Corner radius

Separate styles are available for:

• Default state
• Active state
• Hover state

Recommended Programme Setup

The way your sessions are grouped determines how the Stacked Layout behaves.

Recommended Configuration

For most conferences and multi-day events we recommend:

Group by Date → Start Time

This provides the full Stacked Layout experience, including both date tabs and time navigation.

Attendee Experience

When attendees open the programme:

• Today's date is automatically selected when applicable
• The programme automatically scrolls to the current time
• The current time block is highlighted
• Selecting a different date updates the visible sessions
• Selecting a time jumps directly to that section of the programme

This makes it easy for attendees to find what's happening right now.

Things to Keep in Mind

Some information will only appear when the relevant session data has been completed.

For example:

• Session images must be uploaded to the Session Image field.
• Locations must be assigned to the relevant session within the CMS in order to display on the front end.
• Sponsors must be linked to sessions using the Sponsors field. For optimal performance, we recommend sponsor images are no larger than 500px × 500px and 100KB in file size.
• Streams must be configured and assigned to the appropriate sessions.
• Speaker information is automatically hidden for Breakfast, Break, Lunch, and Dinner sessions by default.

If information is unavailable, the corresponding section simply won't be displayed on the session card.

Summary

The Stacked Layout provides a modern, attendee-friendly way to display complex event programmes. With date navigation, time-based browsing, flexible session cards and extensive styling options, it is ideal for conferences and multi-day events that need a clear and engaging schedule experience.