Möchten Sie eine WordPress-Seite in voller Breite erstellen? Viele WordPress-Themes enthalten bereits eine integrierte Seitenvorlage in voller Breite, die Sie verwenden können. Einige Themen haben diese Eigenschaft jedoch nicht. In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise eine Seite in voller Breite in WordPress erstellen können.
Methode 1: Verwenden Sie eine Vorlage in voller Breite, die in Ihr WordPress-Design integriert ist
Diese Methode wird empfohlen, wenn Ihr Thema bereits eine Seitenvorlage in voller Breite enthält.
Zuerst müssen Sie eine Seite bearbeiten oder eine neue erstellen, indem Sie besuchen Seiten »Neu hinzufügen Seite.
Wählen Sie im Seitenbearbeitungsbildschirm im Meta-Feld Seitenattribute die Option Breite in voller Breite aus.
Nachdem Sie die Vorlage in voller Breite ausgewählt haben, sollten Sie Ihre Seite speichern. Sie können die Seite weiter bearbeiten, um weiteren Inhalt hinzuzufügen, oder auf die Vorschau-Schaltfläche klicken, um sie in Aktion zu sehen.
Wenn Sie auf dem Bearbeitungsbildschirm Ihrer Seite nicht über die Option “Vorlage in voller Breite” verfügen, bedeutet dies, dass Ihr Thema keine Seitenvorlage in voller Breite enthält.
Keine Sorge, wir zeigen Ihnen, wie Sie ganz einfach eine Seite in voller Breite erstellen können, ohne Ihr WordPress-Design zu ändern.
Methode 2: Erstellen Sie manuell eine Seitenvorlage in voller Breite
Diese Methode erfordert, dass Sie WordPress-Themendateien bearbeiten und über grundlegende Kenntnisse in PHP, CSS und HTML verfügen. Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren / Einfügen von Code in WordPress.
Bevor Sie fortfahren, müssen Sie ein WordPress-Backup oder zumindest ein Backup Ihres aktuellen Themas erstellen. Auf diese Weise können Sie Ihre Website problemlos wiederherstellen, wenn ein Fehler auftritt.
Zuerst müssen Sie einen Nur-Text-Editor wie Notepad öffnen und den folgenden Code in eine leere Datei einfügen:
Jetzt müssen Sie diese Datei als full-width.php auf Ihrem Computer speichern.
Dieser Code definiert einfach den Namen einer Vorlagendatei und fordert WordPress auf, nach der Header-Vorlage zu suchen.
Als nächstes benötigen Sie den Inhaltsteil des Codes. Stellen Sie über einen FTP-Client (oder einen 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 für Ihr Thema.
Kopieren Sie alles nach der Zeile get_header () und fügen Sie es in die Datei full-width.php auf Ihrem Computer ein.
Jetzt müssen Sie sich die Datei full-width.php ansehen und diese Codezeile löschen:
Diese Zeile sucht einfach nach der Seitenleiste und zeigt sie in Ihrem Thema an. Nach dem Entfernen wird das Thema bei Verwendung der Vorlage in voller Breite nicht in der Seitenleiste angezeigt.
Sie können diese Zeile mehrmals 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. Sie müssen entscheiden, welche Seitenstangen 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 unser Code in voller Breite aus, nachdem wir Änderungen vorgenommen haben. Ihr Code kann je nach Thema etwas anders aussehen.
Als Nächstes müssen Sie die Datei full-width.php mithilfe des FTP-Clients in Ihren Themenordner hochladen.
Sie haben erfolgreich eine benutzerdefinierte Seitenvorlage in voller Breite für Ihr Thema erstellt und geladen. Der nächste Schritt besteht darin, diese Vorlage zu verwenden, um eine Seite in voller Breite zu erstellen.
Gehen Sie zum WordPress-Administrationsbereich und bearbeiten oder erstellen Sie eine neue Seite.
Suchen Sie im Seitenbearbeitungsbildschirm das Meta-Feld für Seitenattribute und klicken Sie im Dropdown-Menü auf die Option “Vorlage”.
Dort können Sie Ihre Vorlage in voller Breite sehen. Gehen Sie vor und wählen Sie es aus und speichern / aktualisieren Sie die Seite.
Sie können jetzt Ihre Website besuchen und sehen, dass die Seitenleisten verschwunden sind und Ihre Seite als einzelne Spalte angezeigt wird. Es ist möglicherweise noch nicht in voller Breite, aber jetzt können Sie es 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. Wir verwenden den folgenden CSS-Code auf unserer Testseite:
.page-template-full-width .content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}
So sah es auf unserer Demo-Site mit dem Thema Twenty Sixteen aus.
Methode 3: Erstellen Sie mit dem Page Builder-Plugin eine Seite in voller Breite
Diese Methode ist einfacher und wird allen Benutzern empfohlen. Sie können damit 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. Für dieses 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.
Als erstes müssen Sie das Beaver Builder-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Bei der Aktivierung müssen Sie eine vorhandene Seite bearbeiten oder eine neue erstellen.
Auf dem Seitenbearbeitungsbildschirm müssen Sie im Abschnitt Seitenattribute die Vorlage in voller Breite auswählen, die von Ihrem WordPress-Design bereitgestellt wird.
Wenn Ihr Thema keine Vorlage in voller Breite hat, können Sie eine erstellen, indem Sie den Anweisungen in der zweiten Methode folgen.
Nachdem Sie Ihre Seitenvorlage ausgewählt haben, müssen Sie auf die Schaltfläche Entwurf speichern klicken, um Ihre Seite zu speichern.
Sie können jetzt das Page Builder-Plugin verwenden, um Ihr Design zu erstellen. Klicken Sie zunächst im Seiteneditor auf die Registerkarte Seitenersteller.
Dadurch wird die Seitenerstellungsoberfläche geöffnet, in der Sie eine Live-Vorschau Ihrer Seite mit den Seitenerstellungsoptionen anzeigen können.
Sie können beginnen, indem Sie oben auf die Schaltfläche Vorlagen klicken. Beaver Builder enthält mehrere professionell gestaltete, gebrauchsfertige Vorlagen, die Sie als Ausgangspunkt verwenden können.
Sie können einfach auf eine Vorlage klicken, um sie auszuwählen, und der Seitenersteller lädt sie für Sie, einschließlich Layout, Bilder und Inhalt. Sie können auch auf die leere Vorlage klicken, um ohne vorbereitete Vorlage zu beginnen und Ihr eigenes Design zu erstellen.
Beaver Builder-Layouts werden mit Zeilen und Modulen erstellt. 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 zeigen und darauf klicken.
Beaver Builder öffnet die Artikeldetails in einem Popup-Fenster, in dem Sie die Einstellungen bearbeiten können. Sie können Farben, Schriftarten ändern, Hintergrundfotos hinzufügen, Text ändern usw.
Sie können Ihrem Design jederzeit Module und Widgets hinzufügen. Beaver Builder enthält viele grundlegende und erweiterte Inhaltsmodule, die Sie per Drag & Drop auf Ihre Seite ziehen können.
Sobald Sie die Bearbeitung abgeschlossen haben, können Sie oben auf die Schaltfläche “Fertig” klicken. Daraufhin wird ein Popup-Fenster geöffnet, in dem Sie auf die Schaltfläche Speichern oder Veröffentlichen klicken müssen.
Jetzt können Sie ihre Seite besuchen, um sie in Aktion zu sehen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie auf einfache Weise eine Seite in voller Breite in WordPress erstellen können. Sie können auch unsere Anleitung lesen, wie Sie ein Vollbild-Hintergrundbild in WordPress hinzufügen.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
