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

ThemeWare® "Call-to-Action"

{% 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 ![](/files/5URCkVnh55QbNfBAp6e7) "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.

ThemeWare® "Call-to-Action" konfigurieren

*** ## 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 `` 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. > > **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.

Elemente vom "Call-to-Action"

### 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. {% 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="" %} ThemeWare® Demoshop => Call-to-Action {% endembed %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/call-to-action.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.