--- title: Widgets der toujou-Elementbibliothek url: "https://www.toujou.de/service/elementbibliothek/widgets/" description: "Alle Widgets im Überblick: Headercontent, diverse HTML-Elemente und Product Grids. Previews, Anleitungen und Verhaltensbeschreibung." date: 2018-08-28 modified: 2022-09-27 --- # Widgets der toujou-Elementbibliothek 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/) Die toujou-Elementbibliothek ---------------------------- Widgets ======= In toujou finden Sie vorkonfigurierte Widgets mit den notwendigen Freiheiten dort, wo Sie diese brauchen. Ihnen stehen komplexe Formulare, manuell oder automatisierte Produktpräsentationen sowie frei kombinierbare HTML-Elemente zur Verfügung. Das Element Insert Record dient dazu, Datensätze zu referenzieren und kann daher nicht mittels Vorschau dargestellt werden. Hier geht es direkt zum Tutorial für die Erstellung dieses Elements: [Insert Record ❯](https://www.toujou.de/service/elementbibliothek/widgets/insert-record/) [Cookie consent configuration](#c1009661) | [Chapter](#c1008117) | [Social Media Bar](#c1008974) | [Location Finder](#c1014590) | [Code Block](#c1014292) | [Counter](#c1017962) | [Timeline](#c1018228) | ![Vier quadratische Bilder zeigen stilisierte Berglandschaften mit Sonne, in einem modernen, minimalistischen Design.](https://www.toujou.de/_assets/processed/MOdyG7P5Hr0NjydDI4E6vTib6GZiDsXDXRbLZg0ixIc/q:85/w:400/h:160/fn:Y3NtX1dpZGdldF8yMDAwXzgwMF90cmFuc3BhcmVudF85NDcwNmQyYTk3:t/cb:eae52acf1a5c613749606c11312da739504bc567/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9XaWRnZXRfMjAwMF84MDBfdHJhbnNwYXJlbnQucG5n) ### Gebrauchsanweisung Auf dieser Seite finden Sie die in toujou verfügbaren Widgets. Um nicht mit echten Inhalten verwechselt zu werden, verwenden wir in der Bibliothek Blindtext. Zur detaillierten Nutzungsanleitung gelangen Sie über die rechts unter dem jeweiligen Element platzierten [Schaltflächen ❯](https://www.toujou.de/service/elementbibliothek/widgets/) --- Alle Widget-Elemente im Überblick ----------------------------------- ### Cookie consent configuration element #### Persönliche Einstellungen Anonymes Tracking erlauben (Session) Externe Videos erlauben (30 Tage) Externe Karten erlauben (30 Tage) Externe HTML-Inhalte erlauben (30 Tage) Bitte speichern Sie Ihre Datenschutzeinstellungen zunächst im Dialogfenster. [Cookie consent configuration element >](https://www.toujou.de/service/toujou-setup/datenschutz/consent-widget-einfuegen/#c1007943) --- ### Chapter #### Chapter mit veränderter Hintergrundfarbe und Schriftfarbe Dieses Beispiel zeigt, dass die Hintergrundfarbe des einzelnen Chapters in der Primärfarbe definiert ist und nicht – wie sonst für die Website von toujou üblich – in weiß. Als Schriftfarbe für den Text ist die Hintergrundfarbe gewählt, die mit weiß für die Website definiert ist. So ergibt sich für diesen Text eine weiße Schriftfarbe auf blauem Hintergrund. Die Headline bleibt davon unberührt. Natürlich lassen sich noch viele weitere Optionen nutzen. Wie sich dies ganz leicht und ohne Programmierkenntnisse umsetzen lässt, lesen Sie in den einzelnen Schritten der Anleitung. [Chapter ❯](https://www.toujou.de/service/elementbibliothek/widgets/chapter/) ### Social Media Bar ### Beispiel-Headline [ ](https://www.facebook.com/toujou.typo3/ "Besuchen Sie uns auf facebook") [ ](https://twitter.com/toujou_de "Besuchen Sie uns auf twitter") [ ](https://www.instagram.com/toujou.de/ "Besuchen Sie uns auf instagram") [ ](https://www.linkedin.com/company/12834142/admin/ "Besuchen Sie uns auf linkedin") [ ](https://www.pinterest.com "Besuchen Sie uns auf pinterest") [ ](https://www.youtube.com "Besuchen Sie uns auf youtube") [Social Media Bar >](https://www.toujou.de/service/elementbibliothek/widgets/social-media-bar/) --- ### Location finder Karte einblenden Karte ausblenden Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben [Location finder >](https://www.toujou.de/service/elementbibliothek/widgets/locationfinder/) --- ### Code Block ``` ``` const test = "This is a variable"; function add (a,b) { return a + b; } ``` ``` javascript [Code Block >](https://www.toujou.de/service/elementbibliothek/widgets/code-block/) --- ### Counter - 1 Beispielansicht ohne Präfix und Suffix, mit Primary Design - ~ 1 Beispielansicht mit Präfix, mit Inverted Design - ~ 1 kmBeispielansicht mit Präfix, Suffix und Secondary Design [Counter >](https://www.toujou.de/service/elementbibliothek/widgets/counter/) --- ### Timeline - [2018](#timeline-1018226-year-2018) - [2020](#timeline-1018226-year-2020) - [2022](#timeline-1018226-year-2022) - [2024](#timeline-1018226-year-2024) 2018 ---- ### Launch von toujou Im Jahr 2018 wurde der TYPO3 Website-Baukasten offiziell gelauncht. 2020 ---- ### Neue Features Nicht nur 2020, aber auch in diesem Jahr wurden neue Features für toujou freigeschaltet. Ein Beispiel: Das Event-Modul, mit dem sich Veranstaltungen anteasern lassen. [ Events in toujou ](https://www.toujou.de/tutorials/seiten-anlegen/events/) 2022 ---- ### Mehr Flexibilität In diesem Jahr sollte der Website-Baukasten seine Flexibilität vorführen, indem nicht nur die inkludierten Elemente und Features, sondern auch Systemintegrationen mit toujou ermöglicht wurden. [ Systemintegrationen ](https://www.toujou.de/features/extensions/) 2024 ---- ![Eine Zeitachse zeigt wichtige Ereignisse von 2018 bis 2024, einschließlich des Launchs von toujou und neuer Features.](https://www.toujou.de/_assets/processed/tpJLlGJyi8MqNTo3m4WDSwMUJkDEk_YKeRnw2pyMw1c/q:85/c:1432.5:955:fp:0.5:0.5/rt:force/w:308/h:205/fn:Y3NtX0JlaXNwaWVsLVRpbWVsaW5lLWF1Zi10b3Vqb3VfNTYwN2MxYzk1NQ:t/cb:fc3678082ab8fc485911ebcf6198ccbe8a2044a4/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9CZWlzcGllbC1UaW1lbGluZS1hdWYtdG91am91LnBuZw)### Release Timeline Element Im Jahr 2024 wurde Timeline als eines von 150+ toujou-Elementen für alle toujou-Kunden und -Anwenderinnen zugänglich. [Timeline >](https://www.toujou.de/service/elementbibliothek/widgets/timeline/) ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)