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 for the Banners channel in v3.6, 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

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 in v3.6 (configuration)

For v3.6, banner-ready layouts are added to a Design System via source upload by Anthill. This means:

  • An Anthill team member uploads the HTML/CSS source for each layout into the Design System

  • Viewport metadata is attached to each layout at upload time

  • Tenants don't author banner layouts directly inside the Design System editor in 3.6

This is a deliberate scoping choice for the initial release. Banner layouts often involve hand-authored animations (using GSAP timelines) that aren't yet expressible through the in-app Design System editor.

In a future release, banner layouts will be authorable directly inside the Design System editor — including UI for uploading source code, editing it through the UI, and configuring viewport metadata per 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 all three, contact your Anthill administrator.

Templates, Helpers, and Components for Banners

In v3.6, Banner documents are built only from layouts. Templates, helpers, and components are not supported for the Banners channel in this release. They will be added in a future release.

  • 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.