--- title: toujou Theme 登場 – Designvorlage für Ihre professionelle Website url: "https://www.toujou.de/features/toujou-themes/toujou/" description: "Das toujou Theme basiert auf TYPO3 und ist mit den wichtigsten Usability-Regeln versehen │Alle Merkmale │Beispiele │Jetzt informieren!" date: 2020-08-24 modified: 2022-09-27 --- # toujou Theme 登場 – Designvorlage für Ihre professionelle Website 1. [Home](https://www.toujou.de/) 2. [Features](https://www.toujou.de/features/) 3. [toujou Themes](https://www.toujou.de/features/toujou-themes/) 4. [toujou](https://www.toujou.de/features/toujou-themes/toujou/) ### 登場 toujou-Theme ============= ***toujou*** war das erste Website-Theme und gleichzeitig Namensgeber des toujou-Services. Entlehnt ist der Begriff aus der japanischen Sprache, in der er für *entry (on stage); appearance (on screen)* und *entrance; introduction (into a market)* steht. Das Theme glänzt mit Header-Elementen auf voller Breite und integrierter Navigation. Sie mögen es lieber bewegt? Das *toujou*-Theme erlaubt, wie alle unsere Themes, natürlich auch Videos im Header-Element. PS: Sie kennen dieses Theme schon ein bisschen, denn toujou.de baut auf dem *toujou*-Theme auf. Auf dieser Seite [toujou testen](https://www.toujou.de/typo3-demo/#c1006221) Merkmale des Themes ------------------- All unsere Themes basieren auf [TYPO3](https://www.toujou.de/features/opensource-mit-typo3/), gewürzt mit unserer langjährigen Erfahrung als Webentwickler. Daher wird das *toujou*-Theme den Ansprüchen des State-of-the-Art-Webdesigns gerecht – ohne kompliziertes Überfrachten von Elementen. Insbesondere besticht dieses Theme mit: [ ![Ein moderner Computerbildschirm zeigt eine Benutzeroberfläche mit verschiedenen Navigationsbereichen und einem Header-Bild.](https://www.toujou.de/_assets/processed/KzoeNJGWk_je65hsYfuk2Y8E_eqcLPBCK6i0f8Xl_oE/q:85/w:433/h:244/fn:Y3NtX3RvdWpvdV9TY2hlbWFfREVfM2FhN2QxYTJlZQ:t/cb:0064de6bae96079e71fc332b3d1bd11f15d8be28/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC90b3Vqb3VfU2NoZW1hX0RFLnBuZw) ](https://www.toujou.de/fileadmin/user_upload/toujou_Schema_DE.png) - **Logo und Navigationsleiste**: Beide Elemente sind *im* Headermedium integriert und geben schon auf Ihrer Startseite ein Statement zu Ihrer Bildsprache ab. - **Reiter**: Die Reiter der Navigationsleiste sind am oberen rechten Bildschirmrand angeordnet. Es werden nur die Elemente der ersten Ebene der Navigationsleiste angezeigt. Eine zweite und gegebenenfalls dritte Ebene werden bei entsprechenden Hoverbewegungen auf die oberste Ebene sichtbar. - **Topbar**: Scrollen Ihre Besucher:innen die Seite, wandern Logo und Navigationsleiste abgesetzt an den oberen Bildschirmrand und bleiben dadurch stets im Blickfeld für ein schnelles Navigieren zu Startseite oder Ihren Menüpunkten. - **Flexible Body-Maske** für Medien- und Textelemente: Variieren Sie für eine optische Trennung (auf dem Desktop) der Seite mit geschicktem Elementeinsatz zwischen verschiedenen Body-Laufweiten. Nutzen Sie abwechselnd die nahezu volle Bildschirmbreite (je Auflösung und Endgerät) oder lassen Sie an den seitlichen Rändern mehr Freiraum für den Hintergrund. - **Mobile first**: Selbstverständlich erfüllen all unsere Themes die gängigen Usability-Regeln, vor allem, wenn es um [responsives Verhalten](https://www.toujou.de/features/responsive-design/) geht. ### Website-Vorlagen mit toujou - [ ![Ein bunter Vogel mit leuchtend grünen, blauen und lila Federn sitzt auf einem Ast und blickt aufmerksam in die Umgebung.](https://www.toujou.de/_assets/processed/TWXJoAZVa2YUofRBcP11Vbbk9LVpPyFUbeqMFplJteE/q:85/c:497:801.61290322581:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfVG91cmlzbV80ODk3YjE0ZDc2:t/cb:f942d5e3fd3e8eb2d89a389c43b7338c230c9f54/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9Ub3VyaXNtLnBuZw)### Tourism ](https://tourism.toujou.net/) - [ ![Bunte Buntstifte in einem kreativen Rahmen umgeben den Willkommensbereich der Nesthüter-Website für Kinder und Eltern.](https://www.toujou.de/_assets/processed/ZkGpN9EX-mO1IcNVkQHu0fiJT4HZdN5t2PLQRVZ3Ips/q:85/c:496:800:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfQ2hpbGRjYXJlXzQ2M2NjMmZhNTk:t/cb:de36d883752de32e933a59439c10f97920a9b150/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9DaGlsZGNhcmUucG5n)### KiTas ](https://childcare.toujou.net/) - [ ![Ein muskulöser Rücken eines Sportlers, der für Fitness und Stärke steht, umgeben von motivierenden Slogans.](https://www.toujou.de/_assets/processed/hE3KYDRlfz2TsdSX-ofRfRy3uz-l9c_HbZOFCIR-U5Y/q:85/c:495:798.38709677419:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfU3BvcnRzXzZkODMwYmZhMTE:t/cb:d4b0142443cbc7de3c32246a07d9bcd0b08478c1/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9TcG9ydHMucG5n)### Sport ](https://sports.toujou.net/) - [ ![Die Szene zeigt zwei stilvolle Frauen, die modische Accessoires präsentieren, umgeben von zarten rosa Blüten.](https://www.toujou.de/_assets/processed/Ju1N4rdJvXNEctCFcqzg9wteSIs7myckszsFmpv-Y2Q/q:85/c:496:800:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfUmV0YWlsXzdhYTczOWEyNWE:t/cb:70c76d3e32530871f4a9e5931539e5afe6affa08/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9SZXRhaWwucG5n)### Handel ](https://localbusiness.toujou.net/) - [ ![Ein modernes Hotelzimmer mit einem großen, einladenden Bett und einer stilvollen Kopfteilwand aus Holz.](https://www.toujou.de/_assets/processed/shRLSj0OJvwaWb8JJUj8TM-12GkVMkm6d_7A6S_R6YU/q:85/c:496:800:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfSG90ZWxfNzFmMmU4NDhhMQ:t/cb:c7a29778ba30abd62f67b6d57b31e8abbe22763d/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9Ib3RlbC5wbmc)### Hotel ](https://hotel.toujou.net/) [Alle Website-Templates von *toujou*](https://www.toujou.de/templates/) Für wen ist das *toujou*-Theme geeignet? ---------------------------------------- *toujou* ist nicht auf einzelne Branchen beschränkt, im Gegenteil: Entscheidend ist vielmehr, welches Design und welche Navigationsansicht Sie bevorzugen. Wer die **Navigationsleiste** gerne **im Headerbild integriert** haben möchte und der Bildsprache im Kopfbereich jeder Unterseite viel Raum verschaffen möchte, macht mit diesem Theme nichts falsch. Zudem erscheint eine toujou-Website mit **voreingestellter Textlaufweite** und lässt damit (vor allem auf dem Desktop) ausreichend Freifläche. Die hier aufgeführten toujou-Websites sind Beispielansichten, die jederzeit Ihren Designvorstellungen entsprechend individuell angepasst werden können. Gerne stehen wir hierfür [beratend und helfend](https://www.toujou.de/service/support/) zur Seite. Sehen Sie sich auch weiter auf unserer Website um: toujou.de ist im *toujou*-Theme gestaltet. Oder testen Sie selbst mit der [kostenlosen Demo](https://www.toujou.de/typo3-demo/), was das Theme zu bieten hat. In den [Branchen-Templates](https://www.toujou.de/templates/) können Sie zudem durch eine breite Auswahl an Websites stöbern, die nicht nur mit dem *toujou*-Theme als Basis gestaltet wurden. ### Mit dem *toujou*-Theme umgesetzte Websites [ ![Website fuerst-gruppe.de in verschiedenen Erdgerätansichten dargestellt](https://www.toujou.de/_assets/processed/a2R2EgPVwgclD8UPpeNlaPMOXiim23qBi3adcek2LrI/q:85/c:1090.56:613.90887290168:fp:0.495:0.49880095923261/rt:force/w:432/h:243/fn:Y3NtX2Z1ZXJzdF9ncnVwcGVfaGVhZGVyX2ltYWdlX2JiMGQyY2ZlMWI:t/cb:cbc2dce597df43f772527a30414f8043db642420/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdXNlX2Nhc2VzL2Z1ZXJzdF9ncnVwcGVfaGVhZGVyX2ltYWdlLnBuZw) ](https://www.fuerst-gruppe.de/) [Fürst Gruppe](https://www.fuerst-gruppe.de/) [ ![Website nik-nbg.de auf verschiedenen Endgerätansichten dargestellt](https://www.toujou.de/_assets/processed/0tw4bWBDGpWwDX2svnQeHSHHNSOylZmd-IuBJSnnNgg/q:85/c:1367:768.93749999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzEzNjd4Nzc0LW5pay1uYmdfNTFmODRlM2I3ZQ:t/cb:c1405e31016210af7fb75bbfaffe65a1653a11b2/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMzY3eDc3NF9SZWZlcmVuemVuX3doaXRlL0t1bmRlbi8xMzY3eDc3NC1uaWstbmJnLnBuZw) ](https://www.nik-nbg.de/) [NIK Nürnberg](https://www.nik-nbg.de/) [ ![Website erschmatt.de auf verschiedenen Endgerätansichten dargestellt](https://www.toujou.de/_assets/processed/oBRrgoTI7zQLkq4dhtp5-VrXeqdTQxemKeLAXHZan3k/q:85/c:1367:768.93749999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzEzNjd4Nzc0X3Jlc3BvbnNpdmVfRXJzY2htYXR0XzJlYmFkNWIzZTA:t/cb:3a183f6d4288b7f527d66a2964ac31a47758b2d4/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMzY3eDc3NF9SZWZlcmVuemVuX3doaXRlL0t1bmRlbi8xMzY3eDc3NF9yZXNwb25zaXZlX0Vyc2NobWF0dC5wbmc) ](https://www.erschmatt.ch/) [Erlebniswelt Roggen Erschmatt](https://www.erschmatt.ch/) [Weitere aktuelle Website-Projekte und Case-Studys](https://www.toujou.de/warum-toujou/unsere-kunden/) Theme-Switch? Das gibts nur bei toujou! ---------------------------------------- Mit der Entscheidung für *toujou* als Theme haben Sie den Grundstein für das Erscheinungsbild Ihrer Website gelegt. Das bedeutet jedoch nicht, dass Sie dieses Design nicht nachträglich ändern können. Denn in toujou können Sie im Theme-Modul Ihres Backends unsere alternative Themes **mit nur einem Klick** »ausprobieren« ([mehr zum toujou-Setup](https://www.toujou.de/service/toujou-setup/)). Vor Freischaltung Ihrer Website\* bleiben Sie im Design damit flexibel und testen Ihren Content in unterschiedlichen Darstellungsformen. \*Zu dieser Maßnahme raten wir selbstverständlich nicht im Live-Betrieb. Bei Neuveröffentlichung von Themes oder dem Relaunch einer bestehenden toujou-Website [sprechen Sie uns](https://www.toujou.de/service/support/) an, um eine reibungslose Umsetzung zu gewährleisten. [ ![Eine stilvolle Wohnzimmereinrichtung mit einem grauen Sofa, bunten Kissen und einer modernen Wanddekoration.](https://www.toujou.de/_assets/processed/RFv2F2yPaioptjjRZDJ45visHulXvWQb4cMOQAyciKg/q:85/c:1046:1044.954:fp:0.5:0.4995/rt:force/w:432/h:432/fn:Y3NtXzEwNDZ4MTA0Nl9DYXJkX2hpc3N1X2Z1cm5pc2hpbmdfMWI1YmMzNGU2Yw:t/cb:00c839ebb3a693d1900c1d22c98a6a645a9b3ec2/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMDQ2eDEwNDZfQ2FyZF9oaXNzdV9mdXJuaXNoaW5nLnBuZw) ](https://www.toujou.de/features/toujou-themes/hissu/) ### hissu-Theme Abgesetzte Topbar, fixer Body-Rahmen für Content-Elemente. [ ![Eine moderne Architektur-Website zeigt eine beeindruckende Ansicht von Hochhäusern, die in den Himmel ragen.](https://www.toujou.de/_assets/processed/0lprzed_KlZCNTzsdTLqEmfevP_cexl_ejmboBa0hWQ/q:85/w:432/h:432/fn:Y3NtXzEwNDZ4MTA0Nl9DYXJkX3RhYmlfYXJjaGl0ZWN0XzQ0ZDBlMDRmZTc:t/cb:1932e6d24dbf60f87b8cdd82336f83755eda26c1/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMDQ2eDEwNDZfQ2FyZF90YWJpX2FyY2hpdGVjdC5wbmc) ](https://www.toujou.de/features/toujou-themes/tabi/) ### tabi-Theme Exponierte Topbar und drei Navigationsebenen. [ ![Der Schriftzug 'PROJEKTE' hebt sich vor einem bunten Hintergrund ab, während darunter verschiedene Bilder von Projekten angezeigt werden.](https://www.toujou.de/_assets/processed/nBMZuXP9Jox8oKelNBa_8TDnxYoW9pK3pk6CPAftP-0/q:85/w:432/h:432/fn:Y3NtXzEwNDZ4MTA0Nl9DYXJkX21lZGF0c3VfYWdlbmN5XzdkZDY3MDdjM2E:t/cb:c33ee169eb9089beb833c3dbc6aec4e6cf62bd30/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMDQ2eDEwNDZfQ2FyZF9tZWRhdHN1X2FnZW5jeS5wbmc) ](https://www.toujou.de/features/toujou-themes/medatsu/) ### medatsu-Theme Mehr Bilder, mehr Video, mehr visueller Content. [ ![Screenansicht eines Website-Templates mit grünen und blauen Farbtönen](https://www.toujou.de/_assets/processed/mFfrdqxMnws9uhB9FstUKsHPCnw1i6AStOCNIZRcLj0/q:85/c:1044.954:1046:fp:0.4995:0.5/rt:force/w:432/h:432/fn:Y3NtXzEwNDZ4MTA0Nl9DYXJkX2tvam9fbWVkaWNhbF80MmJkYWMzYjQ0:t/cb:f2ff5907960be5e8fa8f71d32fa84082e5154bb6/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMDQ2eDEwNDZfQ2FyZF9rb2pvX21lZGljYWwucG5n) ](https://www.toujou.de/features/toujou-themes/kojo/) ### kojo-Theme Exponierte Topbar, flexibler Body-Rahmen, weniger Barrieren Mehr toujou Features ---------------------- [ ![Zwei Computerbildschirme zeigen verschiedene Webseiten, darunter eine mit einem modernen Bürointerieur und eine mit einem Porträt.](https://www.toujou.de/_assets/processed/pM17PhNXbBDiGNBtQb2743SH875PMI5E7eRSpw2o4Zw/q:85/c:688:387:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzY4OHgzODdfTXVsdGlzaXRlX1RlYXNlcl8zNGUxYjRjMmMz:t/cb:fced3b3f2fdb651eee4bc53c18b41646ec4fa984/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvRmVhdHVyZXMvTXVsdGlzaXRlLzY4OHgzODdfTXVsdGlzaXRlX1RlYXNlci5wbmc) ](https://www.toujou.de/features/multisite/) #### Multisite Ein Backend, mehrere Websites. [Mehr zur Multisite](https://www.toujou.de/features/multisite/) [ ![Das Bild zeigt ein Dokument mit Linien und einem Logo, das das Yoast-Logo am unteren rechten Rand abgebildet hat](https://www.toujou.de/_assets/processed/t9jpBIT1E0wKRWe2eJ_shiISkTfr5TzP45jAiyZlmCs/q:85/c:688:387:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzY4OHgzODdfeW9hc3RfQkVfYjY4ZmMzYzc5Yw:t/cb:0163c4a10135be801163f961b4e84fcbb927baea/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC82ODh4Mzg3X3lvYXN0X0JFLnBuZw) ](https://www.toujou.de/features/suchmaschinenoptimierung-yoast-seo/) #### Yoast SEO Gefunden werden. [Mehr zu SEO](https://www.toujou.de/features/suchmaschinenoptimierung-yoast-seo/) [ ![Ein Laptop zeigt die Flaggen von Deutschland und Großbritannien, symbolisiert den Sprachwechsel zwischen Deutsch und Englisch.](https://www.toujou.de/_assets/processed/ET8lY15fM0kJ0bk8YzSX71lNYyf9sKZdyqUCeVPZ1j8/q:85/c:688:387:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX211bHRpbGFuZ3VhZ2Utd2Vic2l0ZS02ODh4Mzg3X2dyYXVlci1iaWxkc2NoaXJtXzRiYTI0NGY5YmM:t/cb:9fdc0d5ad2d61bba6d80fdc27e07677c4166bbd9/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvRmVhdHVyZXMvTWVocnNwcmFjaGlna2VpdC9tdWx0aWxhbmd1YWdlLXdlYnNpdGUtNjg4eDM4N19ncmF1ZXItYmlsZHNjaGlybS5wbmc) ](https://www.toujou.de/features/mehrsprachige-websites/) #### Multilingual Für das internationale Publikum. [Mehr zur Mehrsprachigkeit](https://www.toujou.de/features/mehrsprachige-websites/) [ ![Eine grafische Darstellung zeigt verschiedene Software-Logos, die miteinander verbunden sind, um Integration zu verdeutlichen.](https://www.toujou.de/_assets/processed/Ho-9OnD3-ipvuVRQ4OQb-ZdKWi8Ybrwke7N980dG2qo/q:85/c:1401.597:788.39831249999:fp:0.4995:0.49911190053286/rt:force/w:432/h:243/fn:Y3NtX1N5c3RlbWludGVncmF0aW9uZW5fMTZfOV85Njc4ZmZkYjk2:t/cb:8fc43b07a9a458d5f480ae5dbadb2043a3f088ea/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvRmVhdHVyZXMvU3lzdGVtaW50ZWdyYXRpb25lbi9TeXN0ZW1pbnRlZ3JhdGlvbmVuXzE2XzkucG5n) ](https://www.toujou.de/features/extensions/#c1016540) #### Systemintegrationen TYPO3-Extensions & mögliche Add-ons [Mehr zu Systemintegrationen](https://www.toujou.de/features/extensions/#c1016540)