Text & Medien

Text & Medien

Text & Medien

Dieses Element nutzt ihr zur Darstellung von Überschriften (mit Icons), Texten, Bildern und Videos.

Das Element bietet verschiedene Überschriftenformate. Außerdem hast du in diesem Element verschiedene Möglichkeiten zur Anordnung von Texten, Bildern und Videos sowie Formatierungen innerhalb der Texte. Texte können als Buttons, Links, in unterschiedlichen Größen oder Tabellen formatiert werden. Das ganze Element kann mit einer Hintergrundfarbe versehen werden und so zum Beispiel als Infobox dienen. 

Überschriften  Text  Texte & Medien 

Mögliche Überschriftenformate

Überschrift H1

Unterüberschrift

Überschrift H2

Unterüberschrift

Überschrift H3

Unterüberschrift

Überschrift H4

Unterüberschrift

Wichtig für die Barrierefreiheit

  • Nur eine H1 pro Seite verwenden
  • Logische und konsistente Reihenfolge (H1, H2, H3...)
  • Keine Überschriften als reine Gestaltungselemente verwenden, dafür gibt es Display Texte

Überschrift mit Icon

Hier sind verschiedene Varianten möglich

  • Icon Stil 
    • auf Kreis Hintergrund
    • auf quadratischem Hintergrund
    • ohne Hintergrund
       
  • Icon Farbe 
    • Primary
    • Secondary
    • schwarz
    • weiss
       
  • Icon Größe
    • klein
    • mittel
    • groß
       
  • Position des Icons
    • links in Überschrift 
    • zentriert über Überschrift

Überschrift mit Icon links

Style: Standard
Farbe: Primary
Größe: Klein

Überschrift mit Icon links

Style: Kreis Hintergrund
Farbe: Secondary
Größe: Medium

Überschrift mit Icon links

Style: Quadratischer Hintergrund
Farbe: Weiss
Größe: Groß

Überschrift mit Icon zentriert

Style: Kreis Hintergrund
Farbe: Primary
Größe: Medium

Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

 

Aufzählungen

 

  • text text text
  • text text text
  • text text text
  • text text text
  1. text text text
  2. text text text
  3. text text text

  4. text text text

     

Gefüllte Buttons

 

Primary Button 

Secondary Button 

Call to Action Button

 

Outline Buttons

 

Outline Primary

Outline Secondary 

Outline CTA

 

Verlinkungen
 

externer Link
E-Mail
interner Link
Datei Link

 

Display Texte

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Wichtig für die Barrierefreiheit

  • Kurze Sätze (max. 20 Wörter)
  • aktive Sprache
  • einfache, verständliche Sprache
  • Keine Fremdwörter oder diese im Glossar anlegen
  • Text linksbündig, nicht im Blocksatz

Text & Medien Element mit Hintergrundfarbe (primary)

Das Text & Media Element kann auch einen Hintergund in den definierten Markenfarben bekommen. Und so zum Beispiel als Infobox eingesetzt werden. Dieser Hintergrund kann entweder über die gesamte Seitenbreite oder nur den Inhaltsbereich gehen. 

Text & Medien Element mit Hintergrundfarbe (secondary) nur im Inhaltsbereich

Text Text Verlinkung Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

Texte & Medien

Im Text & Medien Element kannst du auch Texte mit Bildern oder Videos (über Youtube Link, Vimeo Link, Videodatei) kombinieren. Und Audiodateien anzeigen lassen. 

Die Medien lassen sich an folgenden Stellen positionieren:

  • rechts neben dem Text (Aufteilung 50/50)
  • links neben dem Text (Aufteilung 50/50)
  • über dem Text (Aufteilung 100/100)
  • unter dem Text (Aufteilung 100/100)

Die Medien können zusätzlich mit Unterschriften, Alt-Texten und Beschreibungen versehen werden. Das ist wichtig für die Barrierefreiheit, wenn die Medien nicht nur als Dekoration gedacht sind. 

Text links und Bild rechts

Alternativtext
Bildunterschrift

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

 

Text rechts und Video links

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

 

Text oben Bild unten

Alternativtext
Bildunterschrift

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

 

Text unten Bild oben

Alternativtext
Bildunterschrift

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

 

Text & Medien Elemente ohne Text

Videos, Bilder und Audios können mit dem Text & Media Element auch ohne Text dargestellt und in mehreren Spalten nebeneinander (abhängig von der Bildschirmgröße) angeordnet werden. 

Wir empfehlen: 

  • max. 4 Bilder 
  • max. 2 Videos

nebeneinander anzuordnen auf einem großen Bildschirm. 

Audiodatei

Audiodateibeschreibung Audiodateibeschreibung Audiodateibeschreibung Audiodateibeschreibung Audiodateibeschreibung Audiodateibeschreibung

Video oder Bild 2-spaltig

Videos oder Bilder 3-spaltig

Alternativtext
Bildunterschrift
Alternativtext
Bildunterschrift
Alternativtext
Bildunterschrift

Videos oder Bilder 4-spaltig

Alternativtext
Bildunterschrift
Alternativtext
Bildunterschrift
Alternativtext
Bildunterschrift
Alternativtext
Bildunterschrift

Wichtiger Hinweis

Wichtiger Hinweis

Diese Website ist eine Beispielseite des Produkts SelbsthilfePRO. Der Examplose Selbsthilfe e.V. ist eine fiktive Organisation. Examplose ist eine erfundene Erkrankung und kein reales Krankheitsbild. Alle Inhalte, Personen, Veranstaltungen und Erfahrungsberichte sind frei erfunden und dienen ausschließlich der Veranschaulichung der Plattform SelbsthilfePro.