Basker Docs

Masthead

The large header at the top of an event, person, venue, season, and other content pages, built from that page's own details.

The Masthead is the large header at the top of a content page — an event, post, blog, person, season, series, work, venue, organization, or standalone page. It pulls in the page's own content and lays out its title, media, dates, and supporting details.

The Masthead always matches the kind of page it sits on — on an event page it shows event details, on a person page it shows person details, and so on — and cannot be switched to another kind. You tune what the matching version shows.

What each kind of page shows

The Details tab holds the fields drawn from the page's own content. The set of fields depends on the kind of page.

Event

The richest set. For each element you get:

  • A Show toggle (most on by default).
  • A Source — where the value comes from: Event Value (the event's own value), Manual (text you type), or Custom Attribute (a custom attribute on the event).
  • A Position — where it appears in the header. Description can sit in the Body or Footer Row; the dated and value elements (Dates, Time, Venue, Duration) add Details; the tag-style elements (Season, Series) add Tags.

The event elements are Prefix and Suffix (small text either side of the title), Description, Dates (with a Date Format of Long or Short), Time, Venue, Duration, Show Times (Display unique instance times as pills — off by default), Season, and Series.

Prefix and Suffix have their own SourceManual (the default), Custom Attribute, Venue, Dates, or Time — and do not offer the Event Value option.

A Booking Button group sets the call to action. Pick a button style from your theme; if you don't, the first available style is used. Optionally add an Icon with an Icon Position of Before Text (default) or After Text. When used on multiple pages sets what the button does for an event that runs across several performances — Scroll to Performances (default) or Go to Instances Page.

Post

  • Author and Publish Date (with a Date Format), each with a Source and Position.
  • Categories, Tags, and Lede (the post's short summary), each a Show / Hide choice.

Person

  • Default Role and Pronouns, each with a Source and Position.
  • Biography — show or hide.

Season and Series

  • Dates (with a Date Format) and Description.

Venue

  • Address, Website, and Description.

Organization

  • Type and Description.

Blog and Page

  • Description only.

Work

A Work page has no Details tab. Its Masthead shows the title and media, plus any custom attributes you add.

Each field can be set to Show or Hide. The fields that carry a value also offer a Source and a Position.

Custom attributes

On event, post, person, season, series, work, venue, and organization pages, a Custom Attributes tab lets the header surface custom attributes from the page's content. Use Preset is on by default and applies your theme's defaults. Turn it off to add your own: for each attribute, choose the Attribute and a Position of Tags, Body, Title Stack, Footer Row, or Details.

Choosing the media

The media-source controls live on the Appearance tab. On every kind of page the Masthead uses the page's main image as its background by default.

  • On an event page, Use Event Media (on by default) uses the event's image as the background. Turn it off to override it.
  • When you are overriding, set Media Type to Image or Video, then upload an Image Override or Video Override. Leave the override empty to fall back to the page's own image.

See media and files for managing the images and video a Masthead can pull in.

Layout

The Layout tab arranges the header.

  • WidthFull Width, Page (default), or Narrow.
  • HeightSmall, Medium, Large, Full (default), or Custom, which reveals a Custom Height slider from 200 to 1000 px.
  • Layout — how the media and text sit together: Half Background (Vertical), Half Background (Horizontal) (default), No Background, or Full Background. The half-background options add Media Placement, a media size, and a Full Bleed Media toggle.
  • Direction, Alignment, Position, and Section Gap (Small / Medium / Large) place the content within the header.

With No Background or Full Background, a Content Background group can sit a coloured panel behind the text: turn on Enable, then set its Width, Height, Background Color, Background Opacity, and Text Color.

Collapsible groups fine-tune each part. The Title and Description groups set width and alignment; the Tags, Body, Footer, and Details groups set alignment (Row or Stacked). The Details group also has a Show Detail Label toggle that prints each attribute's label beside its value, and a Buttons group arranges the booking button.

Appearance

The Appearance tab sets the look.

  • Color schemeSelect a color scheme from your theme. Turn on Custom Colors to override with your own Background Color and Text Color.
  • A Media group sets Media Position (Cover or Fit) and Media Overlay, which can layer a Color and an Effect over the background image. The colour overlay can be Solid or a Gradient (with a direction), plus a Blur; the effect is Grayscale or Sepia.
  • Style groups — Tags, Title, Body, Description, and Footer — set sizes, transforms, and borders. Title carries its own font size (in pixels or percent, with an optional separate mobile size), a Title Style of Bold and/or Italic, and a Prefix / Suffix Size. Footer adds a Pills appearance for its values.

Shared controls

The Masthead ships its own Layout and Appearance tabs (above), so it does not use the shared layout, background, and colour-scheme controls. These standard block controls do apply:

Example

On an event detail page, the Masthead carries the event's title over its own image. Leave Use Event Media on so the artwork loads automatically. Under Dates and Venue, set the Position to Footer Row so they sit in a tidy strip beneath the title. Add a Booking Button with a ticket Icon, and set When used on multiple pages to Scroll to Performances so a multi-night run sends readers down to the list of dates. Finally, under Media Overlay, add a dark Color so the title stays legible over a bright image.

Where to go next

On this page