Backend:
Das Backend ist der Verwaltungsbereich des Systems (z. B. TYPO3 oder auch dataCycle).
Hier werden Inhalte erstellt, bearbeitet und strukturiert. Das Backend ist nur für Redakteure sichtbar und nicht öffentlich zugänglich.

Frontend:
Das Frontend ist die öffentlich sichtbare Website.
Alle Inhalte, die im Backend gepflegt werden, werden hier für die Besucher dargestellt.

Modul (Content-Element):
In TYPO3 werden Module als „Content-Elemente“ bezeichnet.
Sie sind die einzelnen Bausteine, aus denen eine Seite aufgebaut wird (z. B. Text, Bild, Teaser, Video).
Redakteure kombinieren diese Module, um Seiten zu gestalten.

Container:
Container sind übergeordnete Elemente, die mehrere Content-Elemente zusammenfassen.

• Sie dienen bestimmten Funktionen, z. B.:
  • Scroll-Verhalten
  • Hintergrundgestaltung
  • Tabs oder Layout-Strukturen
• Im Frontend beschreibt „Container“ auch die Breite:
  • Mit Container: Inhalt hat eine definierte Standardbreite
  • Ohne Container: Inhalt wird vollflächig dargestellt

Per Default:
Bedeutet „standardmäßig“ oder „voreingestellt“.
Ein Wert oder Verhalten ist automatisch gesetzt, solange keine Änderungen vorgenommen werden.

Header:
Bezeichnet Überschriften (z. B. H1, H2, H3).
Sie strukturieren Inhalte und sind wichtig für Lesbarkeit und SEO.

Alignment (Ausrichtung):
Beschreibt die Ausrichtung von Inhalten, z. B.:

• linksbündig
• zentriert
• rechtsbündig

Call-to-Action (CTA):
Ein Element (meist Button oder Link), das den Nutzer zu einer Handlung auffordert (z. B. „Jetzt anfragen“, „Mehr erfahren“).

Teaser:
Ein Vorschau-Element, das auf weiterführende Inhalte verweist (z. B. mit Bild, Titel und kurzem Text).

Grid / Raster:
Ein Layout-System, das Inhalte in Spalten und Reihen anordnet (z. B. 2er-Grid, 3er-Grid).

Responsive:
Beschreibt das Verhalten einer Website auf unterschiedlichen Bildschirmgrößen (Desktop, Tablet, Mobile).

Alt-Text (Alternativtext):
Beschreibt den Inhalt eines Bildes.
Wichtig für Barrierefreiheit und Suchmaschinen.

Anker / Sprungmarke:
Ein interner Link zu einer bestimmten Stelle auf derselben Seite.

RTE (Rich Text Editor):
Der Texteditor in TYPO3, mit dem Inhalte formatiert werden können (z. B. fett, Listen, Links).

Layout:
Definiert das visuelle Erscheinungsbild eines Elements (z. B. Farben, Abstände, Darstellung).

Für einen effizienten und strukturierten Aufbau der Website empfiehlt sich eine klare Reihenfolge bei der Erstellung von Inhalten. Diese Vorgehensweise erleichtert die Orientierung, vermeidet doppelte Arbeit und sorgt für ein konsistentes Ergebnis.

1. Seitenstruktur (Seitenbaum) anlegen:

Zu Beginn sollte der Seitenbaum aufgebaut werden.

• Strukturierung der Website in logische Bereiche und Unterseiten
• Festlegen der Navigationshierarchie
• Benennung der Seiten gemäß Inhalt und Funktion

Eine saubere Struktur bildet die Grundlage für alle weiteren Schritte und hilft, den Überblick zu behalten.

2. Inhalte erstellen:

Im nächsten Schritt werden die Inhalte auf den einzelnen Seiten gepflegt.

• Aufbau der Seiten mit den entsprechenden Modulen (Content-Elementen)
• Einfügen von Texten, Bildern, Videos und Teasern
• Beachtung der Design- und Layoutvorgaben

Der Fokus liegt hier auf der inhaltlichen und visuellen Gestaltung der Seiten.

3. Übersetzungen ergänzen:

Sobald die Inhalte in der Hauptsprache vollständig sind, können die Übersetzungen erstellt werden.

• Übernahme der bestehenden Struktur und Inhalte
• Anpassung und Pflege der jeweiligen Sprachversionen

Durch diese Reihenfolge wird sichergestellt, dass Übersetzungen konsistent und vollständig sind.

4. Highlightmenüs und ergänzende Navigationen:

Abschließend werden zusätzliche Navigationselemente wie Highlightmenüs oder spezielle Einstiegspunkte erstellt.

• Verlinkung auf bereits bestehende Inhalte
• Unterstützung der Nutzerführung und Hervorhebung wichtiger Themen

Hinweis:
Diese Reihenfolge hat sich in der Praxis bewährt und sorgt für einen klaren, effizienten Workflow.
Ein strukturierter Start spart Zeit im weiteren Verlauf und erleichtert die Pflege und Erweiterung der Website nachhaltig.

Ein Großteil der Module verfügt über einen Headerbereich, in dem Überschriften für das jeweilige Modul erfasst werden können.

Überschrift:

• Es kann ein beliebiger Text als Überschrift eingegeben werden
• Für einen manuellen Zeilenumbruch innerhalb der Überschrift ist das Zeichen | (Alt Gr + <) zu verwenden

Besonderheit Moselregion:

Wenn ein Teil der Überschrift in der Akzentschrift dargestellt werden soll, ist dieser Abschnitt in geschwungene Klammern zu setzen:
{Beispiel} (Alt Gr + 7 und Alt Gr + 9)

Technische Überschrift (Typ):

Der Typ definiert die technische Auszeichnung der Überschrift (z. B. H1, H2, H3).

• Standardmäßig sind Überschriften als H2 definiert
• Pro Seite darf es genau eine H1 geben
• Diese sollte die erste Überschrift der Seite sein (wichtig für SEO und Barrierefreiheit)

Header-Layout (optisch):

Das Layout der Überschrift kann unabhängig von der technischen Auszeichnung angepasst werden.

• Standardmäßig entspricht die Darstellung einer optischen H2
• Dadurch kann das Erscheinungsbild flexibel gesteuert werden, ohne die semantische Struktur zu verändern

Header CSS-Klassen:

Über CSS-Klassen können zusätzliche visuelle Anpassungen vorgenommen werden:

• Großbuchstaben:
  Die Überschrift wird vollständig in Versalien dargestellt
  → Hinweis: Der Text sollte dennoch normal (Groß-/Kleinschreibung) eingegeben werden.
  Vollständig in Großbuchstaben geschriebene Texte sind für Maschinen schlechter interpretierbar und können z. B. in Suchergebnissen unruhig wirken.
• Kursivschrift:
  Optional kann die Überschrift kursiv dargestellt werden
• Farben:
  Die Überschrift kann in der Primär- oder Sekundärfarbe des gewählten Layouts eingefärbt werden
  → Hinweis: Auf ausreichenden Kontrast achten, da nicht alle CI-Farben für Fließtext geeignet sind

Ausrichtung:

Die Ausrichtung der Überschrift kann definiert werden:

• linksbündig
• zentriert
• rechtsbündig

Gemäß Designvorgaben sollten Überschriften überwiegend zentriert ausgerichtet werden.

Verlinkung:

Überschriften können mit internen oder externen Links versehen werden.

• Externe Links sollten in einem neuen Tab geöffnet werden
• Verlinkte Überschriften werden automatisch mit einer Unterstreichung in der Akzentfarbe dargestellt (Barrierefreiheitsvorgabe)

Unterüberschrift:

Optional kann eine Unterüberschrift ergänzt werden.

• Diese besitzt keine technische H-Auszeichnung
• Die Darstellung kann jedoch individuell gewählt werden (Standard: optische H3)
• Für die Unterüberschrift stehen dieselben CSS-Klassen wie für die Hauptüberschrift zur Verfügung

Um Links oder Buttons einzufügen, kann bei den meisten Content-Elementen ein Link hinzugefügt werden.

Links können direkt im Texteditor gesetzt oder als eigene Buttons hervorgehoben werden.

Link setzen:
Links werden im Rich-Text-Editor (RTE) über die Link-Funktion hinzugefügt. Dabei stehen folgende Optionen zur Verfügung:

• Seite: Verlinkung auf eine interne Seite innerhalb der Website
• Datei: Verlinkung auf ein Dokument (z. B. PDF)
• Externe URL: Verlinkung auf eine externe Website
• E-Mail / Telefon: Direkte Kontaktlinks

Es ist darauf zu achten, immer die passende Linkart zu wählen, um eine korrekte Funktion und saubere Struktur zu gewährleisten.

Button erstellen:
Ein Button ist in der Regel ein normaler Link, der über einen Haken als Button dargestellt wird.
Link und LinkText sind zu setzen. Des weiteren kann man unter Stiel die Farbe des Buttons beeinflussen. OPtional kann ein Icon hinzugefügt werden.
Will man den Button nur umrehmt haben und nciht vollflächig gefärbt ist dies unter Button-Darstellung zu wählen.

• Text markieren und Link setzen
• Anschließend im Link-Dialog oder über die Formatierung eine entsprechende Button-Klasse auswählen. Jeder Button

Layout-Einstellungen (gemäß Designvorgaben):

• Buttons sollten sparsam und gezielt eingesetzt werden (z. B. für Call-to-Actions)
• Pro Bereich idealerweise nur ein primärer Button („Primary“), weitere Aktionen als sekundäre Buttons („Secondary“)
• Beschriftungen kurz und eindeutig halten (z. B. „Mehr erfahren“, „Jetzt anfragen“)
• Keine ganzen Sätze als Buttontext verwenden

Hinweise zur Verwendung:

• Interne Links bevorzugen (statt externer Umwege)
• Externe Links bei Bedarf in neuem Tab öffnen
• Aussagekräftige Linktexte verwenden (keine „Hier klicken“-Texte)
• Barrierefreiheit beachten (Linkziel muss verständlich sein)

Beispielseiten zeigen verschiedene Kombinationen und Einsatzmöglichkeiten von Links und Buttons.

Bilder können in TYPO3 über verschiedene Content-Elemente (z. B. „Text & Medien“, „Image“, „Image Slide“) eingefügt werden.

Die Auswahl und Verwaltung der Bilder erfolgt zentral über den Dateibereich (Filelist) bzw. über angebundene Medienverwaltungssysteme.

Bild auswählen / hinzufügen:
In der Bildauswahl stehen folgende Quellen zur Verfügung:

• Medien aus angebundenen Systemen (z. B. pixx.io, canto für TTM)
• Bereits in TYPO3 hochgeladene Dateien
• Neue Uploads direkt in TYPO3

Beim Hochladen neuer Bilder ist darauf zu achten, diese in einer klar strukturierten Ordnerhierarchie abzulegen. Eine saubere Struktur erleichtert die spätere Wartung und Wiederverwendung.

Bildbearbeitung & Einstellungen:

Nach dem Einfügen eines Bildes stehen verschiedene Optionen zur Verfügung:

• Alternativtext (Alt-Text):
  Pflichtfeld für Barrierefreiheit und SEO. Beschreibt den Bildinhalt kurz und präzise.
• Titel / Beschreibung:
  Optional, kann zusätzliche Informationen liefern (z. B. für Mouseover oder Bildunterschriften).
• Zuschneiden (Crop):
  Bilder können direkt in TYPO3 auf die vorgesehenen Formate angepasst werden.
  Vorgegebene Seitenverhältnisse (je nach Design) sind einzuhalten.
• Darstellungsgröße:
  Wird über das jeweilige Content-Element bzw. das Layout gesteuert, nicht durch manuelles Skalieren im Bild selbst.

Layout-Einstellungen (gemäß Designvorgaben):

• Bilder sollten immer in ausreichender Qualität und passender Auflösung verwendet werden
• Keine verzerrten oder unscharfen Bilder einsetzen
• Seitenverhältnisse und Crop-Vorgaben beachten
• Bildausschnitt bewusst wählen (wichtige Inhalte im Fokus halten)

Hinweise zur Verwendung:

• Einheitliche Bildsprache gemäß Designrichtlinien verwenden
• Keine unnötigen Duplikate hochladen – vorhandene Bilder bevorzugt wiederverwenden
• Dateinamen sinnvoll und sprechend vergeben (z. B. „team-marketing.jpg“ statt „IMG_1234.jpg“)
• Urheberrechte und Bildlizenzen beachten

Metadaten (Alt-Text, Copyright):

Metadaten können entweder direkt am Bildelement oder zentral in der Dateiverwaltung (Filelist) gepflegt werden bzw. werden von dataCycle und den entsprechenden Quellsystemen übernommen.

• Zentrale Pflege (empfohlen):
  Metadaten werden in der Filelist beim jeweiligen Bild hinterlegt. Diese gelten dann als Standard und werden automatisch in allen Verwendungen des Bildes übernommen.
• Überschreiben im Content-Element:
  Im jeweiligen Inhaltselement können Metadaten bei Bedarf individuell angepasst oder überschrieben werden (z. B. wenn ein Bild in einem anderen Kontext verwendet wird).
• Alt-Text:
  Sollte immer gesetzt werden und den Bildinhalt sinnvoll beschreiben (wichtig für Barrierefreiheit und SEO).
• Copyright / Bildnachweis:
  Ist gemäß den jeweiligen Bildrechten zu pflegen und wird je nach System/Template ausgespielt.

Hinweis:
Wenn keine individuellen Anpassungen notwendig sind, sollte bevorzugt die zentrale Pflege verwendet werden, um Konsistenz über die gesamte Website sicherzustellen.

Beispielseiten zeigen verschiedene Einsatzmöglichkeiten und Darstellungsvarianten von Bildern innerhalb des Systems.

In den verfügbaren Layouts sind alle definierten CI-Farben pro Region hinterlegt. Dadurch besteht die Möglichkeit, Inhalte flexibel und individuell gemäß den Designvorgaben einzufärben.

Farbauswahl:

• Die Auswahl der Farben erfolgt über die jeweiligen Layout-Optionen bzw. im Tab „Erscheinungsbild“
• Je nach Content-Element stehen unterschiedliche Farboptionen zur Verfügung (z. B. Hintergrund, Text, Buttons)

Hinweise zur Verwendung:

• Kontraste beachten (insbesondere bei Texten), um die Lesbarkeit sicherzustellen - bei zu geringen Kontrast dürfen nur große Texte (ab 19px) in bestimmten Farbkombinationen verwendet werden.
• Primäre CI-Farben bevorzugt für wichtige Elemente (z. B. Call-to-Actions) verwenden
• Keine individuellen Farben außerhalb der definierten CI-Farben verwenden

Durch die vordefinierten Farbwerte wird sichergestellt, dass alle Seiten im einheitlichen Erscheinungsbild bleiben und gleichzeitig genügend Flexibilität für unterschiedliche Layoutanforderungen besteht.

Des weiteren kann man definieren, ob der farbliche Hintergrund sich auf die gesamte Bildschirmbreite (outer container) ausbreitet oder nicht.

Mit den Optionen Transparenzeffekt kann man den HIntergrund in 10% transparenz der gewählten Farbe anwenden.
Die Option Durchsichtig entfernt den Hintergrund bzw. beim Modul Widget wird dann nur der Rahmen in der gewählten Layoutfarbe ausgespielt.