Die Inhaltselemente des Contao Themes im Überblick.
Mit Akkordeons, Formularen, Tabellen, Tabs, Teasern und anderen Inhaltselementen 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 Tastatureingabe (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 Klappmechanismus 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?
- Suchende klicken auf einen Suchmaschineneintrag, 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.
- Selbst wenn die Suchenden, sofern sie keinen Chromium-basierten Browser verwenden, mit STRG+F die Seite durchsuchen, 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
Überschrift Akkordeon-Element 1
Lorem ipsum dolor sit amet...
Überschrift Akkordeon-Element 2
Überschrift Akkordeon-Element 2
Lorem ipsum dolor sit amet...
Überschrift Akkordeon-Element 3
Überschrift Akkordeon-Element 3
Lorem ipsum dolor sit amet...
Überschrift Akkordeon-Element 4
Überschrift Akkordeon-Element 4
Lorem ipsum dolor sit amet...
Du kannst mehrere Akkordeons gleichzeitig auf einer Seite einbinden.
Überschrift Akkordeon-Element 1
Überschrift Akkordeon-Element 1
Lorem ipsum dolor sit amet...
Überschrift Akkordeon-Element 2
Überschrift Akkordeon-Element 2
Lorem ipsum dolor sit amet...
Überschrift Akkordeon-Element 3
Überschrift Akkordeon-Element 3
Lorem ipsum dolor sit amet...
Überschrift Akkordeon-Element 4
Überschrift Akkordeon-Element 4
Lorem ipsum dolor sit amet...
Tabellen
Für eine strukturierte Darstellung deiner Daten stehen dir ein einfacher und ein mehrdimensionaler Tabellentyp zur Verfügung. In der mobilen Ansicht werden bei beiden Tabellentypen Kopfzellen und Datenzellen aufeinandergestapelt und jeweils in einer Gruppe zusammengefasst. 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 mehrdimensionale 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 |
Mehrdimensionale Tabelle
Kopfzelle A | Kopfzelle B | Kopfzelle C | Kopfzelle D | Kopfzelle E | |
---|---|---|---|---|---|
Kopfzelle 1 | A1 | B1 | C1 | D1 | E1 |
Kopfzelle 2 | A2 | B2 | C2 | D2 | E2 |
Kopfzelle 3 | A3 | B3 | C3 | D3 | E3 |
Registerkarten (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
Überschrift Registerkarte 1
Lorem ipsum dolor sit amet...
Tab 2
Überschrift Registerkarte 2
Lorem ipsum dolor sit amet...
Tab 3
Überschrift Registerkarte 3
Lorem ipsum dolor sit amet...
Tab 4
Überschrift Registerkarte 4
Lorem ipsum dolor sit amet...
Du kannst mehrere Registerkartenabschnitte gleichzeitig auf einer Seite einbinden.
Tab 1
Überschrift Registerkarte 1
Lorem ipsum dolor sit amet...
Tab 2
Überschrift Registerkarte 2
Lorem ipsum dolor sit amet...
Tab 3
Überschrift Registerkarte 3
Lorem ipsum dolor sit amet...
Tab 4
Überschrift Registerkarte 4
Lorem ipsum dolor sit amet...
Icon-Liste
- [Mobilfunknummer]
- [E-Mail-Adresse]
- [Internet-Adresse]
- [Adresse]
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?
Formularelemente
Mit den folgenden Formularelementen kannst du dir ein individuelles Formular zusammenstellen.
Mit * gekennzeichnete Felder sind Pflichtfelder.