Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Marquee banners (discontinued)

Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift share the same underlying structure and functionality. This guide applies to all these templates.

In Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift, you can create page banners at the top of these pages:

  • Blog
  • Events
  • Products
  • Regular Pages
  • Index Page sections

Collection item banners display at the top of individual blog posts, events, and product items.

parallax1.gif

Note: The Marquee family is discontinued. Although we still support these templates, fixing bugs or issues is a lower priority for us while we focus on our current templates. For a more modern template, we recommend switching to Brine.

Add a page banner

To add an image or video to your page banner, use the page preview annotations, or follow these steps:

  1. From the Home Menu, click Pages.
  2. Hover over the page title in the left panel and click the gear-icon
  3. Add a thumbnail image or video URL. Otherwise, the banner will display a solid color.
  4. Save and refresh the page.

After adding the banner, explore the following options:

Page banner text

You can display the page title and description text as an overlay or below page banners on your site. Text added over banner images and videos heightens the parallax scrolling effect. Overlay text is also searchable 

To add or adjust a page banner's text:

  1. From the Home Menu, click Pages.
  2. Hover over the page title in the left panel and click the gear-icon
  3. Adjust the Page Title and Description. See the formatting tips below.
  4. Save and refresh the page.
Note: Page descriptions shouldn't be used for adding SEO-based content, as this text will display on the page. Visit Increasing your site’s visibility to search engines for alternate ways to increase site visibility.

Special formatting

How you format your Description text determines how it displays. First, ensure the Extra Description Formatting tweak is checked. Then follow these guidelines:

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

Style the text

Use the tweaks in the Page Title & Description section of the Style Editor to style the text on your site's banners, including:

  • Hide Page Title - Display only the description text.
  • Title & Description Position - Choose whether the text displays as an overlay or on the page below the banner.
  • Title & Description Alignment - Justify the text left or centered.
  • Description tweaks - Style the regular description text.
  • Description Bold tweaks - Style the bold description headers.
  • Description Button tweaks - Style your banner buttons. 
  • Title Background - Add color behind the page title and description. Use the following two tweaks to adjust the colors. You can also adjust the opacity.
  • Title Background Color - If there's no banner image or video, this becomes the banner background color. This tweak won’t appear if Hide Page Title is checked.
  • Description Background Color - This won’t appear unless there’s a banner image or video. 

These tweaks are site-wide, meaning they affect all banners on your site. 

Add a collection item banner

For individual blog posts, events, and product items, add thumbnail images in their item settings.

Collection item banner text

Parallax scrolling

Banners on these templates support a special visual effect called parallax scrolling. Parallax scrolling causes elements on the page to scroll at different speeds, creating an illusion of depth and immersion. 

To enable or disable parallax scrolling, use the Parallax Scrolling tweak in the Parallax Images section of the Style Editor.

Tips:

  • Adding a text overlay heightens the effect.
  • Image Blocks and galleries don't offer the parallax scrolling effect.
  • When parallax scrolling is enabled, focal point changes may not have a noticeable impact on a banner image's position.

Background color

If a banner doesn’t have a thumbnail image or video URL, it displays a background color in the banner instead. 

Change this color with the Title Background Color tweak. Hide Page Title must be unchecked for the tweak to display.

Color overlay

The Image Overlay tweaks add a color filter over all banner images and videos.

Stack banners

To stack multiple banners on one page, use an Index Page

To stack banner images without content between them, as seen in Adversary's demo content, add sections with thumbnail images or videos but no page content. Be sure to delete the placeholder Text Block on each page section.

Change the banner height

To adjust the height of banners:

  • Page banners - Open Page Settings and add extra line breaks to the page description. 
  • Index Page banner images and videos - Use the Index Image Height tweak. To give the first banner a separate style, use the First Index Image Fullscreen tweak. Learn more.
  • Index banners with background colors - Open Page Settings and add extra line breaks to the page description. 
  • Individual events - Open item settings and add extra line breaks to the description.
  • Blog posts and individual products - All post and product banners have a fixed height and can't be adjusted.

Hide a banner

To remove page banners from your site:

  1. Open Page Settings for that page. 
  2. Remove the thumbnail image or video URL.
  3. Remove the page description.
  4. Save and open the Style Editor.
  5. Select Title & Description Position: Under Image.
  6. Select Hide Page Title.

Banners on mobile

  • Parallax scrolling works on mobile, but it looks a little different: The banner images remain fixed in place and the content scrolls over them. Mobile Styles must be enabled. 
  • Description text automatically shrinks to 13 pixels on mobile devices. This is designed to support multiple lines of wrapping text and better fit mobile screens. 
  • Video banners don't display in mobile. Set a mobile fallback image to display in its place. Mobile fallback images support parallax scrolling.
Note: For general information about styling your site, visit Structure and style.

Next steps

Review our troubleshooting FAQ or see a list of all Style Editor tweaks.

Was this article helpful?
0 out of 2 found this helpful
Marquee banners (discontinued)