Skip to main content

Allgemeine Beschreibung

Das “Bild und Button” Portlet bietet eine flexible Möglichkeit, Bilder und Schaltflächen auf deiner Webseite zu platzieren und sie nach deinen gestalterischen Vorlieben anzupassen. Mit den verschiedenen Verlinkungsoptionen und Anpassungsmöglichkeiten kannst du gezielte Aktionen fördern und die Benutzerinteraktion auf deiner Webseite steigern.

Einsatzmöglichkeiten (Inspiration)

  • Produktdarstellung: Nutze das “Bild und Button” Portlet, um Produkte oder Dienstleistungen mit ansprechenden Bildern und Handlungsaufforderungen zu präsentieren
  • Angebote: Platziere ansprechende Angebote oder Rabatte auf deiner Webseite und verknüpfe sie mit einem Button zur Weiterleitung zur Angebotsseite
  • Newsletter-Abonnement: Ermutige Besucher dazu, sich für deinen Newsletter anzumelden, indem du ein Bild und einen gut sichtbaren Abonnieren-Button verwendest
  • Call-to-Action: Verwende das Portlet, um wichtige Handlungsaufrufe hervorzuheben, z. B. die Kontaktaufnahme, das Anfordern von Informationen oder das Durchführen einer Bestellung

Featureübersicht:

  • Anpassbares Bild: Du kannst ein eigenes Bild hochladen
  • Mindesthöhe: Lege eine Mindesthöhe für das Portlet fest, um sicherzustellen, dass das Bild immer gut sichtbar ist.
  • Button-Funktionen:
    • Anpassbare Gestaltung: Du kannst die Schaltfläche in Bezug auf Farbe, Stil und Größe anpassen, um sie perfekt in das Design deiner Webseite zu integrieren.
    • Verlinkungsoptionen: Verknüpfe die Schaltfläche einfach mit externen URLs oder internen Seiten deiner Webseite, um die Navigation für deine Besucher zu erleichtern. Der Button kann auch verschiedene Events auslösen.
    • Responsives Design: Die Buttons passen sich automatisch verschiedenen Bildschirmgrößen und Gerätetypen an, um eine konsistente Darstellung sicherzustellen.
    • Hervorhebungsfunktion: Du kannst die Schaltfläche so gestalten, dass sie hervorsticht und die Aufmerksamkeit der Besucher auf sich zieht, insbesondere für wichtige Handlungsaufrufe oder Angebote.


Settings:

Allgemein

Image

Bild: Lade hier dein eigenes Bild hoch Mindesthöhe: Lege die Mindesthöhe für das Portlet, unabhängig vom gewählten Bild, fest

Button

Image

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

Buttontext: Definiert den Textinhalt, der auf dem Button steht

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