> For the complete documentation index, see [llms.txt](https://help.usejimo.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.usejimo.com/docs/experiences/banners/overview.md).

# Overview

Quickly design and modify interactive banners that captivate and guide your users.

### **Accessing the Builder**

Navigate to the Builder from the dashboard to start crafting your banner.

### **Main Features**

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fzn26rZC1TNewzhGEsD7s%2FBannersBuilder.png?alt=media&amp;token=b252d651-8807-4bfc-9caf-d57ecee18501" alt=""><figcaption><p>Banner builder</p></figcaption></figure>

* **A (Banner Name and Back Button)**: At the very top, you have the ability to edit the name of your banner. The arrow next to it allows you to quickly return to the Dashboard for an overview of all your banners.
* **B (Live Preview)**: The central stage of the Builder provides a real-time preview of the banner, showing you exactly how it will appear for your users.
* **C (Action Buttons)**: Here, you'll find multiple actions:
  * The 'Save' button to secure your progress. This button allows you to force save but the builder [automatically saves your work regularly](#user-content-fn-1)[^1].&#x20;
  * The 'In-app editor' to visualize and edit the banner within the context of your actual website. You just have to indicate[ the starting point URL](#user-content-fn-2)[^2] on which you want to open your builder.
  * The 'Preview' to see a full simulation of your banner.
  * The 'Target & Publish' to set the criteria for who will see the banner and when.
* **D (Feature Panels Access)**:
  * The 'Elements Selector' to add new interactive components to your steps.
  * The 'Navigator' to see a structured view of your banner's flow and elements.
  * The 'Themes' to apply consistent styling across your banner.
  * The 'Translations' to manage multi-language versions of your banner.
* **E (Properties Sidebar)**: This sidebar is dedicated to the properties and parameters of the currently selected element in the navigator. Modify attributes like positioning, styling, and animations here.

***

<details>

<summary><mark style="color:blue;background-color:yellow;">Best Practices</mark></summary>

* **Consistent Design**: Use the themes panel to maintain a consistent look across your tour.
* **Contextual Editing**: Use the in-app editor to ensure each step fits perfectly within your site.

</details>

<details>

<summary><mark style="color:blue;background-color:yellow;">FAQs</mark></summary>

**Quick Help**: Address common queries about the Builder with succinct, helpful answers.

</details>

<details>

<summary><mark style="color:blue;background-color:yellow;">Further Resources</mark></summary>

**Learning and Support**: Direct users to tutorials and customer support for in-depth assistance with the Builder.

</details>

[^1]: <img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FQ5r0zzDqjnuzuqPc4xSm%2FTMbuilderSave.png?alt=media&amp;token=1f8501d8-918c-40b5-bbc2-1028e527d5e6" alt="" data-size="original">

[^2]: ![](https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FFDkIiAdWVjyCTQaotCfx%2FBannersBuilderEditInappBtn.png?alt=media\&token=237a05e3-6b9b-438b-a3d8-50167ea3284f)