Um 80 Grad gedrehte Makroaufnahme von einer gefüllten Nelkenblüte.
Um 20 Grad gedrehte Makroaufnahme von einer gefüllten Nelkenblüte.
Makroaufnahme von einer gefüllten Nelkenblüte.

Die Inhalts­elemente des Contao Templates im Überblick.

Mit Akkordeons, Formularen, Tabellen, Tabs, Teasern und anderen Inhalts­elementen kannst du deine Website auf vielfältige Weise gestalten.

Nicht exklusives Akkordeon, animiert mit JavaScript

Mit einem Akkordeon kannst du umfangreiche Inhalte platzsparend präsentieren. Die einzelnen Elemente des Akkordeons lassen sich sowohl via Mausklick als auch per Tastatur­eingabe (Enter- oder Leertaste) ein- und ausklappen. Mehrere Akkordeon-Elemente können gleichzeitig geöffnet sein (nicht exklusives Akkordeon). JavaScript erweitert die Funktionalität des Akkordeons. Es sorgt für ein rollendes Öffnen und Schließen der Akkordeon-Elemente. Bei deaktiviertem JavaScript öffnen sich die Akkordeon-Elemente zwar abrupt, sie bleiben aber voll funktionsfähig.

Wenn du den Einsatz eines Akkordeons erwägst, solltest du folgende Punkte bedenken: Ausgeblendete Inhalte sind nach dem Öffnen einer Seite im Browser zunächst nicht sichtbar. Besucher:innen deiner Website haben möglicherweise Schwierigkeiten, diese Inhalte zu finden. Vielleicht erkennen sie den Klapp­mechanismus der Akkordeon-Elemente nicht. Oder es fehlt der Anreiz, die Akkordeon-Elemente zu öffnen.

Zudem läufst du Gefahr, dass Suchende auf deiner Website nicht das finden, wonach sie suchen.

Woran liegt das?

  1. Suchende klicken auf einen Suchmaschinen­eintrag, der das gesuchte Schlüsselwort enthält, und landen auf deiner Website. Dort ist das erwartete Schlüsselwort dann aber nicht zu finden, weil es sich in einem geschlossenen Akkordeon-Element befindet.
  2. Selbst, wenn die Suchenden in Anschluss mit STRG+F die Seitensuche nutzen, werden sie nicht fündig. Sie könnten sich veranlasst sehen, deine Website wegen des nicht auffindbaren Schlüsselwortes vorzeitig zu verlassen. Ein "manuelles" Suchen auf der Seite ist vielen zu mühsam.

Ich empfehle dir daher, die Vor- und Nachteile abzuwägen, bevor du dich für die Verwendung eines Akkordeons entschließt.

Überschrift Akkordeon-Element 1

Über­schrift Akkordeon-Element 1

Lorem ipsum dolor sit amet...

Überschrift Akkordeon-Element 2

Über­schrift Akkordeon-Element 2

Lorem ipsum dolor sit amet...

Überschrift Akkordeon-Element 3

Über­schrift Akkordeon-Element 3

Lorem ipsum dolor sit amet...

Überschrift Akkordeon-Element 4

Über­schrift Akkordeon-Element 4

Lorem ipsum dolor sit amet...

Du kannst mehrere Akkordeons gleichzeitig auf einer Seite einbinden.

Überschrift Akkordeon-Element 1

Über­schrift Akkordeon-Element 1

Lorem ipsum dolor sit amet...

Überschrift Akkordeon-Element 2

Über­schrift Akkordeon-Element 2

Lorem ipsum dolor sit amet...

Überschrift Akkordeon-Element 3

Über­schrift Akkordeon-Element 3

Lorem ipsum dolor sit amet...

Überschrift Akkordeon-Element 4

Über­schrift Akkordeon-Element 4

Lorem ipsum dolor sit amet...

Tabellen

Für eine strukturierte Darstellung deiner Daten stehen dir ein einfacher und ein mehr­dimensionaler Tabellentyp zur Verfügung. In der mobilen Ansicht werden bei beiden Tabellen­typen Kopfzellen und Datenzellen aufeinander­gestapelt und jeweils in einer Gruppe zusammen­gefasst. Die Datenzellen sind gelabelt, damit diese den Kopfzellen korrekt zugeordnet werden. Die Label stellen zudem sicher, dass Screenreader die Tabellen sowohl in der Desktop- als auch in der mobilen Ansicht korrekt wiedergeben. Der einfache Tabellentyp besitzt einen horizontalen Tabellenkopf, der mehr­dimensionale Tabellentyp einen horizontalen und zusätzlich einen vertikalen Tabellenkopf.

Einfache Tabelle

Kopfzelle A Kopfzelle B Kopfzelle C Kopfzelle D Kopfzelle E Kopfzelle F
A1 B1 C1 D1 E1 F1
A2 B2 C2 D2 E2 F2
A3 B3 C3 D3 E3 F3

Mehr­dimensionale Tabelle

Kopfzelle A Kopfzelle B Kopfzelle C Kopfzelle D Kopfzelle E
Kopf­zelle 1 A1 B1 C1 D1 E1
Kopf­zelle 2 A2 B2 C2 D2 E2
Kopf­zelle 3 A3 B3 C3 D3 E3

Register­karten (Tabs)

Mit Registerkarten steht dir ebenfalls eine Komponente zur Verfügung, die Inhalte platzsparend bereithält. Allerdings gilt auch für die Registerkarten, dass dadurch den Besucher:innen Inhalte unter Umständen vorenthalten werden. Der Einsatz von Registerkarten sollte daher wohl überlegt sein.

Tab 1

Über­schrift Registerkarte 1

Lorem ipsum dolor sit amet...

Tab 2

Über­schrift Registerkarte 2

Lorem ipsum dolor sit amet...

Tab 3

Über­schrift Registerkarte 3

Lorem ipsum dolor sit amet...

Tab 4

Über­schrift Registerkarte 4

Lorem ipsum dolor sit amet...

Du kannst mehrere Registerkartenabschnitte gleichzeitig auf einer Seite einbinden.

Tab 1

Über­schrift Registerkarte 1

Lorem ipsum dolor sit amet...

Tab 2

Über­schrift Registerkarte 2

Lorem ipsum dolor sit amet...

Tab 3

Über­schrift Registerkarte 3

Lorem ipsum dolor sit amet...

Tab 4

Über­schrift Registerkarte 4

Lorem ipsum dolor sit amet...

Teaser

Icon-Liste

Inhaltsboxen

Inhaltsbox mit voller Breite

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 4

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Inhaltsbox 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, distinctio nam? Unde delectus dolores qui ducimus possimus ullam maiores consectetur molestias dignissimos alias, officiis similique illo dolore officia quas tenetur?

Formular­elemente

Optionsfelder*
Kontrollfelder*
Einwilligung Datenschutz*

Mein Versprechen: Ich verwende deine Daten ausschließlich zur Beantwortung deiner Anfrage. Auf keinen Fall gebe ich deine Daten an Dritte weiter. Du kannst deine Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen. Im Falle eines Widerrufs lösche ich deine Daten. Deine Daten werden ebenfalls gelöscht, wenn deine Anfrage abschließend beantwortet wurde, oder der Zweck für die Speicherung deiner Daten entfallen ist. Du kannst jederzeit Auskunft über die zu deiner Person gespeicherten Daten verlangen.