Home Sections

Articles with slider Articles with slider puts a block of editorial copy on one side and a swipeable row of blog post cards on the other. The cards come from a blog you pick, newest first, so you fill the row by publishing posts rather than by adding blocks. It is a wider, more deliberate version of Featured articles. Use it when the blog deserves an introduction and a link to the whole blog; use Featured articles when a plain row of cards is enough. Add the section 1. Open the page in the theme editor and click Add section. 2. Under Storytelling, choose Articles with slider. 3. In the section settings, set Blog to the blog you want to read posts from. The section starts with a Content content slot and a Card block. The slot holds the copy, the card sets the look every post uses. Section settings - Blog: the blog the section reads posts from. Leave it unset and the section shows placeholder cards in the editor, so you can arrange the layout while you set things up. - Articles to show: how many posts load into the row, from 2 to 12. Default is 6. - Content width: how much of the row the copy column takes, from 24 to 48 percent. Default is 30. The cards fill the rest. - Gap: the space between the copy column and the cards, from 24 to 120 pixels. Default is 40. Content The copy sits in a content slot named Content, prefilled with a heading, an intro paragraph, and a button pointing at the blog. Edit, reorder, or remove those blocks, or add others. Select the slot itself to change its layout, its width, and the space around it. See Sections, blocks, and groups. Card (Blog post card) One Blog post card block sets the look of every card in the row. Select Card under the section to change these controls. - Aspect ratio: the shape of each card image. Landscape (3:2), Square (1:1), Portrait (4:5), or Wide (16:9). - Show category: shows the post's first tag above the title, as a category. On by default. - Show excerpt: shows the post excerpt. When a post has no excerpt set, the start of its content is used. On by default. - Show author: shows the post author. Off by default. - Show date: shows the published date. On by default. The card image, title, and link come from the post itself, so you set those in the blog post, not here. The slider The cards sit in a slider. Visitors swipe on a phone and use the arrows on desktop, and a row of dots in the copy column shows where they are. The dots and arrows appear only when the blog has more than one post. There is no setting for how many cards are visible at once: that follows Content width, Gap, and the screen size. This section also uses the standard Color (including Use dark header theme over this section), Padding, Margin, and Visibility controls. See Common section settings. Tips - Point the button at the blog itself, not at one post. The cards already carry the individual posts, so the button's job is to open the rest. - Set Articles to show higher than the number of cards that fit on screen. A slider with nothing to scroll to reads as a broken row. - The category on each card is the post's first tag alphabetically. Article tags cannot be reordered, so to change which one shows, rename or prefix the tag you want to sort first. - One section reads one blog. To feature a second blog, add a second Articles with slider section.

Last updated on Sep 09, 2026

Staggered content

Staggered content Staggered content lays out a run of items in two columns that sit at different heights, so the page reads down in a zigzag instead of a straight grid. Each item is a picture with a heading and a paragraph beside it. Use it for an About page, a maker profile, a set of places, or anything that is a list of things rather than a single statement. The offsets are not settings. The section reads how many items you added and where each one sits, then places them: even-numbered items drop lower than the ones beside them, and a final odd item widens and centers itself instead of sitting alone in a column. Add the section 1. Open the page in the theme editor and click Add section. 2. Under Layout, choose Staggered content. 3. The section arrives with a header and three items. Edit them, then add more with Add block. Section settings - Gap: the space between the two columns, from 0 to 120 pixels. Default is 80. - Row gap: the space between one row of items and the next, from 0 to 200 pixels. Default is 108. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Header The heading and intro above the items sit in a Header content slot, prefilled with a heading and a paragraph, both centered. Edit or remove those blocks, or empty the slot for items on their own. Content blocks Each item is a Content block. Add, remove, and reorder them in the block list; the order is the order they are placed, so moving a block moves the item. A new Content block arrives with an Image and a Group holding a heading and a paragraph. Those are ordinary content blocks, so you can swap, add to, or remove them like anywhere else in the theme. Select a Content block to set how its own pieces sit: Desktop layout - Direction: Horizontal puts the picture beside the text, Vertical stacks them. - Gap: the space between the picture and the text, from 0 to 100 pixels. Default is 32. - Vertical alignment: with a horizontal direction, where the two line up against each other. - Horizontal alignment: with a vertical direction, where the pieces sit across the block. - Use different layout on mobile: on by default, so items stack on phones. It exposes a Mobile layout group with its own Direction, Gap, and Horizontal alignment. The block also uses the standard Padding controls, with separate mobile values. See Common section settings. How the layout responds - On phones the items run in one column, in block order. - On tablets each item takes about three quarters of the width, alternating which side it hangs from. - On wide screens the items sit in two columns, with every second item pushed down. A last item with no partner spans both columns and pulls up into the gap beside the one before it. Because the stagger is derived, an even number of items reads as a set of pairs and an odd number ends on a single wider item. Both work; pick the count for the content, not for the shape. Tips - Give the pictures a consistent shape. The default is a tall crop, and mixing tall and wide images in the same run breaks the rhythm the offsets are there to create. - Keep each paragraph short. The pairs read as a scan down the page, so an item that runs long stops the eye and flattens the stagger. - Row gap does more for the effect than Gap. Tightening the rows makes the zigzag read as one movement; opening them makes each item stand alone. - The section takes any content block, not only pictures and text. An item can hold an Illustration, a Button, or a Video if that suits the story better.

Last updated on Sep 09, 2026