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.
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."
CSS-Bibliothek & Standard Bootstrap-Klassen
Unser Paket stellt Ihnen eine umfassende CSS-Bibliothek zur Verfügung, angereichert mit einer Vielzahl an Design-Möglichkeiten. Dies reicht von diversen Farb- und Schriftartenoptionen bis hin zu besonderen Design-Elementen wie einzigartigen Figuren und individuellen Rändern.
Zudem setzen wir auf die bewährten Bootstrap-Klassen. Bootstrap zählt zu den renommiertesten und weitverbreitetsten Frameworks in der Webentwicklung. Es offeriert eine Fülle an vordefinierten CSS-Klassen, die sowohl das Design als auch die Responsivität einer Webseite erheblich optimieren. Sei es Grid-Systeme, Buttons oder Modals – mit Bootstrap lassen sich effizient und qualitativ hochwertige Webseiten gestalten. Für eine detaillierte Übersicht aller verfügbaren Klassen empfehlen wir einen Blick in die offizielle Bootstrap-Dokumentation.
Farben & Schriftarten
Wählen Sie aus einer breiten Palette von vordefinierten Farbschemata oder erstellen Sie Ihr eigenes. Kombinieren Sie dies mit einer Vielzahl von Schriftarten, um Ihrer Website eine einzigartige Persönlichkeit zu verleihen.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Dark
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Spezielle Design-Elemente
Erwecken Sie Ihre Inhalte mit speziellen Design-Elementen zum Leben. Egal ob Hover-Animationen, Parallax-Hintergründe oder andere interaktive Elemente – mit TYPO3 ist es einfach, Ihre Website hervorzuheben.
Sticky Elements
Halten Sie wichtige Elemente immer im Blickfeld. Diese Elemente "kleben" beim Scrollen am Bildschirmrand und bleiben so stets sichtbar.
Ich bin Sticky innerhalb dieser Container
"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.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."
Image Hover Animation
Verleihen Sie Ihren Bildern Dynamik. Bei Berührung oder Überfahren mit der Maus werden subtile Animationen ausgelöst, die die Aufmerksamkeit Ihrer Besucher fesseln. z.B:



Image Link Hover Effects
Machen Sie Ihre verlinkten Bilder interaktiver. Bei Berührung oder Überfahren mit der Maus ändert sich das Erscheinungsbild, signalisiert Interaktivität und lädt zum Klicken ein. z.B.:
Reordering
Optimieren Sie die Reihenfolge Ihrer Inhalte für verschiedene Bildschirmgrößen. Mit den Bootstrap-Ordering-Klassen können Sie die Position von Elementen innerhalb eines Containers flexibel anpassen. Dies ist besonders nützlich für responsive Designs, bei denen die Anordnung der Elemente auf mobilen Geräten anders sein kann als auf dem Desktop. Durch einfaches Hinzufügen von Klassen wie "order-1" oder "order-md-2" können Sie bestimmen, in welcher Reihenfolge die Elemente angezeigt werden sollen. z.B.:
order-3 order-lg-1

order-1 order-lg-2

order-3 immer

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.
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."
CSS-Bibliothek & Standard Bootstrap-Klassen
Unser Paket stellt Ihnen eine umfassende CSS-Bibliothek zur Verfügung, angereichert mit einer Vielzahl an Design-Möglichkeiten. Dies reicht von diversen Farb- und Schriftartenoptionen bis hin zu besonderen Design-Elementen wie einzigartigen Figuren und individuellen Rändern.
Zudem setzen wir auf die bewährten Bootstrap-Klassen. Bootstrap zählt zu den renommiertesten und weitverbreitetsten Frameworks in der Webentwicklung. Es offeriert eine Fülle an vordefinierten CSS-Klassen, die sowohl das Design als auch die Responsivität einer Webseite erheblich optimieren. Sei es Grid-Systeme, Buttons oder Modals – mit Bootstrap lassen sich effizient und qualitativ hochwertige Webseiten gestalten. Für eine detaillierte Übersicht aller verfügbaren Klassen empfehlen wir einen Blick in die offizielle Bootstrap-Dokumentation.
Farben & Schriftarten
Wählen Sie aus einer breiten Palette von vordefinierten Farbschemata oder erstellen Sie Ihr eigenes. Kombinieren Sie dies mit einer Vielzahl von Schriftarten, um Ihrer Website eine einzigartige Persönlichkeit zu verleihen.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Dark
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Morbi äccumsän Äliquam lorem pörttitor, fames Fäcilisis molestie adipiscing phäretra, lacus Purus eleifend Tellus diam Neque Lobörtis justo enim.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Spezielle Design-Elemente
Erwecken Sie Ihre Inhalte mit speziellen Design-Elementen zum Leben. Egal ob Hover-Animationen, Parallax-Hintergründe oder andere interaktive Elemente – mit TYPO3 ist es einfach, Ihre Website hervorzuheben.
Sticky Elements
Halten Sie wichtige Elemente immer im Blickfeld. Diese Elemente "kleben" beim Scrollen am Bildschirmrand und bleiben so stets sichtbar.
Ich bin Sticky innerhalb dieser Container
"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.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."
Image Hover Animation
Verleihen Sie Ihren Bildern Dynamik. Bei Berührung oder Überfahren mit der Maus werden subtile Animationen ausgelöst, die die Aufmerksamkeit Ihrer Besucher fesseln. z.B:



Image Link Hover Effects
Machen Sie Ihre verlinkten Bilder interaktiver. Bei Berührung oder Überfahren mit der Maus ändert sich das Erscheinungsbild, signalisiert Interaktivität und lädt zum Klicken ein. z.B.:
Reordering
Optimieren Sie die Reihenfolge Ihrer Inhalte für verschiedene Bildschirmgrößen. Mit den Bootstrap-Ordering-Klassen können Sie die Position von Elementen innerhalb eines Containers flexibel anpassen. Dies ist besonders nützlich für responsive Designs, bei denen die Anordnung der Elemente auf mobilen Geräten anders sein kann als auf dem Desktop. Durch einfaches Hinzufügen von Klassen wie "order-1" oder "order-md-2" können Sie bestimmen, in welcher Reihenfolge die Elemente angezeigt werden sollen. z.B.:
order-3 order-lg-1

order-1 order-lg-2

order-3 immer

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.
Swiper Container
Ein moderner Touch-Slider, ideal für mobile Ansichten, der eine reibungslose und ansprechende Benutzererfahrung bietet."
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.







