> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/call-to-action/einfacher-banner.md).

# Simple - Banner

Call-to-Action Banner for the shopping experiences

This element is a powerful tool to guide users to specific actions. It helps you draw attention to important calls to action and increases visitor engagement.

Whether it's subscribing to a newsletter, purchasing a product, linking to a category, or filling out a form—the CTA banner ensures that the desired action is presented clearly and appealingly.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FZguunXupv2iys34QH4YZ%2FBildschirmfoto%202024-10-07%20um%2019.59.00.png?alt=media&amp;token=ced29260-0956-45c7-8bbb-e0b84cf0eb49" alt=""><figcaption></figcaption></figure>

### General Configuration

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FDz5QP1GRybVhnaBpYGKw%2FBildschirmfoto%202024-10-07%20um%2020.00.32.png?alt=media&amp;token=c09af1bd-df34-4469-9901-6d9e8b05bf93" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="258">Function</th><th>Description</th></tr></thead><tbody><tr><td>Element Type (1)</td><td>Call-to-Action = Custom Link<br>Category = Category Link<br>Custom HTML = Custom Code in HTML / Twig Editor</td></tr><tr><td>Custom Media (2)</td><td>If set, a custom background image can be applied. Otherwise, it checks if a category image has been set.</td></tr><tr><td>Enable Video (3)</td><td>Allows placing a background video</td></tr><tr><td>Fixed Background (4)</td><td>Similar behavior to <a data-mention href="/cms-bundle/en/sections-and-blocks/sections/fixed-background.md">Fixed Background</a></td></tr><tr><td>Activate Call-to-Action (5)</td><td>If disabled, no link will be set</td></tr><tr><td>Entire Element Clickable (6)</td><td>If enabled, the entire banner is linked, not just the button</td></tr><tr><td>Open Link in New Tab (7)</td><td>The link will open in a new browser tab</td></tr><tr><td>Show Button (8)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/button.md">Button</a></td></tr></tbody></table>

### Media Configuration

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2F4Fc9zyxZOmtRK8FJAFub%2FBildschirmfoto%202024-10-07%20um%2020.01.40.png?alt=media&amp;token=32e7425e-89f8-4d2f-8d27-9d70ec65bcbe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Here you can upload images or videos.
{% endhint %}

### Category Configuration

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FmbAUoUBNpcvsYCYxsZws%2FBildschirmfoto%202024-10-07%20um%2020.02.03.png?alt=media&amp;token=53edcdfe-ab6b-41a7-b18c-680c5321d154" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="306">Function</th><th>Description</th></tr></thead><tbody><tr><td>Activate Category Title (1)</td><td>The title is automatically taken from the assigned category</td></tr><tr><td>Category Description (2)</td><td>The description of the category if maintained in the category</td></tr><tr><td>Caption Box - Width (3)</td><td>Maximum width of the box that provides the content. This is important for line breaks.</td></tr><tr><td>Max. Characters of Description (4)</td><td>You can limit the description here. Overflow will be displayed with "..."</td></tr><tr><td>Color Settings (5)</td><td>Ensure a high-contrast color scheme</td></tr></tbody></table>

### Layout Configuration

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FCgCnQNuZrWPkjYC5Mz2H%2FBildschirmfoto%202024-10-07%20um%2020.03.03.png?alt=media&amp;token=d70c5097-9096-402d-9c77-45849afe2f2e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="264">Function</th><th>Description</th></tr></thead><tbody><tr><td>Vertical Alignment (1)</td><td>The vertical positioning of the content box within the element</td></tr><tr><td>Horizontal Alignment (2)</td><td>The horizontal positioning of the content box within the element</td></tr><tr><td>Text Alignment (3)</td><td>Left-aligned, centered, or right-aligned</td></tr><tr><td>Set Dimensions (4)</td><td>Here you can make size configurations. Ensure a good interplay of background, size of the element, and amount of content.</td></tr><tr><td>Font Sizes (5)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/schriftgrosse.md">Font size</a></td></tr></tbody></table>

### SEO Settings

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/en/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}