Textpflege

An verschiedenen Stellen innerhalb Ihres Projektes im VIO.Matrix Content-Managers haben Sie die Möglichkeit Texte einzufügen. Hierfür wird der in VIO.Matrix integrierte Editor verwendet, welcher Ihnen folgende Möglichkeiten zur Verfügung stellt:

• Absätze für Fließtexte inkl. folgenden Text-Formatierungen: fett, kursiv, unterstrichen, durchgestrichen, hoch- und tiefgestellt (m² bzw. c₃)
• Überschriften 2 bis 6
• Tabellen inkl. Tabellenkopf- und -fuß-Markierung
• Bilder inkl. einem einfachen Bild-Editor um Bilder zuzuschneiden und der Konfigurationsmöglichkeit diese links oder rechts vom nachfolgenden Text umfließen zu lassen
• nummerierte Listen
• Aufzählungslisten

Hinweise:

• Das Diakonie-Projekt gibt für alle Formatierungsmöglichkeiten spezifische Formatierungen vor um ein einheitliches und für die verschiedenen Endgeräte sicher darstellbares Design zu erreichen.
• Die Überschriften-Stile 4 bis 6 unterscheiden sich kaum.
• Die Überschrift 1. Ordnung wird vom System bereits für den Seitentitel verwendet und kann, da sie aus Sicht der Suchmaschinenoptimierung nur 1 Mal pro HTML-Dokument vorkommen sollte, nicht redaktionell gesetzt werden.

Weiterhin stehen Ihnen folgende projektspezifische Stile zur Verfügung:

• Trennlinie (einzelner leerer Absatz der so ausgegeben wird wie oberhalb von diesem Textabschnitt)
• GoogleMap-Einbindung
• im Editor eingefügte Bilder können einen Abstand nach links oder rechts erhalten (relevant für von Text umflossene Bilder, siehe Beispiel unten)
• 3 verschiedene Tabellenstile: normal, leichte und rahmenlose Tabelle (siehe Anwendungsbeispiel "Sprechzeiten" dazu)
• Definition eines Kopfbildes, welches vom System automatisch an die responsive Ansicht angepasst wird

Um einen der Stile auszuwählen markieren Sie zunächst den Bereich der mit dem Stil versehen werden soll. Bei einer Tabelle muss man dazu diese komplett markieren, so dass sie blau hinterlegt ist. Bei einem Bild muss man dieses einmal anklicken, so dass es blau umrandet ist. Danach kann man über die Stilauswahl den entsprechenden Stil setzen.

Anwendungsbeispiele

Tabelle mit 3 Spalten und 4 Zeilen inkl. einer Kopfzeile

1. Editor im Content-Manager bei beliebigem Ordner oder Element öffnen
2. Tabellen-Icon anklicken (2. Zeile, 4. Symbol von links) und die gewünschte Anzahl Spalten und Zeilen auswählen (kann nachträglich über die Buttons rechts von diesem Icon geändert werden).
3. Ergebnis:

Links von Text umflossenes Bild inkl. Abstand

1. Editor im Content-Manager bei beliebigem Ordner oder Element öffnen
2. Cursor an die Position setzen an der das Bild eingefügt werden soll.
3. Das Bild-Icon anklicken (2. Zeile, 6 Symbol von rechts) und das einzufügende Bild auswählen.
4. Image-Editor mit OK bestätigen, wenn die Größe des Bildes passt. An der Stelle können Sie das Bild auch noch nachträglich zurechtschneiden.
5. Das Bild ist nun im Editor zu sehen. Schreiben Sie nach dem Bild einfach den Text der neben dem Bild angezeigt werden soll.
6. Jetzt mit der linken Maustaste 1 Mal anklicken, so dass es blau umrandet ist.
7. Nun das Icon zum umfließen des Bildes anklicken (2. Zeile, 2. Symbol von rechts).
8. Weiterhin in der Stilauswahl oberhalb den Punkt "Abstand rechts" auswählen.
9. Ergebnis:

Dieser Text steht rechts vom Bild und umfließt diesen. Damit das umfließen auch zu sehen ist, muss der Text entsprechend lang sein. Daher kommen hier einige Füllworte: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.