Vignette

Media and text with a twist.

Usage

The Vignette block uses the common ‘Media and Text’ UX pattern, but allows you to display the pattern in visually exciting ways. The Style setting can drastically change how this block looks. Switching between styles doesn’t change your content at all, so feel free to try them and see which one you like best.

Offset Background

Text Background

Magazine

Flexible Magazine

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 Fields

The Vignette has the same content fields as the Photo Feature, and works in the same way. Each Vignette can have a Photo, Headline, Subheadline, Body, and Link. If you delete either your Headline or Subheadline field, it will disappear from the block and no longer be editable inline. Don’t worry, you can type either into the block editor sidebar to get it back.

The Headline field is set as an <h2> tag, and the Subheadline field is set as an <h4> tag. The Body can hold multiple paragraphs.

To change the Photo, you can either click on the photo in the block editor or change it in the block editor sidebar. Both will bring up the media library, where you can upload or choose an image.

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 or in the sidebar. You can toggle the Link Style to display as a button or as an understated link.

Style

You can radically change the appearance of the Vignette with the Style setting. The Default setting works the same was as the Photo and Text block. The other styles include Offset Background, Text Background, Magazine, and Flexible Magazine.

Each style changes how the Accent Color, Opacity, and Magnitude settings interact with each other. In general, the Accent Color will change the color underneath your text while Opacity will change the opacity of the Accent Color.

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

Magnitude

This setting is a little unique. In general, the Magnitude setting will increase the visual effect that the selected Style applies to the Vignette. For example, with Text Background selected, increasing the Magnitude of the effect will increase the amount that the text overlaps the photo.

Magnitude set to 2

Magnitude set to 10

You’ll also notice that the Magnitude value ranges from -10 to 10. With some vignette styles, the visual effect can reverse direction, and this is represented by a negative Magnitude value. For example, the Offset Background style can veer towards the right or left of the photo. In the example below, compare the positive and negative Magnitude values.

Magnitude set to 6

Magnitude set to -6

Offset Background

The Offset Background creates a shadow of the photo colored by the Accent Color, displayed underneath and offset from it. The distance that the shadow is offset is controlled with the Magnitude setting.

Text Background

The Text Background creates a background behind the text colored by the Accent Color. The Magnitude setting controls how much the text overlaps the photo.

Magazine

The Magazine creates a background behind the text that mirrors the length of the text, similar to the style seen in magazines. The text background is colored by the Accent Color. The Magnitude settings controls how much the text overlaps the photo.

Flexible Magazine

This block is the same as the above Magazine block, but allows for flexible width. With this block, as you increase the Magnitude, instead of holding the width steady and just increasing the overlap, it pushes the content and photo together and allows the width to be fluid. The typography leading also remains fluid.