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

Das ist Spalte 1

Das ist Spalte 2

3 Columns

Das ist Spalte 1

Das ist Spalte 2

Das ist Spalte 3

4 Columns

Das ist Spalte 1 

Das ist Spalte 2

Das ist Spalte 3

Das ist Spalte 4

6 Columns

Das ist Spalte 1 

Das ist Spalte 2

Das ist Spalte 3

Das ist Spalte 4

Das ist Spalte 5

Das ist Spalte 6

Row Columns

Organisieren Sie Ihre Inhalte in vertikalen Reihen, um eine klare und konsistente Struktur zu schaffen.

Beliebige Spalte 

Beliebige Spalte 

Beliebige Spalte 

Beliebige Spalte 

Beliebige Spalte 

Beliebige Spalte 

Auto Layout

Lassen Sie TYPO3 die beste Layoutstruktur basierend auf Ihrem Inhalt automatisch bestimmen, um eine optimale Darstellung zu erreichen.

col-2

Col-3

Col-4

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.

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.

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.

"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.

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.

"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.

Card Header

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.

Card Header

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.

Card Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. 

Card Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 

Card Header

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.

"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."

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.