Close Menu
  1. Photo Feature

Photo Feature

Photo feature block on the frontend.

Photo Feature on the frontend.

Let your photography shine with a print style layout.

Usage

The Photo Feature block is built to put your photography center-stage. This block takes cues from print media design layouts. Because it is highly stylized, we have restricted the available content options to include a headline that displays as an <h3> tag, body copy that can span paragraphs, and a single button.

Reverse Print

Toggling reverse print will flip the colors from your standard palette to white, which increases contrast and readability when text is placed on dark backgrounds.

You’ll find the reverse print toggle in the block sidebar. Enabling reverse print will affect the block its enabled on as well as everything inside of it. If the block contains Inner Blocks, reverse print will cascade to all descendants.

We recommend using reverse print whenever a block has a dark background and using white text would increase its contrast. While you can set text color on core blocks like Headings and Paragraphs, we strongly recommend using the block-level reverse print instead. This way, you’ll be able to quickly toggle all the content if you change the background color in the future. All Inner Blocks will respect the reverse print setting, even those without color settings themselves.

To read more about contrast requirements on the web, visit here.

Show More Show Less

Style

The Photo Feature has two style options, Full Bleed and Overlay. These affect how the content is display on top of the background photo. Both display options interact with the other block options in different ways.

Photo Feature block with the full bleed display option.

Full Bleed

The Photo Feature defaults to full bleed, which makes the text seamlessly integrate with the background.

When Full Bleed is selected, the Reverse Print toggle controls whether the text is printed white (when enabled) or black (when disabled). The Darkening option will automatically switch to the opposite color in order to provide contrast.

For example, if Reverse Print is enabled, the text will be white and the Darkening control will control the opacity of a black gradient behind the text, which will get darker you increase the level of darkening.

Photo feature block with the overlay option selected.

Overlay

The Overlay option removes the gradient behind the text altogether, and instead places the content on a blurred background. The border radius of the overlay is determined by the site-wide border radius specified in the customizer.

When Overlay is selected, the Reverse Print toggle controls whether the text is printed white (when enabled) or black (when disabled). The background color of overlay automatically be the opposite color of the text. White text will always be displayed with a black background and vice versa.

Selecting the Overlay option will disable the Darkening control.

Alignment

As you would expect, this switched the side of the Photo Feature block that the text will appear on. This will also affect text alignment. Unlike some of our other blocks, this option is respected on mobile devices as well.

Photo feature with text aligned left.

Left aligned.

Photo feature with text aligned right.

Right aligned.

Adding a button to photo features.

Choosing a link in the block sidebar will display a button beneath your content. The button text defaults to ‘Learn More’, but you can click into the button and edit this text inline.

Choose an image and image alignment for your photo feature.

Choosing a Photo

Use the block sidebar to select a photo for the background of the Photo Feature. Use Image Alignment to ensure that the focal point of your photo remains visible.

Darkening

The Darkening slider will only work when Full Bleed is selected as the block style. As you turn up Darkening, you will increase the opacity of the gradient behind the content. When reverse print is enabled, the gradient will be black. When reverse print is disabled, the gradient will be white.

Reverse print disabled. Darkening set to 0%.

Reverse print disabled.
Darkening set to 0%.

Reverse print disabled. Darkening set to 100%.

Reverse print disabled.
Darkening set to 100%.

Reverse print enabled. Darkening set to 10%.

Reverse print enabled.
Darkening set to 10%.

Reverse print enabled. Darkening set to 100%.

Reverse print enabled.
Darkening set to 100%.

Photo Feature