Skip to main content
Image

​
Allgemeine Beschreibung

Die Icon Textbox ist ein einfaches Designelement mit einem prominenten Icon, Text und optionaler Verlinkung. Mit der Icon Textbox kannst du auf Inhalt aufmerksam machen, Schritt für Schritt Anleitungen schreiben, oder auch Angebote platzieren

​
Einsatzmöglichkeiten (Inspiration)

  • Zeig wie einfach dein Produkt ist mit Schrittanleitungen
  • Stelle Angebote prominent dar
  • Warnmeldungen
  • Infoboxen
  • …

​
Featureübersicht:

  • Wahl zwischen Buchstabe/Zahl oder Icon
  • Optionale Verlinkung

​
Settings:

​
Textinhalt

Image
Überschrift: Legt die Überschrift fest Inhalt: Legt den Textinhalt fest

​
Icon

Image
Darstellungsform: Wähle zwischen
  • Icon: stellt ein Icon im Kreis über dem Text dar
  • Zahl/Buchstabe: Stellt eine ausgewählte Zahl oder einen Buchstaben dar

​
Darstellung

Image
Icon Farbe: Legt die Farbe des Icons fest Boxschatten verwenden: Verleiht der Box einen dezenten Schatten, der dem Element mehr räumliche Tiefe verleiht.

​
Button

Image
Button verwenden: Auswahl, ob ein Button dargestellt werden soll oder nicht Buttonlink: URL auf die der Button bei Klick leiten soll. Für Verlinkung auf andere Seiten muss die vollständige URL angelegt werden. Für Verlinkungen auf der eigenen Domain reicht der relative Pfad. Damit der Link innerhalb der aktuellen Seite zu einem Bereich scrollt, muss der Bereich eine ID haben, dann kannst du mit #mein-id automatisch dort hin scrollen lassen per Klick. Siehe Allgemeine Dokumentation für das Anlegen von IDs in OPC Portlets 
Verlinkung auf Drittseite:
https://dreizack-medien.de/meine-kategorie/mein-produkt 

Verlinkung innerhalb der eigenen Domain:
/meine-kategorie/mein-produkt

Verlinkung zu Container:
#meine-id
/meine-kategorie/mein-produkt#meine-id
Button Text: Text, der auf dem Button steht Button Type: Wie soll der Button dargestellt werden
  • Full: vollflächig mit Farbe
  • Outlined: weiß mit farbigem Rand
  • Plain Text: nur Text wird farbig angezeigt, ähnlich wie ein Link
Button Farbe: Farbe des Buttons. Je nach Type färbt sich die Fläche (Full), der Rahmen (Outlined) oder die Schriftfarbe (Plain Text). Die Farbauswahl richtet sich nach Templateeinstellung und passt sich so nahtlos deinem Design an. Button Breite: Auswahl wie der Button in der Breite dargestellt wird:
  • Content Width: So breit wie der Text darin
  • Full Width: Über die gesamte Breite des Containers
Button Ausrichtungen: Hier kannst du für jede Bildschirmgröße auswählen wie sich der Button verhalten soll, ob er links-, rechtsbündig oder zentriert dargestellt werden soll. Das ist sinnvoll zu durchdenken, denn auf mobilen Ansichten, insbesondere wenn dein Gridlayout umbricht, kann die Buttonposition im Verhältnis darunter leiden. Link in neuen Tab öffnen: Bei Klick auf den Link wird ein neuer Tab geöffnet. Icon vor oder nach dem Text: Hat hier aktuell leider keine Funktion und wird in einer der kommenden Versionen entfernt