Navigation

• Das Element stellt mehrere Icons mit Titeln und Links dar und dient als visueller Einstiegspunkt zu Interaktionsangeboten (z. B. Mitmachen, Ehrenamt, Spenden, Kircheneintritt). Es eignet sich für Übersichtsseiten, Startseiten und Engagement-Bereiche, wo Nutzer*innen schnell zu Handlungsoptionen geleitet werden sollen.
• Nicht geeignet ist das Element für umfangreiche Textinhalte oder Informationen, die erklärungsbedürftig sind. Oder für individuelle Engagements, die aktuell nicht hinterlegt sind. 

• Überschrift (Titel des Teasers)
• Icon (vorgegeben aus Icon-Set)
• Titel/Bezeichnung des Icons
• Link zur Zielseite

• Es werden vorgegebene Vektor-Icons genutzt, daher keine Bildformate nötig.
• Icons müssen einheitlich aus der Bibliothek gewählt werden.
• Keine individuellen Bilddateien hochladen.

• Titel unter dem Icon: maximal 25–30 Zeichen (kurz, prägnant, barrierearm).
• Keine zusätzlichen Texte oder Absätze vorgesehen.

Die Icons werden standardmäßig in einem mehrspaltigen Raster (z. B. 4er-Raster) dargestellt. Bei weniger Icons sollten die Reihen vollständig gefüllt werden, um eine ausgewogene Optik zu erreichen.

• Icons werden untereinander angezeigt.
• Titel und Links bleiben voll sichtbar und anklickbar.
• Interaktive Elemente (z. B. Pfeile) passen sich der Breite an.

• Aussagekräftige, eindeutige Icons wählen, die sofort verstanden werden.
• Titel klar und handlungsorientiert formulieren.
• Immer einen funktionierenden Link hinterlegen.
• Einheitliche Anzahl von Icons pro Reihe anstreben (z. B. 4).

Ein Sektionsindex verwendest du, wenn du eine Übersicht über die Abschnitte einer Seite geben willst – besonders bei langen Seiten mit vielen Inhalten.

• Beim Sektionsindex solltest du folgende Felder pflegen:
• Abschnittstitel – Klarer, kurzer Titel für jede Sektion (z. B. „Team“, „Angebote“, „Kontakt“)
• Sprungmarke/Zielanker – Technischer Name oder ID des Zielabschnitts auf der Seite
• Reihenfolge – Logische Sortierung entsprechend dem Seitenaufbau
• Optional: Icons – Zur visuellen Unterstützung der Navigation (wenn vom Design vorgesehen)
• Diese Felder sorgen dafür, dass der Sektionsindex funktional, nutzerfreundlich und visuell konsistent ist

Beim Sektionsindex werden keine Bilder verwendet. Er dient als rein textbasiertes Navigationselement.

• Die Texte im Sektionsindex sollten kurz und prägnant sein
• 1 bis 3 Wörter pro Eintrag, maximal ca. 30 Zeichen

Beim Sektionsindex ist der Einsatz eines Rasters sinnvoll, aber abhängig vom Layout.

• Mehrspaltige Layouts brechen um → die Kacheln oder Links erscheinen untereinander in einer Spalte.
• Touch freundlich: Abstände und Schriftgrößen passen sich automatisch an, damit die Links gut bedienbar bleiben.

• Wenn der Index als vertikale Liste (z. B. in einer Sidebar) eingebunden ist, bleibt er meist oben oder wird als haftende bzw. sticky Element dargestellt (je nach Designvorlage).

   

• Klare Titel für jede Sektion
• Funktionierende Sprungmarken
• Einheitliches Layout (z. B. Icon-Stil, Textlänge)
• Logische Reihenfolge wie auf der Seite
• Barrierefreiheit: per Tastatur nutzbar, eindeutige Linktexte
• Aktuell halten bei Seitenänderungen

Du solltest einen Button verwenden, wenn eine eindeutige Handlungsaufforderung (Call to Action) vermittelt werden soll (z. B.: mehr erfahren).

• Schreibe deinen Wunschtext in das Textfeld
• Markiere den Text und setze eine Verlinkung deiner Wahl
• Wähle Button-Link als Verlinkungsart

Auf mobilen Geräten wird der Button weiter linksseitig ausgegeben und vollständig dargestellt. Wird der Button jedoch in einem mindestens 2-spaltigen Raster ausgegeben, bricht er bei kleineren Bildschirmbreiten um und wird unterhalb angezeigt.