Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man eine benutzerdefinierte Seite in WordPress erstellt

Möchten Sie eine eigene Seite in WordPress erstellen?

Mit einer benutzerdefinierten Seite können Sie ein anderes Layout als für den Rest Ihrer Website verwenden. Viele WordPress-Websites verwenden benutzerdefinierte Seitenlayouts für ihre Verkaufsseiten, Landing Pages, Webinar-Seiten und mehr.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine benutzerdefinierte Seite in WordPress erstellen können.

How to create a custom page in WordPress

Warum eine benutzerdefinierte Seite in WordPress erstellen?

Jedes Mal, wenn Sie eine neue Seite erstellen, steuert Ihr WordPress-Theme mithilfe einer Vorlagendatei, wie diese Seite aussehen soll.

Diese page.php-Vorlage betrifft alle einzelnen Seiten, die Sie in WordPress erstellen. Vielleicht möchten Sie aber nicht jedes Mal das gleiche Design verwenden.

Landingpages haben oft einen anderen Inhalt als normale Seiten, z. B. ein großes Heldenbild oder einen Aufruf zum Handeln (CTA). Das bedeutet, dass sie oft völlig anders aussehen als der Rest Ihrer Website.

Der Versuch, mit der Standardseitenvorlage einzigartige Designs zu erstellen, kann jedoch sehr viel Zeit in Anspruch nehmen. Außerdem sind Sie durch die page.php-Vorlage eingeschränkt und können möglicherweise nicht genau das Design erstellen, das Sie wünschen. Das kann es schwierig machen, gute Ergebnisse zu erzielen. Wenn Sie zum Beispiel eine Verkaufsseite erstellen, kann es sein, dass Sie aufgrund eines schlechten Seitendesigns nicht viele Konversionen erzielen.

Sehen wir uns also an, wie Sie eine benutzerdefinierte Seite in WordPress erstellen können, mit genau dem Design, Layout und Inhalt, den Sie wünschen. Verwenden Sie einfach die unten stehenden Links, um direkt zur gewünschten Methode zu springen.

Methode 1. So erstellen Sie eine benutzerdefinierte Seite in WordPress mit dem Block-Editor (kein Plugin erforderlich)

Mit dem Block-Editor können Sie ganz einfach Ihre eigenen Vorlagen mit den Ihnen bereits vertrauten Werkzeugen erstellen.

Dies ist eine gute Wahl, wenn Sie dasselbe Design auf mehreren Seiten wiederverwenden wollen, da Sie einfach dieselbe Vorlage verwenden können. Wenn Sie ein völlig einzigartiges Design erstellen möchten, besteht eine weitere Möglichkeit darin, die Seite ganz normal zu erstellen und dann ihr Layout mit dem Full-Site-Editor zu bearbeiten, was wir in Methode 2 behandeln werden.

Beachten Sie jedoch, dass diese Methoden nur mit blockbasierten Themes wie ThemeIsle Hestia Pro oder Twenty Twenty-Three funktionieren. Wenn Sie kein blockbasiertes Theme haben, empfehlen wir, stattdessen einen Page Builder zu verwenden.

Öffnen Sie dazu einfach eine beliebige Seite oder einen Beitrag. Wählen Sie dann die Registerkarte „Seite“ im rechten Menü und klicken Sie auf den Text neben „Vorlage“.

How to create a custom theme using the built-in WordPress template

Die Optionen, die Sie sehen, können je nach WordPress-Theme variieren, aber der Text zeigt normalerweise „Seite“, „Standardvorlage“ oder ähnliches.

Klicken Sie in dem daraufhin erscheinenden Popup auf das Symbol „Vorlage hinzufügen“.

How to create a custom WordPress template

Geben Sie in dem daraufhin erscheinenden Popup einen Namen für Ihre Vorlage ein und klicken Sie dann auf „Erstellen“.

Der Name dient nur als Referenz, Sie können also alles verwenden, was Sie wollen.

Creating a new template in the WordPress block editor

Dadurch wird der Vorlageneditor gestartet, der ähnlich wie der WordPress-Inhaltseditor funktioniert.

Um dem benutzerdefinierten Seitendesign Blöcke hinzuzufügen, klicken Sie einfach auf die blaue Schaltfläche „+“. Sie können dann per Drag & Drop Blöcke hinzufügen.

Editing a WordPress template using the block-based editor

Sie können einem Block Inhalte hinzufügen oder seine Formatierung mit den bekannten WordPress-Bearbeitungswerkzeugen ändern. Sie können beispielsweise Text in einen „Überschrift“-Block eingeben, fett formatieren oder Text von H2 in H3 ändern.

Sie können eine benutzerdefinierte Seite auch mithilfe von Mustern erstellen. Muster sind Sammlungen von Blöcken, die häufig zusammen verwendet werden, z. B. eine Liste von Ereignissen, ein Bild mit einer Beschriftung oder eine Preistabelle.

Welche Muster Sie sehen, hängt von Ihrem WordPress-Theme ab, aber Sie können sehen, welche Muster verfügbar sind, indem Sie auf die Registerkarte „Muster“ klicken.

A selection of patterns in the WordPress editor

Sie können ein Blockmuster entweder per Drag & Drop auf Ihr Layout ziehen oder auf das Muster klicken, um es am unteren Rand Ihrer Vorlage hinzuzufügen. Wenn Sie mit dem Aussehen der Vorlage zufrieden sind, klicken Sie auf die Schaltfläche „Veröffentlichen“ und dann auf „Speichern“.

Sie können diese Vorlage nun auf jede beliebige Seite anwenden. Öffnen Sie einfach die Seite im Editor, und klicken Sie dann auf den Text neben „Vorlage“.

Wählen Sie in dem daraufhin angezeigten Popup die Vorlage aus, die Sie gerade erstellt haben.

Changing the WordPress template

Danach können Sie der Seite wie jeder anderen WordPress-Seite Inhalte hinzufügen.

Methode 2. So erstellen Sie eine benutzerdefinierte Seitemit dem Full-Site-Editor (nur bei blockbasierten Themes)

Wenn Sie ein blockbasiertes Thema verwenden, können Sie auch eine benutzerdefinierte Seite mit dem Full-Site-Editor erstellen. Damit können Sie das Layout einer einzelnen Seite ändern, ohne eine benutzerdefinierte Vorlage zu erstellen.

In diesem Sinne ist dies eine gute Wahl, wenn Sie ein völlig einzigartiges Design erstellen möchten, das Sie auf keiner anderen Seite wiederverwenden werden.

Um loszulegen, erstellen Sie die Seite ganz normal, indem Sie auf Seiten Neu hinzufügen gehen. Sie können dann einen Titel eingeben, Kategorien und Tags hinzufügen, ein Bild hochladen und alle anderen gewünschten Änderungen vornehmen.

Wenn Sie mit der Basisseite zufrieden sind, speichern Sie Ihre Änderungen und gehen Sie dann zu Erscheinungsbild Editor.

Opening the WordPress full-site editor (FSE)

Standardmäßig wird im vollständigen Site-Editor die Home-Vorlage Ihres Themas angezeigt.

Klicken Sie im Menü auf der linken Seite auf „Seiten“.

Editing a page layout using the full-site editor (FSE)

Sie sehen nun alle Seiten, die Sie auf Ihrer WordPress-Website erstellt haben.

Suchen Sie einfach die Seite, die Sie umgestalten möchten, und klicken Sie sie an.

Create a custom page design using the full-site editor (FSE)

WordPress zeigt nun eine Vorschau des Designs an.

Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Bleistiftsymbol.

Create a custom page design using the block-based editor

Sie können nun das Layout der Seite mit den Werkzeugen des Full-Site-Editors bearbeiten. Sie können zum Beispiel auf die blaue „+“-Schaltfläche klicken, um neue Blöcke hinzuzufügen, oder Sie können einen beliebigen Block auswählen, den Sie anpassen möchten.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“.

Create a custom page design using the block-based editor

Wenn Sie nun diese Seite auf Ihrer Website besuchen, sehen Sie das neue Seitendesign in Aktion.

Methode 3. Erstellen einer benutzerdefinierten Seite in WordPress mit SeedProd (empfohlen)

In der Vergangenheit haben Sie eine benutzerdefinierte Seite durch das Schreiben von Code erstellt, was nicht sehr anfängerfreundlich war. Wenn Sie einen Fehler in Ihrem HTML-, CSS- oder PHP-Code gemacht haben, kann dies zu häufigen WordPress-Fehlern führen oder sogar Ihre Website komplett zerstören.

Aus diesem Grund empfehlen wir, stattdessen einen Page Builder zu verwenden.

SeedProd ist der beste Drag-and-Drop Page Builder für WordPress. Es wird mit mehr als 350 Vorlagen geliefert, mit denen Sie benutzerdefinierte Seiten erstellen können, ohne Code zu schreiben.

Wenn Sie eine benutzerdefinierte Seite verwenden, um mehr Konversionen zu erzielen, dann arbeitet SeedProd mit vielen beliebten Tools von Drittanbietern zusammen, die Sie möglicherweise bereits verwenden, um Konversionen zu erzielen. Dazu gehören führende E-Mail-Marketingdienste, WooCommerce, Google Analytics und mehr.

Zunächst müssen Sie SeedProd installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Hinweis: Es gibt auch eine kostenlose Version von SeedProd, mit der Sie unabhängig von Ihrem Budget individuelle Seiten erstellen können. Für diesen Leitfaden werden wir jedoch SeedProd Pro verwenden, da es viel mehr Vorlagen bietet und mit den besten E-Mail-Marketingdiensten integriert werden kann.

Nach der Aktivierung des Plugins wird SeedProd Sie nach Ihrem Lizenzschlüssel fragen.

SeedProd license key

Sie finden diese Informationen unter Ihrem Konto auf der SeedProd-Website. Nachdem Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Wählen Sie eine benutzerdefinierte Seitenvorlage

Wenn Sie das getan haben, gehen Sie zu SeedProd “ Landing Pages und klicken Sie auf die Schaltfläche „Add New Landing Page“.

SeedProd's page design templates

Sie können nun eine Vorlage für Ihre benutzerdefinierte Seite auswählen.

Die Templates von SeedProd sind in verschiedene Kampagnentypen wie „Lead“,„Squeeze“ und„Coming Soon“ unterteilt. Sie können auf die Tabs am oberen Rand der Ansicht klicken, um Templates nach Kampagnentyp zu filtern.

The SeedProd template library

Wenn Sie bei Null anfangen wollen, bietet SeedProd auch eine leere Vorlage, die Sie verwenden können.

Um einen Entwurf genauer zu betrachten, fahren Sie einfach mit der Maus über die Vorlage und klicken Sie auf das Lupensymbol.

Previewing a ready-made template

Wenn Sie ein Design gefunden haben, das Ihnen gefällt, klicken Sie auf „Diese Vorlage auswählen“. Wir verwenden die Vorlage „Kurs-Verkaufsseite“ für alle unsere Bilder, aber Sie können jede Vorlage verwenden, die Sie möchten.

Geben Sie als Nächstes einen Namen für die benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL, die auf dem Titel der Seite basiert, aber Sie können diese URL nach Belieben ändern.

Eine beschreibende URL hilft auch den Suchmaschinen zu verstehen, worum es auf der Seite geht, so dass sie sie den richtigen Nutzern anzeigen können, was Ihre WordPress-SEO verbessern wird.

Damit Ihre benutzerdefinierte Seite die besten Chancen hat, in relevanten Suchergebnissen zu erscheinen, sollten Sie alle Schlüsselwörter hinzufügen, die in der URL fehlen. Weitere Einzelheiten finden Sie in unserem Leitfaden für die Keyword-Recherche.

Creating a custom page for your WordPress website

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.

Gestalten Sie Ihre eigene Seite

SeedProd öffnet nun die von Ihnen gewählte Vorlage in seinem benutzerfreundlichen Drag-and-Drop-Editor. Auf der rechten Seite sehen Sie eine Live-Vorschau Ihrer Seite und auf der linken Seite einige Blockeinstellungen.

The SeedProd courses template

Um einen Block anzupassen, wählen Sie ihn einfach im Seiteneditor aus. In der linken Symbolleiste werden dann alle Einstellungen für diesen Block angezeigt.

In der folgenden Abbildung ändern wir den Text innerhalb eines „Headline“-Blocks.

Editing the headline for your custom page

Über die Einstellungen im linken Menü können Sie den Text formatieren, seine Ausrichtung ändern, Links hinzufügen und vieles mehr.

Es ist auch einfach, Bilder mit dem SeedProd-Seitenerstellungsprogramm zu bearbeiten. Klicken Sie einfach auf einen „Bild“-Block und verwenden Sie die Einstellungen, um Alt-Text hinzuzufügen, ein neues Bild hochzuladen oder andere Änderungen vorzunehmen.

Editing images in a custom page design

Wenn Sie einen Block aus der benutzerdefinierten Seite entfernen möchten, klicken Sie einfach auf diesen Block, um ihn auszuwählen.

Klicken Sie dann auf das Mülleimersymbol in der Minisymbolleiste.

Removing a block from a SeedProd custom page

Um neue Blöcke zu Ihrem Entwurf hinzuzufügen, suchen Sie einfach einen Block im linken Menü und ziehen ihn in den Editor.

Sie können dann den Block durch Anklicken auswählen und im linken Menü Änderungen vornehmen.

Adding a social sharing block to WordPress

SeedProd verfügt auch über „Sektionen“, d. h. Zeilen und Blockvorlagen, mit denen Sie schnell eine benutzerdefinierte Seite erstellen können. Wenn Sie beispielsweise eine Google-Anzeigen-Landingpage entwerfen, könnten Sie die vorgefertigten Sektionen „Held“, „Aufruf zum Handeln“ oder „Merkmale“ von SeedProd verwenden.

Um alle verfügbaren Abschnitte zu sehen, klicken Sie einfach auf die Registerkarte „Abschnitte“.

SeedProd's ready-made sections

Wenn Sie sich einen Abschnitt genauer ansehen möchten, fahren Sie mit der Maus darüber und klicken Sie dann auf das Lupensymbol.

Wenn Sie einen Abschnitt gefunden haben, den Sie Ihrem Entwurf hinzufügen möchten, bewegen Sie einfach die Maus darüber und klicken dann auf das kleine „+“-Symbol.

Adding a section to a custom page

Dadurch wird der Abschnitt am unteren Rand Ihrer Seite hinzugefügt. Sie können sowohl Abschnitte als auch Blöcke per Drag & Drop in Ihrem Entwurf verschieben.

Wenn Sie einen Fehler machen oder Ihre Meinung ändern, ist das kein Problem. Sie können Ihre letzte Änderung rückgängig machen, indem Sie auf die Schaltfläche „Rückgängig“ am unteren Rand der linken Symbolleiste klicken.

Hier finden Sie auch eine Schaltfläche „Wiederholen“, einen Änderungsverlauf, eine Layout-Navigation und globale Einstellungen.

The SeedProd global settings bar

Mit diesen zusätzlichen Schaltflächen können Sie ganz einfach eine benutzerdefinierte Seite in WordPress erstellen.

Unten in der Symbolleiste finden Sie auch eine Schaltfläche für die mobile Vorschau, mit der Sie die mobile Version der benutzerdefinierten Seite anzeigen können.

Previewing a custom page on mobile

So können Sie eine benutzerdefinierte Seite entwerfen, die auf mobilen Geräten genauso gut aussieht wie auf Ihrem Computer.

Wenn Sie mit der benutzerdefinierten Seite zufrieden sind, können Sie sie veröffentlichen, indem Sie auf den Dropdown-Pfeil neben „Speichern“ klicken und dann die Option „Veröffentlichen“ auswählen.

Publishing a custom page

Ihre benutzerdefinierte Seite wird nun in Ihrem WordPress-Blog live geschaltet.

Wenn Sie die benutzerdefinierte Seite zu einem beliebigen Zeitpunkt bearbeiten möchten, gehen Sie einfach zu SeedProd “ Landing Pages in Ihrem WordPress-Dashboard. Sie können dann die Seite finden, die Sie ändern möchten, und auf den Link „Bearbeiten“ klicken.

Fine-tuning a custom page in WordPress

Dadurch wird das Muster im SeedProd-Editor geöffnet, so dass Sie Ihre Änderungen vornehmen können.

Methode 4. Verwendung von Thrive Architect zur Erstellung einer benutzerdefinierten Seite in WordPress

Sie können auch eine benutzerdefinierte Seite mit Thrive Architect erstellen. Thrive Architect ist ein weiterer beliebter Drag-and-Drop-Seitenersteller für WordPress.

Es enthält über 300 professionell gestaltete Vorlagen, die Ihnen helfen sollen, mehr Konversionen zu erzielen.

Custom page example built with Thrive Architect

Zunächst müssen Sie das Thrive Architect-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie in Ihrem WordPress-Admin-Dashboard auf Seiten “ Neu hinzufügen, um eine benutzerdefinierte Seite zu erstellen. Klicken Sie dann auf die Schaltfläche „Thrive Architect starten“.

Launch Thrive Architect

Anschließend können Sie wählen, ob Sie eine normale Seite oder eine vorgefertigte Landing Page erstellen möchten.

Wir empfehlen, auf „Vorgefertigte Landing Page“ zu klicken, da Sie dann Zugriff auf alle Thrive-Landing Page-Vorlagen haben. Diese Vorlagen sind vollständig anpassbar, sodass Sie sie auf Ihre WordPress-Website abstimmen können.

Choose the Pre-built Landing Page option in Thrive Architect

Wenn Sie ein Set finden, das Ihnen gefällt, klicken Sie einfach darauf, um es auszuwählen.

In der folgenden Abbildung wählen wir „Intelligente Landing Page Sets“.

Pick a template for your custom page in Thrive Architect

Auf dem nächsten Bildschirm müssen Sie eine bestimmte Vorlage aus dem Set auswählen.

Wählen Sie eine Vorlage aus, indem Sie sie anklicken und dann auf die Schaltfläche „Vorlage anwenden“ klicken.

Apply Thrive Architect template

Dadurch wird die Vorlage im Thrive Architect Editor geöffnet. Von hier aus können Sie die Seitenvorlage ganz einfach an Ihren Blog, Ihre Website oder Ihren Online-Shop anpassen.

Sie können z. B. die Überschrift ändern, indem Sie darauf klicken und dann Ihre eigene Nachricht eingeben.

Customize page elements in Thrive Architect

Im linken Menü sehen Sie nun alle Anpassungsoptionen. Hier können Sie die Typografie, Schriftgröße, Farbe, Formatierung und mehr ändern.

Im linken Bedienfeld können Sie auch andere Einstellungen für Ihre benutzerdefinierte Seite vornehmen, z. B. das Layout, den Hintergrundstil, die Rahmen, die Animationen und das Bildlaufverhalten, um nur einige zu nennen.

Customize page settings in Thrive Architect

Ähnlich wie die Blöcke von SeedProd enthält Thrive Architect viele vorgefertigte Elemente, die Sie zu Ihrer benutzerdefinierten Seite hinzufügen können.

Um der Seite ein neues Element hinzuzufügen, klicken Sie auf die Schaltfläche „Element hinzufügen (+)“ auf der rechten Seite des Bildschirms.

Click the Add Element button

Sie können jetzt aus Elementen wie Bildern, Schaltflächen, Formularen zur Lead-Generierung, Preistabellen, Countdown-Timern und mehr wählen.

Um ein Element hinzuzufügen, ziehen Sie es einfach aus dem rechten Menü und legen es auf Ihrer Seite ab.

Drag and drop elements onto your page

Auch hier können Sie jedes der neuen Elemente, die Sie Ihrer Seite hinzufügen, bearbeiten, indem Sie darauf klicken.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Pfeilschaltfläche (^) neben der Schaltfläche „Arbeit speichern“. Klicken Sie dann auf die Option „Speichern und zurück zum Beitragseditor“.

Save custom page in Thrive Architect

Sie können die Seite dann als Entwurf speichern oder sie veröffentlichen, damit sie auf Ihrer WordPress-Website erscheint.

Sobald Ihre benutzerdefinierte Seite veröffentlicht ist, können Sie Ihre Website besuchen, um sie in Aktion zu sehen.

Publish custom page

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man eine benutzerdefinierte Seite in WordPress erstellt. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Steigerung der Besucherzahlen in Ihrem Blog und unsere Expertenauswahl der besten Kontaktformular-Plugins für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

232 KommentareEine Antwort hinterlassen

  1. Rajee Pandi

    awesome. I think it is not free. Thank you so much.

    • WPBeginner Support

      There is a paid option but 1 and 2 are free options :)

      Admin

  2. Moinuddin Waheed

    Using seedprod for making a custom page is promising as it takes less efforts and makes awesome looking design in no time.
    Thanks for this guide, I have been already using seedprod to many of my websites and utilising this feature.

  3. Brend

    Thanks for the great article. I often use your site for assistance with WordPress.
    I followed your tutorial to manually create a new template file. When selecting the template there is no CSS attached to the page. Did I miss something?

    • WPBeginner Support

      It would depend on the specific theme you’re using, if you check with your theme’s support they should be able to let you know why their CSS is not being applied to your page properly.

      Admin

  4. Muhammed

    Perfect article.
    I have a q
    can i make a custom page and then make it the main website page or Home page?
    I don’t like to have too much content in my firs page and i want to make every thing in the main home page by my own ( i mean with HTML, CSS, JS ).
    is there any way to do that?

    • WPBeginner Support

      For customizing everything in that manner you would want to look at the method for manually creating a page template :)

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.