Direkt zum Seiteninhalt springen

Inhalts­elemente

Standardmäßig in Contao verfügbare Inhaltselemente

Damit Sie Ihre Inhalte übersichtlich strukturieren und einfach verwalten können, stellt Contao sogenannte Inhaltselemente zur Verfügung. Inhaltselemente können z.B. Überschriften sein, oder Textblöcke, Bilder, Galerien und vieles mehr. In Contao sind von Haus aus schon unterschiedliche Elementtypen angelegt. Je nach Bedarf können aber zusätzliche, maßgeschneiderte Elementtypen erstellt werden.

link-button-style

Verfügbare Inhaltselemente

  1. Textelemente: Überschrift, Text, Text und Bild, Beschreibungsliste, Tabelle, Code
  2. Link-Elemente: Hyperlink, Top-Link
  3. Datei-Elemente: Download, Downloads
  4. Media-Elemente: Bild, Galerie, Video/Audio, Vimeo, YouTube
  5. Verschiedenes: Akkordeon, Content-Slider, Element-Gruppe

1. Textelemente

Zu jedem Textelement können Sie ein Bild hinzufügen – dieses können Sie wahlweise oberhalb, rechts, links oder unterhalb vom Text positionieren.
Die Spalten passen sich in der Breite dem Inhalt an.

Textelement – Bild oben

Jetzt probieren wir mal eine ganz lange figcaption aus und schauen, ob die dann über das Bild hinausläuft.

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen.

Textelement – Bild links

Image by Erik Tanghe/Pixabay

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen.

Textelement – Bild rechts

Image by Erik Tanghe/Pixabay

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen.

Textelement – Bild unten

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen.

Image by Erik Tanghe/Pixabay

Beschreibungsliste

Begriff
Detailbeschreibung
Begriff
Detailbeschreibung
Begriff
Detailbeschreibung

Tabelle

Tab 1 Tab 2 Tab 3 Tab 4
Fußzeile Random Inhalt Random Inhalt Random Inhalt Random Inhalt
Reihe 1 Random Inhalt Random Inhalt Random Inhalt Random Inhalt
Reihe 2 Random Inhalt Random Inhalt Random Inhalt Random Inhalt
Reihe 3 Random Inhalt Random Inhalt Random Inhalt Random Inhalt

Code

code {
    max-width: 80ch;
    background-color: $color-neutral-100;
    padding: 0.125em 0.25rem;
    border-radius: 0.25em;
  }
nach oben

2. Link-Elemente

Hyperlink

Link-Text

Top-Link

nach oben

3. Datei-Elemente

Download (einzelne Datei)

Testpdf.pdf

Download (mehrere Dateien)

nach oben

4. Media-Elemente

Bild (einzeln)

Bildunterschrift

Bildergalerie

  • Image by Joe/Pixabay
  • Image by Erik Tanghe/Pixabay
  • 1. Galeriebild – Bildunterschrift

Video-/Audio-Dateien

  • Audio-Datei (Dateiformat .mp3) auswählen
  • keine Player-Größe (gilt nur für Video)
  • kein Vorschaubild (gilt nur für Video)

Audiodatei

Sound-Effekt von Pixabay

Video (selbst gehostet)

Testvideo

Auf den Codec achten!

Codecs sorgen dafür, dass die großen Datenmengen in einem Video (oder auch in einem Audiofile) zum abspeichern komprimiert und zum ansehen wieder dekomprimiert werden. Es gibt verschiedene Codecs, und nicht alle sind fürs Web geeignet. Der HEVC-Codec beispielsweise ist patentgeschützt. Daher funktioniert er auch nicht so einfach im Web. Firefox spielt Videos mit diesem Codec gar nicht ab, Chrome nur, wenn das Betriebssystem den HEVC-Codec installiert hat.

Was ist ein Codec?
Videoformate auf MDN

YouTube

A taste of Austria

Vimeo

A taste of Austria
nach oben

5. Verschiedenes

Accordeon

Text-Überschrift

Text im Accordeon

Text-Überschrift

Text im Accordeon

Text-Überschrift

Text im Accordeon

Content-Slider

Image by Erik Tanghe/Pixabay
Image by Joe/Pixabay
nach oben