--- title: Widgets of the toujou element library url: "https://www.toujou.com/service/element-library/widgets/" description: "All widgets: header content, various HTML elements and product grids. Previews, instructions and behavioral description." date: 2019-01-10 modified: 2022-09-27 --- # Widgets of the toujou element library 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Widgets](https://www.toujou.de/service/element-library/widgets/) The toujou element library -------------------------- Widgets ======= With toujou you will find preconfigured widgets with the necessary freedom where you need it. You have access to complex forms, manual or automated product presentations, and freely combinable HTML elements. [Insert Record](https://www.toujou.de/service/element-library/widgets/insert-record/) | [Chapter](#c1002702) | [Social Media](#c1009655) | [Location finder](#c1014616) | [Code block](#c1014300) ![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) ### Manual On this page you will find all the widget elements available in toujou. We’ve used dummy text in the library to prevent confusion. For detailed instructions, click on the buttons located below every sample element to get to the element description. [I am the button ❯](https://www.toujou.de/service/element-library/widgets/) --- toujou widget elements ------------------------ ### Chapter #### Chapter with changed background color and font color This example shows that the background color of the individual chapter is defined in the primary color and not—as is otherwise usual for the toujou website—in white. The font color for the text is the background color defined for the website, which is white. This results in white text on a blue background for this text. The headline remains unaffected. Of course, there are many other options available. You can read how to implement this easily and without any programming knowledge in the individual steps of the instructions. --- ### Social Media Bar ### Sample view [ ](https://www.facebook.com/toujou.typo3/ "Visit us on facebook") [ ](https://twitter.com/toujou_com "Visit us on twitter") [ ](https://www.instagram.com/toujou.de/ "Visit us on instagram") [ ](https://www.xing.com/companies/dfaugmbh "Visit us on xing") [ ](https://www.linkedin.com/company/12834142/admin/ "Visit us on linkedin") [ ](https://www.pinterest.com "Visit us on pinterest") [ ](https://www.youtube.com "Visit us on youtube") [Social Media Bar >](https://www.toujou.de/service/element-library/widgets/social-media-bar/#c1009264) --- ### Location finder Show map Hide map To display third-party HTML content, we need your consent. For more information, please see our [ privacy policy. ](https://www.toujou.de/privacy-statement/) Allow once Always allow [Location finder >](https://www.toujou.de/service/element-library/widgets/location-finder/) --- ### Code Block ``` ``` const test = "This is a variable"; function add (a,b) { return a + b; } ``` ``` javascript [Code Block >](https://www.toujou.de/service/element-library/widgets/code-block/) ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)