Standard Container
Strukturieren und gestalten Sie Ihre Inhalte mit vielseitigen Container- und Layout-Optionen, die in TYPO3 verfügbar sind.
2,3,4,6 Columns
Teilen Sie Ihre Inhalte in klare und responsive Spaltenlayouts auf, um eine übersichtliche Präsentation auf allen Geräten zu gewährleisten.
2 Columns
Column 1
Das ist Spalte 1
Column 2
Das ist Spalte 2
3 Columns
Column 1
Das ist Spalte 1
Column 2
Das ist Spalte 2
Column 3
Das ist Spalte 3
4 Columns
Column 1
Das ist Spalte 1
Column 2
Das ist Spalte 2
Columns 3
Das ist Spalte 3
Column 4
Das ist Spalte 4
6 Columns
Column 1
Das ist Spalte 1
Column 2
Das ist Spalte 2
Columns 3
Das ist Spalte 3
Column 4
Das ist Spalte 4
Column 5
Das ist Spalte 5
Column 6
Das ist Spalte 6
Row Columns
Organisieren Sie Ihre Inhalte in vertikalen Reihen, um eine klare und konsistente Struktur zu schaffen.
Column
Beliebige Spalte
Column
Beliebige Spalte
Column
Beliebige Spalte
Column
Beliebige Spalte
Column
Beliebige Spalte
Column
Beliebige Spalte
Auto Layout
Lassen Sie TYPO3 die beste Layoutstruktur basierend auf Ihrem Inhalt automatisch bestimmen, um eine optimale Darstellung zu erreichen.
Column
col-2
Column
Col-3
Column
Col-4
Column
Col-3
Containers
Wählen Sie Containergrößen je nach Designanforderung, von schmal bis extrabreit, um eine maßgeschneiderte Darstellung zu gewährleisten.
Hinweis: Die volle Funktionalität ist nur bei voller Seitenbreite sichtbar (ohne Seitenleiste/Aside).
no Container
Max width: unbegrenzt
Container-fluid
max-width: 100%
Container
max-width: 1540px
Container XL
max-width: 1140px
Container LG
max-width: 960px
Container MD
max-width: 720px
Container SM
max-width: 560px
Spezial-Container
Card Wrapper
Präsentieren Sie Ihre Inhalte mit eleganten Karten, perfekt geeignet für hervorgehobene Informationen oder Produktvorstellungen. Im Backend stehen Ihnen verschiedene Darstellungsoptionen zur Verfügung, darunter Grid Cards, Card Group, Masonry, Swiper und Flipper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Button Groups
Gruppieren Sie Schaltflächen für eine organisierte und intuitive Benutzerinteraktion.
Bootstrap Carousel Item (Kopie 1)
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Bootstrap Carousel Item (Kopie 3)
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Bootstrap Carousel Item (Kopie 2)
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Bootstrap Carousel Item (Kopie 4)
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Bootstrap Carousel Item (Kopie 5)
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Carousel Slider
Zeigen Sie mehrere Inhalte in einem dynamischen und interaktiven Slider, der die Aufmerksamkeit Ihrer Besucher fesselt.
Collapsible Container
Sparen Sie Platz, indem Sie Inhalte in ausklappbaren Containern anordnen, die bei Bedarf erweitert werden können.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Danke
Tabs Container
Organisieren Sie Inhalte in tabellarischen Abschnitten für eine klare und kompakte Darstellung.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Swiper Container
Ein moderner Touch-Slider, ideal für mobile Ansichten, der eine reibungslose und ansprechende Benutzererfahrung bietet."
Bootstrap Carousel Item 1
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Bootstrap Carousel Item 2
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Bootstrap Carousel Item 3
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Masonry Wrapper
Ein flexibles Rastersystem, das Inhalte in einem ansprechenden und anpassbaren Layout anzeigt, ähnlich einer Steinmauer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Image Gallery
Präsentieren Sie eine Sammlung von Bildern in einer organisierten und interaktiven Galerie.
Background Wrapper
Verleihen Sie Ihren Abschnitten Charakter. Mit individuellen Hintergründen können Sie den Kontext oder die Stimmung eines jeden Abschnitts Ihrer Website hervorheben.
Parallax Wrapper
Schaffen Sie Tiefe und Bewegung auf Ihrer Seite. Beim Scrollen bewegen sich Vorder- und Hintergrundbilder mit unterschiedlichen Geschwindigkeiten, was einen beeindruckenden Parallax-Effekt erzeugt.
T3S Bootstrap
Dank der integrierten Bootstrap-Bibliothek können Sie im Backend alle oben genannten Elemente individuell anpassen. Passen Sie Abstände (Margin und Padding), Animationsverzögerungen und -dauern an, fügen Sie zusätzliche Klassen hinzu, wählen Sie aus vorgefertigten Bildverhältnissen und Layouts und vieles mehr! Hier wird nur ein kleiner Teil der Möglichkeiten präsentiert, um die Seite übersichtlich zu halten. Mit TYPO3 und Bootstrap stehen Ihnen jedoch nahezu unbegrenzte Designoptionen zur Verfügung.