Parallax banner

The parallax banner is a single picture with depth: as the page scrolls, the picture moves a little slower than the words over it. Use it to introduce a collection or a story between other sections.

A wide parallax banner with a heading on the left and two buttons under it

The picture

Image is the picture. Height adapts to it, fills the screen, or takes the custom height. Width is full or boxed. Let the header overlap this banner floats a transparent header over it at the top of a page.

Text and button colors is the scheme for the words; pick one with light text for a dark picture. Overlay shades the picture so the words read.

The words

Under Content: accent text, the heading with its size, its maximum width in characters and the style of its bold words, the text, and the content’s width and position. Nudge horizontally and Nudge vertically move the whole group a little from its position. Content shadow under Effects adds a soft or lifted shadow behind the words for busy pictures.

Two buttons under Buttons, each with its own style, and a Banner link for the whole picture. A Countdown block can be added for a launch or a sale.

On mobile

Under Mobile layout: a phone picture, its own height, heading size, position and nudges. When the theme’s Animations switch is off, the picture stays still and the banner behaves like any other.