# Call-to-Action

Der **ThemeWare® "Call-to-Action"** ist unabhängig von seinem CMS-Block. Du kannst ihn auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FwiothNcPjXH5DFcOdkKz%2Fcms-element--call-to-action.png?alt=media&#x26;token=42f9b5a8-bc41-4ae1-b265-cd6ffbb11269" alt=""><figcaption><p>ThemeWare® "Call-to-Action"</p></figcaption></figure>

{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Element konfigurieren

Den ThemeWare® "Call-to-Action"-Teaser kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das gewünschte CMS-Element
3. Klicke auf das ![](https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FIZM6GLQF0MWHOXpClvGX%2Ficon-cog.png?alt=media\&token=b20c0af0-cbac-4884-89df-58b77f274c9d) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F6YcTkkHhIkc8nLMLeAD5%2Fcms-call-to-action--configure.png?alt=media&#x26;token=d77485fe-0048-437a-a079-1d477948ae16" alt=""><figcaption><p>ThemeWare® "Call-to-Action" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Call-to-Action" ist recht selbsterklärend. Der **Text**, der **Button-Text** und das **Bild** sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.

### Allgemein

Im Tab "Allgemein" konfigurierst du den Content des Elementes.

> #### Content (Inhalt)
>
> Im Abschnitt "Content" kannst du die **Überschrift** (3), den **Text** (4) und den **Button-Text** (5) für den Teaser eingeben. Der Text und der Button-Text sind Pflichtfelder.
>
> #### Bild
>
> Im Abschnitt "Bild" definierst du das **Hintergrundbild** (1) des Teasers. Dies ist ein Pflichtfeld.
>
> #### Link
>
> Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.

{% hint style="info" %}
**Hinweis**: Das Textfeld ist **HTML**-fähig. Links `<a>` sollten allerdings nicht verwendet werden, da dies die eigentliche Verlinkung des Elementes stört.
{% endhint %}

### Layout

Im Tab "Layout" kannst du das **Overlay** (2), den **Text** (3, 4) im Overlay, den **Hover-Effekt** vom Content und ein **Farb-Overlay** konfigurieren.

> #### Allgemein
>
> Im Abschnitt "Allgemein" kannst du die **allgemeine Hintergrundfarbe** (1) konfigurieren.&#x20;
>
> #### Content (Inhalt)
>
> Im Abschnitt "Content" kannst du die gewünschte **Textausrichtung** auswählen.
>
> #### Überschrift
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart** und **Textfarbe** für die Überschrift (3) konfigurieren.
>
> #### Text
>
> Im Abschnitt "Text" kannst du die **Schriftart** und **Textfarbe** sowohl für den Text (4) konfigurieren.
>
> #### Button
>
> Im Abschnitt "Button" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button (5) gefüllt oder als Outline-Button dargestellt werden soll.
>
> #### Bild
>
> Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
>
> #### Content-Overlay
>
> Im Abschnitt "Content-Overlay" konfigurierst du, wie der Name schon sagt, das Overlay (2). Hier kannst du die **horizontale Ausrichtung** und die **vertikale Ausrichtung** vom Overlay konfigurieren. Zudem kannst du die **Breite** (z.B. auto oder 90%) und die **maximale Breite** (z.B. 90% oder 740px) für das Overlay festlegen.
>
> Mit der Konfiguration "**Overlay-Styling anwenden**" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die **Hintergrundfarbe** festlegen, einen **Hintergrund-Effekt**, einen **Schlagschatten** und **abgerundete Ecken** auswählen.
>
> #### Hover
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** für den Inhalt (=Text) auswählen.
>
> #### Farb-Overlay
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.&#x20;

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FKhvXu9xs6jYgtvCBGylC%2Fcms-element--call-to-action-components.png?alt=media&#x26;token=38206708-3809-4e26-945b-ae6c57ddc98e" alt=""><figcaption><p>Elemente vom "Call-to-Action"</p></figcaption></figure>

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.

### Erweitert

Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.&#x20;

{% hint style="info" %}
**Hinweis**: Bitte beachte, dass Theme-Variablen nicht in der Administration zur Verfügung stehen. Die **Button-Farbe** der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
{% endhint %}

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Elemente/Call-to-Action/>" %}
ThemeWare® Demoshop => Call-to-Action
{% endembed %}