Free cookie consent management tool by TermsFeed Wie man eine benutzerdefinierte Seite in WordPress erstellt - DrDomains Blog

Wie man eine benutzerdefinierte Seite in WordPress erstellt

Möchten Sie eine benutzerdefinierte Seite in WordPress erstellen? Mit einer benutzerdefinierten Seite können Sie ein anderes Layout als Ihre regulären Seiten in WordPress verwenden. Viele WordPress-Sites haben 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, Schritt für Schritt.

Benutzerdefinierte Seiten in WordPress verstehen

Standardmäßig können Sie in WordPress Beiträge und Seiten erstellen. Ihr WordPress-Theme steuert das Aussehen Ihrer Seiten mithilfe einer Vorlagendatei namens page.php.

Diese Vorlagendatei wirkt sich auf alle einzelnen Seiten aus, die Sie in WordPress erstellen. Wie Sie jedoch bereits wissen, sind nicht alle Seiten gleich. Zum Beispiel möchten Sie vielleicht eine Landing Page erstellen, die ganz anders aussieht als Ihre normalen Webseiten.

In der Vergangenheit bedeutete das Erstellen einer benutzerdefinierten Seite in WordPress, dass Sie Ihre eigene benutzerdefinierte Vorlage mit HTML, CSS und PHP programmieren mussten. Wir werden diese Methode abdecken, aber wir empfehlen sie nicht für Anfänger. Stattdessen empfehlen wir die Verwendung von SeedProd oder einem anderen Page Builder Plugin, um Ihre benutzerdefinierte Seite zu erstellen.

Verwenden Sie einfach diese Quicklinks, um direkt zu den verschiedenen Methoden zu springen.

Verwenden von SeedProd zum Erstellen einer benutzerdefinierten Seite in WordPress

SeedProd ist der beste Drag & Drop Page Builder für WordPress.

Es enthält über 100 professionell gestaltete Vorlagen, die Sie als Basis für Ihre Seite verwenden können. Alternativ können Sie eine komplett benutzerdefinierte WordPress-Seite erstellen, ohne Code zu schreiben, indem Sie den Drag & Drop-Builder verwenden. SeedProd ist so konzipiert, dass es leicht zu bedienen ist, auch für absolute Anfänger.

Es verfügt jedoch auch über erweiterte Optionen, mit denen Sie visuell beeindruckende Seiten erstellen können, um Ihre Besucher zu begeistern und die Konversionen zu erhöhen. Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Hinweis: Es gibt auch eine kostenlose Version des SeedProd-Plugins.

Für unser Beispiel werden wir jedoch die Pro-Version verwenden, da sie viele leistungsstarke Funktionen hat. Nach der Aktivierung sollten Sie die Willkommensseite sehen. Hier müssen Sie Ihren Lizenzschlüssel eingeben und auf die Schaltfläche "Schlüssel überprüfen" klicken.

Sie finden Ihren Lizenzschlüssel in Ihrem Kontobereich auf der SeedProd-Website.

Entering your license key for SeedProd Als nächstes gehen Sie in Ihrem WordPress-Admin zu SeedProd " Seiten. Klicken Sie dann einfach auf die Schaltfläche "Neue Landing Page erstellen".

Creating a new landing page in SeedProd Als nächstes werden Sie aufgefordert, eine Vorlage auszuwählen. Sie können diese filtern, um Vorlagen für den Typ der Seite zu finden, die Sie erstellen möchten. Wenn Sie es vorziehen, ganz von vorne anzufangen, dann verwenden Sie einfach die leere Vorlage.

Choosing your page template in SeedProd Für dieses Tutorial verwenden wir die Vorlage "Kursverkaufsseite". Sie werden aufgefordert, Ihrer Seite einen Namen zu geben und die URL festzulegen. Klicken Sie anschließend auf die Schaltfläche "Speichern und mit der Bearbeitung der Seite beginnen".

Giving your page a name and URL in SeedProd Die von Ihnen gewählte Vorlage wird nun im SeedProd Page Builder geladen. The SeedProd page builder interface Um etwas in der Vorlage zu ändern, klicken Sie einfach auf die Vorlage. Es ist einfach, Text direkt im Page Builder selbst zu ändern. Hier bearbeiten wir zum Beispiel die Seitenüberschrift.

Editing your page headline in SeedProd Sie können Ihren Text formatieren, die Ausrichtung ändern, Links hinzufügen und mehr. Es ist auch einfach, Bilder mit dem SeedProd Page Builder zu bearbeiten. Klicken Sie einfach auf das Bild, das Sie ändern möchten. In diesem Beispiel haben wir das Standardbild oben auf der Seite durch unser eigenes Bild ersetzt.

Uploading a new image into SeedProd Sie können alles ändern, indem Sie einfach auf das Bild klicken. Dadurch wird der Bearbeitungsbereich auf der linken Seite der Seite geöffnet. Um neue Blöcke (Elemente) zu Ihrer Seite hinzuzufügen, klicken Sie einfach auf die Registerkarte "Design" oben auf der Seite. Wählen Sie einen beliebigen Standard- oder erweiterten Block aus und ziehen Sie ihn einfach per Drag & Drop an die gewünschte Stelle auf Ihrer Seite.

Adding blocks in SeedProd Nachdem Sie einen Block hinzugefügt haben, müssen Sie ihn nur noch anklicken, um ihn zu bearbeiten. Hier haben wir einen Listenblock zu unserer Seite hinzugefügt.

A list block in SeedProd Wenn Sie an irgendeiner Stelle einen Fehler machen oder Ihre Meinung ändern, machen Sie sich keine Sorgen.

Klicken Sie einfach auf die Schaltfläche "Rückgängig" am unteren Rand der Seite, um den Vorgang rückgängig zu machen.

The Undo button in SeedProd Hier finden Sie auch die Schaltfläche "Wiederherstellen", den Änderungsverlauf, die Layout-Navigation, die mobile Vorschau und die globalen Einstellungen für Ihre Seite. Wenn Sie mit Ihrer benutzerdefinierten Seite zufrieden sind, ist es an der Zeit, sie in der Vorschau anzuzeigen oder zu veröffentlichen. Um die Seite zu veröffentlichen, klicken Sie zunächst auf den Dropdown-Pfeil neben der Schaltfläche "Speichern" am oberen Rand des Bildschirms. Wählen Sie dann die Option Veröffentlichen.

Saving or publishing your page in SeedProd Sie erhalten eine Meldung, dass Ihre Seite veröffentlicht wurde.

Um sie sofort zu überprüfen, klicken Sie einfach auf die Schaltfläche "Live-Seite anzeigen".

The SeedProd message letting you know that your page has been published Um Ihre benutzerdefinierte Seite zu einem beliebigen Zeitpunkt in der Zukunft zu bearbeiten, gehen Sie einfach zu SeedProd " Seiten in Ihrem WordPress-Admin. Sie sollten Ihre gespeicherte Seite in der Liste der Landing Pages sehen. Klicken Sie einfach auf den Titel, um sie zu bearbeiten.

Editing your existing landing page in SeedProd Der Vorteil der Verwendung von SeedProd gegenüber jedem anderen Page Builder in WordPress ist, dass es Ihre Website nicht verlangsamt.

SeedProd ist der schnellste Page Builder und ermöglicht es Ihnen, vollständig benutzerdefinierte Seitenlayouts zu erstellen, die unabhängig von Ihrem Theme-Design sind, sodass Sie benutzerdefinierte Kopf- und Fußzeilen usw. haben können.

Verwenden von Beaver Builder zum Erstellen einer benutzerdefinierten Seite in WordPress

Beaver Builder ist ein beliebter und gut etablierter Drag-and-Drop-Seiten-Builder für WordPress.

Sie können damit ganz einfach benutzerdefinierte Seiten für Ihre Website oder Ihren Blog erstellen. Wir empfehlen die Verwendung der Vollversion von Beaver Builder. Es ist auch eine kostenlose Version von Beaver Builder mit eingeschränkten Funktionen verfügbar.

Zuerst müssen Sie das Beaver Builder-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins. Nach der Aktivierung sehen Sie den Begrüßungsbildschirm von Beaver Builder. Klicken Sie einfach auf den Reiter Lizenz, um Ihren Lizenzschlüssel einzugeben. Diesen finden Sie in Ihrem Kontobereich auf der Beaver Builder-Website. Vergessen Sie nicht, auf die Schaltfläche "Lizenzschlüssel speichern" zu klicken, um Ihren Lizenzschlüssel zu speichern.

Adding your license key to Beaver Builder Um Beaver Builder zu verwenden, gehen Sie einfach zu Seiten " Neu hinzufügen in Ihrem WordPress-Admin, um eine neue Seite zu erstellen. Klicken Sie dann auf die Schaltfläche "Beaver Builder starten".

Launch the Beaver Builder editor when creating a new page Daraufhin öffnet sich der Beaver Builder-Editor.

Sie müssen Zeilen und Module hinzufügen, um Ihre Seite zu erstellen. Klicken Sie einfach auf das Element, das Sie verwenden möchten, und ziehen Sie es auf Ihre Seite.

Selecting modules or rows to drag and drop using Beaver Builder Alternativ können Sie auch mit einer Vorlage beginnen. Klicken Sie auf die Registerkarte "Vorlagen" und wählen Sie dann eine Vorlage aus.

Choosing a template in Beaver Builder Sie können dann auf einen beliebigen Teil der Vorlage klicken, um ihn zu ändern.

Sie können zum Beispiel den Text, die Bilder, die Farben und mehr ändern. Hier bearbeiten wir die Überschrift der Seite. Der Bearbeitungsprozess von Beaver Builder ist nicht ganz so reibungslos wie der von SeedProd, da Sie den Text in ein separates Popup-Feld eingeben müssen.

Editing a heading in Beaver Builder Wenn Sie die Änderungen an Ihrer Seite abgeschlossen haben, klicken Sie einfach auf die Schaltfläche "Fertig" oben rechts. Sie können dann Ihren Beitrag speichern oder veröffentlichen.

Saving your post in Beaver BuilderManuelles Erstellen einer benutzerdefinierten Seitenvorlage

Wenn Sie es vorziehen, kein Plugin zu verwenden, können Sie eine benutzerdefinierte Seitenvorlage manuell in WordPress erstellen. Anmerkung des Herausgebers: Es ist völlig in Ordnung, viele Plugins auf Ihrer WordPress-Website zu verwenden. Werfen Sie einen Blick auf unseren Beitrag darüber, wie viele WordPress-Plugins Sie installieren sollten, wenn Sie sich Sorgen machen, zu viele Plugins zu haben. Zuerst müssen Sie einen einfachen Texteditor wie Notepad auf Ihrem Computer öffnen.

Fügen Sie in der leeren Datei diese Codezeile am Anfang ein:

<!--?php /* Template Name: CustomPageT1 */ ?--> 

Dieser Code teilt WordPress einfach mit, dass es sich um eine Vorlagendatei handelt, und dass sie als CustomPageT1 erkannt werden soll.

Sie können Ihre Vorlage benennen, wie Sie wollen, solange es für Sie Sinn macht.

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei auf Ihrem Desktop als custompaget1.php. Sie können die Datei unter einem beliebigen Namen speichern, achten Sie nur darauf, dass sie mit der Erweiterung .php endet.

Für diesen nächsten Schritt müssen Sie sich mit einem FTP-Client mit Ihrem WordPress-Hosting-Konto verbinden. Sobald Sie verbunden sind, gehen Sie zu Ihrem aktuellen Theme- oder Child-Theme-Ordner. Sie finden ihn im Verzeichnis /wp-content/themes/

Als Nächstes laden Sie Ihre benutzerdefinierte Seitenvorlagendatei in Ihr Theme hoch. Nun müssen Sie sich in Ihrem WordPress-Adminbereich anmelden, um eine neue Seite zu erstellen oder eine bestehende zu bearbeiten. Scrollen Sie in der Seitenbearbeitungsmaske nach unten zum Abschnitt "Seitenattribute".

Dort sehen Sie ein Dropdown-Menü Template. Wenn Sie darauf klicken, können Sie die Vorlage auswählen, die Sie gerade erstellt haben.

Selecting your custom page template Wenn Sie Ihre neue Vorlage auswählen und diese Seite jetzt auf Ihrer Website besuchen, dann sehen Sie eine leere Seite. Das liegt daran, dass Ihre Vorlage leer ist und WordPress nicht sagt, was angezeigt werden soll. Keine Sorge, wir zeigen Ihnen, wie Sie Ihre benutzerdefinierte Seitenvorlage einfach bearbeiten können.

Bearbeiten Ihrer benutzerdefinierten Seitenvorlage

Ihre benutzerdefinierte Seitenvorlage ist wie jede andere Theme-Datei in WordPress.

Sie können beliebiges HTML, Template-Tags oder PHP-Code in diese Datei einfügen. Der einfachste Weg, um mit Ihrer benutzerdefinierten Seite zu beginnen, ist das Kopieren der vorhandenen Seitenvorlage, die von Ihrem Theme bereitgestellt wird. Öffnen Sie Ihren FTP-Client und gehen Sie zu Ihrem Theme-Ordner.

Dort finden Sie eine Datei namens page.php. Sie müssen diese Datei auf Ihren Computer herunterladen.

Downloading the page php file for your site Öffnen Sie die Datei page.php in einem einfachen Texteditor wie Notepad und kopieren Sie den gesamten Inhalt mit Ausnahme des Header-Teils. Template header of a typical page php file in WordPress Der Header-Teil ist der auskommentierte Teil am Anfang der Datei.

Wir kopieren ihn nicht, weil unsere benutzerdefinierte Seitenvorlage bereits einen hat. Jetzt müssen Sie Ihre benutzerdefinierte Seitenvorlagendatei öffnen und den gesamten Code, den Sie kopiert haben, am Ende einfügen. Ihre benutzerdefinierte Seitendatei würde jetzt etwa so aussehen:

<!--?php /* Template Name: CustomPageT1 */ ?--> 
<!--?php // Starten Sie die Schleife.

while ( have_posts() ) : the_post(); // Binden Sie die Vorlage für den Seiteninhalt ein. get_template_part( 'template-parts/content', 'page' ); // Wenn Kommentare geöffnet sind oder wir mindestens einen Kommentar haben, laden Sie die Kommentarvorlage. if ( comments_open() || get_comments_number() ) { comments_template(); } // Ende der Schleife.

endwhile; ?--> 

Speichern Sie einfach Ihre benutzerdefinierte Seitenvorlagendatei und laden Sie sie per FTP zurück in Ihren Theme-Ordner.

Sie können nun die Seite besuchen, die Sie mit der benutzerdefinierten Seitenvorlage erstellt haben. Sie sollte genauso aussehen wie Ihre anderen Seiten in WordPress. Fahren Sie nun mit der Bearbeitung Ihrer benutzerdefinierten Seitenvorlagendatei fort.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, eine benutzerdefinierte Seite in WordPress hinzuzufüge


Verwandte Artikel: