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.

See Demo →

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.

Block Width

Blocks can be set to one of three widths in the editor: Default, Wide, or Full. Blocks will interact with adjacent blocks differently depending on their width.

Adjusting Block Width

The block width setting is found in your block context bar, which will show up above the current block that you have selected. A block that supports the block widths will show its current width icon in the context bar, and clicking it will allow you to change the width.

If you have the Top Toolbar setting selected, the block context bar will always show at the top of your page, not at the top of your block.

Default Width

The default width of your content is determined by the value set in your Customizer. You can find this setting under Styles » Widths » Content Width. This is the default width of most text-based content and most blog pages. We recommend keeping this set so that your content retains maximum readability, which most studies agree is around 50-60 characters per line.

Wide Width

Wide width content will take up 75% of the available width on the page or the default content width set on your site—whichever is larger. In effect, this makes content take up more of the available screen real estate. When used in conjunction with other wide width blocks, you can shape your webpages in many different ways.

Full Width

Full width content will always take up 100% of the available width on the page. When placed next to default or wide width content, margin will be applied to the full width block to give it some room to breath. When two full width blocks are placed next to each other, however, they will suction together and form a cohesive unit with no margin in between them.

Show More Show Less

Content Origin

As you would expect, this switches 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 displayed over the 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 the overlay will 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.

Show More Show Less

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.

Show More Show Less
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.

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.

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

Show More Show Less

Photo Feature

→

Up Next