---
title: Wie man einen einfachen 2-spaltigen Layout-Container in TYPO3 implementiert
url: "https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-zwei"
description: Wie man die in TYPO3 eingebauten Layouts mit Hilfe der Container Extension um ein einfaches 2-Spalten-Element erweitert. Teil 2 unserer Serie.
image: "https://b13.com/fileadmin/_processed_/a/5/csm_Container_pt2_191-1_5c0f11086f.png"
date: 2020-07-20
modified: 2026-08-19
lastUpdated: 2026-08-19
---

# Wie man einen einfachen 2-spaltigen Layout-Container in TYPO3 implementiert

[ Container ](https://b13.com/de/wissen/container) [ CType ](https://b13.com/de/wissen/ctype) [ TYPO3 ](https://b13.com/de/wissen/typo3)

 Flexible Container und Grids für TYPO3, Teil zwei
===================================================

![](https://b13.com/fileadmin/_processed_/a/d/csm_david_5ce18d41e2.jpg)David Steeb

  20. Juli 2020

 [ RSS Feed ](https://b13.com/de/rss.xml)

  ![Eine Person mit lockigem Haar steht vor einem großen Computerbildschirm, der Texte und Grafiken anzeigt, während zwei kleinere Dokumente in der Nähe platziert sind. Das gesamte Farbschema besteht aus Blau- und Orangetönen.](https://b13.com/fileadmin/_processed_/b/3/csm_Container_pt2_ac21aca780.webp "[Translate to Deutsch:] ")  \[Translate to Deutsch:\]

**Ein einfaches Beispiel: Wie man ein zweispaltiges Grid als flexibles Inhaltselement hinzufügt.**
 Im Folgenden zeige ich ein einfaches Beispiel, um den Einstieg in die TYPO3 Container Extension zu erleichtern: Wie man ein zweispaltiges Containerelement hinzufügt. Damit können Redakteure ganz einfach einen Seitenabschnitt hinzufügen, der diesen Teil des Inhaltsbereichs in zwei Spalten aufteilt. In unserem nächsten Beitrag werde ich auf ein komplexeres Beispiel eingehen.

In Teil 1 dieser Reihe,[ Flexible Container und Grids für TYPO3](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3), haben wir die grundlegenden Konzepte rund um Layout-„Container“ für TYPO3 vorgestellt. Wir erklärten, wie viele Projekte am Ende mehr Layout-Flexibilität benötigen, als TYPO3 out-of-the-box bietet, wie viele bestehende Lösungen mit dem Kompromiss der zusätzlichen Komplexität erkauft werden, Schwierigkeiten beim Upgrade verursachen und dass die neue Container-Erweiterung von b13 uns bei all dem helfen soll! Unsere Erweiterung erlaubt das Hinzufügen von Layout-„Containern“ zu Inhaltsbereichen, die Module und Elemente als optionale Variationen des Hauptlayouts enthalten können, während sie gleichzeitig den Best Practices des TYPO3-Cores folgen, wodurch deine Site flexibel, wartbar und leicht zu aktualisieren bleibt.

  ####  Dieser Blog Post ist Teil unserer Container Serie

- [Teil 1: Flexible Containers und Grids für TYPO3](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3)
- **[Teil 2: Flexible Containers und Grids für TYPO3 — Einfaches Beispiel](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-zwei)**
- [Teil 3: Flexible Containers und Grids für TYPO3 — Erweitertes Beispiel und Konfigurationsmöglichkeiten](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-drei)

   Erster Schritt: Container installieren
----------------------------------------

Um loslegen zu können, muss die Container-Extension von b13 installiert sein. Wenn das noch nicht der Fall ist, füge sie einfach mit Composer hinzu und aktiviere sie im Extension Manager:

`composer req b13/container`

   Konfiguration für einen zweispaltigen Container
-------------------------------------------------

Um ein einfaches Container-Element zu erstellen, müssen wir drei Dinge tun:

- unser Containerelement als CType registrieren
- TypoScript-Konfiguration für unseren CType hinzufügen
- Hinzufügen eines Fluid-Templates für die Frontend-Ausgabe

  ###  Registrierung als CType

Um unser Element zu registrieren, verwenden wir die Funktion „configureContainer“ aus unserer Extension:

  ```
1<br></br>2<br></br>3<br></br>4<br></br>5<br></br>6<br></br>7<br></br>8<br></br>9<br></br>10<br></br>11<br></br>12<br></br>13<br></br>14<br></br>15<br></br>
```

```
\TYPO3\CMS\Core\Utility\<span class="hljs-name">GeneralUtility</span>::makeInstance(\b13\Container\Tca\Registry::<span class="hljs-class"><span class="hljs-keyword">class</span>)-> <span class="hljs-title">configureContainer</span>(</span><br></br>    (<br></br>        new \b13\Container\Tca\ContainerConfiguration(<br></br>            <span class="hljs-string">'2col-container'</span>, <br></br>            <span class="hljs-string">'2 Column Container'</span>,<br></br>            <span class="hljs-string">'Insert an element dividing the content area into two columns'</span>,<br></br>            [<br></br>                [<br></br>                    [<span class="hljs-string">'name'</span> => <span class="hljs-string">'Left Column'</span>, <span class="hljs-string">'colPos'</span> => <span class="hljs-number">201</span>],<br></br>                    [<span class="hljs-string">'name'</span> => <span class="hljs-string">'Right Column'</span>, <span class="hljs-string">'colPos'</span> => <span class="hljs-number">202</span>]<br></br>                ]<br></br>            ]<br></br>        )<br></br>    ) <br></br>);<br></br>
```

  Schauen wir uns die Konfigurationsschritte im Detail an:

- wir registrieren unseren CType-Namen („2col-Container“)
- wir geben unserem CType eine Bezeichnung (einen sichtbaren Namen)
- wir können eine Beschreibung für unser Containerelement hinzufügen (wird für den Assistenten für neue Inhaltselemente verwendet)
- wir fügen die Backend-Layout-Konfiguration für die Anzeige dieses Containerelements im Backend hinzu — das Array ist identisch mit dem, das du in TypoScript-Form für ein Backend-Layout angebendwürdest. Wie du siehst weisen wir jedem Containerbereich einen „colPos“-Wert zu.

  ###  Ein Blick in das Backend

Diese einfache Konfiguration erstellt unser Inhaltselement mit zwei Spalten. Sie fügt dem Assistenten für neue Inhaltselemente einen Reiter „Container“ hinzu und das neue Element „2 Column Container“ kann ausgewählt werden:

  ![Der Assistent für neue Inhaltselemente zeigt ein zweispaltiges Containerelement](https://b13.com/fileadmin/_processed_/4/f/csm_new-content-element-wizard-showing-two-column-container-element_e2aa3739f6.webp "[Translate to Deutsch:] New Content Element Wizard showing a two-column container element")  Abbildung 2: Unser neues Containerelement wird dem Assistenten für neue Inhaltselemente automatisch hinzugefügt

  Alle Containerelemente werden automatisch zum Reiter „Container“ hinzugefügt, aber du kannst dieses Verhalten für einzelne Containerelemente ausschalten. In TYPO3 v10 haben alle automatisch hinzugefügten Containerelemente die neue Option „saveAndClose“ auf true gesetzt (auch das kann für jeden Container geändert werden — siehe Teil 3 für Details).

  Sobald du das neu erstellte Element gespeichert hast, siehst du ein einfaches zweispaltiges Containerelement innerhalb der Seite, in das unterschiedliche Inhaltselemente in der linken und rechten Spalte hinzugefügt werden können:

  ![Backend Ansicht mit einem Container Element in TYPO3](https://b13.com/fileadmin/_processed_/6/f/csm_example-backend-view-with-container-element-in-typo3_c880c4c01a.webp "Backend Ansicht mit einem Container Element in TYPO3")  Abbildung 3: Beispiel-Backend-Ansicht einer Seite mit unserem Container-Element.

  ###  Frontend-Ausgabe hinzufügen

Für die Ausgabe unseres Containers im Frontend müssen wir eine TypoScript-Konfiguration und ein Fluid-Template erstellen.

Wir fügen diese Konfiguration zu unserem TypoScript-Setup hinzu:

  ```
1<br></br>2<br></br>3<br></br>4<br></br>5<br></br>
```

```
tt_content.<span class="hljs-number">2</span>col-container =< <span class="hljs-class"><span class="hljs-keyword">lib</span>.<span class="hljs-title">contentElement</span></span><br></br>tt_content.<span class="hljs-number">2</span>col-container {<br></br>  templateName = <span class="hljs-number">2</span>col-container<br></br>  dataProcessing.<span class="hljs-number">13</span> = b13\Container\DataProcessing\ContainerProcessor<br></br>}<br></br>
```

  Dieses Snippet ruft den ContainerProcessor auf, um die untergeordneten Elemente jedes Containerbereichs zu verarbeiten und den Inhalt für die Ausgabe in unserer Fluid-Vorlage verfügbar zu machen. Es weist TYPO3 außerdem an, ein Template namens „2col-container“ zu verwenden, das sich im Template-Pfad für die Inhaltselement befindet, um die Frontend-Ausgabe zu rendern (Voraussetzung: Template-Verzeichnis ist in `lib.contentElement` festgelegt).

  Ein in diesem Fluid Template ausgeführter Debug zeigt, welche Variablen in unserem Fluid-Template verfügbar sind. Es ist alles vorhanden, was wir brauchen und erwarten würden:

  ![Debug der Container CType Variablen](https://b13.com/fileadmin/_processed_/6/3/csm_debug-of-container-ctype-variables_352b59760f.webp "Debug der Container CType Variablen")  Abbildung 5: Alle Daten, mit denen wir innerhalb unseres Fluid-Templates arbeiten können

  Wir haben alle Daten aus dem Inhaltselement selbst (also die Daten des Container-Elements) sowie zwei Variablen, die mit den Daten aus den Kind-Datensätzen gefüllt sind. Jeder Kind-Datensatz enthält den vollständigen Datenbankeintrag des untergeordneten Inhaltselements, einschließlich eines zusätzlichen Eintrags „renderedContent“, der eine vollständige Darstellung des gerenderten Inhalts dieses Inhaltstyps ist. In den meisten Fällen lässt sich dies verwenden, um die untergeordneten Containerelemente nacheinander auszugeben.

  In unserem Beispiel würde das Fluid-Template also in etwa so aussehen:

  ```
1<br></br>2<br></br>3<br></br>4<br></br>5<br></br>6<br></br>7<br></br>8<br></br>9<br></br>10<br></br>11<br></br>12<br></br>
```

```
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b_multicolumn b_multicolumn--twocols"</span>></span><br></br>	<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b_multicolumn__col"</span>></span><br></br>		<span class="hljs-tag"><<span class="hljs-name">f:for</span> <span class="hljs-attr">each</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{children_201}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"element"</span>></span><br></br>			</span><span class="hljs-template-variable">{element.renderedContent -> f:format.raw()}</span><span class="xml"><br></br>		<span class="hljs-tag"></<span class="hljs-name">f:for</span>></span><br></br>	<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br></br>	<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b_multicolumn__col"</span>></span><br></br>		<span class="hljs-tag"><<span class="hljs-name">f:for</span> <span class="hljs-attr">each</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{children_202}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"element"</span>></span><br></br>			</span><span class="hljs-template-variable">{element.renderedContent -> f:format.raw()}</span><span class="xml"><br></br>		<span class="hljs-tag"></<span class="hljs-name">f:for</span>></span><br></br>	<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br></br><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br></br>
```

  Und damit ist unser zweispaltiges Containerelement einsatzbereit.

   OK, das war cool, und jetzt?
------------------------------

[In Teil 3](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-drei) werden wir uns ein komplexes Beispiel ansehen und alle Konfigurationsoptionen erklären.

   Upgrade auf TYPO3 v10 geplant?
--------------------------------

Layout-relevante Fragen sind nur einer der Bereiche, die bei der Planung eines Upgrades berücksichtigt werden müssen. Wir helfen gern bei der Analyse von Projekten im Hinblick auf die gesamte Bandbreite der Herausforderungen und Möglichkeiten der Aktualisierung.

 [ Mehr über TYPO3-Upgrades ](https://b13.com/de/loesungen/typo3-upgrades)

  ###  Geschrieben von:

 ![Lächelnder Mann mit kurzen Haaren und einem Bart, der ein rotes T-Shirt trägt, steht in einem gut beleuchteten Innenraum mit verschwommenem Hintergrund.](https://b13.com/fileadmin/_processed_/a/d/csm_david_cf042ebb7f.webp)

Als b13-Gründer und CEO is David derjenige, mit dem Du es zu tun haben wirst, wenn Du mit uns zusammenarbeiten möchtest. Er eignet sich ständig neue Fähigkeiten an und bestimmt maßgeblich unsere hochmodernen Ansätze in der Frontend-Entwicklung.

 David Steeb  CEO

 [ mehr von David Steeb ](https://b13.com/de/team/david-steeb)

  Ähnliche Artikel
------------------

- ![Cartoon-Trophäenfigur umgeben von Händen, die Daumen hoch und ein Herzzeichen geben, vor einem Hintergrund mit Zahnradmuster.](https://b13.com/fileadmin/_processed_/f/7/csm_T3ppy_Design_Kit_Headerbild_b51eb9dc31.webp)

    ###  T3ppy gibt TYPO3 ein freundliches Gesicht

     06. August 2026 | Florian “Flix” Keitgen

     TYPO3 ist leistungsstark — muss sich aber nicht unpersönlich anfühlen. Das ist T3ppy, unser freundlicher Begleiter fürs Backend.

     [ weiterlesen: T3ppy gibt TYPO3 ein freundliches Gesicht ](https://b13.com/de/wissen/t3ppy-design-kit)
- ![Hammer mit der Aufschrift 'KI' auf einem schaltkreis-musternden Hintergrund mit gelben Sternen, der Regulierung oder Gesetzgebung im Zusammenhang mit künstlicher Intelligenz in der EU symbolisiert.](https://b13.com/fileadmin/_processed_/1/0/csm_EUAIAct_Headerbild_510724b3de.webp)

    ###  KI-Inhalte in TYPO3: Transparenz braucht Verantwortung

     02. August 2026 | Benni Mack

     Der EU AI Act rückt die Herkunft KI-generierter Inhalte in den Fokus. AI Label kennzeichnet KI-generierte und KI-bearbeitete Inhalte in TYPO3 und dokumentiert, wer den…

     [ weiterlesen: KI-Inhalte in TYPO3: Transparenz braucht Verantwortung ](https://b13.com/de/wissen/ai-content-in-typo3-labelling-needs-accountability)
- ![Eine Reihe stilisierter Figuren in verschiedenen Posen, jede mit einem markanten orangefarbenen Hut, zeigt einen Übergang vom Gehen zum Stillstehen, während sie auf ein Handy schauen, vor einem lila Gitterhintergrund.](https://b13.com/fileadmin/_processed_/d/7/csm_QueuesDDEV_Headerbild_f640931350.webp)

    ###  Bessere Skalierbarkeit mit entkoppelten Queues: So richtest du RabbitMQ mit TYPO3 ein

     10. April 2024 | Jochen Roth

     Wenn integrierte Nachrichtentransporte an ihre Grenzen stoßen, kann RabbitMQ TYPO3 mit einer skalierbaren, robusten Message Queue versorgen.

     [ weiterlesen: Bessere Skalierbarkeit mit entkoppelten Queues: So richtest du RabbitMQ mit TYPO3 ein ](https://b13.com/de/wissen/bessere-skalierbarkeit-mit-entkoppelten-queues-so-richtest-du-rabbitmq-mit-typo3-ein)
- ![Eine Cartoonfigur, die einem Schild ähnelt, gibt ein Daumen hoch vor einer Computeroberfläche mit verschiedenen Menüoptionen.](https://b13.com/fileadmin/_processed_/e/6/csm_Header_cda1f80173.webp)

    ###  Gestatten, T3ppy! Ein neues Zeitalter für die Redaktionsarbeit in TYPO3

     01. April 2026 | Florian “Flix” Keitgen

     Entdecke T3ppy und AiM — Deine KI-Assistenz im TYPO3 Backend für bessere Inhalte, klare Strukturen und volle Kontrolle über Redaktions-Prozesse.

     [ weiterlesen: Gestatten, T3ppy! Ein neues Zeitalter für die Redaktionsarbeit in TYPO3 ](https://b13.com/de/wissen/gestatten-t3ppy-ein-neues-zeitalter-fuer-die-redaktionsarbeit-in-typo3)
- ![Retro-Mikrofon-Illustration mit einem Einkaufswagen-Symbol im Hintergrund, das E-Commerce oder Online-Shopping symbolisiert.](https://b13.com/fileadmin/_processed_/f/8/csm_Marketplace_Headerbild_ee1575614c.webp)

    ###  Warum TYPO3 einen Marketplace für Produkte braucht

     25. März 2026 | Florian “Flix” Keitgen

     Ein Marketplace würde TYPO3-Produkte sichtbarer machen, den Vergleich erleichtern und Agenturen sowie Kunden gleichermaßen profitieren lassen.

     [ weiterlesen: Warum TYPO3 einen Marketplace für Produkte braucht ](https://b13.com/de/wissen/warum-typo3-einen-marketplace-fuer-produkte-braucht)
- ![Eine Hand hält eine Lupe über den Laptop-Bildschirm, der eine Webseite mit einem Bild und Textelementen anzeigt.](https://b13.com/fileadmin/_processed_/e/5/csm_BackendUserSection_Headerbild_6093c842fd.webp)

    ###  Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6)

     05. März 2026 | David Steeb

     Entdecke den oft unterschätzten Doktype 6 (Backend User Section) in TYPO3 für sichere interne Vorschauen, Redaktionstrainings und Prototyping. Erfahre praxisnahe Anwendungsfälle,…

     [ weiterlesen: Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6) ](https://b13.com/de/wissen/ein-echter-geheimtipp-in-typo3-die-backend-user-section-doktype-6)
- ![Zwei stilisierte Webseiten-Designs mit einem Benutzerprofil, Platzhaltern für Bilder und Textabschnitten, vor einem hellblauen Hintergrund.](https://b13.com/fileadmin/_processed_/2/0/csm_BackendPreview_Headerbild_b4c5799cfa.webp)

    ###  Backend-Content-Previews mit System — warum wir EXT:backendpreviews entwickelt haben

     09. Februar 2026 | David Steeb

     EXT:backendpreviews sorgt für konsistente Content-Previews im TYPO3-Backend mit Fluid Templates, Layouts und Partials.

     [ weiterlesen: Backend-Content-Previews mit System — warum wir EXT:backendpreviews entwickelt haben ](https://b13.com/de/wissen/backend-content-previews-mit-system-warum-wir-extbackendpreviews-entwickelt-haben)
- ![Eine menschliche Hand schüttelt eine Roboterhand vor einem lila Hintergrund mit Herzmustern, was die Zusammenarbeit zwischen Menschen und Technologie symbolisiert.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp)

    ###  Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown

     28. Januar 2026 | Benni Mack

     Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems.

     [ weiterlesen: Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown ](https://b13.com/de/wissen/das-internet-ist-nicht-mehr-nur-fuer-menschen-ki-bots-lieben-markdown)
- ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp)

    ###  Camino—The Need for a Default Theme in TYPO3 Is Real

     27. Januar 2026 | Benni Mack

     With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork.
- ![Grafik mit stilisierten Darstellungen eines Turms, in dessen Mitte der Text "T3CON25 Düsseldorf" deutlich sichtbar ist.](https://b13.com/fileadmin/_processed_/7/b/csm_T3CON2025_Headerbild_fc9c5cc53e.webp)

    ###  T3CON25 — der Zukunft des Content Managements einen Schritt näher

     10. Dezember 2025 | Franzi Töpler

     Die T3CON25 zeigte die Zukunft von TYPO3 mit Einblicken in TYPO3 v14, KI, digitale Souveränität und Open-Source-Lösungen für moderne, sichere Webauftritte.

     [ weiterlesen: T3CON25 — der Zukunft des Content Managements einen Schritt näher ](https://b13.com/de/wissen/t3con25-der-zukunft-des-content-managements-einen-schritt-naeher)