> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/engage/-MGi9-KKLwnWfoD36Ot6/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/templates.md).

# Templates

Customize and visualize the communication with your readers

Engage allows you to set up, design, and customize templates to create unique experiences for your visitors.\
\
Each [action type](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/campaigns/actions/what.md#action-types) comes with a set of pre-designed default templates. These can be modified using a variety of options, as well as edited directly in a built-in [WYSIWYG Editor](broken://pages/-MGqrebdI_26mS5qJlX3) or [GrapesJS editor](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/templates/template-management/new-template-editor.md). You can also create your own custom templates and edit, save, and delete them.

Templates can be selected and managed on the **Campaign level** of Engage under the [**Action Type**](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/campaigns/actions/what.md#action-types) (in the WHAT section) and from the [**Template Management**](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/templates/template-management.md) tab of your Engage dashboard. Additionally, in the Configurations tab, you can select and edit the templates for your Registration, Login, Activation, and Cookies Privacy forms [Registration, Login, Activation, and Cookies Privacy ](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/configurations.md#configuration-level-templates)forms in the **Configurations** tab.

## **Editable Components**

There are a number of components in every default template layout that can be modified according to your preferences:

* text (format, color, background color, font family, font size)​;
* background color (solid color, image, degree of transparency);
* background image (solid color, image, degree of transparency);
* buttons and links (button text, button color)​.

You can change their appearance using the built-in [WYSIWYG template editor](broken://pages/-MGqrebdI_26mS5qJlX3) or [GrapesJS editor](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/templates/template-management/new-template-editor/understanding-the-grapesjs-editor/editing-in-grapesjs-editor.md).

## Default Template Layouts

Engage supports several types of basic template layouts that can be customized to suit your preferred workflow, as well as the experience you’d like to create for your visitors.

### **Banner**

A banner is a template layout that you can use in multiple ways: to inform your visitors, create a subscription offer or a log-in suggestion. This layout is designed to take up the top or bottom part of the page:

![Example of a banner layout](https://2189759649-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fengage%2F-MGmQUMHxfSOK5LwVMxE%2F-MGmQbR74UQ4-ndNdt9t%2F626524355.png?generation=1599647683710078\&alt=media)

### **Inline**

This type of template layout is designed to be shown inside the body of an article. A variety of [action](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/campaigns/actions/what.md#action-types) options allow you to specify its exact position on the page. Here’s what it may look like:

![Example of an inline template layout](https://2189759649-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fengage%2F-MGmQUMHxfSOK5LwVMxE%2F-MGmQbR947htz2LObLB0%2F633602275.png?generation=1599647683678873\&alt=media)

### **Modal**

Modal templates are displayed on top of your content, partially overlapping it. There is also an option to create a backdrop that conceals the text from your visitors. Modal templates can be used for a variety of purposes. The default Engage modal templates are square or rectangular blocks:

![Example of a modal template](https://2189759649-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fengage%2F-MGmQUMHxfSOK5LwVMxE%2F-MGmQbRASrEFBlv_znux%2F633602281.png?generation=1599647683801497\&alt=media)

### **Small Info Box**

This is the smallest template layout that can be used to provide your visitors with various types of information (reminders, suggestions, offers, free trials, discounts, etc). Its default position is in one of the corners of the page, but you can customize it to be displayed anywhere using the [action type settings](/engage/-MGi9-KKLwnWfoD36Ot6/fundamentals/campaigns/actions/what.md#action-types).

Here is one of the default infobox layout variations:

![](https://2189759649-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fengage%2F-MGmQUMHxfSOK5LwVMxE%2F-MGmQbRCGMnq_C2E3VP8%2F635502635.png?generation=1599647683702424\&alt=media)