--- title: "medatsu: Ein Website-Theme nicht nur für Agenturen" url: "https://www.toujou.de/blog/medatsu-ein-website-theme-fuer-agenturen/" description: "Mehr Medien-Content & weniger Text: Das ist medatsu! Das 4. toujou-Theme auf TYPO3-Basis nach toujou, hissu und tabi. Jetzt informieren!" image: "https://www.toujou.de/_assets/processed/V5FKh7ueuGcNFfNH86bLsjYYyrX8hLD4iDlr4XYAL8M/q:85/w:1366/h:738/fn:Y3NtX21lZGF0c3VfdGl0ZWxfaGVhZGVyXzc1MDNiMzBjNDM:t/cb:8c9f3d5b23ef15ea2ca07fc45b68f27f6cbfbd23/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL21lZGF0c3VfdGl0ZWxfaGVhZGVyLnBuZw" date: 2020-09-04 modified: 2024-02-08 categories: - Website Qualität - Unternehmen --- # medatsu: Ein Website-Theme nicht nur für Agenturen 1. [Home](https://www.toujou.de/) 2. [Blog](https://www.toujou.de/blog/) 3. [medatsu: Website-Theme nicht nur für Agenturen](https://www.toujou.de/blog/medatsu-ein-website-theme-fuer-agenturen/) Jérôme Grad 08.02.2024- Unternehmen - Website Qualität Lesezeit: **目立つ – medatsu** ================= Ein Website-Theme für mehr Bild, Emotionen & Individualität! ---------------------------------------------------------------- **Getreu dem Motto, Bilder sagen mehr als 1.000 Worte, rückt das Website-Theme** ***medatsu*** **Medieninhalte in den Fokus. Das Element Design für diverse toujou-Elemente ermöglicht einen individuellen und professionellen Onlineauftritt in wenigen Schritten – ganz ohne Programmierkenntnisse.** [Auf einer medatsu-Seite umschauen](http://meet-medatsu.toujou.com/) [*medatsu* kostenlos ausprobieren](https://www.toujou.de/typo3-demo/#c1006221) Auf dieser Seite medatsu: Blickfang für mehr individuellen Spielraum --------------------------------------------------- *medatsu* ist nach *toujou*, *hissu* und *tabi* das vierte [Website-Theme](https://www.toujou.de/features/toujou-themes/) in der toujou-Reihe. Die japanische Sprache diente auch dieses Mal zur Inspiration für den Namen. Am besten lässt sich *medatsu* über das Englische ***to stand out*** mit »herausstechen« oder »auffallen« ins Deutsche übersetzen. Und genau das tut *medatsu*: Das Theme ist ein Blickfang, Content lässt sich hierbei noch individueller ausspielen und Elemente nahtlos miteinander kombinieren. In [*medatsu*](https://www.toujou.de/features/toujou-themes/medatsu/) erhalten Sie einen größeren individuellen Spielraum: visuell, konzeptionell und redaktionell. - **Visuell**: Bilder sagen mehr als tausend Worte, heißt es so schön. *medatsu* legt den Fokus voll auf Bild- und Videocontent. Elemente nehmen im Vergleich zu den anderen toujou-Themes mehr Raum auf der Seite ein. - **Konzeptionell**: Mit dem Feature *Element Design* für die zahlreichen Content-Elemente lässt sich eine Website mit *medatsu* entlang Ihrer Bedürfnisse gestalten und leicht verwalten. - **Redaktionell**: Was Sie an konzeptioneller Vorarbeit geleistet haben, lässt sich im täglichen Arbeiten vollenden. Bedeutet: Mehr Optionen für Redakteure in der Art der Content-Produktion. - [ ![Eine Gruppe von vier Haustieren, darunter ein Hund, eine Katze und zwei Hunde, posiert fröhlich vor einem orangefarbenen Hintergrund.](https://www.toujou.de/_assets/processed/PP7un_-dtNa4o7eCvFId12h_9fhlHNh-gNvgYpREjzs/q:85/c:576:929.03225806452:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzEwMjR4MTAyNF9wZXRzX3NxdWFyZV82NjViMzdlNzA2:t/cb:ae551a13488f82909879902312d2e1dd920b72b5/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9wZXRzX3NxdWFyZS5wbmc)### Tierbedarf ](https://pets.toujou.net) - [ ![Eine künstlerische Collage von vier Porträts, die verschiedene Emotionen und Stile der zeitgenössischen Künstler zeigt.](https://www.toujou.de/_assets/processed/G1CukMHiA3HBPBCwoHB2eHIuML2H0XL-dr94AO_atug/q:85/c:495:798.38709677419:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfQXJ0X2E5MmRkMDYzYTA:t/cb:bd4de61f67652dfd4064d842361fc8779d690556/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9BcnQucG5n)### Galerien ](https://art.toujou.net) - [ ![Der Schriftzug 'PROJECT' leuchtet in kräftigen Farben vor einer strukturierten Wand, die eine kreative Atmosphäre schafft.](https://www.toujou.de/_assets/processed/4lnxKQXV7qIODe1VDBHqWlQTwozn95qL_Kg1OFJn690/q:85/c:494:796.77419354839:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfQWdlbmN5X2FlZDY2NzQxYWQ:t/cb:b2b65a7714876b9b73ceb22f2b4e5181085d3198/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9BZ2VuY3kucG5n)### Agenturen ](https://agency.toujou.net) - [ ![Die Webseite bietet Informationen über Klavierkurse für Anfänger und Fortgeschrittene in einem modernen Layout.](https://www.toujou.de/_assets/processed/V3daiXeb81vIVz5hGl2mLRE0PC_yJDL1vRHQLlXdrQc/q:85/c:496:800:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfT25saW5la3Vyc2VfNGM3MWVkMWM5NA:t/cb:eb113f8443e230b3171c1b3c73f05a57f2191e96/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9PbmxpbmVrdXJzZS5wbmc)### Online-Kurse ](https://onlinecourse.toujou.net/) - [ ![Ein blauer Tennisschläger liegt auf dem Platz, umgeben von zwei gelben Tennisbällen, die auf dem Boden liegen.](https://www.toujou.de/_assets/processed/Yx-CmI8l_B6eAGBRs6JmzoPJQYDdgIAn4FC0zyvQafM/q:85/c:495:798.38709677419:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzktMTZfU3BvcnR2ZXJlaW5fZDU4YzFmYmE0NQ:t/cb:44afa12884469a79a387588a9a53ae63c9d1362c/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvOS0xNi1Gb3JtYXQvOS0xNl9TcG9ydHZlcmVpbi5wbmc)### Vereine ](https://sportverein.toujou.net/) - [ ![Ein einladendes Café mit grünen Pflanzen, hellen Wänden und einem gemütlichen Ambiente für Kaffeeliebhaber.](https://www.toujou.de/_assets/processed/l4tMr6nx_0adXF00bOsC66MJKSfCajf4CqQrvHKt9lQ/q:85/c:576:929.03225806452:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzEwMjR4MTAyNF9jYWZlX3NxdWFyZV8wYWUxNjU4ZTQw:t/cb:009effe0263859b28f376bf35f41abc7a55eb657/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9jYWZlX3NxdWFyZS5wbmc)### Cafés ](https://cafe.toujou.net/) Highlights im Website*-*Theme ----------------------------- ### Teaser Um Medienelemente in den Vordergrund zu stellen, bieten sich die zahlreichen [Teaser](https://www.toujou.de/service/elementbibliothek/teaser-elements/) an. So ist beispielsweise der **Cinema-Teaser** nicht nur im Medium-Text-Verhältnis von 50:50, sondern auch im Verhältnis von **66:33 und 33:66 verfügbar**. Dabei ist sowohl das Medium links- oder rechtsbündig möglich. [ ![](https://www.toujou.de/_assets/processed/x482jpQcbZtlDWN9jDmyIrYh0wfw1-dRDSPg8n1gOmU/q:85/w:433/h:270/fn:Y3NtX0JpbGRzY2hpcm1mb3RvXzIwMjEtMDQtMTJfdW1fMDkuMDEuMjZfMmNmNTY4NTZjOQ:t/cb:ec010f927ac4a49d7c85357290c9cbcc0282d188/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL0JpbGRzY2hpcm1mb3RvXzIwMjEtMDQtMTJfdW1fMDkuMDEuMjYucG5n) Eine mögliche Anordnung im medatsu-Theme: Hier erscheinen ein Cinema-Teaser 33% right und ein Cinema-Teaser 33% left untereinander. Mit Klick auf das Bild gelangen Sie zur Theme-Präsentation. ](http://meet-medatsu.toujou.com) Ist der **Content** an einer Stelle doch etwas textlastiger, läuft das Medium mit dem Text weiter beim Scrollen. Auch im **Format** adaptiert sich das Medium **automatisch**. Wie Sie das Bild richtig auf Ihrer Website ausspielen, lesen Sie in unserem [Tutorial Bildbearbeitung für TYPO3](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/). Ein weiteres Medien-Element ist das **Hero Medium 3:1**, das sowohl als Headerbild als auch im Contentbereich in *medatsu* funktioniert. Es wird auf allen Endgeräten im festen Verhältnis von 3:1 wiedergegeben. Ist ein Link hinterlegt, dunkelt das Bild oder Video beim Mouseover automatisch ab. Wie sie es auf Ihrer Website einbinden, haben wir im [Tutorial](https://www.toujou.de/service/elementbibliothek/media-elements/hero-media-3-1/) erläutert. ### Individuelle Designauswahl für Elemente Sie möchten ein Element farblich von anderen Elementen abheben oder gar innerhalb eines Elements unterschiedliche Akzente setzen? Bearbeiten Sie **Hintergrundfarbe** und Hintergrund einer **Headline**. [ ![](https://www.toujou.de/_assets/processed/ryxaRFdH6Wz98R1Cv8vJpO9LXRiz0fK8TkT1RJkXPAc/q:85/w:433/h:181/fn:Y3NtX21lZGF0c3VfY2luZW1hX2NvbnRlbnRjYXJkc18wZThhOTlkYTNm:t/cb:88675ab14ccaec9ef83afc02e0f2947b8d2b31da/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL21lZGF0c3VfY2luZW1hX2NvbnRlbnRjYXJkcy5wbmc) Beispiel für eine Anordnung im medatsu-Theme: Drei Contentcards mit unterschiedlichen Hintergrundfarben im Textfeld sorgen für mehr Abwechslung. ](https://www.toujou.de/fileadmin/Bilder/Blog-Content/2020-09_Medatsu_Release/medatsu_cinema_contentcards.png) Nutzen Sie hierfür das Dropdown-Menü *Element Design*, das Ihnen in Elementen zur Verfügung steht. Zur Auswahl stehen hierbei vier Optionen: Standard, Primary, Secondary und umgekehrtes Design. Die ausgespielten Farben referenzieren dabei auf die unter den *toujou* *settings* [eingestellten Farben](https://www.toujou.de/service/toujou-setup/farben-festlegen/). ### Navigation via Burger-Menü Während die anderen Website-Themes [tabi,](https://www.toujou.de/features/toujou-themes/tabi/) [*hissu*](https://www.toujou.de/features/toujou-themes/hissu/) und [*toujou*](https://www.toujou.de/features/toujou-themes/toujou/) über eine integrierte Top-Bar verfügen, bietet *medatsu* im Bereich der **Navigation** ein **Burger-Menü** (Icon mit drei horizontalen Strichen). Darin erscheinen die jeweiligen Reiter auch im Desktop- bzw. Widescreenmodus erst durch Anklicken. So wird bereits im Kopfbereich mehr Platz für Bilder und Videos geschaffen. Zugleich lässt sich zur Orientierung auf einer Seite ein Seiten-Inhaltsverzeichnis via [**Inpage Navigation**](https://www.toujou.de/service/elementbibliothek/navigation-elements/inpage-navigation/) umsetzen. Der optionale Call-to-action Button bietet eine weitere Verlinkungsmöglichkeit. Auch möglich: Das Element [**Prev/Next Button**](https://www.toujou.de/service/elementbibliothek/navigation-elements/previous/next-page-navigation/) zeigt beim Mouseover direkt die in der Hierarchie-Ebene nächste Seite im Seitenbaum an und erleichtert so das Navigieren auf der Website zusätzlich. Abgerundet wird die Navigation im *medatsu* durch die Option von [**Navigation-Icons**](https://www.toujou.de/tutorials/seiteneigenschaften/navigationsicons/). Diese werden in der Topbar direkt neben dem Burger-Menü angezeigt und ermöglichen so eine direkte Verlinkung auf die gewünschten Seiten. [ ![](https://www.toujou.de/_assets/processed/1foNLFDItvpB2foMewtajBYqzpBmf0HWNpcnQIwMuoo/q:85/w:433/h:234/fn:Y3NtX21lZGF0c3VfdGl0ZWxfaGVhZGVyXzE0MzQzZDMzYWQ:t/cb:8c9f3d5b23ef15ea2ca07fc45b68f27f6cbfbd23/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL21lZGF0c3VfdGl0ZWxfaGVhZGVyLnBuZw) Im Medatsu-Theme möglich: Die versteckte Navigation, die nur durch das Burger-Menü angezeigt wird. Einzelne Reiter sind nicht sichtbar. ](https://www.toujou.de/fileadmin/Bilder/Blog-Content/2020-09_Medatsu_Release/medatsu_titel_header.png) Selbstverständlich kann *medatsu*, genauso wie alle anderen toujou-Themes, responsives Design und ist damit bestens für mobile first gerüstet. Gepaart mit unserer langjährigen Erfahrung aus diversen [Webprojekten](https://www.toujou.de/warum-toujou/unsere-kunden/) erwartet Sie also ein Website-Theme mit bewährter Usability und Lesefreundlichkeit. ![](https://www.toujou.de/_assets/processed/7eKE-xB0n56xgF_zWvGFvAZsVyI-TSNNhzdrh0NC8W4/q:85/w:433/h:280/fn:Y3NtX01lZGF0c3VfSGVhZGVyXzFkMjlkOWI0YzM:t/cb:cf07b11068e9074bd42efe6a195cef5cd90bbd49/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL01lZGF0c3VfSGVhZGVyLnBuZw) [Auf einer *medatsu*-Seite inspirieren lassen](https://meet-medatsu.toujou.com/) [Kostenlos *medatsu* testen](https://www.toujou.de/typo3-demo/#c1006221) Funktionen für alle Themes verfügbar ------------------------------------ In der Tradition von toujou stehen die aufgeführten Elemente wie z.B. Cinema-Teaser und Inpage-Navigation in den anderen Website-Themes ebenfalls zur Verfügung. Sie müssen also keinesfalls auf diese Möglichkeiten verzichten, wenn *tabi*, *hissu* oder *toujou* besser zu Ihren Vorstellungen und Inhalten passt. Natürlich können Sie in *medatsu* alle [**individuellen Einstellungen**](https://www.toujou.de/service/toujou-setup/) wie die Schriftart und die CI-Farben jederzeit selbst **editieren**. Auch der Theme-Switch ist jederzeit möglich. Unter Umständen kann es allerdings zur optischen Notwendigkeit von Nachbesserungen bei einzelnen Elementen kommen. Hinweis für toujou-Kunden, die mit Ihrer Website bereits online sind: Von einer Live-Umstellung auf *medatsu* raten wir dringend ab. Bitte kontaktieren Sie uns bei Interesse, bevor Sie das Theme umstellen. [ ![](https://www.toujou.de/_assets/processed/8OhH7ue8wRpW3dQW0o00ivHlnL2Ur8bAsqbPDJ2f4Tw/q:85/w:433/h:216/fn:Y3NtX3RvdWpvdV9zZXR0aW5nc190aGVtZV9hdXN3YWhsXzBmZTkzM2I5MTU:t/cb:e6e7e9475a4ba52896819e1511cda37be8489ab5/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL3RvdWpvdV9zZXR0aW5nc190aGVtZV9hdXN3YWhsLnBuZw) So wählen Sie das Theme in Ihrem toujou-Backend aus. ](https://www.toujou.de/fileadmin/Bilder/Blog-Content/2020-09_Medatsu_Release/toujou_settings_theme_auswahl.png) Damit bietet *medatsu* vielen Agenturen eine inspirierende Design-Vorlage für moderne Website-Projekte mit den eigenen Kunden. Innerhalb des toujou-Systems sind Designanpassungen in einem Kunden-Pitch innerhalb von Sekunden möglich. Das erspart auch im weiteren Projektverlauf Abstimmungsschleifen. Genauso bietet dieses Website-Theme allen kleinen und mittelständischen Unternehmen die Möglichkeit auf individuelle Internetauftritte in modernem Design. *medatsu* ist demnach ein Website-Theme nicht nur für Agenturen. [Inspirieren lassen](https://meet-medatsu.toujou.com/) [*medatsu* jetzt testen](https://www.toujou.de/typo3-demo/#c1006221) [Branchen-Templates](https://www.toujou.de/templates/) Unsere neuesten Blogbeiträge ---------------------------- Lesen Sie mehr zu toujou und TYPO3, warum SEO gar nicht so schwer ist, goldene Regeln für die Kommunikation und immer wieder Tipps & Tricks für Ihre Website. [alle Artikel](https://www.toujou.de/blog/) - ![KI-generiertes Bild, das einen Schreibtisch, Stuhl und Laptop zeigt, auf dem Icons zum Thema Website in KI-Zeiten zu sehen sind, im Hintergrund steht ein buntes Bücherregal und ist ein Fenster mit Bäumen zu sehen](https://www.toujou.de/_assets/processed/xtJtyrsvQwAt-hbzUwMBzprckGTm8DeNO6IIy-wTCP0/q:85/w:2671/h:1536/fn:Y3NtX0RyZWktRGluZ2UtZnVlci1XZWJzaXRlcy1pbi1LSS1aZWl0ZW5fOWJlMDE0M2Y5ZQ:t/cb:361f01a06ddc62ad372fe47cbabb7dd9213d32d2/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjYvRHJlaS1EaW5nZS1mdWVyLVdlYnNpdGVzLWluLUtJLVplaXRlbi5wbmc) Website Qualität Yoast SEO ### 3 wesentliche Dinge für Websites in Zeiten von KI 11.05.2026 Was Websites in Zeiten von weniger Klicks weiter ausmacht. [ Weiterlesen ](https://www.toujou.de/blog/3-wesentliche-dinge-fuer-websites-in-zeiten-von-ki/) - ![](https://www.toujou.de/_assets/processed/QvU-UJAzNrIgLz7ZNWpkh5dPiW1fF96msXEUD2GBaBQ/q:85/c:1418.8116173728:798.08153477218:fp:0.5085:0.49880095923261/rt:force/w:1419/h:798/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfYmx1ZV9lOGY4MjRmMmU5:t/cb:cc459106fe2c77cfa475a95e8dcdbd7bc3717cbc/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjJfMDdfMjZfaG93X3RvX3RvdWpvdS8xOTIweDgwMF9IZWFkZXJfRWxlbWVudC1saWJyYXJ5X2JsdWUucG5n) Tutorials Website Qualität ### Neue Element-Anordnung 09.02.2026 Neue Gruppen, umgezogene Elemente in andere Gruppen und eine verbesserte Element-Vorschau. Die Neuerungen im toujou-Backend. [ Weiterlesen ](https://www.toujou.de/blog/neue-element-anordnung/)