TYPO3

Text & Medien Element

Nutzen Sie das Inhaltselement Text & Medien, um Fließtext, Bilder und/oder Videos anzuzeigen. Bilder und Videos müssen Sie vorher mit den richtigen Spezifikationen in die Dateiliste hochladen.

 

Zu den Designvarianten für Text & Medien

Text & Medien einfügen

Öffnen Sie im TYPO3-Backend die Seite, die Sie bearbeiten möchten. Klicken Sie an der gewünschten Stelle auf Neuen Inhalt erstellen. 

  1. Wählen Sie in der linken Spalte die Kategorie Typischer Seiteninhalt aus.
  2. In der rechten Spalte erscheint nun das Inhaltselement Text & Medien, das Sie auswählen können.
  1. Reiter Allgemein: Hier legen Sie die grundlegenden Texte und Inhalte für das Element fest.
    1. Überschrift: Fügen Sie eine kurze, aussagekräftige Überschrift ein. Sie hilft den Besucher*innen, den Inhalt schneller zu erfassen. Im Feld Typ legen Sie außerdem die Hierarchie der Überschrift fest (z. B. H2, H3). Wählen Sie Hidden (Versteckt), um die Überschrift nur im Backend anzuzeigen. Das hilft Ihnen, das Inhaltselement im Backend wiederzufinden. Besucher*innen der Website sehen eine versteckte Überschrift nicht.
    2. Text: Tragen Sie den gewünschten Fließtext in das Textfeld ein. Sie können Formatierungen (z. B. fett, kursiv, hoch- oder tiefgestellt) vornehmen, Aufzählungen, Nummerierungen, Links, Tabellen und Sonderzeichen einfügen sowie die Sprache des Textes festlegen.

Button einfügen

  1. Markieren Sie einen aussagekräftigen Text und verlinken Sie ihn über das Link-Symbol (bwz. Strg+K drücken) mit dem gewünschten Linkziel.
  2. Wählen Sie anschließend im Drop-down Stile den Punkt Button Secondary.

Lead Text einfügen

  1. Markieren Sie im Texteditor den gesamten Text, der als Einleitung hervorgehoben werden soll.
  2. Klicken Sie anschließend im Editor links oben auf Stile und wählen Sie die Option Lead aus.

Der markierte Text wird nun optisch größer dargestellt und hebt sich als Einleitung hervor. Technisch bleibt er jedoch weiterhin ein Paragraph und wird nicht als Überschrift ausgezeichnet.

Wichtig: Verwenden Sie den Stil Lead nur für kurze Einleitungen oder Hervorhebungen am Beginn eines Abschnitts. Er ersetzt keine semantische Überschrift (z. B. H2 oder H3) und sollte daher nicht zur Strukturierung von Inhalten verwendet werden.

Bild/Video einfügen

  1. Reiter Medien: Hier können Sie ein Bild (gif, jpg, jpeg, png, webp) oder Video von den Plattformen YouTube oder Vimeo einfügen.
  2. Mediendatei hinzufügen: Klicken Sie auf Mediendatei hinzufügen und navigieren Sie im folgenden Pop-up Dateiauswahl im Seitenbaum zur gewünschten Datei. Aktivieren Sie die Checkbox oder klicken Sie auf das Plus-Symbol und klicken Sie auf Auswahl importieren. Die Datei wird in das Inhaltselement übernommen.
  1. Alternativer Text: Falls die Mediendatei nicht mit einem Alternativen Text (nur bei nicht-dekorativen Bildern) verknüpft ist, müssen Sie diesen nun eintragen. Dies ist für die digitale Barrierefreiheit und Suchmaschinenfreundlichkeit Ihrer Webseite wichtig.
  2. Beschreibung (optional): Sie können eine kurze Bildbeschreibung hinzufügen (z. B. die Namen der Personen, die Adresse des Gebäudes,…).
  3. Urheberrecht: Wenn das Bild eine Urheberrechtsangabe hat, müssen Sie diese hier einfügen.
  4. Titel (optional): Sie können einen Bildtitel einfügen. Dieser wird beim Hover-over angezeigt.
  5. Editor öffnen: Klicken Sie unter Bildbearbeitung auf Editor öffnen, um das Seitenverhältnis des Bildes zu ändern.
  6. Link: Falls gewünscht, können Sie das Bild auch mit einem Link auf eine weiterführende Seite versehen.
  1. Bilder bei Klick vergrößern: Wenn Sie möchten, dass die Bilder bei Klick vergrößert dargestellt werden, aktivieren Sie dazu den Slider unter Verhalten Bei Klick vergrößern.
  1. Vorschaubild: Falls Sie ein Video hochgeladen haben, können Sie das automatisch angezeigte Vorschaubild ersetzen.
  2. Position und Ausrichtung: Legen Sie fest, wo das Bild oder Video im Verhältnis zum Text angezeigt wird.
  3. Bei Klick vergrößern: Wenn Sie wollen, dass das Bild angeklickt und vergrößert dargestellt werden kann, betätigen Sie den Schieberegler.

Zum Abschluss scrollen Sie wieder nach oben und klicken Sie Speichern. 

Zu den Spezifikationen für Bilder

Wichtig

  • Wenn Sie mehrere Bilder einbinden möchten, legen Sie für jedes Bild ein eigenes Text & Medien-Element an. So bleibt die Darstellung auch in der mobilen Ansicht übersichtlich und barrierefrei.
  • Verwenden Sie für alle nicht-dekorativen Bilder (z. B. verlinkte Logos oder Grafiken mit Text) aussagekräftige Alt-Texte, um die digitale Barrierefreiheit und die Suchmaschinenfreundlichkeit der Seite zu gewährleisten.

Erscheinungsbild festlegen

  1. Reiter Erscheinungsbild: Hier legen Sie fest, wie das Inhaltselement angezeigt wird.
  2. Alternativer Hintergrund: Aktivieren Sie den Schieberegler, um das Inhaltselement mit alternativem Hintergrund (hellgrau) zu hinterlegen.
  3. Abstand: Hier steuern Sie den Abstand zum nächsten Element. Diese Einstellung wirkt sich ausschließlich auf das Inhaltselement Text & Medien aus.
  4. Links in Menüs zeigen: Wenn Sie ein Inhaltsverzeichnis auf der Seite anlegen, erscheint die Überschrift des Inhaltselements darin als Link.
  5. Link zum Seitenanfang anfügen: Fügt am Ende des Elements einen „Nach oben“-Link ein.

Veröffentlichung festlegen

  1. Reiter Zugriff: Hier steuern Sie die Sichtbarkeit des Inhaltselements auf der Website.
  2. Sichtbarkeit: Aktivieren Sie den Schieberegler, um das Inhaltselement auf der Website anzuzeigen oder auszublenden.
  3. Veröffentlichungsdatum: Legen Sie fest, ab wann das Inhaltselement automatisch veröffentlicht wird. Das ist hilfreich, wenn die Veröffentlichung während Ihrer Abwesenheit erfolgen soll.
  4. Ablaufdatum: Hier können Sie ein Datum eintragen, ab dem das Inhaltselement nicht mehr angezeigt wird.
  5. Zugriffsrechte für Benutzer*innengruppen: Bestimmen Sie, ob das Inhaltselement nur für angemeldete Nutzer*innen sichtbar sein soll.

Haben Sie noch Fragen?

Sie haben Fragen oder Anmerkungen zu den TYPO3 Anleitungen?

Nach oben