Featured Content Hero
Usage
Featured Content Hero features three posts, pages, or other content items as linked photo tiles. On large screens the first tile takes half the row and the other two share the rest. Each tile shows a background photo with a white card at the bottom that links to the item.
Use it at the top of a homepage or landing page to send visitors to specific articles, services, or pages.
Display options
These settings apply to all three tiles:
- Height: tile height on large screens, as a percentage of the browser window's height (default 50). On smaller screens tiles are always half the window height.
- Corners: Rounded (default) rounds the tiles and adds space between them. Sharp puts square tiles edge to edge.
- Link Text: the link label shown on every tile (default Read More). Leave it empty to hide the link.
- Link Style: how the link looks. Appears once Link Text has a value.
- Headline Style and Subheadline Style: the heading look for tile headlines (default h2) and subheadlines (default h4). These change the look only, not the page outline.
Pieces
Under Content Select, the Pieces list always has three rows, one per tile:
- Content: the post, page, or other item the tile links to. A tile stays empty until you pick one.
- Headline: leave it empty to use the item's title.
- Subheadline: an optional line above the headline.
- BG Image: a custom background photo. Without one, the tile uses the item's featured image, or a solid theme color if there isn't one.
- Background Origin: which part of a custom BG Image stays in view as the tile resizes (default center). Featured images are always centered.
Layout on smaller screens
Tiles sit in one row on large screens and stack full width on smaller ones.
Block width
Featured Content Hero supports Wide and Full alignment and defaults to Wide. With Rounded corners at Full width, the tiles get a little space from the screen edges.
Tips
- Override Headline when a title is too long for the card.
- Add a BG Image when an item's featured image doesn't crop well in a tall tile.
- For multi-slide storytelling, use Lookbook or Storyboard Slider. For one text panel beside a rotating photo gallery, use Photo Block Slider.
Screenshots
Front-end
-
Photo backgrounds with a white headline card at the bottom of each tile.
Editor
-
Headline Style and Subheadline Style under Display Options. -
Choosing a BG Image for one tile in the Pieces list. -
Background Origin sets which part of a custom BG Image stays in view.
Settings
Featured Content Hero
Display Options · Display Options
Tile height on large screens, as a percentage of the browser window's height. On smaller screens tiles are always half the window height.
Rounded adds space between tiles. Sharp puts square tiles edge to edge.
The link label shown on all three tiles. Leave empty to hide it.
How the link looks on every tile. Appears once Link Text has a value.
The heading look for every tile subheadline. Changes the look only, not the page outline.
The heading look for every tile headline. Changes the look only, not the page outline.
Content Select · Content Select
Always three rows, one per tile. Pick the content for each and optionally override its headline or background.
The post, page, or other item this tile links to.
Leave empty to use the item's title.
An optional line above the headline.
A custom background photo. Without one, the tile uses the item's featured image or a theme color.
Which part of a custom BG Image stays in view as the tile resizes.