Bands

The Building Blocks of Landing Pages

Summary

Bands are horizontal containers used to layout content on Landing Pages. A Band may have up to four (4) columns into which content is placed. Multiple Bands can be stacked on a page. Content should not be stacked within columns. 

Audience

Web Managers and Publishers can add Bands.

How To

  • 1

    Add the First Band to a Landing Page

    • When creating a new Landing Page, scroll down to the section heading for Bands and locate the Add New Band button, indicated by a blue square icon with a white plus sign.
    Add First Band icon.
    • Select the Add New Band icon to add a new Band to the page.
    • Enter the Band’s title and choose the desired column layout, up to four columns.
    • Expand Band Settings to configure the Band as desired, then click the Save button.
    New Band Column Layout
    • The new Band is added to the page. 
    • Columns are indicated by a light gray dashed outline. Each column contains a gray-and-white Add Content icon for adding new content within the columns of the Band.
    • Note: After adding this first Band, the blue Add New Band button will appear at the top and bottom of the Band, allowing you to insert more Bands above or below the existing one.
  • 2

    Add Content to a Band

    • To add content within the column of the Band, select the gray-and-white Add Content icon in the desired column. Columns are indicated by a light gray dashed outline. 
    Add Content interface.
    • After clicking the Add icon, select the content component you wish to insert.
    • In this example, a CTA Card is added, which appears in the first column of the Band after clicking Save.
    Choose Component menu.
  • 3

    Duplicate Page Content on a Landing Page

    • You can reuse Content Components by cloning them with the Duplicate icon.
    • The toolbar appears when you mouse over the content.
    • The Duplicate icon looks like one square on top of another.
    • The copy appears below the original, touching it with no spacing. Content should not be stacked within columns because it creates visual clutter. Drag and drop the item into an empty column.
    Duplicate Content
  • 4

    Add a New Band Above or Below an Existing Band

    • You can quickly add more Bands to a Landing Page by clicking the Add Band icon above or below an existing Band.
    • Band Controls are invisible until you mouse over the Band.
    • Band Controls are solid blue with a solid blue outline. Content Controls are gray. 
    • Columns are indicated by a light gray dashed outline. 
    • After clicking the Add Band icon, select the number of columns and adjust the settings as desired.
    Add Band Above or Below an Existing Band
  • 5

    Add Columns to an Existing Band

    If you have an existing Band and need more columns, you can add columns to a total of four. This example demonstrates changing a one-column Band to a two-column Band.

    • Hover over the Band to make the toolbar appear and select Edit indicated by the Pencil icon.
    Edit Add Columns
    • When the Edit Band window appears, select the two-column layout.
    • Note: When starting with a one-column Band, you have the option to move the existing content to any of the new columns. In this example, the content moves to the first column.
    Add New Column
    • A new empty column is added to the Band. Columns are indicated by a light gray dashed outline. 
    Edit Add New Column
  • 6

    Remove Columns from an Existing Band and Set a Destination for Orphaned Content

    • Hover over the Band to make the toolbar appear and select Edit indicated by the Pencil icon.
    • When the Edit Band window appears, select the desired number of columns. In this example, Column 4 is removed.
    Remove Columns
    • When the new number of columns is less than the current selection, you must choose where to move orphaned items.
    • Use the dropdown menu to select a new home column for displaced content. In this example, the content from Column 4 is placed into Column 2.
    Remove Column
    • The displaced content appears below the existing content, touching it with no spacing. Content should not be stacked within columns because it creates visual clutter, but this is easily fixed by dragging and dropping the content into a different Band. You can either: 
      • drop the content into another Band you have already added to the page, or
      • drop the content anywhere on the page. This creates a new Band for the moved content. 
    Moving Orphaned Content
    • Note: When reducing a multiple-column layout to a single column, the first column is renamed Content since it is the only column in the Band.
  • 7

    Duplicate a Band and Its Content

    • You can copy an entire Band and its content with the Duplicate Band icon. The copy is placed below the original. 
    Duplicate Band
  • 8

    Rearrange Bands on a Landing Page

    • You have two options for rearranging Bands on the page. You can:
      • drag and drop the Band into a new location, or
      • select the Move Up or Move Down arrows.
    Move Band Up or Down arrows
  • 9

    Delete a Band or Content from a Landing Page

    Delete a Band and its Content

    • Hover over the Band you wish to remove.
    • When the blue Band Toolbar appears, select Delete, represented by a trashcan icon.
    Delete Band
    • You are next prompted to confirm or cancel deletion. Deletion cannot be undone. Clicking Delete removes both the Band and its content. 

    Delete Content in a Band

    • Hover over the content you wish to remove. 
    • When the gray Content Toolbar appears, select Delete, represented by a trashcan icon. 
    • You are next prompted to confirm or cancel deletion. Deletion cannot be undone. 
    Delete Content
  • 10

    Edit the Band's Title and Band Settings

    • Hover over the Band you want to edit.
    • When the blue Band toolbar appears click Edit, indicated by the Pencil icon.
    • Change the Band's title and settings as desired, then click Save.
    Edit Band Title and Settings