> ## 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).

# Create custom block designs

### Create custom block designs with HTML, CSS, JavaScript, and Mustache.

Custom block designs let you adapt how a block looks and behaves while keeping its content editable from the CMS.

|| This article explains how to create or adapt a custom block design manually with HTML, CSS, JavaScript, and Mustache. You can also create or modify block designs with AI from a prompt or visual reference. Use the manual workflow when you need more control over the structure, fields, responsive behavior, or frontend interactions.


## When to create a custom design

Create a custom design when the existing gallery designs do not match the layout, interaction, or responsive behavior you need.

For example, you may create a custom design to:

* reproduce a specific visual layout;
* adapt a block for mobile and desktop;
* add a frontend interaction with JavaScript;
* reuse the same content fields in a different visual structure;
* create a reusable design for several pages or sites.


## What you can edit

From the frontend editor, you can edit the design code:

* **HTML** controls the structure of the block.
* **CSS** controls the visual style and responsive behavior.
* **JavaScript** controls frontend interactions.

Mustache is used inside the HTML to display field values from Block Data or Global Data.


## Block Data and Global Data

**Block Data** contains the content entered in the CMS panel for that specific block, such as titles, text, images, links, videos, services, or repeated list items.

**Global Data** contains shared site information, such as navigation, languages, business information, booking data, static texts, integrations, and module-related data.

Use Block Data for content that belongs to the current block. Use Global Data for shared site information that can be reused across different blocks.


## Showing block fields in the design

Most fields can be printed in the HTML with Mustache.

For example:

```
{{#text}}
  <h2>{{text.value.title}}</h2>
  <p>{{text.value.description}}</p>
{{/text}}
```

For a link field:

```
{{#link}}
  <a href="{{link.value.url}}" target="{{link.value.target}}">
    {{link.value.title}}
  </a>
{{/link}}
```

For an image field:

```
{{#image}}
  <img src="{{image.value.src.xl}}" alt="{{image.value.alt}}">
{{/image}}
```


## Showing or hiding fields in the CMS panel

You can control which fields appear in the block content panel by adding comments in the HTML.

For example:

```
{{!-- link hide true --}}
{{!-- video hide true --}}
```

Hidden fields remain available to the design, but they are not shown to CMS users in the editing panel.

You can also use this to simplify the editing experience and show only the fields that are relevant for that design.


## Ordering fields in the CMS panel

You can define the order of fields shown in the panel.

For example:

```
{{!-- image order 1 --}}
{{!-- text order 2 --}}
{{!-- link order 3 --}}
```

Use field ordering when a design has many editable fields and you want the panel to follow the same logic as the visual section.


## Reusing a custom design

After creating a custom design, save it as a new design if you want to reuse it later without changing the original one.

If the design should stay synchronized across several blocks, use a synced design. If you only want to modify one block, detach or unlink the synced design before editing it.


## Before publishing

After editing a custom design, review the block on desktop and mobile. Check that:

* all required fields are visible;
* links and buttons work;
* images are cropped correctly;
* long text still fits the layout;
* hidden fields are not needed by CMS users;
* JavaScript interactions work as expected.