Vignette
Photo and text with editorial layout styles — offset, magazine, and overlapping panels.
Usage
Vignette pairs a photo with headline, subheadline, body copy, and an optional link — the same content model as Photo Feature — but adds layout styles that dramatically change how photo and text relate. Switch Style presets without losing content; try Offset Background, Magazine, or Flexible Magazine to find the look that fits your page.
Use Vignette for editorial hero bands, magazine-style featurettes, or any section where photo and copy should overlap, offset, or share a colored background. For a plain photo beside text without style effects, use the Photo & Text Columns starter instead.
Content
Each Vignette includes:
- Photo — click the placeholder in the editor or Choose Photo in the sidebar
- Headline — main title (
h2), edited inline or in the sidebar - Subheadline — supporting line (
h4), edited inline or in the sidebar. If you clear a subheadline completely, it hides from the editor until you re-enter text in the sidebar - Body — paragraph and list inner blocks in the copy area (default template includes one paragraph)
- Link URL — optional call to action below the body
- Button Text — default Learn More; edit inline or in the sidebar when a URL is set
- Link Style — Button (default) or Understated text link
Layout
- Swap Blocks — reverses photo and content on desktop (800px and up). Available in the block toolbar and sidebar. On mobile, content stacks with the photo first
Style
Sidebar Style presets:
- Default — clean 50/50 photo and content side by side on desktop, similar to Photo & Text
- Offset Background — accent-colored shadow offset beneath the photo; Magnitude controls offset distance and direction (negative values reverse direction)
- Text Background — solid accent panel behind the text column; Magnitude controls how far text overlaps the photo
- Magazine — inline accent backgrounds behind each text line, magazine-style; Magnitude controls overlap amount
- Flexible Magazine — like Magazine, but photo and text shift together fluidly as Magnitude increases, with adjustable line leading
Changing style does not alter your text or image — only the visual treatment.
Color and effects
Shared across styled presets:
- Text Color — Dark (default) or Light (reverse print) for readable copy on dark accent backgrounds
- Accent Color — palette color for offsets, text backgrounds, and magazine highlights (default Primary)
- Opacity — transparency of accent overlays (0–100%, step 5; default 100)
- Magnitude — intensity of the active style's effect (-10 to 10; default 5). Meaning varies by style — overlap distance, offset direction, or fluid shift depending on the preset
Block width
Vignette supports Wide and Full alignment from the block toolbar and defaults to Wide width.
Tips
- Pick a Style first, then tune Accent Color, Opacity, and Magnitude — the three interact differently per preset.
- Use Light text color when accent backgrounds run dark or saturated.
- Flexible Magazine suits responsive editorial layouts; Offset Background works well for bold brand-color shadows.
- For a photo + copy band without overlap effects, use Photo & Text or Photo Feature instead.
Screenshots
Front-end
-
Style presets including Default, Offset Background, Text Background, Magazine, and Flexible Magazine. -
Offset Background style with accent-colored shadow beneath the photo. -
Text Background style with accent panel overlapping the photo. -
Magazine style with inline accent backgrounds behind text lines. -
Flexible Magazine style with fluid photo and text positioning.
Editor
-
Magnitude controls offset direction and overlap intensity per style. -
Reverse print (Light text color) for readable copy on dark backgrounds.
Settings
Block Settings
Toggle this setting to switch the positions of the media and text columns. Use this when you want to change the visual flow of your content.
Layout preset: Default (side-by-side), Offset Background (colored shadow offset from photo), Text Background (accent panel behind text), Magazine (inline line backgrounds), or Flexible Magazine (fluid overlap and leading). Content stays the same when switching styles.
Select 'Dark' or 'Light' to change the color of the text within the block. Use this to ensure readability against different background colors or images.
Enter the main title for your Vignette block here. This text will be prominently displayed to introduce your content.
Add a secondary title or a brief descriptive phrase below your main headline. This provides additional context or detail to your content.
Customize the text that appears on the call-to-action button. Use clear and concise text that encourages user interaction.
Choose between an 'Understated' link or a more prominent 'Button' style for your call to action. Select the style that best fits the design and emphasis you want for the link.
Select an accent color to highlight specific elements within the block, such as buttons or decorative lines. This helps to draw attention to key parts of your design.
Adjust the transparency of certain elements within the block, such as background overlays. Use this to create subtle visual effects or to ensure text readability over images.
Adjusts the intensity of the active style — overlap amount, offset distance, or fluid shift depending on preset. Range is -10 to 10 (default 5); negative values reverse direction for styles like Offset Background.