Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Marquee template family

This guide covers the features and and design of the discontinued Marquee template family.

For a more modern template with similar features to Marquee, we recommend switching to Brine. Fixing issues in discontinued templates like Marquee is a lower priority for us while we focus on our current templates.

The Marquee family's full-width banner images and videos set the tone for your pages' content. Parallax scrolling moves the banners more slowly than the content in the foreground, creating an illusion of depth and immersion. The blog has a sophisticated columns layout, and the stacked Index is great for sharing a lot of information in one long, scrolling page.

Templates in the Marquee family

All templates in the Marquee family have the same style options and features:

  • Marquee
  • Adversary
  • Alex
  • Eamon
  • Ginger
  • Mint
  • Shift

Supported pages

In addition to Layout Pages and Cover Pages, Marquee supports these page types:

Structure and style

Use these Site Styles options to change the look and feel of your site.

Feature Notes
Site header
  • Can display on or above the site's banners
  • Can stay fixed at the top as you scroll using the Fixed Position tweak
  • Set the background color with Site Header tweaks
Site title or logo
  • Displays in the top-left corner
  • Style the site title with Site Header tweaks
  • Logo size can't be changed
Main Navigation
  • Displays on the right
  • Style the links with Site Navigation tweaks
  • In narrow browsers, collapses to a ☰ icon
  • The menu background matches the header's background color
Tag lines
  • Don't display
Background colors
  • Background areas: Content, header, footer
  • Choose colors with Main Content tweaks
Folders
  • In headers, folder menu backgrounds match the header's background color
  • In footers, folder menu backgrounds match the footer's background color
  • On mobile, folders appear in the navigation with a + icon
Footers
  • Have footer navigation and content areas
  • Style the navigation links with Footer tweaks
  • The content area auto-detects the background color to make icons and text black or white
  • Text links are underlined.
Hover effects
  • In Gallery Pages, captions and titles show on hover in slideshow and grid designs
  • In Products Pages, product titles and prices display in color overlays on hover
Mobile
Share buttons
Sidebars
  • Not supported
Social icons
Parallax scrolling
Quote Blocks
  • Style with the Quote Font tweak

Banners

Add thumbnail images and videos to create full-bleed banners at the top of these pages and collection items:

  • Collections - Blog, Events, Products, and Layout Pages
  • Collection items - Individual events, products, and blog posts. Videos not supported.
  • Index sections - Creates banners above the content

Banners create a visual element that can set the tone for your page. Here's an example of a banner with header text, a button, and an overlay color:

example-marquee-family.png

How banners display

Use these options to choose how banner images display:

  • Banner images or videos can scroll slower than the rest of the page. Enable or disable this with the Parallax Scrolling tweak.
  • Add a color filter with the Image Overlay tweak.
  • Display banners behind the site header with the Transparent on Banner Images tweak.
  • To add multiple banners to one page, stack them in an Index.
  • If there's no banner image or video, a background color displays instead. Change this with the Title Background Color tweak (Hide Page Title must be unchecked).

Add banner text

  • Page banners - Display page titles and descriptions from Page Settings. Create headers and buttons with special formatting.
  • Product banners - Display the item names and descriptions. Create headers and buttons with special formatting.
  • Blog posts - Display post titles, dates, and authors.
  • Individual events - Display events' titles, dates, and times.
  • Style the text in the Page Title & Description section.

Format banner text with headings and buttons

Page and product banner descriptions support special formatting:

  • Bold text formats as a heading.
  • Regular text formats as description text.
  • Links in the last line format as buttons. If the link includes bold text, or there are other lines or spaces below the link, it won’t format as a button.

shift-bannertext2.png

Change the banner height

To change the height:

  • Page banners - Open Page Settings and add extra line breaks to the page description.
  • Individual events - Open the event editor and add extra line breaks to the description.
  • Blog posts and individual products - Fixed height can't be adjusted.

Banners on mobile

On mobile devices:

  • If parallax scrolling is enabled, banner images remain fixed and the content scrolls over them. Mobile Styles must be enabled.
  • Video banners may not display on slow connections and older browsers. If there's no mobile fallback image, the Image Overlay Color and Content Background Color colors display.
  • Description text automatically shrinks to 13 pixels.

Blog Pages

The Blog Page creates a list of vertically stacked posts. Clicking a post title opens the full post at its own URL.

Landing pages

For landing pages:

  • Page banners display at the top of the page, with an optional text overlay.
  • Author names don't display.
  • Set the layout with the Blog Layout tweak (columns or simple).
  • Add excerpts for posts to display teaser content. Excerpts don’t display a Read More link.
  • Source URLs don't display, but linked titles have an arrow.

Individual posts

For individual posts:

  • Hide or display author names with the Hide Author tweak.
  • Blog post thumbnails create banners. Titles, dates, and authors display over the banners.
  • Tags, categories, and navigation for previous and next posts display below the comments.
  • Individual posts support banners.

Filtered tag and category pages

  • If you link directly to a tag or category list, the text "Viewing entries in" or "Viewing entries tagged" displays at the top of the page.
  • The text style follows body text.
  • "Viewing entries" text is italicized.

Blog Layout: Columns

When you choose Blog Layout: Columns:

  • Thumbnail images, a View Post link, and Comment, Like, and Share buttons display between border lines above each post.
  • Post titles and dates display to the left of the post content.
  • For excerpts, the thumbnail and a View More link display.
  • Here's an example:

columns.png

Blog Layout: Simple

When you choose Blog Layout: Simple:

  • All content stacks vertically.
  • Dates display above the post content.
  • Comment, Like, and Share buttons display below the post content.
  • Use the Blog Width tweak to adjust the width (narrow, full).
  • Thumbnail images and excerpt View Post links are hidden.
  • Here's an example:

simple.png

Events Pages

Use the Events Page to feature concerts, meetings, book tours, or any event you host. Clicking an event title opens the individual event at its own URL.

Choose a view

You can choose between Calendar or List view in Page Settings with the Default Event View drop-down menu.

  • If you have multiple Events Pages, you can display some as calendars and some as lists. You might want to pick one to keep a consistent look.
  • Either view supports a page banner.
  • Unlike other templates, past events don't display in List view.

Style Events Pages

Marquee's Event Pages have their own style settings:

  • Event Time Format - Display your event time using the 24-hour international standard time display.
  • Event Excerpts - Show or hide the event description or excerpt text.
  • Event List Date - Display or hide the date in List view.
  • Event List Time - Displays or hide the time in List view.
  • Event List Address - Display or hide the address in List view.
  • Event iCal/gCal Links - Display or hide the links on individual event pages.
  • Event Calendar Compact View
  • Events Layout: Columns, Simple
  • Events Width: Full, Narrow - Appears when Events Layout: Simple is selected.

Unlike other templates, Marquee doesn't have a Show Past Events option.

Events Layout: Columns vs. Simple

For Events Pages set to List view, use the Events Layout tweak to choose the style of the landing page. This affects all list Events Pages on your site.

For either layout, use the Event Excerpts, List Date, List Time, and List Address tweaks to hide or show these elements.

When set to Events Layout: Columns:

  • The thumbnail image, Like and Share buttons, and a View Event link display above the event details.
  • The event title, date, and time display to the left of the event description.
  • Check Event Time Format to display your event time using the 24-hour international standard time display. This also affects individual events.

columns-events.png

When set to Events Layout: Simple:

  • All content stacks vertically. 
  • The date and time display above the post content.
  • Thumbnail images, the View Post link, and Comment, Like, and Share buttons are hidden.
  • Use the Events Width tweak to set the width of all events.

simple-events.png

Gallery Pages

Marquee supports the standard Gallery Page, which displays images and videos in either a slideshow or a grid layout. Marquee standard Gallery Pages have these unique settings:

  • Slideshow view displays full-bleed.
  • In grid view, clickthrough URLs are disabled and don't disable the lightbox.
  • In slideshow view, if the image has a title and description, clickthroughs URLs display as a Read More link.
  • Gallery Aspect Ratio and Gallery Transitions: Fade, Scroll tweaks aren't available.

Index Pages

The Index Page stacks multiple content sections vertically on a single page. To see different variations, explore the Adversary, Alex, Eamon, and Shift demo sites.

  • The Index only supports content sections (Layout Pages).
  • Banners display above each section. They include any banner text, buttons, or color overlays.
  • The URL includes a hashtag (#) as you scroll from one section to the next. To send a visitor directly to a section, open your Index Page in a private browser and scroll to the section. Copy the full URL with the # and share it.
  • To stack banners on top of each other, like the bottom half of Shift, create sections with banners but no page content. For new pages, delete the default Text Block. You'll still see placeholder white space while logged into your site.

Set the banner height

  • Use the Index Image Height tweak to set the banners in an Index to Half, Two Thirds, or Fullscreen.
  • Use the First Index Image Fullscreen tweak to display just the top Index banner at its full height.
  • For banners with background colors, open Page Settings and add extra line breaks to the page description.

Style the navigation

  • If the top banner is set to Fullscreen, an arrow appears at the bottom and Scroll Down appears on hover. Clicking the arrow takes visitors to the next section on the page.
  • Navigation circles and text appear on Index banners. Check Hide Index Nav to hide them.
  • Arrows and navigation circles are automatically set to black or white depending on the background image. This can't be changed.
  • The color auto-detection is based on the overall darkness or brightness of the image. For example, if the area around the navigation circles is dark, but your image is mostly light, the circles will be black.
  • A Top link appears at the bottom of the page above the footer on Index Pages. Hide it with the Hide Back to Top Link tweak. Adjust the color with the Text Color tweak in the Main Content section of Site Styles.

Example

Here's an example of an Index with two sections:

index-example.png

Products Pages

Add products to a Products Page to create a Commerce store. Marquee supports the Classic Products Page, with these unique settings:

Was this article helpful?
16 out of 24 found this helpful