Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)
Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können?
Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können.
Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie hinzuzufügen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Seite in voller Breite in WordPress erstellen und sogar vollständig benutzerdefinierte Seitenlayouts ohne jeglichen Code erstellen können.
Methode 1.Verwenden Sie die Vorlage Ihres Themes für die volle Breite
Wenn Ihr Theme bereits eine Vorlage für eine Seite in voller Breite enthält, ist es am besten, diese zu verwenden
Das tun fast alle guten WordPress-Themes. Selbst die besten kostenlosen WordPress-Themes werden oft mit einer Vorlage für die volle Breite geliefert, so dass die Wahrscheinlichkeit groß ist, dass Sie bereits eine haben. Zuerst müssen Sie eine Seite bearbeiten oder eine neue Seite erstellen, indem Sie in Ihrem WordPress-Dashboard zu Seiten " Neu hinzufügen gehen
Im rechten "Dokument"-Bereich des Inhaltseditors müssen Sie den Abschnitt "Seitenattribute" erweitern, indem Sie auf den Pfeil nach unten daneben klicken. Sie sollten dann ein Dropdown-Menü "Vorlage" sehen.
Wenn Sie eine Vorlage mit voller Breite für Ihr Thema haben, wird sie hier aufgeführt. Sie sollte so etwas wie "Vorlage für volle Breite" heißen: 
Die Optionen, die Sie hier sehen, unterscheiden sich je nach Ihrem Theme.
Machen Sie sich keine Sorgen, wenn Ihr Theme keine Seitenvorlage mit voller Breite hat. Sie können ganz einfach eine mit den folgenden Methoden hinzufügen.
Methode 2. Seitenvorlage in voller Breite mit einem Plugin erstellen
Diese Methode ist am einfachsten und funktioniert mit allen WordPress-Themes und Seitenerstellungs-Plugins
Zuerst müssen Sie das Plugin Fullwidth Templates installieren und aktivieren. Wenn Sie nicht sicher sind, wie das geht, lesen Sie unsere Anleitung für Anfänger zur Installation eines WordPress-Plugins.
Das Plugin Fullwidth Templates fügt drei neue Optionen zu Ihren Seitenvorlagen hinzu: 
Diese Optionen sind:
- FW Keine Seitenleiste: Entfernt die Seitenleiste von Ihrer Seite, lässt aber alles andere intakt
- FW Fullwidth: entfernt die Seitenleiste, den Titel und die Kommentare und streckt das Layout auf die volle Breite
- FW Fullwidth No Header Footer: Entfernt alles, was FW Fullwidth tut, plus Kopf- und Fußzeile
Wenn Sie nur den eingebauten WordPress-Editor verwenden wollen, ist "FW No Sidebar" wahrscheinlich die beste Wahl.
Mit diesem Plugin können Sie zwar Seitenvorlagen mit voller Breite erstellen, haben aber nur begrenzte Anpassungsmöglichkeiten. Wenn Sie Ihr Full-Width-Template ohne Code anpassen möchten, dann müssen Sie einen Page Builder verwenden.
Methode 3: Gestalten Sie eine Seite in voller Breite in WordPress mit einem Page Builder-Plugin
Wenn Ihr Theme keine Vorlage mit voller Breite hat, ist dies der einfachste Weg, um eine Vorlage mit voller Breite zu erstellen und anzupassen.
Es ermöglicht Ihnen, Ihre Seite in voller Breite einfach zu bearbeiten und verschiedene Seitenlayouts für Ihre Website mit einer Drag & Drop-Oberfläche zu erstellen. Für diese Methode benötigen Sie ein WordPress-Page-Builder-Plugin. In diesem Tutorial werden wir den Beaver Builder verwenden.
Es ist eines der besten Drag-and-Drop-Seitenerstellungs-Plugins, mit dem Sie ganz einfach Seitenlayouts erstellen können, ohne Code zu schreiben. Installieren und aktivieren Sie zunächst das Beaver Builder-Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Sobald Sie es aktiviert haben, bearbeiten Sie entweder eine bestehende Seite oder erstellen Sie eine neue Seite. Gehen Sie im Bereich "Dokument" auf der rechten Seite Ihres Bildschirms zu "Seitenattribute" und wählen Sie eine Vorlage mit voller Breite aus dem Dropdown-Menü. Klicken Sie anschließend auf die Schaltfläche " Beaver Builderstarten" in der Mitte des Bildschirms.
Verwenden Sie nun die Drag-and-Drop-Oberfläche des Beaver Builders, um Ihre Seite zu erstellen. 
Eine gute Möglichkeit, damit zu beginnen, ist ein Klick auf die Registerkarte "Vorlagen" oben. Wählen Sie eine der vorgefertigten Vorlagen aus, die Sie als Grundlage für Ihre Seite in voller Breite verwenden möchten.
Klicken Sie auf eine Vorlage, um sie auszuwählen, und der Page Builder wird sie laden.
Sie können dann alle Elemente, wie z. B. Bilder, bearbeiten, die Sie ändern möchten. Beaver Builder-Layouts werden mit Zeilen und Modulen aufgebaut. 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 Modul "Überschrift": 
Beaver Builder öffnet die Details des Elements in einem Popup, in dem Sie seine Einstellungen bearbeiten können. Sie können den Text ändern, Schriftarten und Farben ändern, Hintergrundbilder hinzufügen oder ändern und vieles mehr.
Sie können jederzeit Module und Widgets zu Ihrem Layout hinzufügen. Beaver Builder wird mit vielen grundlegenden und erweiterten Inhaltsmodulen geliefert, die Sie einfach per Drag-and-Drop in Ihre Seite ziehen können.
Sobald Sie mit der Bearbeitung fertig sind, klicken Sie oben auf der Seite auf "Fertig". Sie können dann Ihren Entwurf speichern oder veröffentlichen.
Sie können nun Ihre Seite besuchen, um Ihre fertige Seite in voller Breite zu sehen.
Methode 4.Erstellen Sie vollständig benutzerdefinierte Landing Pages in voller Breite mit SeedProd
Der Beaver Builder ist zwar eine schöne Lösung, aber er kann Ihre Website auch verlangsamen
Wenn Sie eine komplett benutzerdefinierte Landing Page erstellen möchten, bei der Sie die Kopfzeile, die Fußzeile und alle Bereiche der Seite anpassen möchten, dann empfehlen wir die Verwendung von SeedProd. Es ist das beste Landing Page Plugin für WordPress und kommt mit einer sehr einfach zu bedienenden Drag & Drop Page Builder Oberfläche.
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 eigene Landing Page von Grund auf erstellen. Das Beste an SeedProd ist, dass es extrem schnell ist und mit eingebauten Konvertierungsfunktionen für die Verwaltung von Abonnenten, die Integration von E-Mail-Marketing-Diensten und mehr kommt.
Methode 5: Manuelles Erstellen einer WordPress-Seitenvorlage in voller Breite
Diese Methode ist ein letzter Ausweg, wenn keine der oben genannten Methoden für Sie funktioniert.
Dazu müssen Sie Ihre WordPress-Theme-Dateien bearbeiten. Sie benötigen einige Grundkenntnisse in PHP, CSS und HTML. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum Kopieren/Einfügen von Code in WordPress.
Bevor Sie weitermachen, empfehlen wir Ihnen, ein WordPress-Backup oder zumindest ein Backup Ihres aktuellen Themes zu erstellen. So können Sie Ihre Website leicht wiederherstellen, wenn etwas schief geht.
Als nächstes öffnen Sie einen einfachen Texteditor wie Notepad und fügen den folgenden Code in eine leere Datei ein:
<!--?php /* * Template-Name: Full-Width */ get_header(); ?-->
Speichern Sie diese Datei als full-width.php auf Ihrem Computer. Möglicherweise müssen Sie den "Speichertyp" auf "Alle Dateien" ändern, um zu vermeiden, dass sie als .txt-Datei gespeichert wird: 
Dieser Code definiert einfach den Namen einer Template-Datei und fordert WordPress auf, das Header-Template zu holen. Als nächstes benötigen Sie den Inhaltsteil des Codes. Verbinden Sie sich mit einem FTP-Client mit Ihrer Website (oder mit dem Dateimanager Ihres WordPress-Hostings im cPanel) und gehen Sie dann zu /wp-content/themes/ihr-theme-ordner/.
Jetzt müssen Sie die Datei page.php finden. Dies ist die Standard-Seitenvorlagendatei Ihres Themes.
Öffnen Sie diese Datei und kopieren Sie alles nach der Zeile get_header() und fügen Sie es in die Datei full-width.php auf Ihrem Computer ein. Suchen Sie in der Datei full-width.php diese Codezeile und löschen Sie sie:
<?php get_sidebar(); ?>
Diese Zeile holt die Seitenleiste und zeigt sie in Ihrem Theme an.
Wenn Sie sie löschen, zeigt Ihr Theme die Seitenleiste nicht mehr an, wenn Sie die Vorlage mit voller Breite verwenden. Möglicherweise sehen Sie diese Zeile mehr als einmal in Ihrem Design. Wenn Ihr Design mehrere Seitenleisten hat (Fußzeilen-Widgetbereiche werden auch als Seitenleisten bezeichnet), wird jede Seitenleiste einmal im Code referenziert.
Entscheiden Sie, welche Sidebars Sie behalten möchten. Wenn Ihr Thema keine Seitenleisten auf Seiten anzeigt, finden Sie diesen Code möglicherweise nicht in Ihrer Datei. Hier sehen Sie, wie der gesamte Code unserer full-width.php nach den vorgenommenen Änderungen aussieht.
Ihr Code kann je nach Ihrem Theme etwas anders aussehen. <?php /* * Template Name: Full Width */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php // Start the loop.
while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'template-parts/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } // End of the loop.
endwhile; ?> </main><!-- .site-main --> <?php get_sidebar( 'content-bottom' ); ?> </div><!-- .content-area --> <?php get_footer(); ?>
Als nächstes laden Sie die Datei full-width.php mit Ihrem FTP-Client in Ihren Theme-Ordner hoch.
Sie haben nun erfolgreich eine benutzerdefinierte Seitenvorlage mit 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 in Ihren WordPress-Administrationsbereich und bearbeiten oder erstellen Sie eine neue Seite im WordPress-Blockeditor.
Suchen Sie im Bereich "Dokument" auf der rechten Seite nach "Seitenattribute" und klicken Sie auf den Pfeil nach unten, um den Bereich zu erweitern, falls erforderlich.
Sie sollten ein "Template"-Dropdown sehen, in dem Sie Ihr neues "Full Width"-Template auswählen können: 
Nachdem Sie diese Vorlage ausgewählt haben, veröffentlichen oder aktualisieren Sie die Seite. Wenn Sie die Seite anzeigen, werden Sie sehen, dass die Seitenleisten verschwunden sind und Ihre Seite als einzelne Spalte erscheint. Sie hat zwar noch nicht die volle Breite, aber Sie sind jetzt bereit, sie anders zu gestalten. Sie müssen das Tool "Inspect" verwenden, um die CSS-Klassen herauszufinden, die von Ihrem Thema verwendet werden, um den Inhaltsbereich zu definieren.
Danach können Sie seine Breite mit CSS auf 100 % einstellen. Sie können CSS-Code hinzufügen, indem Sie zu Darstellung " Anpassen gehen und unten im Bildschirm auf "Zusätzliches CSS" klicken
Wir haben den folgenden CSS-Code auf unserer Testseite verwendet:
.page-template-full-width .content-area { width: 100%; margin: 0px; border: 0px; padding: 0px; } .page-template-full-width .site { margin:0px; }
So sieht es auf unserer Demo-Seite mit dem Twenty Sixteen-Theme aus. 
Wenn Sie die manuelle Methode verwenden möchten und weitere Anpassungen vornehmen wollen, dann 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 Themes in voller Breite zu verwenden oder ein Plugin zu verwenden, um eine solche zu erstellen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ganz einfach eine Seite in voller Breite in WordPress erstellen können.