How to customize a full-width image marquee [tutorial]

Quickstart and UA Bootstrap together provide you with tools to create visually appealing image marquees with little effort. Below is a step-by-step tutorial showing you how to create the completely custom full width fixed image marquee seen here. A screenshot is below.

This marquee includes the following options and customizations:

  • Background attachment: Fixed
  • Background size: Scale to cover viewport
  • Display mode: Full width, content left aligned
  • Text overlay: None
  • UA Bootstrap classes for text
  • Two buttons (styled Default)

Step-by-step instructions

  1. Start by creating a flexible page or editing an existing flexible page.
  2. Click Add Marquee in the Main Content area.
  3. Leave the Title field blank.
  4. In the media field, click Browse to find and upload your selected image. ACCESSIBILITY NOTE: To match the style in this tutorial, use an image that has been darkened. (The image in this photo has a black layer of 70% opacity over it.)
  5. Add your text to the WYSIWYG editor. To match the style in this tutorial, do the following:
    1. Highlight your heading/title and select the Blockquote button. With the heading/title still highlighted, selected the sans serif Heading 1 option from the Styles dropdown menu. Then, click the Bold button. Finally, select the Styles drop down, scroll down to Inline styles, and select the White Text directly under Small Text and above Azurite Text.
    2. Highlight the title of the first event, click the Bold button, and then select the sans serif Heading 2 option from the Styles dropdown menu. Then, click the Source button. Find the line containing the name of the event and add <span class="text-sky"> before it, and </span> after it.
    3. Highlight the event time/date/place and in the Styles drop down, scroll down to Inline styles, and select the White Text directly under Small Text and above Azurite Text.
  6. Add your button by doing the following:
    1. Type/Paste the button's label.
    2. Highlight it.
    3. Click the link icon.
    4. Add the destination URL.
    5. With the label/link still highlighted, click the Styles dropdown. Select Button Default (or any other button style you prefer).
  7. Repeat steps 5 and 6 until all of the text and buttons are there and styled as desired.
  8. If including buttons in your text area, leave the Read More Title and URL fields blank!

Tips:

  • Customize the height of the marquee by cropping the Full Width Image Large. Then, customize the height of the mobile marquee by cropping the Full Width Image Extra Small.
  • Place a fixed marquee of this style between two static items, such as a full width background wrapper and a text area.

Source code

Feel free to copy/paste the source code below and modify it as desired to achieve a similar look and feel to the marquee example above.

<blockquote>
<p class="text-size-h1 sans"><span class="text-white">Upcoming</span> <span class="text-leaf">Events</span></p>
</blockquote>

<p class="text-size-h2 sans text-sky">Sit amet massa vitae</p>

<p class="text-size-h3 sans text-white text-uppercase">JUN 5 // 7 PM</p>

<p><span class="text-white">Netus et malesuada fames ac</span></p>

<p><a class="btn btn-default" href="#">BUY TICKETS</a></p>

<p class="text-size-h2 sans text-sky">Tortor condimentum</p>

<p class="text-size-h3 sans text-white text-uppercase">AUG 1 // 2 PM</p>

<p><span class="text-white">Netus et malesuada fames ac</span></p>

<p><a class="btn btn-default" href="#">BUY TICKETS</a></p>