--- title: kojo Theme 向上 – Design template for your toujou website url: "https://www.toujou.com/features/toujou-themes/kojo/" description: "kojo is a toujou theme based on TYPO3 and comes along with the latest accessibility and usabilty state of the art. │All features│Sample views │All information!" image: "https://www.toujou.de/_assets/processed/rSGoi5y0JsUwH50m08l75DihWGw0MemiaHNR-qOz2UI/q:85/w:1366/h:768/fn:Y3NtX3Jlc3NvdXJjZXMtbWVldC1rb2pvXzlhYjBjMWRkMDk:t/cb:4fc1e0495d5eda9aa014003f7fec4175f3056706/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9yZXNzb3VyY2VzLW1lZXQta29qby5wbmc" date: 2025-11-07 modified: 2025-11-07 --- # kojo Theme 向上 – Design template for your toujou website 1. [Home](https://www.toujou.de/) 2. [Features](https://www.toujou.de/features/) 3. [Themes](https://www.toujou.de/features/toujou-themes/) 4. [kojo](https://www.toujou.de/features/toujou-themes/kojo/) ### **向上** kojo ==== ***kojo*** is the fifth theme in the toujou series. Its name is best understood through **improvement**, reflecting its focus on progress and refinement. In particular, **kojo** represents the continued development of toujou themes with a strong emphasis on technical accessibility. It delivers state-of-the-art web design and enhanced performance for your website. At the same time, its clean layout and generous use of whitespace also contribute to visual accessibility. Additional editorial flexibility rounds out the many benefits that **kojo** brings to the table. On this page [test kojo](https://www.toujou.de/pricing/free-demo/#c1006221) Theme features -------------- Design and manage a [TYPO3](https://www.toujou.com/features/open-source-with-typo3/) website quickly and easily — with strong editorial and technical support for accessibility: that’s what *kojo* stands for. Like its predecessor themes, *kojo* lets you create a professional website without any programming skills. In addition to following established web design standards, this website theme offers several key advantages: - **Logo and navigation bar**: The two elements form the exposed top bar, which forms a visual dividing line to the content. The header content is integrated into this. If the display of contact data is stored in the theme settings, these are displayed above the menu tabs (in the desktop). - **Tabs**: The menu tabs of the navigation bar are arranged at the top right of the screen (for desktop). The elements of the first level of the navigation bar are displayed. The second and third levels are visible by clicking on the drop-down icon next to the tab name. In the mobile view, the tabs appear in the burger menu. - **Flexible body mask for media and text elements**: Take advantage of the media elements and let them speak for themself with entire width of the screen display. - **Technical basis**: Not visible in the frontend, yet just as important: kojo emphasizes a strict separation of HTML and CSS, supports keyboard navigation as well as scalable font sizes for the website and offers ongoing compatibility with common browsers. Caching, lazy loading and imgproxy, together with other common usability rules for mobile first, round off the technical basics. - **Element design customizations**: For some elements (teasers, cards, blockquotes, social media bar, and more), you control the display of the background and font color using the element design itself by selecting preconfigured options. You define the settings in the element design, which can be found in the respective element under the content tab. ### Website templates built with kojo [ ![Ein freundlicher Arzt mit Stethoskop lächelt, während er einen Laptop in einer modernen Praxis hält.](https://www.toujou.de/_assets/processed/iCUbnnXXIoF4axWsDehwOdV-swEil6-EVJYHSAWIe9o/q:85/c:766:430.87499999999:fp:0.4993481095176:0.28096479791395/rt:force/w:432/h:243/fn:Y3NtXzEwMjR4MTAyNC1tZWRpY2FsMl9kNzFhNWFhYmU1:t/cb:07da91596ddb3e4fb0072c7fd2a2c104aec02621/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNC1tZWRpY2FsMi5wbmc) ](https://medical.toujou.net/) [Medical Template](https://medical.toujou.net/) [ ![Eine Luftaufnahme von Jubelstadt zeigt eine ruhige Wohngegend mit modernen Häusern und sanften Hügeln im Hintergrund.](https://www.toujou.de/_assets/processed/PNeK76vLwvreIVbvfC9nsXY6mttA9RCrf3Mt6sKchhE/q:85/c:1539.351:867.08167770419:fp:0.5045:0.49889624724062/rt:force/w:432/h:243/fn:Y3NtX0NhbXBhaWduXzhjZmEwNjQwOWU:t/cb:2fa9e43f03844d05e347a922d2920ec8e7255ad9/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvQ2FtcGFpZ24ucG5n) ](https://campaign.toujou.net/) [Campaign Template](https://campaign.toujou.net/) [ ![Ein eleganter Mann in einem Anzug hält eine Hand mit einer Uhr, während er auf einen Laptop schaut, umgeben von Büroumgebung.](https://www.toujou.de/_assets/processed/3N7htQkI6wiwHcZXpj3i3ef-yEW6ALt4_cvZe81ijr8/q:85/c:1539.351:867.08167770419:fp:0.4975:0.49889624724062/rt:force/w:432/h:243/fn:Y3NtX0xhd18yYTk4NDk5MzRm:t/cb:280fc3cd42e61f0c9cc9b4a21cc9a3adb82403fb/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvTGF3LnBuZw) ](https://law.toujou.net/) [Law Template](https://law.toujou.net/) [ ![Eine Person entspannt im Wasser und hält ein Getränk in der Hand, während die Sonne auf die Wasseroberfläche scheint.](https://www.toujou.de/_assets/processed/IxDpgv_dieSp3LcZAX1bniWf75i59LlOhSUtyK-_tRU/q:85/c:1539.351:867.08167770419:fp:0.4985:0.49889624724062/rt:force/w:432/h:243/fn:Y3NtX0xlaXN1cmVfOTVhNWJmNDRmZQ:t/cb:0a9975de58cb31dcf5317d66484e6c17c5c9eb46/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvTGVpc3VyZS5wbmc) ](https://leisure.toujou.net/) [Leisure Template](https://leisure.toujou.net/) [ ![Eine moderne Eventlocation mit vielen Gästen, die an Tischen stehen und sich unterhalten, umgeben von stilvollem Design.](https://www.toujou.de/_assets/processed/-j5ngEB8UYqReel-DbgsuFwNmBqsBD_ul3o9RCplRZs/q:85/c:941.16977777779:529.408:fp:0.498:0.2995/rt:force/w:432/h:243/fn:Y3NtXzEwMjR4MTAyNF9sb2NhdGlvbl9zcXVhcmVfXzg2NTUxZjYyYjg:t/cb:691fb29eef486533ae7421ad449d7090ae1eda81/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9sb2NhdGlvbl9zcXVhcmVfLnBuZw) ](https://location.toujou.net/) [Location Template](https://location.toujou.net/) [ ![Eine friedliche Szene zeigt eine Frau, die am Ufer sitzt und die Natur um sich herum wahrnimmt, während sie inneren Frieden sucht.](https://www.toujou.de/_assets/processed/HJa8XJUiSRYIyx6G_4yUd4SW6fJiuN1G7YYZ5KhZO8s/q:85/c:766:430.87499999999:fp:0.4993481095176:0.31877444589309/rt:force/w:432/h:243/fn:Y3NtXzEwMjR4MTAyNC13ZWxsbmVzc19zcGFfZWE1YzlmNDU0NA:t/cb:7a05d1b8e947ef6474e8077ce074ae4b818c5c5f/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNC13ZWxsbmVzc19zcGEucG5n) ](https://wellness.toujou.net/) [Wellness Template](https://wellness.toujou.net/) [All website templates](https://www.toujou.de/templates/) Who will kojo best work for? ---------------------------- Visually and structurally, *kojo* is similar to the [*toujou*](https://www.toujou.de/features/toujou-themes/toujou/) theme, which also serves as its foundation for further development. Unlike toujou, however, the navigation bar in *kojo* is no longer integrated into the header image — it’s clearly separated, improving both clarity and **accessibility**. The default text spacing also ensures a clean, uncluttered look (especially on desktop), giving the site plenty of breathing room. **Custom settings for individual sections** — via the Chapter feature — or even within single elements using the Element Design options are available in *kojo* as well. These can be adjusted without any coding knowledge, making them accessible to all editors. That makes *kojo* the ideal **starting point** for creating an **accessible corporate website**, regardless of industry or company size. You can build as many pages as needed and take advantage of the wide range of toujou [features](https://www.toujou.de/features/). The tab structure remains clear and manageable — even in the backend. *kojo* is suitable for both (TYPO3) **agencies** and **businesses** of all sizes — whether SMEs, sole proprietors, or freelancers — who want a website that’s not only accessibility-ready but also offers editorial flexibility in a CMS environment. Please note that [meet-kojo](https://meet-kojo.toujou.net/en/) is simply a demo site and can be fully customized to match your own design preferences. We're happy to assist with advice and support. Individual elements can also be arranged according to your specific needs. Try it out for yourself with the free [demo](https://www.toujou.de/pricing/free-demo/) and see how kojo works for you. Explore our wide selection of [website templates](https://www.toujou.de/templates/) — many of which are built on the kojo theme, and some on others. ### Websites built with kojo [ ![Website von Peine Stadtmarketing in verschiedenen Endgerätansichten](https://www.toujou.de/_assets/processed/Tl7pncd8BTgSjEe87gSr7R688d4E6cZgL07nwbxQPdk/q:85/c:1810:1018.125:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzEzNjd4Nzc0X3BlaW5lLW1hcmtldGluZ19jYzg0M2ViNjRm:t/cb:eaae45020278967dd9bce984237418ea09aba251/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMzY3eDc3NF9SZWZlcmVuemVuX3doaXRlL0t1bmRlbi8xMzY3eDc3NF9wZWluZS1tYXJrZXRpbmcucG5n) ](https://www.peine-erleben.de/) [Peine Marketing](https://www.peine-erleben.de/) [ ![Website der Medicon Apotheken in verschiedenen Endgerätansichten](https://www.toujou.de/_assets/processed/-xKMCQkTKTZoHCSDDkdLnMw5nv0trsqwn9LI2ZhoCMw/q:85/c:1810:1018.125:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzEzNjd4Nzc0LW1lZGljb24tYXBvdGhla2VfNjYxZmI3M2FkNw:t/cb:2bb65f4d5ce9419d7f8d63a8b7b54bdbe51749cf/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMzY3eDc3NF9SZWZlcmVuemVuX3doaXRlL0t1bmRlbi8xMzY3eDc3NC1tZWRpY29uLWFwb3RoZWtlLnBuZw) ](https://medicon-apotheke.de/) [Medicon Apotheke](https://www.medicon-apotheke.de/) [ ![Website Protectum Solutions in verschiedenen Endgerätansichten](https://www.toujou.de/_assets/processed/bhyxk8Rd2evj9920IpKy28hsztaP1gQa95jFPbS8rDI/q:85/c:1810:1018.125:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzEzNjd4Nzc0X3Byb3RlY3R1bV80YjZiMTdlODY4:t/cb:778ab60ea6093d42a4e24500275bed77bfc3bb6d/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMzY3eDc3NF9SZWZlcmVuemVuX3doaXRlL0t1bmRlbi8xMzY3eDc3NF9wcm90ZWN0dW0ucG5n) ](https://www.protectum.solutions/) [Protectum Solutions](https://www.protectum.solutions/) [More website projects with toujou case studies](https://www.toujou.de/why-toujou/our-customers/) Theme switch? This feature is only available in toujou! -------------------------------------------------------- By choosing *kojo* as your new theme you have decided to transform the look and feel of your website. But this doesn't mean that you can't change this design later. In toujou you can try out our [other themes](https://www.toujou.com/features/toujou-themes/) with just one click in the theme module of your backend. Before activating your website\* you have the option to be flexible in the design and can test your content in many different display formats. \*Of course, we do not recommend this while your website is already online. When changing themes or when relaunching an existing toujou website, please [contact us](https://www.toujou.com/service/support/) to ensure a smooth transition. [ ![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 Offset topbar, fixed body frame for content elements. [ ![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 Exposed topbar and also three levels of navigation. [ ![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 More visual content with images and videos. The bold one. [ ![Ein bunter Marktstand voller frischer Obst- und Gemüsesorten, der eine Vielzahl an Farben und Texturen präsentiert.](https://www.toujou.de/_assets/processed/L3QqCChP_ISnO7-SKvqROUKuol6yToV0yJbH-AScL1A/q:85/c:1044.954:1046:fp:0.4995:0.5/rt:force/w:432/h:432/fn:Y3NtXzEwNDZ4MTA0Nl9DYXJkX3RvdWpvdV9sb2NhbGJ1c2luZXNzXzBkYzAxZTExYTQ:t/cb:211965af4513bb0f70942a212cbcecd16d2654e4/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMDQ2eDEwNDZfQ2FyZF90b3Vqb3VfbG9jYWxidXNpbmVzcy5wbmc) ](https://www.toujou.de/features/toujou-themes/toujou/) ### toujou theme Logo and navigation bar integrated into the header medium. ### More 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 Several websites, one backend. [More about 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/yoast-seo/) #### Yoast SEO Stand out in a crowd. [More about SEO](https://www.toujou.nz/features/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.nz/features/multilanguage/) #### Multilingual For your international customers. [More about multilingual ](https://www.toujou.nz/features/multilanguage/) [ ![Darstellung der Website von Rolemodelaward auf verschiedenen Endgeräten](https://www.toujou.de/_assets/processed/REccZYRs0y8d8NTPzLRvvChpFDifLeU_WrF0x_srBfA/q:85/c:1367:768.93749999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzEzNjd4Nzc0X3Jlc3BvbnNpdmVfUm9sZW1vZGVsYXdhcmRfYTczM2VhYWU4MQ:t/cb:4087eef128cbf05dc20b7647eb18a5185c2804c7/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUmVmZXJlbnplbi8xMzY3eDc3NF9SZWZlcmVuemVuX3doaXRlL0t1bmRlbi8xMzY3eDc3NF9yZXNwb25zaXZlX1JvbGVtb2RlbGF3YXJkLnBuZw) ](https://www.toujou.nz/features/responsive-mobile-first/) #### Responsive desgin Formatted for all devices. [The present is mobile](https://www.toujou.nz/features/responsive-mobile-first/)