Close Menu
Open Menu

Photo Feature

  1. Home
    2. ›
  2. Blocks
    3. ›
  3. 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.

Content Origin

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.

Style

The Photo Feature has two style options, Seamless and Boxed. 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.

Seamless

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

When Seamless is selected, the Reverse Print toggle controls whether the text is printed white (when enabled) or black (when disabled).

Photo feature block with the overlay option selected.

Boxed

The Boxed 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 Boxed 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.

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.

Text Style

The Text Style (sometimes called Headline Style) option controls the display of your text.

The Text Style (or Headline Style) will default to a different value depending on the block, but can be changed to any of the other available options. These styles are defined in your Customizer under Styles. For more information on changing your styles visit Customizing Styles.

One important thing to note is that this only changes how the headlines appear visually. The underlying html will be determined by the block that uses this features.

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. Additionally, choose between a Button or Understated style for your link.

Darkening

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%.

Background Image

Use a photo from your media library or upload a new one to use as a background.

Choose a Background Image

You can choose a background image in the block sidebar by clicking on the ‘Choose Photo’ button. You’ll be prompted to select a photo from your media library or upload a new one.

Once you’ve selected a photo to use as your background, new options will take the place of the one you used to select the photo. The first is a simple button to remove the image that you’ve selected, allowing you to start this over.

The second is the Focal Point selector. This tool allows you to select the most important point of your photo that your website will try to always keep visible. Because of the responsive nature of the web, images used as a background must stretch and cover the area when viewed on different device sizes, but this focal point allows you to keep what’s important in frame.

Set an Overlay

Whether you need to darken or tint an image to maintain the legibility of text on top of it or as a stylistic choice, there are many situations where you’ll want to add an overlay to your background image. The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider will determines how much overlay to apply to the background image, with 100% being solid color.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Photo Feature

→

Up Next