How To Be Pro In Wp

So erstellen Sie eine Seite mit voller Breite in WordPress (Anfängerhandbuch)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, damit Sie Ihren Inhalt über den Bildschirm strecken können?

Die meisten WordPress-Themes enthalten bereits eine integrierte Seitenvorlage in voller Breite, die Sie verwenden können. Wenn Ihr Thema jedoch kein Thema hat, können Sie es einfach hinzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise eine Seite in voller Breite in WordPress erstellen und sogar vollständig benutzerdefinierte Seitenlayouts ohne Code erstellen können.

Methode 1. Verwenden Sie die Vorlage für die volle Breite Ihres Themas

Wenn Ihr Thema bereits eine Seitenvorlage in voller Breite enthält, verwenden Sie diese am besten einfach. Fast alle guten WordPress-Themes tun dies.

Selbst die besten kostenlosen WordPress-Themes werden häufig mit einer Vorlage in voller Breite geliefert, sodass Sie wahrscheinlich bereits eine haben.

Zuerst müssen Sie eine Seite bearbeiten oder eine neue erstellen, indem Sie zu gehen Seiten »Neu hinzufügen in Ihrem WordPress-Dashboard.

Im rechten Bereich “Dokument” des Inhaltseditors müssen Sie den Abschnitt “Seitenattribute” erweitern, indem Sie auf den Abwärtspfeil daneben klicken. Sie sollten dann eine Dropdown-Liste “Vorlage” sehen.

Anzeigen des Abschnitts

Wenn Sie eine Vorlage in voller Breite für Ihr Thema haben, wird diese hier aufgelistet. Es sollte so etwas wie “Vorlage mit voller Breite” heißen:

Wählen Sie die Vorlage in voller Breite aus der Dropdown-Liste

Die hier angezeigten Optionen unterscheiden sich je nach Thema. Machen Sie sich keine Sorgen, wenn Ihr Thema keine Seitenvorlage in voller Breite enthält.

Sie können eine einfach mit den folgenden Methoden hinzufügen.

Methode 2. Erstellen Sie eine Seitenvorlage mit voller Breite mithilfe eines Plugins

Diese Methode ist am einfachsten und funktioniert mit allen WordPress-Themes und Page Builder-Plugins.

Zunächst müssen Sie das Plugin “Fullwidth Templates” installieren und aktivieren. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie unseren Anfängerleitfaden zur Installation eines WordPress-Plugins.

Das Plugin für Vorlagen mit voller Breite fügt Ihren Seitenvorlagen drei neue Optionen hinzu:

Die verschiedenen Optionen, die für Ihre Seitenvorlage mithilfe des Plugins für die volle Breite verfügbar sind

Diese Optionen sind:

FW No Sidebar: Entfernt die Seitenleiste von Ihrer Seite, lässt aber alles andere intakt. FW Fullwidth: Entfernt die Seitenleiste, den Titel und die Kommentare und erweitert das Layout auf die volle Breite. FW Fullwidth No Header Footer: Entfernt alles, was FW Fullwidth tut, sowie die Kopf-und Fußzeile

Wenn Sie einfach den integrierten WordPress-Editor verwenden, ist „FW No Sidebar“ wahrscheinlich die beste Wahl.

Mit diesem Plugin können Sie Seitenvorlagen in voller Breite erstellen. Sie haben jedoch nur eingeschränkte Anpassungsoptionen.

Wenn Sie Ihre Vorlage in voller Breite ohne Code anpassen möchten, müssen Sie einen Seitenersteller verwenden.

Methode 3: Entwerfen Sie eine Seite mit voller Breite in WordPress mithilfe eines Page Builder-Plugins

Wenn Ihr Thema keine Vorlage in voller Breite enthält, ist dies der einfachste Weg, eine Vorlage in voller Breite zu erstellen und anzupassen.

Mithilfe einer Drag & Drop-Oberfläche können Sie ganz einfach Ihre Seite in voller Breite bearbeiten und verschiedene Seitenlayouts für Ihre Website erstellen.

Für diese Methode benötigen Sie ein WordPress-Plugin zum Erstellen von Seiten. In diesem Tutorial verwenden wir Beaver Builder. Es ist eines der besten Plugins für den Drag & Drop-Seitenersteller und ermöglicht das einfache Erstellen von Seitenlayouts, ohne dass Code geschrieben werden muss.

Installieren und aktivieren Sie zuerst das Beaver Builder-Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Sobald Sie es aktiviert haben, bearbeiten Sie entweder eine vorhandene Seite oder erstellen Sie eine neue.

Gehen Sie im Bereich “Dokument” auf der rechten Seite Ihres Bildschirms zu “Seitenattribute” und wählen Sie eine Vorlage in voller Breite aus der Dropdown-Liste aus.

Klicken Sie anschließend in der Mitte Ihres Bildschirms auf die Schaltfläche “Beaver Builder starten”.

Verwenden Sie das Beaver Builder-Plugin, um eine Seite in voller Breite zu erstellen

Verwenden Sie jetzt die Drag & Drop-Oberfläche von Beaver Builder, um Ihre Seite zu erstellen.

Die Drag & Drop-Oberfläche von Beaver Builder

Ein guter Anfang ist das Klicken auf die Registerkarte Vorlagen oben. Wählen Sie eine der vorgefertigten Vorlagen aus, die als Grundlage für Ihre Seite in voller Breite dienen sollen.

Wählen Sie eine der Beaver Builder-Vorlagen aus

Klicken Sie auf eine Vorlage, um sie auszuwählen, und der Seitenersteller lädt sie. Sie können dann alle Elemente bearbeiten, z. B. Bilder, die Sie ändern möchten.

Beaver Builder-Layouts bestehen aus Zeilen und Modulen. Jede Zeile kann mehrere Spalten haben und innerhalb jeder Zeile können Sie Inhaltsmodule und Widgets hinzufügen.

Um eine Zeile oder ein Modul im Layout zu bearbeiten, müssen Sie nur darauf klicken. In diesem Fall bearbeiten wir das Überschriftenmodul:

Bearbeiten einer Überschrift mit Beaver Builder

Beaver Builder öffnet die Artikeldetails in einem Popup, in dem Sie die Einstellungen bearbeiten können. Sie können den Text ändern, Schriftarten und Farben ändern, Hintergrundbilder hinzufügen oder ändern und vieles mehr.

Bearbeiten der Details eines Elements in Beaver Builder

Sie können Ihrem Layout jederzeit Module und Widgets hinzufügen. Beaver Builder enthält viele grundlegende und erweiterte Inhaltsmodule, die Sie einfach per Drag & Drop auf Ihre Seite ziehen können.

Hinzufügen eines Moduls in Beaver Builder

Wenn Sie mit der Bearbeitung fertig sind, klicken Sie oben auf der Seite auf “Fertig”. Sie können Ihren Entwurf dann speichern oder veröffentlichen.

Speichern oder Veröffentlichen Ihrer Seite in voller Breite in Beaver Builder

Sie können jetzt Ihre Seite besuchen, um Ihre fertige Seite in voller Breite anzuzeigen.

Methode 4. Erstellen Sie mit SeedProd vollständig benutzerdefinierte Landing Pages in voller Breite

Beaver Builder ist zwar eine nette Lösung, kann jedoch Ihre Website verlangsamen.

Wenn Sie eine vollständig benutzerdefinierte Zielseite erstellen möchten, auf der Sie die Kopf- und Fußzeile sowie alle Bereiche der Seite anpassen möchten, empfehlen wir die Verwendung von SeedProd.

Es ist das beste Landingpage-Plugin für WordPress und verfügt über eine sehr einfach zu bedienende Drag & Drop-Seite.

SeedProd Page Builder

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren.

Nach der Aktivierung gehen Sie einfach zu SeedProd »Seiten um eine neue Landing Page hinzuzufügen. Sie können einfach aus einer der vielen vorgefertigten Vorlagen auswählen oder eine benutzerdefinierte Zielseite von Grund auf neu erstellen.

Das Beste an SeedProd ist, dass es extrem schnell ist und über integrierte Konvertierungsfunktionen für die Abonnentenverwaltung, die Integration von E-Mail-Marketingdiensten und vieles mehr verfügt.

Methode 5: Manuelle Erstellung einer WordPress-Seitenvorlage in voller Breite

Diese Methode ist der letzte Ausweg, wenn keine der oben genannten Methoden für Sie funktioniert. Sie müssen Ihre WordPress-Themendateien bearbeiten. Sie benötigen grundlegende Kenntnisse in PHP, CSS und HTML.

Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren / Einfügen von Code in WordPress.

Bevor Sie fortfahren, empfehlen wir Ihnen, ein WordPress-Backup oder zumindest ein Backup Ihres aktuellen Themas zu erstellen. Auf diese Weise können Sie Ihre Website problemlos wiederherstellen, wenn ein Fehler auftritt.

Öffnen Sie als Nächstes einen Nur-Text-Editor wie Notepad und fügen Sie den folgenden Code in eine leere Datei ein:

Speichern Sie diese Datei als full-width.php auf Ihrem Computer. Möglicherweise müssen Sie den Typ “Speichern unter” in “Alle Dateien” ändern, um zu vermeiden, dass er als TXT-Datei gespeichert wird:

Speichern Sie die Vorlage in voller Breite als .php-Datei

Dieser Code definiert einfach den Namen einer Vorlagendatei und fordert WordPress auf, die Header-Vorlage abzurufen.

Als nächstes benötigen Sie den Inhaltsteil des Codes. Stellen Sie mit einem FTP-Client (oder Ihrem WordPress-Hosting-Dateimanager in cPanel) eine Verbindung zu Ihrer Website her und gehen Sie dann zu / wp-content / theme / your-theme-folder /.

Jetzt müssen Sie die Datei page.php suchen. Dies ist die Standard-Seitenvorlagendatei Ihres Themas.

Öffnen Sie diese Datei, kopieren Sie alles nach der Zeile get_header () und fügen Sie es in die Datei full-width.php auf Ihrem Computer ein.

Suchen und löschen Sie in der Datei full-width.php diese Codezeile:

Diese Zeile ruft die Seitenleiste ab und zeigt sie in Ihrem Thema an. Durch Löschen wird verhindert, dass Ihr Thema die Seitenleiste anzeigt, wenn Sie die Vorlage in voller Breite verwenden.

Sie können diese Zeile mehr als einmal in Ihrem Thema sehen. Wenn Ihr Thema mehrere Seitenleisten hat (Fußzeilen-Widget-Bereiche werden auch als Seitenleisten bezeichnet), wird jede Seitenleiste im Code einmal referenziert. Entscheiden Sie, welche Seitenleisten Sie behalten möchten.

Wenn in Ihrem Thema keine Seitenleisten auf Seiten angezeigt werden, finden Sie diesen Code möglicherweise nicht in Ihrer Datei.

So sieht der gesamte Code von full-width.php aus, nachdem die Änderungen vorgenommen wurden. Ihr Code kann je nach Thema etwas anders aussehen.


Laden Sie als Nächstes die Datei full-width.php mit Ihrem FTP-Client in Ihren Themenordner hoch.

Sie haben jetzt erfolgreich eine benutzerdefinierte Seitenvorlage in voller Breite erstellt und in Ihr Thema hochgeladen. Der nächste Schritt besteht darin, diese Vorlage zu verwenden, um eine Seite in voller Breite zu erstellen.

Gehen Sie zu Ihrem WordPress-Administrationsbereich und bearbeiten oder erstellen Sie eine neue Seite im WordPress-Blockeditor.

Suchen Sie im Bereich “Dokument” rechts nach “Seitenattribute” und klicken Sie auf den Abwärtspfeil, um diesen Abschnitt bei Bedarf zu erweitern. Es sollte eine Dropdown-Liste “Vorlage” angezeigt werden, in der Sie Ihre neue Vorlage “Volle Breite” auswählen können:

Wählen Sie die Vorlage mit voller Breite aus, die Sie in der Dropdown-Liste Vorlage erstellt haben

Veröffentlichen oder aktualisieren Sie die Seite, nachdem Sie diese Vorlage ausgewählt haben.

Wenn Sie die Seite anzeigen, sehen Sie, dass die Seitenleisten verschwunden sind und Ihre Seite als einzelne Spalte angezeigt wird. Es ist möglicherweise noch nicht in voller Breite, aber Sie können es jetzt anders stylen.

Sie müssen das Inspect-Tool verwenden, um die CSS-Klassen zu ermitteln, die von Ihrem Thema zum Definieren des Inhaltsbereichs verwendet werden.

Danach können Sie die Breite mit CSS auf 100% einstellen. Sie können CSS-Code hinzufügen, indem Sie auf gehen Aussehen »Anpassen und klicken Sie unten auf dem Bildschirm auf “Zusätzliches CSS”.

Hinzufügen von CSS im Theme Customizer

Wir haben auf unserer Testseite den folgenden CSS-Code verwendet:

.page-template-full-width .content-area {width: 100%; Rand: 0px; Rand: 0px; Polsterung: 0px; } .page-template-full-width .site {margin: 0px; }}

So sah es auf unserer Demo-Site mit dem Thema Twenty Sixteen aus.

Seitenvorschau in voller Breite

Wenn Sie die manuelle Methode verwenden und weitere Anpassungen vornehmen möchten, können Sie auch das CSS Hero-Plugin verwenden, mit dem Sie CSS-Stile mit einem Point-and-Click-Editor ändern können.

Für die meisten Benutzer empfehlen wir jedoch, die Vorlage Ihres eigenen Themas in voller Breite zu verwenden oder ein Plugin zu verwenden, um eine Vorlage zu erstellen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie auf einfache Weise eine Seite in voller Breite in WordPress erstellen können. Vielleicht möchten Sie auch unseren Leitfaden zu den besten WordPress-Plugins für das Wachstum Ihrer Website und unseren Vergleich der besten WordPress LMS-Plugins zum Erstellen und Verkaufen von Kursen lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Related Articles