Logo Lindenschule

Grundschule

"Friedrich-Engels-Schule" Meerane
Martin-Hochmuth-Str. 20
 
08393 Meerane

Custom-Elemente

Die CUSTOM-Elemente sind individuell entwickelte Inhaltselemente, die speziell auf die Anforderungen der jeweiligen Website angepasst wurden. Sie beginnen immer mit dem Präfix „CUSTOM“ und erweitern die Standardfunktionen von Contao um maßgeschneiderte Darstellungen, Layouts oder interaktive Komponenten.

Dadurch erhalten Redakteur:innen Werkzeuge, die exakt auf die Inhalte und Strukturen der Seite zugeschnitten sind.

Seitenvorschau

Dieses Inhaltselement ermöglicht das Erstellen eines Vorschaublocks für eine Unterseite, der aus einem Bild, einer Überschrift, einem optionalen Teasertext sowie verschiedenen Darstellungsoptionen besteht. Der gesamte Block dient als Link zur Zielseite und eignet sich ideal für Startseiten, Übersichtsseiten oder Themenbereiche, in denen mehrere Unterseiten visuell ansprechend angezeigt werden sollen.

Einsatzbereiche

  • Startseiten und Teaserübersichten
  • Navigation zu thematischen Unterseiten

Der Seitenteaser ist speziell dafür konzipiert, in einer Elementgruppe Grid mit 3 Spalten verwendet zu werden. Die Abstände, die Bildverhältnisse und die Typografie sind darauf abgestimmt.

Link zur Seite (Pflichtfeld)

Für den Seitenteaser muss eine Zielseite ausgewählt werden.
Der gesamte Block – sowie optional ein zusätzlicher Button – verlinken auf genau diese Seite.

Überschrift

Titel des Teasers. Sie sollte den Inhalt oder Zweck der verlinkten Seite eindeutig benennen.

Bild (mit konfigurierbarer Größe)

Dient als visuelles Hauptelement.

  • Die Bildgröße kann frei eingestellt werden.
  • Metadaten (Alt-Text, Titel etc.) können überschrieben werden, um Barrierefreiheit und SEO zu verbessern.

Text – Teasertext

Ein optionaler kurzer Text, der zusätzliche Informationen zur Seite gibt.
Er unterstützt Nutzer:innen dabei, den Inhalt der verlinkten Seite schneller zu erfassen.

Hintergrundfarbe

Der gesamte Block kann mit einer Hintergrundfarbe versehen werden.
Dies ist hilfreich, um den Teaser hervorzuheben oder in unterschiedliche Inhaltsbereiche zu gliedern.

Button unter dem Text anzeigen

Standardmäßig ist der gesamte Block ein durchgehender Link.
Mit dieser Option kann zusätzlich ein separater Button unter dem Text eingeblendet werden – nützlich, wenn der Call-to-Action deutlicher hervorgehoben werden soll.

Linktext

Der Text für den optionalen Button.

  • Wird manuell eingegeben, wenn ein individueller Buttontext benötigt wird.
  • Wird automatisch befüllt, wenn kein eigener Text hinterlegt ist (Standard-Linktext).

Beispiele

Team

mehr Infos

Team

Hier könnte ein Teaser-Text stehen.

mehr Infos

Team

Hier könnte ein Teaser-Text stehen.

mehr Infos

GTA - Seitenteaser - Überschrift & Tabelle

Dieses Inhaltselement erzeugt einen strukturierten Vorschaublock mit Überschrift, Unterüberschrift und einer Tabelle. Es eignet sich ideal für die Darstellung von Angeboten, GTA-Vorschauen, Kursen oder anderen Inhalten, die in tabellarischer Form übersichtlich vermittelt werden sollen.

Der Block kann optional als Link fungieren, sodass der Teaser entweder informativ oder interaktiv als Link zu einer Unterseite genutzt werden kann.

Der Seitenteaser ist speziell dafür konzipiert, in einer Elementgruppe Grid mit 3 Spalten verwendet zu werden.

Überschrift

Der Haupttitel des Blocks. Er benennt eindeutig das Thema oder die Bezeichnung der GTA bzw. des dargestellten Angebots.

Unterüberschrift

Eine kleiner und dezenter formatierte zweite Überschrift.
Ideal für ergänzende Angaben wie Klassenstufen, Themenfelder oder Zusatzinfos.
Sie unterstützt die inhaltliche Einordnung, ohne den Haupttitel zu dominieren.

Tabelle

Hier werden strukturierte Informationen (z. B. Klasse, Zeit, Ort, Dauer) als übersichtliche Tabelle ausgegeben.
Durch die tabellarische Darstellung können Nutzer:innen Inhalte besonders schnell erfassen.

Tabellenüberschrift (Caption)

Die Caption dient als zugängliche Beschreibung der Tabelle.

Barrierefreiheit:

  • Die Caption wird Screenreader-Nutzer:innen zuerst vorgelesen.
  • Sie erklärt den Zweck oder Inhalt der Tabelle, nicht die einzelnen Zellen.
  • Dadurch wird die Tabelle auch für Personen verständlich, die den visuellen Kontext nicht sehen können.
  • Beispiel: „Überblick der GTA-Daten für das Angebot ‚Mach dich locker‘“.

Eine Caption sollte kurz, klar und beschreibend sein.

Link zur Seite (optional)

Der gesamte Block kann optional verlinkt werden.
Wenn kein Link angegeben ist, bleibt der Teaser ein rein visueller Informationsblock.

ARIA-Label für den Link

Wenn der Block verlinkt ist, kann ein eigenes ARIA-Label vergeben werden.

Barrierefreiheit:

  • Das ARIA-Label ersetzt den sichtbaren Text nicht, sondern ergänzt ihn für Screenreader.
  • Es sollte klar und eindeutig beschreiben, wohin der Link führt oder welchen Zweck der Teaser erfüllt.

Gute Beispiele:

„Mehr Informationen zur GTA ‚Mach dich locker‘“
„Zur Detailseite des Angebots Sozialkompetenz und Bewegung“


Ein korrektes ARIA-Label vermeidet unklare Linktexte wie „Mehr erfahren“, die ohne Kontext nicht barrierefrei wären.

Hintergrundfarbe

Der gesamte Block kann mit einer Hintergrundfarbe versehen werden.
Dies ist hilfreich, um den Teaser hervorzuheben oder in unterschiedliche Inhaltsbereiche zu gliedern.

Rahmen um Block

Aktiviert einen optionalen Rahmen, der den Teaser optisch abgrenzt und ihn klarer von umliegenden Inhalten trennt.

Beispiele

Badminton

Klasse: 1 bis 3
Zeit: 13:35 - 14:35 Uhr
Lehrer*in: Frau Friedlich
Ort: Turnhalle

Theater

Klasse: 3 und 4
Zeit: 14:00 - 14:45 Uhr
Lehrer*in: Frau Holz
Ort: Musikzimmer

Lese-Detektive

Klasse: 2 und 3 (für schwache Leser)
Zeit: 14:00 - 14:45 Uhr
Lehrer*in: Frau Schönherr
Ort: Bücherei

Block - Bild/Slideshow & Text

Dieses Inhaltselement kombiniert Bilddarstellungen (einzelnes Bild oder Slideshow) mit einer Überschrift und einem kurzen Text. Es eignet sich ideal für Bereiche, in denen visuelle Eindrücke mit kurzen Informationen verbunden werden sollen – z. B. für Projekte, Aktionen, Angebote oder Einblicke in schulische Aktivitäten.

Der Seitenteaser ist speziell dafür konzipiert, in einer Elementgruppe Grid mit 3 Spalten verwendet zu werden.

Bild / Slideshow

  • Wird ein einzelnes Bild ausgewählt, wird es als normales Teaserbild angezeigt.
  • Werden mehrere Bilder ausgewählt, entsteht automatisch eine Slideshow.

Einstellungen für die Bilddarstellung:

Bildgröße: frei definierbar, damit das Element optimal ins Layout passt.

  • Autoplay: Slideshow startet automatisch, wenn aktiviert.
  • Autoplay-Dauer: Zeit in Sekunden oder Millisekunden, wie lange jedes Bild angezeigt wird.

Überschrift

Eine klare Titelzeile für den Block.
Sie sollte den dargestellten Inhalt prägnant beschreiben.

Text

Ein kurzer Beschreibungstext, der das Bild bzw. Thema ergänzt.
Der Text sollte nicht zu lang sein und als kompakte Information dienen.

Hintergrundfarbe

Der gesamte Block kann mit einer Hintergrundfarbe versehen werden.
Dies ist hilfreich, um den Teaser hervorzuheben oder in unterschiedliche Inhaltsbereiche zu gliedern.

Rahmen um Block

Aktiviert einen optionalen Rahmen, der den Teaser optisch abgrenzt und ihn klarer von umliegenden Inhalten trennt.

Überschrift anzeigen

Steuert, ob die Überschrift sichtbar ausgegeben wird.

Beispiele

Klassenzimmer

In unserer Grundschule stehen den Schülerinnen und Schülern insgesamt 7 Klassenräume zur Verfügung, die größtenteils mit interaktiven Tafeln ausgestattet sind. Diese Technologien unterstützen den Unterricht und fördern eine aktive Teilnahme der Kinder.

Kunst, Werken, Musik

Zusätzlich verfügen wir über Fachräume für den Musik-, Kunst- und Werkunterricht. Diese Räume bieten den Kindern die Möglichkeit, ihre kreativen Talente zu entfalten und praktische Erfahrungen zu sammeln.

Die Schule ist mit einem modernen Computerkabinett ausgestattet, das den Schülern Zugang zu Computern für verschiedene Lernaktivitäten bietet. Zudem verfügen wir über einen Klassensatz an Schüler-Laptops sowie Tablets, um das digitale Lernen weiter zu fördern. Unser Ziel ist es, die Schüler bestmöglich auf die Anforderungen der digitalen Welt vorzubereiten und ihnen ein vielfältiges und zeitgemäßes Lernen zu ermöglichen.

Block - Überschrift & Icon

Dieses Inhaltselement kombiniert Bilddarstellungen (einzelnes Bild oder Slideshow) mit einer Überschrift und einem kurzen Text. Es eignet sich ideal für Bereiche, in denen visuelle Eindrücke mit kurzen Informationen verbunden werden sollen – z. B. für Projekte, Aktionen, Angebote oder Einblicke in schulische Aktivitäten.

Der Seitenteaser ist speziell dafür konzipiert, in einer Elementgruppe Grid mit 2 - 4 Spalten verwendet zu werden.

Überschrift (optional)

Kann gesetzt werden, wenn der Block einen klaren Titel oder eine thematische Einordnung benötigt.

Text

Der Hauptinhalt des Blocks.
Hier wird der eigentliche Informationstext eingetragen – kompakt, klar und gut lesbar.

Icon (optional)

Es kann ein Icon als SVG oder Bilddatei hinterlegt werden.
Zusätzlich lässt sich die Position des Icons festlegen, z. B. links, rechts oder oberhalb des Textes.
Icons unterstützen die schnelle visuelle Erfassung der Information und werten den Block optisch auf

Hintergrundfarbe

Der gesamte Block kann mit einer Hintergrundfarbe versehen werden.
Dies ist hilfreich, um den Teaser hervorzuheben oder in unterschiedliche Inhaltsbereiche zu gliedern.

Rahmen um Block

Aktiviert einen optionalen Rahmen, der den Teaser optisch abgrenzt und ihn klarer von umliegenden Inhalten trennt.

Überschrift anzeigen

Steuert, ob die Überschrift sichtbar ausgegeben wird.

Icon anzeigen

Steuert, ob das Icon sichtbar ausgegeben wird.

Beispiele

Hintergrundfarbe

Der gesamte Block kann mit einer Hintergrundfarbe versehen werden.
Dies ist hilfreich, um den Teaser hervorzuheben oder in unterschiedliche Inhaltsbereiche zu gliedern.

Rahmen um Block

Aktiviert einen optionalen Rahmen, der den Teaser optisch abgrenzt und ihn klarer von umliegenden Inhalten trennt.

Steuert, ob die Überschrift sichtbar ausgegeben wird.

Icon anzeigen

Steuert, ob das Icon sichtbar ausgegeben wird.

Klasse 1a

Klassenleiter*in: Frau Pohle
Schüleranzahl: 19

Klasse 1b

Klassenleiter*in: Frau Junghans
Schüleranzahl: 19

Klasse 2a

Klassenleiter*in: Frau Fornfeist
Schüleranzahl: 16

Klasse 2b

Klassenleiter*in: Frau Schönherr
Schüleranzahl: 18

Klasse 3

Klassenleiter*in: Frau Preiß
Schüleranzahl: 20

Klasse 4a

Klassenleiter*in: Frau Lorenz
Schüleranzahl: 23

Klasse 4b

Klassenleiter*in: Frau Kolitsch-Beyer
Schüleranzahl: 20

Block - Rezension

Dieses Inhaltselement dient zur Darstellung einer Rezension, eines Feedbacks oder eines kurzen Erfahrungsberichts. Es kann optional mit einem Autorennamen ergänzt werden und bietet die Möglichkeit, die Ausgabe ein- oder zweispaltig zu gestalten.

Das Element eignet sich ideal für Testimonials, Rückmeldungen zu Projekten, Rückblicke auf Veranstaltungen oder Meinungszitate.

Rezension

Der Haupttext der Bewertung oder Rückmeldung.
Hier wird die eigentliche Aussage der Rezension eingetragen. Der Text kann kurz, prägnant oder etwas ausführlicher sein – abhängig vom Einsatzbereich.

Autor (optional)

Ein optionaler Name, der die Rezension einer Person zuordnet.
Wird kein Autor angegeben, erscheint die Rezension anonym bzw. ohne Namensangabe.

Zweispaltig

Aktiviert eine zweispaltige Darstellung der Rezension.
Diese Option eignet sich besonders für längere Texte, die so optisch aufgelockert und leichter lesbar werden.
Wird die Option nicht aktiviert, erfolgt die Ausgabe einspaltig.

Der erste Impuls zur Entscheidung für die Grundschule Friedrich-Engels-Schule war für uns u.a. der kurze Schulweg. Diesen konnte unser Sohn dann auch später allein bewältigen und förderte seine Selbstständigkeit.
Die engagierte Klassenlehrerin überzeugte uns mit ihrer sicheren Art im Umgang mit den Kindern. Sie leitete die Klasse souverän und schaffte eine positive Lernatmosphäre. Auch das Untereinander unter uns Eltern war harmonisch und stärkte das Gemeinschaftsgefühl.
In der Hofpause bot das große, grüne Schulgelände Platz zum Spielen und Toben.

Name Vorname

Der erste Impuls zur Entscheidung für die Grundschule Friedrich-Engels-Schule war für uns u.a. der kurze Schulweg. Diesen konnte unser Sohn dann auch später allein bewältigen und förderte seine Selbstständigkeit.
Die engagierte Klassenlehrerin überzeugte uns mit ihrer sicheren Art im Umgang mit den Kindern. Sie leitete die Klasse souverän und schaffte eine positive Lernatmosphäre. Auch das Untereinander unter uns Eltern war harmonisch und stärkte das Gemeinschaftsgefühl.
In der Hofpause bot das große, grüne Schulgelände Platz zum Spielen und Toben.

Die moderne Ausstattung, der Fortschritt der digitalen Medien, der verlässliche Informationsfluss sowie die verschiedenen Ganztagsangebote gefielen uns besonders gut. Ein Pluspunkt war auch die Möglichkeit für ein warmes Mittagessen. Die Betreuung nach dem Unterricht wurde durch den Hort, welcher nach kurzem Fußweg für die Kinder allein erreichbar war, gut abgesichert.

Wir waren sehr zufrieden und empfehlen gerne die Friedrich-Engels-Schule als Grundschule weiter.

Teammitglied

Mit diesem Inhaltselement können einzelne Teammitglieder oder Ansprechpartner:innen strukturiert vorgestellt werden. Das Element kombiniert ein Portraitbild, zentrale Informationen zur Person und optional ergänzende Kontakt- oder Themenangaben.

Das Element Teammitglied ist speziell dafür konzipiert, in einer Elementgruppe Grid mit 3 Spalten verwendet zu werden.

Profilbild

Das Portraitbild des Teammitglieds.

  • Für dieses Element ist eine vordefinierte Bildgröße namens „RSCE – Teammitglied“ hinterlegt.
    Diese Bildgröße sollte verwendet werden, damit Contao das Bild automatisch für alle Ausgabemedien optimal generiert.
  • Metadaten überschreiben (optional):
    Wenn nichts eingetragen wird, werden die Metadaten (z. B. Alt-Text) aus der Dateiverwaltung übernommen
    → wichtig für Barrierefreiheit und einheitliche Bildbeschreibungen

Name

Der vollständige Name der vorgestellten Person.
Wird prominent dargestellt und dient als Hauptelement der Karte.

Titel

Optionaler Zusatz wie Position, Verantwortungsbereich oder Rolle.
Wird dezent unterhalb des Namens ausgegeben.

Kontaktdaten

Folgende optionalen Angaben können ausgegeben werden:

  • E-Mail-Adresse
  • Telefonnummer
  • Faxnummer
  • Schulfächer/Themenfelder

Leere Felder werden nicht angezeigt.

Linkliste

Eine flexible Liste mit frei definierbaren Links, z. B. für Dokumente, Unterseiten oder externe Ressourcen.

Jeder Link enthält:

  • Linkziel
  • Link-Bezeichnung (sichtbarer Text)
  • ARIA-Label zur barrierefreien Beschreibung

Barrierefreiheit:
Das ARIA-Label sollte eindeutig das Ziel des Links beschreiben – besonders wichtig, wenn die Link-Bezeichnung allein nicht ausreicht.

Einfache Liste mit Überschrift

Eine kleine Zusatzliste zur Darstellung von Aufgaben, Zuständigkeiten oder Schwerpunkten.
Eingaben:

  • Überschrift
  • Listeneinträge

Link zur Detailseite

Optionaler Link zu einer ausführlichen Profilseite.

Eingaben:

  • Linkziel
  • ARIA-Label zur genauen Beschreibung der Weiterleitung.

Beispiele für barrierefreie ARIA-Labels:

  • „Zur Detailseite von Frau Müller – Klassenleitung 3a“
  • „Profilseite von Markus Schneider öffnen“

Wird kein Link gesetzt, bleibt der Block ohne Weiterleitung.

Icons anzeigen

Wenn aktiv, werden kleine Icons vor den Kontaktdaten angezeigt (z. B. Brief für E-Mail, Telefonhörer usw.).
Erleichtert die schnelle Erfassung der Information.

Frau Pohle Klassenlehrerin 1a

Frau Junghans Klassenlehrerin 1b

Frau Fornfeist Klassenlehrerin 2a / DaZ-Lehrerin

Text & Bild zweispaltig

Dieses Inhaltselement ermöglicht die zweispaltige Darstellung von Text und optionalen Bildern. Die linke und rechte Spalte können unabhängig voneinander mit Text und Bild befüllt werden, wodurch vielfältige Layouts möglich sind – von klassischen Text-Bild-Kombinationen bis hin zu doppelseitigen Visualisierungen.

Das Element eignet sich ideal, um Inhalte übersichtlich nebeneinander anzuordnen, klare Strukturen zu schaffen und visuelle Akzente zu setzen.

Überschrift

Eine optionale Überschrift, die den gesamten Block einleitet und den inhaltlichen Kontext vermittelt.

Text linke und rechte Spalte

Beide Spalten verfügen über ein eigenes Textfeld.
So können Inhalte flexibel verteilt oder gegenübergestellt werden.
Beispiele: Beschreibung links, Details rechts – oder umgekehrt.

Bild links/rechts (optional)

Für die linke und/oder rechte Spalte kann ein optionales Bild hinterlegt werden.

Einstellungen und Funktionen:

  • Anordnung: Bild kann oberhalb oder unterhalb des Textes platziert werden
  • Bildgröße: Es wird die vordefinierte Größe „Inhaltselement – Bild 50% Breite – schmale Seite“ verwendet
    → Dadurch generiert Contao automatisch die passenden responsiven Bildvarianten für alle Ausgabemedien
  • Großansicht: Optional kann eine Lightbox- bzw. Großansicht aktiviert werden
  • Metadaten überschreiben:
    Alt-Text und weitere Bildinformationen können manuell hinterlegt werden.
    Werden keine Angaben gemacht, übernimmt Contao die Metadaten aus der Dateiverwaltung.

Linkes und rechtes Element horizontal zentrieren

Optional lassen sich die Inhalte beider Spalten horizontal zentrieren.
Diese Einstellung ist besonders sinnvoll, wenn:

  • wenig Text vorhanden mit Bild auf anderer Seite ist,
  • ein ruhiger, symmetrischer Block gewünscht ist.

Überschrift

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Überschrift

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Überschrift mit Zusatzüberschrift

Dieses Inhaltselement ermöglicht die Ausgabe einer Hauptüberschrift mit einer Zusatzüberschrift, die entweder oberhalb oder unterhalb innerhalb desselben HTML-Überschrift-Tags ausgegeben wird. Dadurch bleibt die Struktur semantisch korrekt, während zusätzliche Informationen direkt im Zusammenhang der Überschrift angezeigt werden können.

Das Element eignet sich besonders für Bereiche, in denen eine deutliche Hauptaussage durch eine ergänzende Einordnung, Kategorie oder Kurzbeschreibung unterstützt werden soll.

Überschrift

Die zentrale Hauptüberschrift des Elements.
Sie bildet den Kern der Information und wird im gewünschten Heading-Level ausgegeben.

Zusatzüberschrift

Ein optionaler Zusatztext, der in die gleiche Überschrift integriert wird – entweder oberhalb oder unterhalb der Hauptüberschrift.

Diese Zusatzüberschrift kann genutzt werden für:

  • Kategorien oder Themenbereiche
  • kurze Einordnungen
  • Stufen, Abschnitte oder Nummerierungen
  • Untertitel, die in direktem Bezug zur Überschrift stehen

Position der Zusatzüberschrift

Zusatzüberschrift oben oder unten anzeigen

Überschrift Zusatzüberschrift unten

Zusatzüberschrift oben Überschrift

Button - Icon & Label

Dieses Inhaltselement erzeugt einen flexibel konfigurierbaren Button, der aus einem Button-Text, einem optionalen Icon und einem Link (URL, E-Mail oder Telefon) besteht. Der Button kann in verschiedenen Stilvarianten dargestellt oder – ohne Button-Styling – als einfacher Link mit Icon ausgegeben werden.

Das Element eignet sich für Call-to-Action-Bereiche, Kontaktmöglichkeiten, Downloads oder visuell hervorgehobene Links.

Button-Text

Der sichtbare Text des Buttons.
Soll kurz, klar und handlungsorientiert formuliert sein (z. B. „Kontakt aufnehmen“, „Mehr erfahren“, „Jetzt anmelden“).

Link

Der Button kann auf unterschiedliche Ziele verweisen:

  • URL (interne oder externe Seite)
  • E-Mail (mailto-Link)
  • Telefonnummer (tel-Link)

Es wird automatisch ein klickbarer Link erzeugt, passend zum jeweiligen Typ.

Button ARIA-Label

Ein optionaler, barrierefreier Beschreibungstext für Screenreader.
Sinnvoll, wenn der sichtbare Button-Text nicht eindeutig beschreibt, wohin der Link führt.

Beispiele für gute ARIA-Labels:

  • „E-Mail an das Schulsekretariat senden“
  • „Zur Anmeldung für die GTA ‚Kreatives Schreiben‘“

Wird kein ARIA-Label angegeben, nutzt das System den sichtbaren Button-Text.

Button Style

Es stehen vier Darstellungsvarianten zur Auswahl:

  • Primary Button – für besonders wichtige Handlungsaufrufe
  • Secondary Button – dezenter, für ergänzende oder alternative Aktionen
  • Reduced Button – kompakte, reduzierte Darstellung
  • Ohne Button-Styling – der Button wird als einfacher Link mit Icon ausgegeben
    → ideal für Linklisten, dezentere Aktionen oder fließende Textpassagen

Button zentrieren

Optional kann der Button horizontal zentriert ausgegeben werden.
Geeignet für:

  • abgeschlossene Inhaltsabschnitte
  • CTA-Blöcke
  • Elemente ohne begleitenden Text

Eigenes Icon verwenden

Anstelle des Standard-Icons kann ein individuelles Icon eingebunden werden.

Icon-Eingabe:

  • Bilddatei oder
  • SVG-Datei

Icon-Position:

  • Links vom Button-Text
  • Rechts vom Button-Text

Wenn kein eigenes Icon hinterlegt wird, verwendet das Element das vordefinierte Standard-Icon.

 

Primary Button Secoundary Button Reduced Button nur Text und Icon Primary Button eigenes Icon Primary Button eigenes Icon Primary Button zentriert Primary Button E-Mail Primary Button Telefon

Icon & Label/Badge

Mit diesem Inhaltselement können ein Icon und ein optionaler Text kombiniert dargestellt werden – wahlweise als kompaktes Badge, als hervorgehobenes Info-Element oder als dezenter Icon-Text-Baustein.

Es eignet sich ideal, um wichtige Merkmale, Kategorien, Hinweise oder kurze Informationen visuell hervorzuheben. Durch verschiedene Styles und flexible Icon-Positionen passt sich das Element an unterschiedlichste Layoutsituationen an.

Icon (Bild oder SVG)

Das Icon kann entweder als Bilddatei oder als SVG hinterlegt werden.
SVGs eignen sich besonders für skalierbare, gestochen scharfe Icons in jeder Größe.

Icon-Bezeichnung (optional)

Ein kurzer Text, der neben dem Icon angezeigt wird.
Wenn kein Text hinterlegt wird, wird nur das Icon angezeigt (z. B. reines Symbol-Badge).

ARIA-Label

Optionaler, barrierefreier Beschreibungstext für Screenreader.
Besonders wichtig, wenn das Icon keine sichtbare Textbeschreibung hat.

Gute Beispiele:

  • „Information: Teilnahme kostenlos“
  • „Kategorie: Sportangebote“
  • „PDF herunterladen“

Wenn kein ARIA-Label gesetzt wird, versucht das System, den sichtbaren Text als Beschreibung zu verwenden.

Element-Style

Drei unterschiedliche Stilvarianten stehen zur Verfügung:

  • Primary
    Auffällig und deutlich hervorgehoben – ideal für wichtige Informationen.
  • Hervorgehoben
    Dezenter als Primary, aber optisch markant. Nützlich für Hinweise oder Kategorien.
  • Ohne Button-Style
    Das Element wird als schlichter Icon-Text-Link dargestellt.
    Ideal für Listen, dezente Metainformationen oder inline platzierte Hinweise.

Position des Icons

Das Icon kann links oder rechts vom Label-Text platziert werden.

Art des Icons

Hier wird gewählt, ob das Icon als Bild oder SVG interpretiert wird.

  • Bilddatei oder
  • SVG-Datei

 

Element zentrieren

Optional kann das gesamte Icon-Label horizontal zentriert ausgegeben werden.
Perfekt für:

  • alleinstehende Badge-Elemente
  • visuelle Abschnitte
  • strukturelle Trennung innerhalb eines Layoutblocks
Badge Primary Badge Hervorgehoben Badge ohne Button Style Badge Primary Icon rechts

Linkliste

Mit diesem Inhaltselement können mehrere Links übersichtlich als Liste ausgegeben werden. Jeder Link kann zusätzlich mit einer eigenen Überschrift, optionalem QR-Code und einem individuellen Icon versehen werden.

Das Element eignet sich ideal für Downloadbereiche, Service-Links, Informationssammlungen oder thematische Linkübersichten und unterstützt durch sinnvolle ARIA-Beschreibungen eine barrierearme Nutzung.

ARIA-Label für die Linkliste

Ein optionales Label, das Screenreader-Nutzer:innen beschreibt, welchen Zweck die gesamte Linkliste erfüllt.
Empfohlene Nutzung für Barrierefreiheit:

  • „Liste mit wichtigen Dokumenten für Eltern“
  • „Service-Links zur Schulorganisation“
  • „GTA-Anmeldeformulare als Übersicht“

Wenn kein ARIA-Label gesetzt wird, bleibt die Liste technisch zugänglich, aber weniger eindeutig.

Icon (Bild oder SVG)

Das Icon kann entweder als Bilddatei oder als SVG hinterlegt werden.
SVGs eignen sich besonders für skalierbare, gestochen scharfe Icons in jeder Größe.

Überschrift

Eine optionale Überschrift für die gesamte Linkliste, um den Inhalt thematisch klar einzuordnen.

Link-Eingaben

Für jeden Listeneintrag stehen folgende Felder zur Verfügung:

  • Linkziel
    Der tatsächliche Link – interne Seite oder externe URL.
  • Link-Bezeichnung
    Der sichtbare Linktext.
    Er sollte klar beschreiben, wohin der Link führt oder was ausgegeben wird.
  • Link-Überschrift
    Eine optionale Zusatzüberschrift, die über dem einzelnen Link angezeigt wird.
    Ideal, wenn ein Link besonders hervorgehoben oder thematisch zugeordnet werden soll (z. B. „Anmeldeformular“, „Wichtige Informationen“, „Download“).

QR-Code (optional)

Für jeden Link kann ein QR-Code eingebunden werden.

Einstellungen:

  • Bildauswahl über Dateipicker
  • Nutzung der vordefinierten Bildgröße „RSCE - QR-Code“
    → sorgt für optimale Darstellung in allen Ausgabemedien

Eigenes Icon verwenden

Optional kann jedem Link ein individuelles Icon zugewiesen werden.

Art des Icons

  • SVG oder
  • Bilddatei

Wenn kein eigenes Icon verwendet wird, greift das Element auf das Standard-Icon zurück.

Link öffnet neuen Tab

Wenn aktiviert, wird der Link mit target="_blank" ausgegeben und öffnet sich in einem neuen Browser-Tab.

Empfehlung:

  • Für externe Links sinnvoll
  • Für interne Links nur sparsam einsetzen, um Nutzerfluss nicht zu stören

 

weiterführende Schulen:

Seitenteiler

Dieses Inhaltselement erzeugt einen vollflächigen Bild-Abschnitt, der als visueller Trenner zwischen zwei Inhaltsbereichen dient. Wenn im Artikel die Option „Volle Breite“ aktiviert ist, wird das Bild über die gesamte Seitenbreite gestreckt dargestellt – ideal für starke visuelle Breaks, atmosphärische Übergänge oder thematische Kapiteltrennungen.

Zusätzlich ist das Bild mit einem Parallax-Effekt versehen. Dabei bewegt sich das Bild beim Scrollen langsamer oder schneller als der restliche Inhalt, wodurch ein moderner, dynamischer Tiefeneffekt entsteht.

Bild

Auswahl eines einzelnen Bildes, das im Seitenteiler über die gesamte Breite dargestellt wird.

Metadaten überschreiben

Optional können folgende Bildinformationen manuell angepasst werden:

  • Alternativtext (Alt-Text) – wichtig für Barrierefreiheit
  • Bildtitel

Hinweis:
Wenn keine Angaben gemacht werden, verwendet Contao die Metadaten aus der Dateiverwaltung.

Richtung des Parallax-Effekts

Steuert, in welche Richtung sich das Bild beim Scrollen bewegt:

  • Nach oben – häufigster Effekt (Bild „zieht sich nach oben“)
  • Nach unten – wirkt dynamischer und seltener genutzt

So kann der Effekt passend zur Bildwirkung oder Seitenbewegung gewählt werden.

Vertikale Verschiebung

Mit dieser Einstellung kann das Bild nach oben oder unten verschoben werden, bevor der Parallax-Effekt greift.
Ideal, um den sichtbaren Bildausschnitt exakt so auszurichten, dass der wichtigste Motivteil im Fokus steht.

Beispiele:

  • Horizont korrekt ausrichten
  • Motivzentrum hervorheben
  • Unwichtige Bereiche ausblenden

 

Parallax-Bewegungsanteil

Mit diesem Wert bestimmst du, wie stark das Bild beim Scrollen bewegt wird.
Er beeinflusst die Intensität des Parallax-Effekts.

Wertebereich: 0 bis 1

  • 0 → Minimale Bewegung, sehr subtil
  • 0.5 → Mittlerer Effekt, eleganter Tiefen-Eindruck
  • 1 → Maximaler Effekt, deutlich sichtbare Bewegung

Die Einstellung ermöglicht präzise Kontrolle über die visuelle Wirkung – von dezent bis auffällig.