> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Button Plus

# Allgemeine Beschreibung

Das "Button Plus" Portlet ermöglicht die einfache Integration von Schaltflächen (Buttons) in deinen Onlineshop. Diese Buttons können für verschiedene Aktionen oder Verlinkungen genutzt werden.

# Einsatzmöglichkeiten (Inspiration)

* **Handlungsaufruf:** Nutzen Sie Buttons, um Besucher Ihrer Webseite dazu aufzufordern, bestimmte Aktionen durchzuführen, wie das Absenden eines Formulars, das Herunterladen von Dateien oder das Teilen von Inhalten in sozialen Medien.
* **Navigation:** Verwenden Sie Buttons zur Navigation, um Besucher zu wichtigen Seiten Ihrer Webseite zu leiten, wie beispielsweise zur Startseite, zu Produktseiten oder Kontaktinformationen.
* **Hervorhebung von Call-to-Action (CTA):** Buttons können als effektive Call-to-Action-Elemente verwendet werden, um die Aufmerksamkeit auf spezielle Angebote, Rabatte oder Newsletter-Abonnements zu lenken.

***

# Featureübersicht:

* **Anpassbare Gestaltung:** Das "Button" Portlet bietet vielfältige Optionen zur Anpassung der Schaltfläche, einschließlich Farbauswahl, Buttonstil und Größe.
* **Verlinkungsoptionen:** Sie können die Schaltfläche einfach mit externen URLs oder internen Seiten Ihrer Webseite verlinken, um die Navigation für Ihre Besucher zu erleichtern. Außerdem kann der Button verschiedene Events auslösen
* **Responsives Design:** Die Buttons können an verschiedene Bildschirmgrößen und Gerätetypen angepasst werden, um eine konsistente Darstellung auf allen Plattformen zu gewährleisten.
* **Hervorhebungsfunktion:** Die Schaltflächen können so gestaltet werden, dass sie hervorstechen und die Aufmerksamkeit der Besucher auf sich ziehen, insbesondere für wichtige Handlungsaufrufe oder Angebote.

***

# Settings:

## Elements

<Frame>
  <img src="https://mintcdn.com/dzm/Auz6la5AvaAlqJV5/images/image-82.png?fit=max&auto=format&n=Auz6la5AvaAlqJV5&q=85&s=1de95dc059993b88449c6e928da9b85c" alt="Image" width="2857" height="3849" data-path="images/image-82.png" />
</Frame>

***

**Button als Link oder Funktionsbutton verwenden:** Auswahl zwischen:

* Linkbutton = Wird verwendet, um auf eine in- bzw. externe URL zu verweisen. Durch Angabe einer #-ElementID kann auch auf ein bestimmtes Element innerhalb der Seite verwiesen werden ➝ Buttonlink = Legt die Zielseite/ das Zielelement des Buttons fest
* Funktionsbutton = Wird verwendet um bestimmte Events auszulösen. So kann beispielsweise unser PopUp-Container getriggert werden. ➝ EventID = Hier kann eine eindeutige EventID vergeben werden, die an anderen Stellen als Auslöser definiert werden kann

**Buttontyp**: Auswahl zwischen:

* Full = Vollständig gefüllter Button
* Outlined = Umrandeter Button ohne Füllung
* Plain Text = Button ohne Umrandung und Füllung
* Link = Lässt den Button wie einen Link aussehen

**Buttonfarbe:** Auswahl zwischen:

* Primary
* Secondary
* Warning
* Danger
* Info
* Sucess
* Dark
* Light **Diese Farben orientieren sich an deinem Template und können nur dort geändert werden**

**Buttonbreite:** Auswahl zwischen:

* Content Width = Die Breite orientiert sich an dem Inhalt des Buttons
* Full Width = Der Button verwendet immer die maximal mögliche Breite

**Buttonausrichtung:** Auswahl zwischen:

* links, zentriert und rechts **Außerdem lässt sich die Ausrichtung je nach Displaygröße steuern (XS als kleinste Displaygröße; XL als größte Displaygröße)**

**Icon verwenden:** Auswahl zwischen:

* Nein = Es wird kein Icon verwendet
* Ja = Es öffnet sich eine Vielzahl an Icons zur Auswahl und ein Icon wird auf dem Button angezeigt

**Icon vor oder nach dem Text:** Auswahl zwischen:

* Vor dem Text = Icon wird vor dem Text angezeigt
* Nach dem Text = Icon wird nach dem Text angezeigt

***

***