Custom blocks and variants

Create a custom block

A custom block is a block, or a group of blocks, that you made reusable, such as a card with a photo, a heading and a button. Each place you put it is a use. Every use shares one look: colors, fonts, borders, sizes and the blocks it holds. Each use keeps its own text, links and images. Change the custom block once, and every use changes its look.

Use a custom block when the same design repeats with different content, such as team member cards or a styled call-to-action button.

Make a custom block from a block on a page

  1. Open your project in Fantasma.

  2. On a page, build the block the way you want every use to look. For a card, put a heading, a paragraph and a button in a Group, as Move, group and arrange blocks shows.

  3. On the canvas or under Sections in the left sidebar, right-click the block, or the Group that holds the card.

  4. In the menu that opens, select Create custom block.

The menu of a Get Started button in the left sidebar, with Create custom block below Rename and Duplicate

The menu of a button also offers Edit block, for the shared look every button has, which Change how every button looks covers. Create custom block is different. It makes a new block of your own.

The block on the page becomes the first use of the new custom block. Its name in the left sidebar turns purple. The custom block takes the block's name, such as Group or Button, and is listed under Custom in the Blocks panel, where you can rename it.

If the block sits in a section that follows a pattern, Fantasma first asks whether to edit the pattern or change only this section, as How patterns work explains.

Start a new custom block from scratch

  1. In the icon rail, click the shapes icon, Blocks.

  2. Click + next to the Blocks heading at the top of the panel. If you scrolled the panel, scroll it back up first.

  3. Select Button, Card or Icon. A Card starts as an outlined box with a title and a line of text.

The new custom block opens on the canvas, and the right sidebar shows its settings. Select a part of it on the canvas to change it, as Change or detach a custom block shows.

Use it on a page

  1. On a page, open the block picker where you want the custom block, as Add blocks to a section shows.

  2. Under Custom, click the custom block.

Select the new use, and the right sidebar reads "Fill in its content and pick a variant." It shows the text, links and images of this use, and its place on the page, such as spacing and Display. The look comes from the custom block.

A project holds up to 60 custom blocks. To undo creating one, press ⌘ Z. On Windows, Ctrl replaces ⌘. Your Ghost site shows custom blocks as regular blocks after you publish the theme to Ghost, or download it and upload it in Ghost Admin.

Was this article helpful?