Super Hero

Super Hero allows you to add either a looping video or an image that extends to the edges of the screen. Parallax scrolling is enabled once the Super Hero section is scrolled past, creating an engaging user experience.

Important:

• Superhero Video Display: The video feature is only available for desktop and tablet screens. It does not display on mobile screens.

• Availability: Superhero can only be used on Landing Pages.

• Logo Requirement: Superhero will not work with a standard JPG/PNG logo.

Logo Setup Options

SVG Logo Creation

• To use Superhero, email Columbia Creative at [email protected] to create an SVG logo. Turnaround time is 2-3 weeks, so please plan accordingly.

• Once received, go to Site Settings > Superhero and upload the SVG logo.

Using Organizational Name

• If you do not have an SVG logo, Superhero can still work using the Organizational Name field.

• Go to Site Settings > Contact, remove any uploaded logo file, and enter your website’s name into the Organizational Name field.

How to create a Super Hero

Important:

• Superhero always displays at the top of the page, regardless of where you place it in the content order. For example, if you add the Superhero section after a set of image cards, it will still appear at the top. Only one Superhero section can be created per Landing Page.

Select 'Add Superhero' from the content dropdown.

Upload Images for Desktop and Mobile Versions

• Images are required for both desktop and mobile versions. Even if you opt to use a video (see next step), these images will be shown if there is an issue with the video.

• Recommended Image Size:

  • Desktop Image: 1280 x 720 pixels

  • Mobile Image: 720 x 1280 pixels

• If you prefer to use a looping video instead of an image, proceed to the next step.

Enter the URL for YouTube or Vimeo Video

• Enter the full URL for the YouTube or Vimeo video you want to display. This is different from embedding videos elsewhere on the site. Once entered, the video will load, and you can set the beginning and end times for playback by adjusting the sliders or entering timestamps manually.

• Once the video URL is entered, the video will load automatically. You can then set the start and end points of playback using the sliders below the video display, or by entering exact timestamps manually.

Optional: Add Text to Overlay on the Image or Video

• Use the Title, Text, and Buttons fields to overlay content on the image or video.

• Note: As you input text and button content, the changes will be immediately visible in the preview, without needing to save the page.

Set the Theme Color

Important: Ensure your video or image maintains proper color contrast for accessibility. You can use the WAVE Evaluation Tool in Chrome to check the contrast of your page after saving.

• Choose one of three theme color options:

  • Light

  • Dark

  • Blue

• This selection will adjust the text overlay and navigation for the page with the Superhero section. The overlay color updates in real-time in the preview. You will need to save the page to see how the navigation looks with your selected theme.

Set the Text Position

• Choose where the overlay text should appear on the image or video. Available options:

  • Top Left

  • Top Center

  • Top Right

  • Bottom Left

  • Bottom Center

  • Bottom Right

• The position updates in real-time in the preview.

Set the Title Font Size

• Choose one of three font sizes for the title:

  • Small: 32px

  • Medium: 64px

  • Large: 90px

By following these steps, you can create a visually stunning Superhero section that enhances both the user experience and the aesthetics of your Landing Page.