> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.banana.tech/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Designs and synced designs

### Understand how designs control the visual appearance of blocks, and when to reuse them across your site.

A block defines the type of content you are adding to a page. A design defines how that block looks and behaves on the website.

For example, two *Content image* blocks use the same content structure, such as a title, text, images, and link, but display it with completely different layouts. One design may show the image on the left and the text on the right, while another may use a larger editorial layout with overlapping images.


## What a design is

A design is the visual layer of a block. It controls the layout, spacing, typography, colors, image positions, responsive behavior, and any frontend interaction used by that block.

The design does not define the content fields available in the CMS. Those fields belong to the block type. The design decides how to use them.

|| A design can hide, reorder, or present fields in different ways, but it does not create new fields for the block.


## What a synced design is

A synced design is a reusable design connected to one or more blocks. When several blocks use the same synced design, they share the same visual structure.

Synced designs are useful when you want to repeat the same layout across different pages while keeping it easy to update from one place. You may use synced designs for repeated sections that should stay visually consistent across the site.


## What happens when you edit a synced design

When you edit a synced design, the design changes everywhere it is used. This means that if several blocks use the same synced design, all of them will receive the visual update. The content of each block stays separate, but the layout and styling are shared.

Before editing a synced design, check whether it is used in other pages. If you only want to change one block, unlink the synced design first or save your changes as a new design.


## How to recognize a synced design

When a block uses a synced design, the CMS highlights it differently from a regular block. Regular blocks are shown with a yellow outline, while synced designs are shown with a turquoise outline and a `Synced design` label.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/a/c/0/dac014b3c344d80/synced-designs_1t11dgu.png)

You can also review synced designs from the library, where reusable designs are listed and can be filtered by block type.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/a/c/0/dac014b3c344d80/library_1wwdagk.png)

## How to convert a design into a synced design
To reuse a design across multiple blocks, open the block actions menu and select **Convert to synced design**. The design becomes a synced design and can be reused from the library. Blocks connected to it share the same design while keeping their content separate.


## How to unlink a synced design

Open the block actions menu and choose the option to **Unlink synced design**. After unlinking, the block keeps the current visual appearance, but it is no longer connected to the shared synced design. From that point on, changes made to the block design only affect that block.