Patterns

How patterns work

A pattern is a designed section you can add to any page. When you add one, the section on the page stays linked to the pattern. Change the pattern once, and every page that uses it changes with it.

Fantasma comes with built-in patterns, such as heroes, post lists and footers. You can also save any section of your own as a pattern.

A section that follows a pattern

A section you add from a pattern follows it. On the canvas it has a purple outline when you select it. The right sidebar shows Edit pattern and Detach, and the toolbar above the section shows the same two actions as icons. The layers icon is Edit pattern, and the broken link is Detach.

The Newsletter CTA section selected on the canvas, with Edit pattern and Detach in its toolbar and in the right sidebar

The pattern holds the section's design and its layout of blocks. Each section that follows it keeps a few things for itself:

Changes on every page at once Stays with this one section
Colors, spacing, widths, borders and the other design settings Text, links, images, icons and videos you change in this section
Which blocks the section holds and their order The section's Display settings, such as on which screens it shows
The pattern's own text, as long as you have not changed it in this section Which variant and format each block uses

So on a page you can rewrite a heading, swap a photo or hide the section on phones, and the section still follows the pattern. You change text on the canvas. Select a block to change its link or image in the right sidebar, which shows only the settings a section keeps for itself.

Edit pattern or Change only here

When you change the layout of a section that follows a pattern on the page, such as adding, moving or deleting a block, Fantasma asks first. The dialog reads "This section follows the Newsletter CTA pattern. Change it only here, or edit the pattern to change every section that uses it."

  • Edit pattern opens the pattern, with the same block selected, so you make the change there for every page. The change you started is not made on the page.
  • Change only here makes the change and detaches this section from the pattern. The other pages keep following it. A message with Undo appears.

Cancel leaves everything as it was. Change a pattern everywhere it is used shows how to edit a pattern.

Content areas

A content area is a part of a pattern where each page can have its own blocks. You turn it on in the pattern itself. Select the section or a block that holds other blocks, such as a Group, and turn on Content area in the right sidebar. In each section that follows the pattern, you can then add, remove and reorder blocks in that area without the dialog, and the section stays linked.

A content area accepts the common content blocks that fit in it: Heading, Paragraph, List, Image, Video, Button, Icon, Gallery, Separator, Collapse, Rating and Custom HTML. A block you add there takes its design from a block of the same kind in the pattern, when the pattern has one, so the pages stay alike.

Detach

Detach turns a section into a regular section. It looks the same as before, and every setting becomes its own. Later changes to the pattern no longer reach it. A message appears with Undo if you change your mind.

Deleting one of your own patterns detaches every section that follows it, and those sections stay on their pages.

Your patterns and built-in patterns

All patterns are in the Patterns panel, which the Patterns icon in the icon rail opens. Your own patterns start in its Your patterns category. A project holds up to 60 patterns of its own. A built-in pattern you have edited counts toward the 60, and an unchanged built-in pattern does not count.

You can edit a built-in pattern like your own. Your version then replaces the original in this project. Organize your pattern library covers categories, hiding built-in patterns, and going back to the original.

Changes on your Ghost site

Everything here happens in the builder. Your Ghost site shows the changes after you publish the theme to Ghost, or download it and upload it in Ghost Admin.

Built-in patterns and new releases

When a new release of Fantasma improves a built-in pattern that you use on a page and have not edited, your sections get the new version the next time you open the project. A message says "Updated 3 patterns from the latest release", with the number and the names of the patterns. Click Keep previous in that message to keep the version you had. A built-in pattern you have edited never changes by itself.

Was this article helpful?