Der Text-Editor
Der Text-Editor ist ein Eingabefeld (wie dieses hier), in dem Texte nicht nur geschrieben, sondern auch gestaltet werden können. Er ermöglicht es Texte mit verschiedenen Formatierungen einzufügen. Er wird in den meisten Elementen verwendet (Text, Text/Bild etc.) und wird auch Rich Text Editor oder CKEditor genannt.
Durch Markieren einer Textpassage oder eines Absatzes können über die Schaltflächen des Rich Text Editors/CKEditor-Toolbar verschiedene Formatierungen auf den Text angewandt werden. Darunter befinden sich typische Formatierungsmöglichkeiten und für MTS-spezifische Formatierungen.
Typische Formatierungen
Einige der vorhandenen Formatierungen werden im Frontend nicht angewandt um dem Stil der Seite zu folgen. Vorwiegend können folgende Formatierungen verwendet werden:
- Fett: Hebt wichtige Wörter oder Überschriften hervor.
- Kursiv: Wird oft für Betonungen, Zitate oder fremdsprachige Begriffe verwendet.
- Unterstreichen: Kann zur zusätzlichen Hervorhebung dienen.
- Aufzählungen und Nummerierungen: Damit lassen sich Inhalte übersichtlich in Listen darstellen.
- Überschriften: Texte können in verschiedene Ebenen gegliedert werden, damit sie besser lesbar sind.
- Tabellen: Informationen können in Zeilen und Spalten geordnet dargestellt werden, zum Beispiel für Vergleiche oder Datenübersichten.
- Verlinkungen: Fügt einen Link über den Text ein um den User mehr Informationen an einer anderen Stelle bereitzustellen.
Besondere Formatierungen
Es können unterschiedliche Absatzstile verwendet werden, indem ein Absatz markiert wird, und anschließend über das Auswahlmenü links im Rich Text Editor eine Formatierung ausgewählt wird. Es darf immer nur eine Formatierung pro Absatz gewählt werden, ausgenommen Aufzählungszeichen!
Bei Absätzen, die als Button formatiert werden sollen, ist es wichtig, dass immer auch ein Link hinter den Text gelegt wird, ansonsten wird die Buttonformatierung nicht ersichtlich und nicht angewandt.
Dabei stehen folgende Formatierungen zur Verfügung:
Button Primary
Button
Heading 2
Überschrift
Heading 3
Überschrift klein
Aufzählungszeichen ohne Formatierung
- Lorem ipsum
- dolor sit amet
Aufzählungszeichen groß
- Lorem ipsum
- dolor sit amet
Aufzählungszeichen CTA-Farbe
- Lorem ipsum
- dolor sit amet
Aufzählungszeichen groß & CTA Farbe
- Lorem ipsum
- dolor sit amet
Aufzählungszeichen Zweispaltig
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
Nummerierte Liste ohne Formatierung
- Lorem ipsum
- dolor sit amet
Nummerierte Liste groß
- Lorem ipsum
- dolor sit amet
Nummerierte Liste CTA-Farbe
- Lorem ipsum
- dolor sit amet
Nummerierte Liste groß & CTA Farbe
- Lorem ipsum
- dolor sit amet
Nummerierte Liste Zweispaltig
Automatische Verteilung der Listenpunkte auf zwei Spalten (ideal für lange Listen).
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
Aufzählungszeichen Standard Zeichen - “Normale Zeichen”
- Lorem ipsum
- dolor sit amet
- Lorem ipsum
- dolor sit amet
Portalspezifisches
Obwohl eine einheitliche technische Basis genutzt wird, wurden spezifische Formatierungen integriert, um den unterschiedlichen Branding-Anforderungen der Themen-Portale gerecht zu werden. Die Unterschiede zeigen sich vor allem in den verfügbaren Button-Stilen, Größe, Abständen und Farben.
Der Primary Button und der “normale” Button werden im Frontend immer passend zum restlichen Layout gestyled.
Cross Country Ski Holidays
Für diese Angebotsgruppe gibt es zwei spezielle Button Formate, welche nur auf der Webseite dieser Angebotsgruppe funktionieren:
- Button Langlauf: Eigener Stil Button mit dem charakteristischen Blau.
- Button Ski: Eigener Stil Button im passenden Pink/Violett-Ton.