Inhalt Manual
Video zu Frontend Editing
Anders als im Video gezeigt, muss sich normal im Backend angemeldet werden und dann die Webseite in einem neuen Tab aufrufen. Jetzt kann der Tab (das Fenster) mit dem Backend geschlossen werden.
Um vom Frontend ins Backend zu wechseln, oben links auf den Button ZUM BACKEND klicken.
Um jetzt wieder ins Frontend (Editing) zu wechseln, auf irgend einen Button Anzeigen klicken (bspw. im Seitenbaum, im Inhaltselement etc.).
Wichtig! Beim aktivierten Frontline-Editing sind die Abstände zwischen den Inhaltselementen eventuell größer als bei der Normalen Webseiten-Ansicht.
Die 4 + 1 Inhaltselemente
Bei den Inhaltselementen NUR ÜBERSCHRIFT, TEXT und TABELLE kann direkt auf der Webseite gearbeitet werden.
TEXT & MEDIEN werden über das Stift-Icon editiert - es öffnet sich ein Popup-Fenster.
Der TRENNER hat keinen Inhalt, es kann aber ein Text als Bezeichner für das Backend hinterlegt werden.
H1 Überschrift 1
Standard-Überschrift: Im Layout-Dropdown Menu liefern Standard und Layout 1 identische Ausgaben
H2 Überschrift 2
H3 Überschrift 3
H4 Überschrift 4
H5 Überschrift 5
Text normal
Text Bold / fett
Text Italic / kursiv
Text unten gestellt
Text hoch gestellt: Nur das Warenzeichen: ®
Absatzformat Formatiert (wird nur für Farbangaben verwendet und sollte nicht sichtbar sein)
Zitatblock (automatisch magenta & kursiv): Wer später kommt, war nicht früher da.
Texttest 1 - Sitl: Schrift gelb: Yoga fördert die Körperwahrnehmung
Texttest 2 - Stil: Schrift magenta: Yoga fördert die Körperwahrnehmung
Texttest 3 - Stil: Schrift blau: Yoga fördert die Körperwahrnehmung
Texttest 4 - Stil: Schriftart Amiri: Yoga fördert die Körperwahrnehmung
Texttest 5 - Stil: Schriftart Josefin: Yoga fördert die Körperwahrnehmung
Texttest 6 - Stil: Button gelb: Yoga fördert die Körperwahrnehmung
Texttest 7 - Stil: Schrift magenta (innerhalb eines Links): Yoga fördert die Körperwahrnehmung
Der Reiter "Erscheinungsbild"
Im Reiter Erscheinungsbild können verschiedene Stile eingestellt werden.
Layout:
- 100% Standard Layout wird für die meisten Inhalte verwendet
- die 4 Slider Bild | Text ... werden für Slider verwendet oder wenn auf einem die Breite ausfüllendem Bild Text stehen soll
- 20% Quadrat Boxen | Text Overlay - hier können bis zu vier Quadrate nebeneinander dargestelt werden.
Jedes Quadrat kann einen eigenen Link enthalten.
Wichtig! Wenn nur ein Text im Quadrat erscheinen soll, wird dieser in der Bild Beschreibung (Bildunterschrift) hinterlegt.
Als Bild muss ein leeres bzw. transparentes Bild ausgewählt werden: Dateiliste > user_upload > quadrate > quadrat_400x400_leer.png
Die Hintergrundfarbe wird im Feld Alternativer Text hinterlegt.
Rahmen:
Hier kann direkt über oder unter dem Inhaltselement eine gepunktete Linie definiert werden: Linie davor = oben | Linie danach = unten.
Abstand davor und Abstand danach:
Hier kann der Abstand zum vorherigen oder nächsten Inhaltselement variert werden.
Extraklein bedeutet kein Abstand.
Beispiele für Reiter Erscheinungsbild
50%/50 Text Box + Hintergrund gelb
Bild und Text können
die Seiten Wechseln.
Dazu im Reiter Medien >
Position und Ausrichtung
zu Neben dem Text rechts
oder Neben dem Text links
einstellen.
Die Bildgröße richtet sich nach
der Größe des Textblocks.
Erscheinungsbild > Layout: 20% Quadrat Boxen
Farben und Werte
Slider mit mehreren Bildern
Für jedes Slider-Bild wird ein neues Inhaltselement angelegt, sodass über jedes einzelne Sliderbild ein eigener und frei formatiertert Text stehen kann. Die Slidergalerie wird über den Reiter "Erscheinungsbild" definiert. Der Slider wird auf der Webseite dort positioniert, wo das erste Inhaltselement als Slider definiert ist. Alle folgenden Sliderbilder werden in diesen Slider integriert, egal wo sie im Backend angelegt sind.
Es kann über jedes Sliderbild ein Text gelegt werden, der im Texteditor frei formatierbar ist.
Alle Texte müssen im Textfeld hinterlegt sein, also nicht die Felder Überschrift und Unterüberschrift verwenden!
Für die Textblöcke können im Reiter Medien > Position und Ausrichtung die Positionierungsmöglichkeiten Oben links, oben rechts, unten links und unten rechts gewählt werden.
Ein Link kann sowohl im Bild als auch im Text hinterlegt werden.
Slider mit Text No.1
Text auf Bild
Slider Layout: "Slider Bild | Text links oben"
Slider mit Text No.2
Text auf Bild
Slider Layout: "Slider Bild | Text rechts oben "
Slider mit Text No.3
Text auf Bild
Slider Layout: "Slider Bild | Text links unten"
Slider mit Text No.4
Text auf Bild
Slider Layout: "Slider Bild | Text rechts unten"
Fehler und deren Behebung
| Seite ist komplett leer | Ins Backend wechseln und oben auf das Blitz-Icon klicken um den Cache zu löschen |
| Frontend Popup Fenster wird nicht richtig geladen | Die komplette Seite aktualisieren (Taste F5) |
| Text in Box wird nicht richtig dargestellt | Es ist kein (leeres) Bild hinterlegt |
| Es wurde keine Farbe bei "Alternativer Text" hinterlegt | |
| Überschriften werden mehrfach angezeigt | Ein Inhaltselement "Text" wurde im Frontend bearbeitet. Ins Backend wechseln und die Überschrift & Unterüberschrift löschen (nicht im Textfeld) |
| Tabellen-Elemente sollten immer im Backend bearbeitet werden | |
| Links in den Texten funktionieren nicht | Es gibt noch ein Fehler im Frontend-Editing, wenn ein User angemeldet ist. Sobald der User sich abmeldet, werden die Links korrkt gerendert. |
Videoanleitungen
Ausführliche Tutorials für Redakteure / Editoren
Diese Videos beziehen sich auf TYPO3 Version 8.7.
Diese Webseite ist bereits in TYPO3 Version 9.5. erstellt, aber das Backend unterscheidet sich für Editoren nicht wesentlich.
https://jweiland.net/video-anleitungen/typo3/typo3-8-fuer-redakteure.html
Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass Cookies gesetzt werden.
Weitere Informationen entnehmen Sie unserer Datenschutzerklärung.