TYPO3 Grid Elements: So erstellen Sie Container für In­halts­ele­men­te

TYPO3 Grid Elements (grid­ele­ments) ist eine Extension, mit der Sie Backend-Layouts auf In­halts­ele­men­te über­tra­gen können. Es ist dadurch zum Beispiel möglich, mehr­spal­ti­ge Con­tai­ner­ele­men­te oder Raster anzulegen, die un­ab­hän­gig vom Layout der Seite funk­tio­nie­ren. Die ge­wünsch­ten Layouts können ge­spei­chert und beliebig mit Inhalten gefüllt werden.

Was ist TYPO3 Grid Elements?

Grid Elements (Extension Key: grid­ele­ments) ist eine Er­wei­te­rung für TYPO3, die es Ihnen erlaubt, eigene Container für In­halts­ele­men­te für Ihr Projekt zu erstellen. Diese Ras­ter­ele­men­te sind generell seit Version 4.5 im Backend nutzbar und erlauben eine bessere, in­di­vi­du­el­le­re und über­sicht­li­che­re Struk­tu­rie­rung in Spalten und Reihen. Die Extension überträgt das Prinzip auf die Ge­stal­tung von Inhalten. Sie haben dabei die Mög­lich­keit, leere Container zu erstellen und diese mit Inhalten zu füllen. Diese können danach auch un­ab­hän­gig vom ei­gent­li­chen Frontend-Layout neu an­ge­ord­net werden. Denkbar sind unter anderem mehr­spal­ti­ge Inhalte, komplexe Raster und selbst ver­schach­tel­te Struk­tu­ren. Der ge­wünsch­te Aufbau wird bereits im Backend exakt dar­ge­stellt.

Wofür wird TYPO3 Grid Elements genutzt?

TYPO3 Grid Elements ist vor allem dann nützlich, wenn Sie viele und vor allem un­ter­schied­li­che Inhalte auf Ihrer Website abbilden möchten, ohne durch die starre Struktur des Layouts limitiert zu werden. Die Extension bietet Ihnen nicht nur die Mög­lich­keit, mit ver­schie­de­nen Spalten und Reihen für die je­wei­li­gen Inhalte zu arbeiten, sondern erlaubt auch eine Ver­schach­te­lung der Felder. So kann ein Container zum Beispiel aus Zellen bestehen, die in sich ebenfalls wieder TYPO3 Grid Elements enthalten. Auch ein freieres Design, bei dem Spalten un­ter­schied­lich hoch oder an ver­schie­de­nen Mar­kie­run­gen angelegt werden, lässt sich so rea­li­sie­ren.

Welche Funk­tio­nen bietet die TYPO3-grid­ele­ments-Er­wei­te­rung?

Obwohl die Mög­lich­kei­ten der Er­wei­te­rung viel­fäl­tig sind, ist der Einsatz von Grid Elements in TYPO3 einfach. Dafür sorgt vor allem die vor­han­de­ne Drag-and-Drop-Funktion, mit der Sie den ge­wünsch­ten Ele­ment­typ einfach in die passende Spalte ziehen können. Sie können sogar bereits angelegte Elemente mit diesem System neu anordnen und nach dem eigenen Bedarf sortieren. Für die un­ter­schied­li­chen Raster gibt es eigene Icons und Rahmen, die eine Iden­ti­fi­zie­rung deutlich er­leich­tern. Für die un­ter­schied­li­chen Reihen und Spalten lassen sich Ein­schrän­kun­gen im­ple­men­tie­ren, die bestimmte In­halts­ele­men­te von vorn­her­ein aus­schlie­ßen. Durch diese Methode können auch ungeübte Re­dak­teu­rin­nen und Re­dak­teu­re ohne weitere Ein­wei­sung mit der Er­wei­te­rung arbeiten.

Grid Elements für TYPO3 in­stal­lie­ren

Die In­stal­la­ti­on von TYPO3 Grid Elements wird über den Extension Manager durch­ge­führt. Dafür gehen Sie fol­gen­der­ma­ßen vor:

1. In­stal­lie­ren Sie TYPO3.
2. Rufen Sie im Backend den Er­wei­te­rungs­ma­na­ger („Ver­wal­tungs­werk­zeu­ge“ -> „Er­wei­te­run­gen“) auf.
3. Wechseln Sie im oberen Menü von „In­stal­lier­te Er­wei­te­run­gen“ zu „Er­wei­te­run­gen hin­zu­fü­gen“.
4. Sorgen Sie dafür, dass die Liste Ihrer Er­wei­te­run­gen auf dem neuesten Stand ist, indem Sie auf „Jetzt ak­tua­li­sie­ren“ klicken.
5. Geben Sie in die Suchmaske den Begriff „grid­ele­ments“ ein und drücken Sie auf „Absenden“.
6. Klicken Sie beim Eintrag mit dem Schlüssel „grid­ele­ments“ auf das Icon links („Im­por­tie­ren und in­stal­lie­ren“), um Grid Elements für TYPO3 zu in­stal­lie­ren.

Close

7. Nun müssen Sie Ihr Root-Template um ein sta­ti­sches Template erweitern. Rufen Sie dafür das Modul „Template“ auf.
8. Klicken Sie auf „Voll­stän­di­gen Template-Datensatz be­ar­bei­ten“.
9. Wählen Sie die Karte „Enthält“.
10. Suchen Sie in der rechten Liste nach „Grid Elements (grid­ele­ments), fügen Sie das Objekt hinzu und speichern Sie den Vorgang.

Layout mit TYPO3 Grid Elements erstellen

Um Grid Elements für TYPO3 zu nutzen, müssen Sie zunächst einen Ordner anlegen. Lediglich wenn Sie bereits einen Ordner für die all­ge­mei­ne Da­ten­satz­samm­lung haben, sollten Sie diesen statt­des­sen nutzen. Wenn Sie nun ein neues Layout anlegen möchten, gehen Sie fol­gen­der­ma­ßen vor:

1. Rufen Sie den er­stell­ten Ordner auf.
2. Klicken Sie oben auf „Neuer Datensatz“.
3. Wählen Sie „CE Backend Layout“ unter Grid Elements aus.
4. Jetzt öffnet sich ein Dia­log­fens­ter, in dem Sie das neue Element de­fi­nie­ren können.
5. Im Reiter „Allgemein“ können Sie einen Titel für das Element hin­ter­le­gen. Optional ist es möglich, ein Icon und eine Be­schrei­bung hin­zu­zu­fü­gen.
6. Über „Con­fi­gu­ra­ti­on“ bestimmen Sie, ob Sie ein Top Level Layout de­fi­nie­ren möchten. Dies ist für Ver­schach­te­lun­gen wichtig. Neben „Raster-Kon­fi­gu­ra­ti­on“ klicken Sie auf das Icon, um den Grid Wizard zu öffnen. Mit diesem legen Sie das ge­wünsch­te Layout fest. Einzelne Spalten sollten einen Namen und eine Nummer erhalten.
7. Sind Sie mit dem Layout zufrieden, klicken Sie auf „In Zelle speichern“.
8. Zum Beenden wählen Sie dann „Speichern und schließen“ aus. Das neue Layout kann jetzt ein­ge­setzt werden. Dafür ziehen Sie es per Drag-and-Drop in die ge­wünsch­te Position und füllen es dann mit Inhalten.

Best Practices für die Nutzung von TYPO3 Grid Elements

Um das Beste aus der Er­wei­te­rung her­aus­zu­ho­len und gleich­zei­tig eine hohe Per­for­mance und Be­nut­zer­freund­lich­keit zu ge­währ­leis­ten, sollten Sie die folgenden Best Practices beachten:

1. Ver­schach­te­lun­gen mi­ni­mie­ren: Tiefe und komplexe Struk­tu­ren können die La­de­zei­ten im Backend ver­lang­sa­men und die Über­sicht­lich­keit be­ein­träch­ti­gen. Halten Sie Layouts möglichst flach, um die Per­for­mance zu op­ti­mie­ren.
2. Saubere Benennung von Elementen: Benennen Sie Ihre Grid-Elemente und Spalten klar und eindeutig. Dadurch können Re­dak­teu­re und Re­dak­teu­rin­nen später schnell erkennen, welches Layout oder welche Spalte für welchen Inhalt vor­ge­se­hen ist.
3. Layout-Vorlagen verwenden: Erstellen Sie Vorlagen, die Re­dak­teu­re und Re­dak­teu­rin­nen auswählen können. Dies spart Zeit und reduziert die Feh­ler­an­fäl­lig­keit bei der manuellen Layout-Er­stel­lung.
4. Frontend-In­te­gra­ti­on früh­zei­tig planen: TYPO3 Grid Elements steuert haupt­säch­lich das Backend-Layout. Damit die er­stell­ten Layouts auch im Frontend korrekt dar­ge­stellt werden, ist eine früh­zei­ti­ge In­te­gra­ti­on von Ty­po­Script und CSS nötig.
5. Per­for­mance im Blick behalten: Verwenden Sie Grid Elements nur für Layouts, die es wirklich erfordern. Prüfen Sie, ob in be­stimm­ten Fällen die nativen Layout-Funk­tio­nen von TYPO3 aus­rei­chen, um das ge­wünsch­te Ergebnis zu erzielen, um eine gute Per­for­mance Ihres Projekts zu ge­währ­leis­ten.
6. Re­gel­mä­ßi­ge Updates und Kom­pa­ti­bi­li­täts­prü­fung: Da Grid Elements bis TYPO3 11 LTS un­ter­stützt wird, sollten Sie si­cher­stel­len, dass die Versionen von TYPO3 und der Extension kom­pa­ti­bel sind. Über­prü­fen Sie bei einem Update auf TYPO3 Version 12 oder höher, ob Grid Elements in Ihrem Projekt noch notwendig ist oder ob die nativen Layout-Funk­tio­nen des CMS aus­rei­chen.