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.

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.

    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:

    ButtonHighlight-ButtonLink 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…

    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 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 Cotainer:

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

    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

    Infos folgen...

    Veranstaltungen

    Infos folgen...

    Success-Stories

    Infos folgen...

    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.