Beispiele und Pflegetipps für die Arbeit im TYPO3-System für mmlab.de

Navigation

Die Hauptnavigation (erste Ebene) setzt sich aus den Unterseiten von „Home“ (Seiten-ID 1) zusammen. Das Dropdown-Menü, das angezeigt wird, wenn man mit der Maus über einen Hauptnavigationspunkt fährt, wird automatisch generiert, sobald ein Hauptnavigationspunkt Unterseiten hat. Eine weitere (dritte) Ebene ist nicht angedacht und wird ggf. auch nicht angezeigt.

Neben der Hauptnavigation gibt es eine Metanavigation am oberen rechten Rand der Seite mit allen Unterseiten von "Meta" (Seiten-ID 6), automatisch ergänzt von einem Sprachumschalter DE/EN. Die letzte Seite (aktuell "Jobs") wird hierbei zur besonderen Hervorhebung farblich abweichend dargestellt.

Des Weiteren gibt es eine zusätzliche Navigation ganz am unteren rechten Ende der Seite mit allen Unterseiten von "Footer" (Seiten-ID 16).

Auf Unterseiten erscheint im Inhaltsbereich oben rechts eine sogenannte "Breadcrumb"-Navigation. Soll diese nicht angezeigt werden, kann in den Seiteneigenschaften im Reiter "Erscheinungsbild" ein Haken im Feld "Breadcrumb Navigation verstecken" gesetzt werden.

Abschnitts-Übersicht

Eine besondere Art der Navigation bietet die am linken Bildschirmrand verankerte Abschnitts-Übersicht.
Jedes Inhaltselement hat die Option "Im Ankermenü verlinken". Ist dies aktiviert, erscheint dessen Überschrift bzw. Anker-Bezeichnung automatisch in dieser Übersicht und führt den Benutzer per Klick direkt zum entsprechenden Abschnitt. Es spielt dabei keine Rolle ob die Übverschrift dabei h1, h2, h3 oder ggf. auch "Verborgen" ist.
Bitte beachten Sie, dass Inhaltselemente innerhalb eines Containers nicht für diese Übersicht verwendet werden sollten da diese in der Reihenfolge nicht korrekt dargestellt werden können. Stattdessen können Sie die Funktion aber für das Container-Element selbst verwenden.

Bereiche

Die Seiten sind in verschiedene Bereiche aufgeteilt, welche im TYPO3-Backend entsprechend gepflegt werden können.

Im Bereich "Header" kann lediglich ein Mask-Element "Slider" eingefügt werden.
Mehr hierzu finden Sie im Abschnitt "Inhalte | Sonderfunktionen". Die Darstellung erfolgt hierbei dann über die volle Breite der Webseite. Der Bereich "Header" muss allerdings nicht zwingend befüllt werden. Grafiken für den Header sollten im Idealfall eine Größe von 1900x600 Pixel haben.

Für Desktop und mobile Endgeräte lassen sich über den Button "Editor öffnen" verschiedene Bildausschnitte festlegen. Default entspricht dabei dem mobilen Bildausschnitt (mobile-first).

Im Bereich "Inhalt" können verschiedene Inhaltselemente angelegt werden, die verschiedenen Möglichkeiten werden im Abschnitt "Inhalte | Elemente" dargestellt.

Jeglicher Inhalt in diesem Bereich ist auf die Inhaltsbreite begrenzt und geht nicht bis zum Rand des Browserfensters, außer im Feld "Container" des Reiters "Erscheinungsbild" wird diese Option explizit ausgewählt. Bitte beachten Sie, nicht alle Inhaltselemente sind für diese Option optimiert.

Im zusätzlichen Inhaltsbereich "Vererbbare Inhalte" kann das Mask-Element "Kontakt Element" integriert werden.
Dieses vererbt sich somit automatisch auf alle Unterseiten der aktuellen Seite. Hier können sowohl die Kontaktdaten, als auch die E-Mail Adresse für den Formularempfang hinterlegt werden.
Somit können diese für einen bestimmten Teilbereich der Website beispielsweise auf der jeweiligen Hauptnavigationsseite gesetzt werden und werden für alle Unterseiten entsprechend übernommen.
Mehr Informationen dazu finden Sie im Abschnitt "Inhalte | Sonderfunktionen".

Für den Kopfbereich der Webseite existiert auf der Startseite ("Home") ein zusätzlicher Bereich ganz oben. Hier kann das Element "Kopfzeile der Webseite" gepflegt werden. Dort kann das Logo bei Bedarf ausgetauscht oder die Verlinkung auf das Logo angepasst werden.

Ebenso existiert auf der Startseite ("Home") unten ein Bereich Fußzeile. Dort kann das Element Fußzeile der Webseite gepflegt werden. In diesem Element können Sie Angaben zum Footer pflegen, bspw. die zusätzliche Navigation im linken Bereich, die Grafiken und Icons im rechten Bereich oder auch den Copyright-Hinweis.

Icons

Für den Administrator gibt es In der "Dateiliste" einen Bereich "Icons".
Dort können SVG-Dateien hochgeladen werden. Nach dem Upload muss entsprechend der TYPO3-Cache geleert werden.
Danach erscheinen alle Icons aus diesem Bereich automatisch bei definierten Inhaltselementen (bspw. bei Überschriften oder auch beim Slider) zur Auwahl.
Für die Ausgabe dieser Icons wird dann automatisch ein blaues Quadrat hinter das jeweilige Icon gelegt.

Bitte beachten Sie dabei, dass keine bereits verwendeten Icons gelöscht oder umbenannt werden dürfen!

Inhalte | Elemente

Verwenden Sie die Überschrift h1 bitte genau einmal je Seite, dies ist aus SEO-Sicht empfehlenswert. Weitere Überschrift können mit h2 und ggf. h3 eingefügt werden. Bitte achten Sie darauf, Ihren Inhalt mit den weiteren Überschriften h2 und h3 hierarchisch korrekt zu strukturieren.
Optional kann je Überschrift auch ein Icons ausgewählt werden. Dies erscheint dann automatisch in einem blauen Quadrat direkt links über der Überschrift.

Um den Inhaltsbereich in mehrere Spalten aufzuteilen, stehen hier folgende "Container" zur Verfügung:

Container 25% - 25% - 25% - 25%
Container 33% - 33% - 33%
Container 33% - 66%
Container 50% - 50%
Container 66% - 33%
Container 100%

Diese Container teilen die Seite - zumindest in der Desktopansicht – in zwei, drei bzw. vier Spalten mit der jeweiligen prozentualen Breite auf. Innerhalb der Container können weitere Inhaltselemente gepflegt werden. In der Responsive-Ansicht brechen diese Spalten dann zur besseren Darstellung um, dabei schieben sich die Spalten untereinander, so dass die linke Spalte oben und die rechte Spalte unten steht.

Überschrift Spalte 1

In diesen Containern können dann alle zur Verfügung stehenden Inhaltselemente eingefügt werden. Das häufigste Element ist „Text & Medien“, welches mit Text und/oder Bilder(n) /Video(s) verwendet werden kann.

Überschrift Spalte 2

Die Spalten der Rasterelemente werden in ihrer Höhe immer aneinander angeglichen. Trotzdem sollten Sie aus optischen Gründen darauf achten, die Spalten eines Rasterelements nicht mit extrem unterschiedlich viel Text zu befüllen.

Überschrift Spalte 3

Es kann natürlich auch ein Bild in einer Spalte ausgegeben werden.

Erscheinungsbild

Alle Inhaltselemente haben im Reiter "Erscheinungsbild" folgende Optionen:

Layout: hier kann die Farbe des Hintergrund für die Ausgabe des jeweiligen Elements definiert werden - aktuell stehen weiß (Standard), blau und grau zur Verfügung.
Abgerundete Ecken: Soll bspw. eine blaue Box (siehe Layout) bei der Ausgabe abgerundete Ecken erhalten, kann hier ein Haken gesetzt werden, die Ausgabe wird daraufhin automatisch angepasst.
Container: Soll sich das Element (bspw. eine Grafik) nicht nur über den Inhaltsbereich, sondern über die gesamte Breite (max 1900 Pixel) erstrecken, kann hier "Gesamte Breite" ausgewählt werden. Bitte achten Sie hierbei ggf. auf eine ausreichende Größe/Qualität der verwendeten Grafik(en).
Semantische HTML5 Tags: Für die SEO-Optimierung kann hier ggf. ein abweichende Angabe im Quellcode erzielt werden - der Standardwert "Div" sollte hier für die meisten Elemente passen.
Abstand vor / Abstand nach: Zum Definieren von mehr und weniger Abstand kann hier eine gewünschte Variante ausgewählt werden. Standardmäßig beträgt der Abstand hier jeweils 30 Pixel in der Desktopansicht.

Bild-Darstellung anpassen

Bei jedem Bild kann über die Schaltfläche "Editor öffnen" der gewünschte Ausschnitt mittels der verschiedenen Seitenverhältnisse festgelegt werden. Dies bietet sich vor allem an, wenn Sie Bilder neben- oder übereinander darstellen wollen, die alle das gleiche Format haben sollen.

Dazu einfach das Verhältnis anklicken (1), Bei einige Elementen können verschiedene Bildausschnitte festgelegt werden. Bei "Text und Bilder" Elementen können bspw. unterschiedliche Bildausschnitte je nach Ausgabegröße festgelegt werden. Für bestimmte Elemente gibt es unterschiedliche Bildausschnitte, bspw. für unterschiedliche Displaygrößen (2), so können Sie das selbe Bild lediglich mit einem anderen Bildausschnitt für Mobile, Tablet und Desktop verwenden. Dazu die Auswahl im Bild über Ziehen an den Ecken entsprechend vergrößern (3) bzw. über Drag & Drop den ganzen Bereich an die gewünschten Stelle schieben und anschließend die Änderung akzeptieren (4).

Neben den weiteren Optionen für Bilder, kann im Bereich "Verhalten" ausgewählt werden, dass sich ein Bild bei Klick vergrößert und die Ecken des Bildes können bei Bedarf auch abgerundet dargestellt werden.

Textformatierung

Die Formatierung des Textes kann bedingt über den Rich-Text-Editor (RTE) vorgenommen werden.
Zur alternativen Darstellung gibt es im RTE die Blockstile "Highlight" und "Intro".

Text mit Formatierung "Highlight".

Text mit Formatierung "Intro".

Verweise werden über die Schaltfläche "Link einfügen" im RTE erzeugt.
Formatiert werden diese standardmäßig mit der Highlight-Farbe. Alternativ stehen folgende Stile zur Auswahl:

Button

Highlight-Button

Link mit Icon

Funktion "mehr lesen"

Soll ein Text nicht direkt vollständig angezeigt werden, kann mit der Option "Abschneiden nach x Zeichen" die Anzahl Zeichen angegeben werden, nach welcher der Inhalt mit "..." gekürzt wird und erst nach Klick auf "mehr lesen" vollständig angezeigt…

Soll ein Text nicht direkt vollständig angezeigt werden, kann mit der Option "Abschneiden nach x Zeichen" die Anzahl Zeichen angegeben werden, nach welcher der Inhalt mit "..." gekürzt wird und erst nach Klick auf "mehr lesen" vollständig angezeigt werden.

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.

weniger lesen

Inhalte | Sonderfunktionen Darstellung besonderer Elemente

Headerbilder bzw. Headerslider werden mit dem Mask-Element "Slider" umgesetzt. Sobald mehr als ein Bild hinterlegt wird, generiert sich automatisch ein Slider aus diesen Bildern.
Für die Darstellung gibt es folgende unterschiedlichen Varianten:

Für die Darstellung von besonderen Elementen nutzen wir zum Einen eine Variante des Elements Container:

Akkordeon

und zum Anderen diverse sogenannte Mask-Elemente mit denen die gewünschte Ausgabe automatisch erzeugt wird:

Video Element

Mit dem Video Element können Sie mp4-Dateien mit Vorschaubild, Titel, Subtitle und Dauer des Videos anlegen. Die Besonderheit hierbei ist, dass das Video bereits stumm abgespielt wird, sobald Sie mit der Maus über das Vorschaubild fahren. Klicken Sie darauf, so öffnet sich das Video in einer Lightbox und läuft mit Ton ab.

Das Video Element nimmt immer 100% der verfügbaren Breite ein. Das heißt, wenn Sie es z. B. in einen 2-spaltigen Container packen, so nimmt es nur noch 50% der verfügbaren Breite ein.

Testvideo

Subheader des Testvideos

3:45

Kundenlogin

Zugriff auf den internen Bereich (Login auf Kundenlogin) haben alle angelegten Benutzer im Verzeichnis "Datensatzspeicher > FE-Benutzer" (uid 56).
Für neue Benutzer wird lediglich ein Benutzername und ein (sicheres) Passwort benötigt, sowie die Zuweisung zur Benutzergruppe "Standard". Lassen Sie die Zugangsdaten dem entsprechenden Kunde zukommen, lesen Sie dazu bitte auch folgende Hinweise: https://www.manywaysout.de/faq.html#passwort

Für den internen Bereich können Sie dann sowohl Seiten als auch Inhalte anlegen, welche dann im Reiter "Zugriff" entsprechend eingeschränkt werden können. Bei Bedarf können Sie ggf. auch weitere Benutzergruppen anlegen und unterschiedliche Berechtigungen setzen.

Datensatzbasierte Pflege / Ausgabe

Für die Pflege und die Darstellung von News, Success Stories, Veranstaltungen oder Ansprechpartner nutzen wir Datensätze.

Diese werden im TYPO3 im Bereich "Datensatzspeicher" (uid 13) in den entsprechenden Systemordnern verwaltet.

News

Newsmeldungen werden über das Modul "Liste" im Verzeichnis "Datensatzspeicher > News" angelegt und gepflegt.

Neben einer Überschrift, einer optionalen Unterüberschrift, einem Datum sowie einem ausführlichen Text, können Sie im Reiter "Medien" noch ein entsprechendes Bild zu dieser Newsmeldung einfügen. Wenn das Bild in der Listenansicht angezeigt werden soll, achten Sie bitte darauf, im Abschnitt "Zeige in Ansichten" den Punkt "In allen Ansichten anzeigen" auszuwählen, sonst wird es standardmäßig nur in der Detailansicht ausgegeben (s. Bild).

Bitte achten Sie ggf. auf den Inhalt des Feldes "Sprechende URL Pfadabschnitt", besonderns wenn Newsmeldungen kopiert oder deren Überschrift geändert wird, kann dies ggf. zu Problemen oder zumindest zu unschönen URLs führen. Hier können Sie bei Bedarf mit den Buttons hinter dem Feld den Wert aktualisieren oder manuell verändern.

Da Sie bei den Newsmeldungen relativ eingeschränkt sind (einfaches Textfeld + Medienelement), empfehlen wir für jede Newsmeldung eine eigene Seite anzulegen und den "Typ" der eben erstellten Newsmeldung auf "Interner Link" umzustellen und die neu erstellte Seite hier zu verlinken. Auf dieser Seite haben Sie dann die gleiche Flexibilität bzgl. der Inhaltselemente wie bei den restlichen Seiten.

Die Ausgabe der Newsmeldungen erfolgt dann automatisch an den dafür vorgesehenen Stellen, aktuell wäre dies die Startseite (bei "Aktuelles" oben nur die aktuellste Newsmeldung - zudem weiter unten bei "Presse & Aktuelles" die nächsten 3 Newsmeldungen nach Datum absteigend sortiert), sowie die Seite "Presse & Aktuelles" (alle Meldungen, mehr nach Klick).

Veranstaltungen

Veranstaltungen werden analog zu den Newsmeldungen ebenfalls über das Modul "Liste" im Verzeichnis "Datensatzspeicher > Veranstaltungen" angelegt und gepflegt.

Neben einer Überschrift, einer optionalen Unterüberschrift, einem Datum sowie einem ausführlichen Text, können Sie im Reiter "Medien" noch ein entsprechendes Bild zu dieser Newsmeldung einfügen. Die Bilder sollten quadratisch sein mit einer optimalen Bildgröße von 600 x 600px (auf Geräten mit geringerer Auflösung werden die Veranstaltungen einspaltig dargestellt, womit die Bilder mehr Platz zur Verfügung haben). Die Bilder können natürlich auch im TYPO3-Backend mit Hilfe des Bildbearbeitungstools auf das quadratische Format zugeschnitten werden. Achten Sie dabei darauf, dass sie den richtigen Ausschnitt auswählen (für Veranstaltungen: "Event Vorschaubild"), s. Bild 1.
Wenn das Bild in der Listenansicht angezeigt werden soll, achten Sie bitte darauf, im Abschnitt "Zeige in Ansichten" den Punkt "In allen Ansichten anzeigen" auszuwählen, sonst wird es standardmäßig nur in der Detailansicht ausgegeben - s. Bild 2.

Zudem haben Sie bei Veranstaltungen noch die Möglichkeit ein optionales Enddatum anzugeben oder die Option "Ganzer Tag" zu setzen - allerdings sind beide Angaben aktuell ohne Funktion da dieser in der Ausgabe (aktuell) nicht verwendet werden.

Bitte achten Sie ggf. auf den Inhalt des Feldes "Sprechende URL Pfadabschnitt", besonderns wenn Veranstaltungen kopiert oder deren Überschrift geändert wird, kann dies ggf. zu Problemen oder zumindest zu unschönen URLs führen. Hier können Sie bei Bedarf mit den Buttons hinter dem Feld den Wert aktualisieren oder manuell verändern.

Die Ausgabe der Veranstaltungen erfolgt dann automatisch an den dafür vorgesehenen Stellen, aktuell wäre dies die Startseite (bei "Termine & Veranstaltungen" oben), sowie die Seite "Presse & Aktuelles" (alle Veranstaltungen, mehr nach Klick).

Success-Stories

Success-Stories folgen dem selben Muster und der selben Funktionalität wie Newsmeldungen. Diese werden über das Modul "Liste" im Verzeichnis "Datensatzspeicher > Success-Stories" angelegt und gepflegt.

Neben einer Überschrift, einer optionalen Unterüberschrift, einem Datum sowie einem ausführlichen Text, können Sie im Reiter "Medien" noch ein entsprechendes Bild zu dieser Newsmeldung einfügen.

Bitte achten Sie ggf. auf den Inhalt des Feldes "Sprechende URL Pfadabschnitt", besonderns wenn Newsmeldungen kopiert oder deren Überschrift geändert wird, kann dies ggf. zu Problemen oder zumindest zu unschönen URLs führen. Hier können Sie bei Bedarf mit den Buttons hinter dem Feld den Wert aktualisieren oder manuell verändern.

Da Sie bei den Success-Stories relativ eingeschränkt sind (einfaches Textfeld + Medienelement), empfehlen wir für jede Success-Story eine eigene Seite anzulegen und den "Typ" der eben erstellten Success-Story auf "Interner Link" umzustellen und die neu erstellte Seite hier zu verlinken. Auf dieser Seite haben Sie dann die gleiche Flexibilität bzgl. der Inhaltselemente wie bei den restlichen Seiten.

Die Ausgabe der Success-Stories erfolgt dann automatisch an den dafür vorgesehenen Stellen, aktuell wäre dies die Seite "Presse & Aktuelles" (alle Stories, mehr nach Klick).

Ansprechpartner

Ansprechpartner können mit Bild und entsprechenden Kontaktinformationen im Systemorder "Datensatzspeicher > Ansprechpartner" (uid 34) angelegt und verwaltet werden.
Wichtig ist hierbei die Zuordnung zu einer entsprechenden Kategorie. Diese können im gleichen Verzeichnis verwaltet werden.

Für die Ausgabe wird dann ein entsprechendes Adress-Plugin an einer passenden Stelle eingefügt und einfach die gewünschte Kategorie ausgewählt - so werden automatisch alle dieser Kategorie zugewiesenen Ansprechpartner korrekt formatiert ausgegeben.