{"id":18029,"date":"2026-08-25T10:35:10","date_gmt":"2026-08-25T04:50:10","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=18029"},"modified":"2026-08-25T10:36:13","modified_gmt":"2026-08-25T04:51:13","slug":"so-erstellen-sie-eine-benutzerdefinierte-seitenvorlage-in-typo3","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/so-erstellen-sie-eine-benutzerdefinierte-seitenvorlage-in-typo3\/","title":{"rendered":"So erstellen Sie eine benutzerdefinierte Seitenvorlage in TYPO3"},"content":{"rendered":"\n

Mit TYPO3<\/a> k\u00f6nnen Sie das Aussehen und die Funktionsweise Ihrer Website selbst bestimmen. Eine der besten M\u00f6glichkeiten, diese Flexibilit\u00e4t zu nutzen, ist die Erstellung einer eigenen Seitenvorlage. Mit einer benutzerdefinierten Vorlage k\u00f6nnen Sie eine Seite ganz nach Ihren W\u00fcnschen gestalten, anstatt ein Standardlayout zu verwenden, das nicht zu Ihrer Marke oder Ihren Inhalten passt.<\/p>\n\n\n\n

In dieser Anleitung wird der TYPO3-Prozess Schritt f\u00fcr Schritt in einfacher Sprache erkl\u00e4rt.<\/p>\n\n\n\n

Was ist eine Seitenvorlage eigentlich?<\/h2>\n\n\n\n

Stellen Sie sich eine Seitenvorlage wie einen Bauplan f\u00fcr ein Haus vor. Sie legt fest, wo sich die einzelnen Elemente auf einer Seite befinden: die Kopfzeile oben, das Men\u00fc an der Seite, der Hauptinhalt in der Mitte und die Fu\u00dfzeile unten. Sobald Sie diesen Bauplan erstellt haben, nutzt TYPO3 ihn, um Ihre Inhalte auf Ihrer gesamten Website einheitlich darzustellen.<\/p>\n\n\n\n

Anforderung<\/h2>\n\n\n\n

Bevor Sie beginnen, vergewissern Sie sich, dass Sie Folgendes zur Hand haben:<\/p>\n\n\n\n

    \n
  • Zugriff auf das TYPO3-Backend (den Administrationsbereich)<\/li>\n\n\n\n
  • Ein Basis-Site-Paket oder ein Erweiterungsordner, in dem Ihre Vorlagendateien gespeichert werden<\/li>\n\n\n\n
  • Ein Texteditor zum Schreiben einfacher Codezeilen (HTML und ein wenig TypoScript)<\/li>\n<\/ul>\n\n\n\n

    Sie m\u00fcssen kein Programmierprofi sein. Grundkenntnisse in HTML reichen aus, um loszulegen.<\/p>\n\n\n\n

    Schritt 1: Erstellen Sie ein Website-Paket<\/h2>\n\n\n\n

    TYPO3 speichert Vorlagen in einem sogenannten \u201eSite-Paket\u201c. Dabei handelt es sich lediglich um einen Ordner, der alle Ihre Designdateien enth\u00e4lt: Layouts, Vorlagen und Teilvorlagen.<\/p>\n\n\n\n

    Erstellen Sie in Ihrem Erweiterungsordner einen neuen Ordner f\u00fcr Ihr Site-Paket. Eine typische Struktur sieht wie folgt aus:<\/p>\n\n\n\n

    my_sitepackage\/\n\u251c\u2500\u2500 Configuration\/\n\u251c\u2500\u2500 Resources\/\n\u2502   \u251c\u2500\u2500 Private\/\n\u2502   \u2502   \u251c\u2500\u2500 Layouts\/\n\u2502   \u2502   \u251c\u2500\u2500 Templates\/\n\u2502   \u2502   \u2514\u2500\u2500 Partials\/\n\u2502   \u2514\u2500\u2500 Public\/<\/code><\/pre>\n\n\n\n
    Diese Struktur sorgt f\u00fcr Ordnung. Layouts enthalten die allgemeine Seitenstruktur, Vorlagen das Design f\u00fcr eine bestimmte Seite und Teilvorlagen kleine Elemente, die Sie wiederverwenden, wie beispielsweise eine Kopf- oder Fu\u00dfzeile.<\/p>\n\n\n\n
    Schritt 2: Erstellen der Layout-Datei<\/h2>\n\n\n\n
    Im Layout legen Sie das Grundger\u00fcst der Seite fest. Dies ist der gemeinsame Rahmen, in den jede Seite eingebettet wird, daher behalten wir es als Standardlayout bei. Erstellen Sie im Ordner \u201eLayouts\u201c eine Datei mit dem Namen \u201eDefault.html\u201c. Diese Datei enth\u00e4lt in der Regel die grundlegende HTML-Struktur sowie Platzhalter f\u00fcr die Kopfzeile, den Hauptinhalt und die Fu\u00dfzeile.<\/p>\n\n\n\n
    Hier ist ein einfaches Beispiel:<\/p>\n\n\n\n
    <html>\n<body>\n  <f:render partial=\"Header\" arguments=\"{_all}\" \/>\n\n  <main>\n    <f:render section=\"Main\" \/>\n  <\/main>\n\n  <f:render partial=\"Footer\" arguments=\"{_all}\" \/>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    Das sagt TYPO3: \u201eZeige zuerst die Kopfzeile an, dann den Inhalt des Hauptbereichs und schlie\u00dflich die Fu\u00dfzeile.\u201c<\/p>\n\n\n\n
    Schritt 3: Erstellen Sie Ihre eigene Seitenvorlage<\/h2>\n\n\n\n
    Wechseln Sie nun in den Ordner \u201eTemplates\u201c. Anstatt einfach nur eine weitere leere Seite zu erstellen, erstellen wir eine Seite f\u00fcr einen bestimmten Zweck, beispielsweise eine benutzerdefinierte Landingpage oder eine Serviceseite. Erstellen Sie eine Datei mit dem Namen \u201eCustomPage.html\u201c. Hier wird der eigentliche Inhalt dieser Seite untergebracht, und sie wird mit dem Layout verkn\u00fcpft, das Sie in Schritt 2 erstellt haben.<\/p>\n\n\n\n
    <f:layout name=\"Default\" \/>\n\n<f:section name=\"Main\">\n  <h1>{data.title}<\/h1>\n  <p>{data.bodytext}<\/p>\n<\/f:section><\/code><\/pre>\n\n\n\n
    Diese Vorlage weist TYPO3 an, f\u00fcr den Rahmen das Layout \u201eDefault\u201c zu verwenden, und f\u00fcllt den Hauptbereich mit dem Seitentitel und dem Flie\u00dftext. Sie k\u00f6nnen diese Datei entsprechend der Art der Seite, die Sie erstellen, umbenennen, beispielsweise in \u201eLandingPage.html\u201c oder \u201eServicePage.html\u201c, damit sie sich sp\u00e4ter leicht von anderen Vorlagen unterscheiden l\u00e4sst.<\/p>\n\n\n\n
    Schritt 4: Wiederverwendbare Teilvorlagen hinzuf\u00fcgen<\/h2>\n\n\n\n
    Teilvorlagen sind kleine Codeabschnitte, die Sie in verschiedenen Vorlagen immer wieder verwenden k\u00f6nnen, beispielsweise eine Kopf- oder Fu\u00dfzeile. Erstellen Sie im Ordner \u201ePartials\u201c Dateien mit den Namen \u201eHeader.html\u201c und \u201eFooter.html\u201c. Diese bleiben auf Ihrer gesamten Website unver\u00e4ndert, auch wenn Sie sp\u00e4ter weitere benutzerdefinierte Seitenvorlagen hinzuf\u00fcgen.<\/p>\n\n\n\n
    <header>\n  <h1>My Website<\/h1>\n  <nav>\n    <!-- your menu here -->\n  <\/nav>\n<\/header><\/code><\/pre>\n\n\n\n
    Durch die Verwendung von Partials m\u00fcssen Sie denselben Code nicht immer wieder neu schreiben. Sollten Sie jemals \u00c4nderungen an Ihrer Kopfzeile vornehmen m\u00fcssen, m\u00fcssen Sie diese nur an einer Stelle aktualisieren, und jede Seite, die diese Kopfzeile verwendet, wird ebenfalls aktualisiert.<\/p>\n\n\n\n
    Schritt 5: TypoScript einrichten<\/h2>\n\n\n\n
    TypoScript ist die Konfigurationssprache, die TYPO3 im Hintergrund verwendet. Sie teilt TYPO3 mit, welche Layout-, Template- und Partial-Ordner verwendet werden sollen und welche Template-Datei f\u00fcr diese benutzerdefinierte Seite geladen werden soll. Erstellen Sie in Ihrem Site-Paket eine TypoScript-Konfigurationsdatei und f\u00fcgen Sie etwa folgenden Code hinzu:<\/p>\n\n\n\n
    page = PAGE\npage {\n  10 = FLUIDTEMPLATE\n  10 {\n    templateRootPaths.0 = EXT:my_sitepackage\/Resources\/Private\/Templates\/\n    layoutRootPaths.0 = EXT:my_sitepackage\/Resources\/Private\/Layouts\/\n    partialRootPaths.0 = EXT:my_sitepackage\/Resources\/Private\/Partials\/\n    templateName = CustomPage\n  }\n}<\/code><\/pre>\n\n\n\n
    Beachten Sie, dass \u201etemplateName\u201c auf \u201eCustomPage\u201c verweist und nicht auf \u201eDefault\u201c. Dadurch wird TYPO3 angewiesen, Ihre benutzerdefinierte Seitenvorlage zu laden, w\u00e4hrend weiterhin das Standardlayout sowie die darunter liegenden gemeinsamen Teilvorlagen f\u00fcr Kopf- und Fu\u00dfzeile verwendet werden.<\/p>\n\n\n\n
    Schritt 6: Binden Sie Ihr Site-Paket in TYPO3 ein<\/h2>\n\n\n\n
    Rufen Sie das TYPO3-Backend auf, \u00f6ffnen Sie das Modul \u201eTemplate\u201c und f\u00fcgen Sie die TypoScript-Konfiguration Ihres neuen Site-Pakets ein. Mit diesem Schritt wird alles, was Sie erstellt haben, mit der Live-Website verkn\u00fcpft.<\/p>\n\n\n\n
    Schritt 7: Die Vorlage einer Seite zuweisen<\/h2>\n\n\n\n
    \u00d6ffnen Sie nun die Seite, deren Design Sie anpassen m\u00f6chten, rufen Sie die Seiteneigenschaften auf und w\u00e4hlen Sie Ihre benutzerdefinierte Vorlage aus, falls Sie mehr als eine eingerichtet haben. Wenn Sie bisher nur eine erstellt haben, wird TYPO3 diese automatisch verwenden, sobald das TypoScript aktiv ist.<\/p>\n\n\n\n
    Schritt 8: Vorschau und Anpassungen<\/h2>\n\n\n\n
    Sobald alles miteinander verbunden ist, \u00f6ffnen Sie die Seite im Frontend und sehen Sie sich Ihre Vorlage in Aktion an. Es ist ganz normal, dass einige kleine \u00c4nderungen erforderlich sind \u2013 Elemente verschieben, Abst\u00e4nde anpassen, Farben korrigieren \u2013, bis alles richtig aussieht.<\/p>\n\n\n\n
    Bitte kontaktieren Sie uns unter wargis@bay20.com\/manish@bay20.com<\/strong> oder rufen Sie uns unter +91-9582784309 oder +91-8800519180<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit Typo3 ben\u00f6tigen. Sie k\u00f6nnen auch unsere Website besuchen, um sich \u00fcber unser Leistungsangebot zu informieren.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Mit TYPO3 k\u00f6nnen Sie das Aussehen und die Funktionsweise Ihrer Website selbst bestimmen. Eine der besten M\u00f6glichkeiten, diese Flexibilit\u00e4t zu nutzen, ist die Erstellung einer eigenen Seitenvorlage. Mit einer benutzerdefinierten Vorlage k\u00f6nnen Sie eine Seite ganz nach Ihren W\u00fcnschen gestalten, anstatt ein Standardlayout zu verwenden, das nicht zu Ihrer Marke oder Ihren Inhalten passt. In […]<\/p>\n","protected":false},"author":1,"featured_media":18030,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[180],"class_list":["post-18029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typo3","tag-typo3"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/18029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=18029"}],"version-history":[{"count":1,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/18029\/revisions"}],"predecessor-version":[{"id":18031,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/18029\/revisions\/18031"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/18030"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=18029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=18029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=18029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}