Breadcrumbs

Banner Layouts

Banner-ready content in Activator is composed from layouts that live in the connected Design System. This page covers what a banner layout is, how layouts are added to a Design System, and the filtering behaviour authors will see in the editor.

What a banner layout is

A banner layout is the same concept used elsewhere in Activator — a pre-coded HTML/CSS unit that authors drag into a document. For banners, layouts carry additional metadata:

  • the viewport(s) they are compatible with — e.g. a layout might be valid for 300×250 and 300×600 but not for 728×90

  • whether the layout is intended for animated banners, static banners, or both

  • an animation description — a short human-readable summary of what the layout animates, used downstream in the MLR review so reviewers understand the intent of the animation

In the editor, the layouts panel filters automatically based on the currently focused viewport — only layouts compatible with that viewport are shown. This keeps the layouts panel small and relevant as authors switch focus between sizes.

image-20260519-113322.png


‌

Adding banner layouts

Banner-ready layouts are added to a Design System through source upload in the Design System UI. Anyone with the appropriate Design System permissions can add them, provided they have the HTML/GSAP knowledge to author the layout source.

When uploading a layout, the author:

  • Uploads the HTML/CSS source (and any assets) for the layout

  • Attaches viewport metadata so the layout is offered on the right viewports in the banner editor

  • Marks the layout as intended for animated, static, or both types of banners

  • Provides an animation description — a short human-readable summary of what the layout animates, used downstream in the MLR review

Since banner layouts often involve hand-authored animations (using GSAP timelines), this remains a technical task rather than a fully visual authoring experience. In-editor visual authoring of banner layouts is not part of the current release.

Developer guide. For the full front-end developer walkthrough — concepts, static and animated layouts, content-module fillable regions (ISI), packaging, and the checklist to run through before uploading — see Creating a Banner Layout.

Filtering and selection in the editor

When a banner is open in the editor, the layouts panel:

  • Shows only layouts marked as compatible with the currently focused viewport

  • Updates as you change viewport focus — switching from 300×250 to 728×90 updates the list to show only 728×90-compatible layouts

  • Filters out layouts that don't match the current animated/static toggle when that distinction is meaningful for the layout

If a layout isn't appearing where you expect it to, the most common reasons are:

  1. The layout isn't tagged with the viewport you're focused on

  2. The layout is tagged for animated banners and you're viewing the static representation (or vice versa)

  3. The layout isn't yet uploaded to the Design System you're using

For the first two, ask the Design System owner to check the layout's metadata. For the third, either upload the layout yourself (if you have the appropriate permissions and the layout source) or ask the Design System owner to add it.

Templates, Helpers, and Components for Banners

Banner documents are currently built only from layouts. Templates, helpers, and components are not supported for the Banners channel in this release.

  • Creating a Banner Layout — front-end developer guide for authoring banner layouts (static, animated, and ISI/content-module regions).

  • Banners — overview of the Banners channel.

  • Managing Layouts — general layout management across channels.

  • Design System Basics — Design System fundamentals.

  • Create a new Design System / Creating new content for DS3 — DS authoring workflows.