So erstellen Sie eine Vollbildseite in WordPress (Anfängerleitfaden)

Möchten Sie in WordPress eine Vollbildseite erstellen, damit Sie Ihre Inhalte über den gesamten Bildschirm strecken können?

Die meisten WordPress-Themes verfügen bereits über eine integrierte Vollbild-Seitenvorlage, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, ist es einfach, eine hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Vollbildseite in WordPress erstellen und sogar vollständig benutzerdefinierte Seitenlayouts ohne Code erstellen.

Hier ist eine kurze Übersicht über die Methoden in diesem Leitfaden:

• Methode 1. Verwenden Sie die Vollbreiten-Vorlage Ihres Themes
• Methode 2. Vollbild-Seiten-Vorlage mit einem Plugin erstellen
• Methode 3: Gestalten Sie eine Seite mit voller Breite in WordPress mit einem Page Builder Plugin
• Methode 4. Vollständig benutzerdefinierte Vollbildseiten mit SeedProd erstellen
• Methode 5: Vollbreite WordPress-Seitenvorlage manuell erstellen

Methode 1. Verwenden Sie die Vorlage 'Volle Breite' Ihres Themes

Wenn Ihr Theme bereits eine Vollbild-Seitenvorlage enthält, ist es am besten, diese einfach zu verwenden. Fast alle guten WordPress-Themes tun dies.

Selbst die besten kostenlosen WordPress-Themes werden oft mit einer Vollbreiten-Vorlage geliefert, sodass die Wahrscheinlichkeit groß ist, dass Sie bereits eine haben.

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

Im rechten Bereich „Dokument“ 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 Vollbreiten-Vorlage für Ihr Theme haben, wird sie hier aufgelistet. Sie sollte etwas wie 'Full Width Template' heißen:

Die hier angezeigten Optionen unterscheiden sich je nach Theme. Machen Sie sich keine Sorgen, wenn Ihr Theme keine Vollbild-Seitenvorlage hat.

Sie können ganz einfach eine hinzufügen, indem Sie die unten stehenden Methoden verwenden.

Methode 2. Vollbild-Seiten-Vorlage mit einem Plugin erstellen

Diese Methode ist die einfachste und funktioniert mit allen WordPress-Themes und Page-Builder-Plugins.

Zuerst müssen Sie das Plugin Fullwidth Templates installieren und aktivieren. Wenn Sie nicht sicher sind, wie das geht, lesen Sie unsere Anfängeranleitung zur Installation eines WordPress-Plugins.

Das Plugin "Fullwidth Templates" fügt Ihren Seitenvorlagen drei neue Optionen hinzu:

Diese Optionen sind:

• Vollbreite: Entfernt die Seitenleiste von Ihrer Seite, lässt aber alles andere unberührt.
• FW Vollbreite: Entfernt die Seitenleiste, den Titel und die Kommentare und dehnt das Layout auf die volle Breite aus.
• FW Vollbreite Ohne Header Footer: Entfernt alles, was FW Vollbreite tut, plus Header und Footer.

Wenn Sie einfach den integrierten WordPress-Editor verwenden möchten, ist "FW No Sidebar" wahrscheinlich die beste Wahl.

Während dieses Plugin Ihnen erlaubt, eine Full-Width-Seitenvorlage zu erstellen, haben Sie nur begrenzte Anpassungsoptionen.

Wenn Sie Ihre Vollbreiten-Vorlage ohne Code anpassen möchten, müssen Sie einen Seiten-Builder verwenden.

Methode 3: Gestalten Sie eine Seite mit voller Breite in WordPress mit einem Page Builder Plugin

Wenn Ihr Theme keine Vollbreiten-Vorlage hat, dann ist dies der einfachste Weg, eine Vollbreiten-Vorlage zu erstellen und anzupassen.

Es ermöglicht Ihnen, Ihre Vollbreiten-Seite einfach zu bearbeiten und verschiedene Seitenlayouts für Ihre Website mit einer Drag-and-Drop-Oberfläche zu erstellen.

Für diese Methode benötigen Sie ein WordPress Page Builder Plugin. In diesem Tutorial verwenden wir Thrive Architect.

Es ist eines der besten Drag-and-Drop-Page-Builder-Plugins und ermöglicht es Ihnen, Seitenlayouts einfach zu erstellen, ohne Code schreiben zu müssen.

Installieren und aktivieren Sie zuerst das Thrive Architect Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Sobald Sie das Plugin aktiviert haben, bearbeiten Sie eine vorhandene Seite oder erstellen Sie eine neue in WordPress.

Klicken Sie dann oben auf Ihrem Bildschirm auf die Schaltfläche „Thrive Architect starten“.

Als Nächstes werden Sie aufgefordert, den Typ der zu erstellenden Seite auszuwählen. Sie können eine normale Seite oder eine vorgefertigte Landingpage erstellen.

Wählen Sie die Option „Vorgefertigte Landing Page“ aus, indem Sie darauf klicken.

Dies bringt Sie zur Landing Page-Bibliothek von Thrive Architect. Von hier aus können Sie eine der vorgefertigten Vorlagen auswählen, die als Grundlage für Ihre Vollbildseite dienen.

Klicken Sie einfach auf eine Vorlage, die Ihnen gefällt, um sie auszuwählen.

Wenn Sie eine Vorlage aus dem Abschnitt „Smart Landing Page Sets“ ausgewählt haben, können Sie nun aus einer Reihe von vordefinierten Seiten in diesem Stil auswählen.

Für dieses Tutorial wählen wir die Vorlage 'Sales Page', indem wir darauf klicken. Drücken Sie dann die Schaltfläche 'Template anwenden' und der Seitenersteller wird sie laden.

Sobald Sie sich im Thrive Architect Editor befinden, können Sie alle Elemente wie Bilder, Hintergrund, Text usw. bearbeiten, die Sie ändern möchten.

Um ein Element auf der Seite zu bearbeiten, müssen Sie nur darauf klicken. In diesem Fall haben wir auf den Hintergrund dieses Seitenblocks geklickt. Dies öffnet alle Anpassungsoptionen im Menü auf der linken Seite:

Hier können Sie den Schalter umlegen, um sicherzustellen, dass Ihr Inhalt die gesamte Bildschirmbreite abdeckt.

Über das linke Menü können Sie auch die Typografie, Schriftgröße, Layout, Hintergrundstil, Rahmen, Schatten und vieles mehr anpassen.

Sie können Ihrem Layout jederzeit neue Elemente hinzufügen. Thrive Architect bietet viele grundlegende und erweiterte Blöcke, die Sie per Drag & Drop auf Ihre Seite ziehen können.

Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf den Pfeil (^) neben der Schaltfläche „Arbeit speichern“ am unteren Bildschirmrand. Klicken Sie dann auf die Option „Speichern und zum Beitragseditor zurückkehren“.

Sie können dann Ihren Entwurf speichern oder veröffentlichen.

Sobald es veröffentlicht ist, können Sie Ihren WordPress-Blog besuchen, um Ihre fertige, vollbreite Seite zu sehen.

Methode 4. Vollständig benutzerdefinierte Vollbildseiten mit SeedProd erstellen

Während Thrive Architect eine gute Lösung ist, suchen Sie vielleicht nach einem Plugin, das Ihnen noch leistungsfähigere Anpassungsoptionen für Ihre Website-Seiten bietet.

Wenn Sie eine vollständig benutzerdefinierte Landingpage 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 Landingpage-Plugin für WordPress und verfügt über eine sehr einfach zu bedienende Drag-and-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 Landingpage hinzuzufügen.

Sie können aus über 300 vorgefertigten Vorlagen wählen, darunter viele Optionen für die volle Breite. Oder Sie erstellen eine benutzerdefinierte Landingpage in voller Breite von Grund auf neu.

Das Beste an SeedProd ist, dass es extrem schnell ist und über integrierte Konversionsfunktionen für die Verwaltung von Abonnenten, die Integration von E-Mail-Marketing-Diensten, erweiterte WooCommerce-Blöcke und mehr verfügt.

Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Erstellung einer Landingpage in WordPress.

Neben dem Landingpage-Builder bietet SeedProd auch einen vollständigen Drag-and-Drop- Theme Builder. Das bedeutet, dass Sie ganz einfach ein benutzerdefiniertes, vollbreites WordPress-Theme erstellen können, ohne Code bearbeiten zu müssen.

Gehen Sie einfach zu SeedProd » Theme Builder, um ein neues WordPress-Theme zu erstellen. Auch hier können Sie aus anpassbaren Theme-Vorlagen wählen oder jeden Teil Ihres Themes von Grund auf neu gestalten.

Durch einfaches Zeigen und Klicken können Sie jeden Teil Ihres Themes bearbeiten. Sie können zum Beispiel ein neues Hintergrundbild hinzufügen und die Position und Abschnittsbreite auf Vollbild einstellen.

Mit dem SeedProd Theme Builder können Sie jeden Teil Ihrer WordPress-Website anpassen, einschließlich Seiten, Beiträgen, Archiven, Kopfzeile, Fußzeile, Seitenleisten, WooCommerce-Seiten und mehr.

Schritt-für-Schritt-Anleitungen finden Sie in unserem Tutorial unter So erstellen Sie ganz einfach ein benutzerdefiniertes WordPress-Theme.

Methode 5: Vollbreite WordPress-Seitenvorlage manuell erstellen

Diese Methode ist ein letzter Ausweg, wenn keine der oben genannten Methoden für Sie funktioniert. Sie erfordert die Bearbeitung Ihrer WordPress-Theme-Dateien. Sie benötigen einige grundlegende Kenntnisse von PHP, CSS und HTML.

Wenn Sie dies noch nie zuvor getan haben, werfen Sie einen Blick auf unseren Leitfaden zum Kopieren / Einfügen von Code in WordPress.

Bevor Sie fortfahren, empfehlen wir Ihnen, ein WordPress-Backup oder zumindest ein Backup Ihres aktuellen Themes zu erstellen. Dies hilft Ihnen, Ihre Website im Falle von Problemen einfach wiederherzustellen.

Öffnen Sie als Nächstes einen einfachen Texteditor wie Notepad und fügen Sie 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 'Dateityp' in 'Alle Dateien' ändern, um zu vermeiden, dass sie als .txt-Datei gespeichert wird:

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. Verbinden Sie sich mit Ihrer Website über einen FTP-Client (oder den Dateimanager Ihres WordPress-Hostings in cPanel) und navigieren 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 und löschen Sie in der Datei full-width.php diese Codezeile:

<?php get_sidebar(); ?>

Diese Zeile ruft die Sidebar ab und zeigt sie in Ihrem Theme an. Wenn Sie sie löschen, wird Ihre Sidebar nicht mehr angezeigt, wenn Sie die Vorlage für die volle Breite verwenden.

Sie sehen diese Zeile möglicherweise mehr als einmal in Ihrem Theme. Wenn Ihr Theme mehrere Seitenleisten hat (Footer-Widget-Bereiche werden auch als Seitenleisten bezeichnet), dann sehen Sie jede Seitenleiste einmal im Code referenziert. Entscheiden Sie, welche Seitenleisten Sie behalten möchten.

Wenn Ihr Theme keine Seitenleisten auf Seiten anzeigt, finden Sie diesen Code möglicherweise nicht in Ihrer Datei.

So sieht unser gesamter full-width.php-Code nach den Änderungen aus. Ihr Code kann je nach Theme leicht abweichen.

<?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(); ?>

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

Sie haben nun erfolgreich eine benutzerdefinierte Full-Width-Seitenvorlage für Ihr Theme erstellt und hochgeladen. Der nächste Schritt ist die Verwendung dieser Vorlage, um eine Full-Width-Seite zu erstellen.

Gehen Sie zu Ihrem WordPress-Adminbereich und bearbeiten oder erstellen Sie eine neue Seite im WordPress-Block-Editor.

Suchen Sie im Bereich „Dokument“ auf der rechten Seite nach „Seitenattribute“ und klicken Sie auf den Abwärtspfeil, um diesen Abschnitt bei Bedarf zu erweitern. Sie sollten ein Dropdown-Menü „Vorlage“ sehen, in dem Sie Ihre neue Vorlage „Vollbreite“ auswählen können:

Nachdem Sie diese Vorlage ausgewählt haben, veröffentlichen oder aktualisieren Sie die Seite.

Wenn Sie die Seite aufrufen, sehen Sie, dass die Seitenleisten verschwunden sind und Ihre Seite als einzelne Spalte erscheint. Sie ist möglicherweise noch nicht vollbreit, aber Sie sind jetzt bereit, sie anders zu gestalten.

Sie müssen das Inspect-Tool verwenden, um die CSS-Klassen zu ermitteln, die Ihr Theme verwendet, um den Inhaltsbereich zu definieren.

Danach können Sie die Breite mit CSS auf 100 % einstellen. Sie können CSS-Code hinzufügen, indem Sie zu Darstellung » Anpassen gehen und unten auf dem 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 sah es auf unserer Demoseite mit dem Twenty Sixteen-Theme aus.

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 Full-Width-Vorlage Ihres eigenen Themes zu verwenden oder eine zu erstellen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach eine Vollbreite-Seite in WordPress erstellen. Möglicherweise möchten Sie auch unseren Leitfaden zu den besten WordPress-Plugins für Ihr Unternehmen und unseren Vergleich der besten WordPress LMS-Plugins zum Erstellen und Verkaufen von Kursen ansehen.

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.