So machen Sie eine Seite in WordPress vollbreit (5 einfache Wege)" 

Eine vollbreite Seite in WordPress dehnt Ihre Inhalte über das gesamte Browserfenster aus, ohne dass eine Seitenleiste oder ein begrenzter Container das Layout einschränkt. Es ist eine der häufigsten Designänderungen, die Leute vornehmen möchten, und die Einrichtung ist normalerweise schneller als erwartet.

Ich habe gesehen, wie viele Anfänger damit zu kämpfen hatten, da die meisten WordPress-Themes standardmäßig eine Seitenleiste hinzufügen und die Inhaltsbreite einschränken. Am Ende haben Sie eine Seite, die sich eingegrenzt anfühlt, auch wenn Sie überhaupt keine Seitenleiste wünschen.

Die gute Nachricht ist, dass Sie mehrere Möglichkeiten haben, dies zu beheben. In dieser Anleitung führe ich Sie durch fünf Methoden, um eine Seite in WordPress vollbreit zu machen, von der einfachsten (keine Plugins, kein Code) bis zur fortschrittlichsten. Ich werde auch behandeln, was zu tun ist, wenn Ihr vollbreites Layout nicht wie gewünscht funktioniert.

Volle Designkontrolle ohne Code gewünscht? SeedProd ermöglicht es Ihnen, benutzerdefinierte vollbreite Seiten mit einem Drag-and-Drop-Editor zu erstellen. Jede Seite ist standardmäßig vollbreit. Springen Sie zur SeedProd-Methode →

Verwenden Sie die integrierte Vollbreit-Vorlage Ihres Themes

Die meisten WordPress-Themes enthalten bereits eine Vollbreit-Seitenvorlage. Sie können sie im Seiten-Editor wechseln, ohne ein Plugin zu installieren oder Code zu schreiben.

So überprüfen Sie es.

Schritt 1: Öffnen Sie die Seite, die Sie vollbreit machen möchten, im WordPress-Editor.

Schritt 2: Suchen Sie in der rechten Seitenleiste nach dem Abschnitt Vorlage. Je nach Theme kann dies unter Seitenattribute oder als eigenständiges Dropdown-Menü Vorlage erscheinen.

Schritt 3: Klicken Sie auf das Dropdown-Menü und suchen Sie nach einer Vollbreit-Option. Der Name variiert je nach Theme. Möglicherweise sehen Sie „Vollbreit“, „Keine Seitenleiste“, „Leer“ oder etwas Ähnliches.

Schritt 4: Wählen Sie die Vollbreit-Vorlage aus und klicken Sie dann auf Aktualisieren oder Veröffentlichen.

Schritt 5: Vorschau der Seite, um zu bestätigen, dass die Seitenleiste verschwunden ist und sich der Inhalt über die gesamte Seite erstreckt.

Das war's. Wenn Ihr Theme eine Vollbreit-Vorlage hat, ist dies der schnellste Weg, sie zu nutzen.

Wenn Sie keine Vollbreit-Option im Dropdown-Menü sehen, enthält Ihr Theme möglicherweise keine. Fahren Sie mit der nächsten Methode fort.

Einzelne Blöcke im Block-Editor vollbreit machen

Der WordPress-Block-Editor ermöglicht es Ihnen, einzelne Blöcke auf Vollbreit-Ausrichtung einzustellen, sodass sie sich über den gesamten Bildschirm erstrecken, ohne Ihre Seitenvorlage zu ändern. Dies ist in WordPress integriert, sodass Sie kein Plugin benötigen.

Dies funktioniert mit Gruppenblöcken, Cover-Blöcken, Bildblöcken und den meisten Layoutblöcken.

Schritt 1: Öffnen Sie Ihre Seite im WordPress-Editor und wählen Sie den Block aus, den Sie vollbreit machen möchten.

Schritt 2: Klicken Sie in der Block-Symbolleiste am oberen Rand des Blocks auf die Schaltfläche Ausrichtung ändern (sie sieht aus wie eine Reihe von horizontalen Linien).

Schritt 3: Wählen Sie im Dropdown-Menü Volle Breite aus.

Der Block wird bis zu den Rändern des Browserfensters gestreckt. WordPress fügt im Hintergrund eine CSS-Klasse namens .alignfull hinzu, um dies zu erreichen.

Tipp: Wenn Sie möchten, dass ein ganzer Abschnitt Ihrer Seite die volle Breite einnimmt, fügen Sie zuerst einen Gruppierungsblock hinzu. Setzen Sie den Gruppierungsblock auf die Ausrichtung „Volle Breite“ und fügen Sie dann Ihre Inhaltsblöcke darin ein. Der Gruppierungsblock fungiert als Container in voller Breite für alles, was darin verschachtelt ist.

Wenn die Option „Volle Breite“ in der Symbolleiste nicht angezeigt wird, unterstützt Ihr Theme sie möglicherweise nicht. Wie Sie das beheben, erkläre ich im Abschnitt zur Fehlerbehebung unten.

Layouts in voller Breite in Block-Themes (Full Site Editing)

Wenn Sie ein neueres Block-Theme wie Twenty Twenty-Five verwenden, funktionieren Layouts in voller Breite anders. Block-Themes verwenden den Website-Editor und eine Konfigurationsdatei namens theme.json, um die Layoutbreiten zu steuern.

Um die Seitenbreite in einem Block-Theme anzupassen, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung → Editor. Von dort aus können Sie Ihre Seitenvorlagen direkt bearbeiten und den Inhaltsbereich auf Vorlagenebene auf volle Breite einstellen.

Die Datei theme.json steuert zwei Schlüsselwerte: contentSize (die Standardbreite für Ihre Inhalte) und wideSize (die Breite für Blöcke mit breiter Ausrichtung). Die Anpassung dieser Werte ändert, wie breit Ihre Inhalte auf der gesamten Website gestreckt werden.

Dies ist der flexibelste Ansatz, wenn Sie ein modernes Block-Theme verwenden, da Sie die Layoutbreiten global und nicht Seite für Seite steuern können.

Fügen Sie eine Vollbreit-Vorlage mit einem kostenlosen Plugin hinzu

Wenn Ihr Theme keine Vorlage für volle Breite enthält, fügt das kostenlose Plugin Fullwidth Templates jeder WordPress-Vorlage eine hinzu. Kein Code erforderlich.

Schritt 1: Gehen Sie in Ihrem WordPress-Dashboard zu Plugins → Installieren und suchen Sie nach „Fullwidth Templates“. Wenn Sie Hilfe bei diesem Schritt benötigen, finden Sie hier eine Anleitung, wie man ein WordPress-Plugin installiert.

Schritt 2: Installieren und aktivieren Sie das Plugin.

Schritt 3: Bearbeiten Sie eine beliebige Seite und öffnen Sie das Dropdown-Menü Vorlage in der rechten Seitenleiste.

Sie sehen drei neue Vorlagenoptionen:

Schritt 4: Wählen Sie die Vorlage, die Ihren Anforderungen entspricht. Für die meisten Landingpages ist „FW Volle Breite“ die richtige Wahl. Für eine komplett leere Leinwand verwenden Sie „FW Volle Breite ohne Kopf- und Fußzeile“.

Schritt 5: Klicken Sie auf Aktualisieren oder Veröffentlichen und sehen Sie sich Ihre Seite in der Vorschau an.

Das Plugin funktioniert mit jedem Theme und ist daher eine zuverlässige Option, wenn Ihr Theme nicht von sich aus eine Vorlage für volle Breite bietet.

Erstellen Sie eine benutzerdefinierte Vollbreit-Seite mit SeedProd

Wenn Sie die volle Designkontrolle über eine Landingpage, eine „Coming Soon“-Seite, eine Verkaufsseite oder jedes benutzerdefinierte Layout benötigen, bietet Ihnen ein Seitenersteller mehr Flexibilität als der reine Vorlagenwechsel.

Ich verwende SeedProd regelmäßig dafür. Es funktioniert neben Ihrem vorhandenen Theme, sodass Sie nichts an Ihrer aktuellen Einrichtung ändern müssen. Jede Seite, die Sie in SeedProd erstellen, ist standardmäßig im Vollbildmodus.

Hier erfahren Sie, wie Sie damit eine Vollbildseite erstellen.

Schritt 1: Installieren und aktivieren Sie SeedProd und gehen Sie dann in Ihrem Dashboard zu SeedProd → Landing Pages. Wenn Sie Hilfe benötigen, finden Sie hier eine Anleitung zur Installation von SeedProd.

Schritt 2: Klicken Sie auf Neue Landingpage hinzufügen.

Wählen Sie eine Vorlage. SeedProd enthält Vorlagen für Landingpages, Webinar-Registrierungsseiten, Verkaufsseiten und mehr. Sie können auch mit einer leeren Seite beginnen.

Schritt 3: Geben Sie Ihren Seitennamen und Ihre URL ein und klicken Sie dann auf Speichern und Seite bearbeiten starten.

Schritt 4: Der Drag-and-Drop-Editor wird mit Ihrem Seitenlayout geöffnet. Jeder Abschnitt erstreckt sich standardmäßig über die gesamte Breite.

Wenn Sie die Breite eines Abschnitts anpassen müssen, klicken Sie auf den Abschnitt und ändern Sie Abschnittsbreite im Einstellungsbereich auf „Vollbild“.

So sieht eine Vollbildseite nach dieser Änderung aus:

Sie können einzelne Zeilen auch auf Vollbild einstellen, indem Sie auf eine Zeile klicken und deren Breite auf die gleiche Weise anpassen.

Schritt 5: Fügen Sie Ihre Inhalte hinzu, indem Sie Blöcke ziehen: Überschriften, Bilder, Formulare, Schaltflächen, Preistabellen oder jedes andere benötigte Element.

Schritt 6: Wenn Sie mit dem Layout zufrieden sind, klicken Sie auf Speichern und dann auf Veröffentlichen.

SeedProd ist eine gute Wahl, wenn Sie eine Seite benötigen, die sich vom Rest Ihrer Website abhebt, wie z. B. eine fokussierte Landingpage oder eine „Coming Soon“-Seite. Sie können es auch verwenden, um ein vollständig benutzerdefiniertes WordPress-Theme mit integrierten Vollbildlayouts zu erstellen. Für Seiten, bei denen Ihre normale Theme-Vorlage gut funktioniert, sind die früheren Methoden in dieser Anleitung schneller.

Wenn Sie Vollbildseiten erstellen möchten, ohne Code zu schreiben, beginnen Sie noch heute mit SeedProd.

Erstellen Sie manuell eine Vollbreit-Seitenvorlage

Wenn Sie mit PHP und CSS vertraut sind, können Sie eine benutzerdefinierte Vollbildseitenvorlage erstellen, indem Sie Ihre Theme-Dateien direkt bearbeiten. Diese Methode erfordert keine Plugins.

Wichtig: Sichern Sie Ihre Website, bevor Sie Theme-Dateien bearbeiten. Nehmen Sie diese Änderungen außerdem in einem Child-Theme vor, damit ein Theme-Update Ihre Arbeit nicht überschreibt.

Schritt 1: Verbinden Sie sich mit Ihrer Website über einen FTP-Client oder den Dateimanager Ihres Webhosters. Navigieren Sie zu /wp-content/themes/ihr-theme-ordner/.

Schritt 2: Erstellen Sie eine neue Datei namens full-width.php. Fügen Sie am Anfang der Datei diesen Vorlagenkopf hinzu, damit WordPress ihn erkennt:

<?php
/*
 * Template Name: Full Width
 */

get_header();
?>

Schritt 3: Öffnen Sie die Datei page.php Ihres Themes und kopieren Sie deren Inhalt in Ihre neue Datei full-width.php unterhalb des Header-Codes. Suchen und entfernen Sie dann die Zeile, die die Sidebar aufruft:

<?php get_sidebar(); ?>

Löschen Sie diese Zeile. Dadurch wird die Sidebar aus Ihrer Vorlage entfernt.

Schritt 4: Speichern Sie die Datei und laden Sie sie in Ihren Theme-Ordner hoch.

Schritt 5: Gehen Sie zurück zu Ihrem WordPress-Dashboard. Bearbeiten Sie eine beliebige Seite, öffnen Sie das Dropdown-Menü Vorlage, und Sie sehen Ihre neue Option „Breitformat“.

Schritt 6: Wählen Sie die Vorlage aus und fügen Sie dann benutzerdefiniertes CSS hinzu, um den Inhaltsbereich auf die volle Breite zu erweitern. Gehen Sie zu Darstellung → Anpassen → Zusätzliches CSS und fügen Sie hinzu:

.page-template-full-width .site-content {
    width: 100%;
    max-width: none;
}

Die genauen CSS-Klassennamen hängen von Ihrem Theme ab. Verwenden Sie das Inspektionswerkzeug Ihres Browsers, um die richtige Container-Klasse zu finden, falls .site-content nicht funktioniert.

Schritt 7: Aktualisieren Sie die Seite und zeigen Sie sie in der Vorschau an.

Dieser Ansatz gibt Ihnen die volle Kontrolle, erfordert jedoch die Pflege der Vorlagendatei in einem Child-Theme. Wenn Sie sich nicht wohl dabei fühlen, Code zu bearbeiten, ist eine der früheren Methoden die sicherere Wahl.

Wann Sie ein Vollbreit-Layout verwenden sollten (und wann nicht)

Breitformat-Layouts sind nicht für jede Seite die richtige Wahl. Hier erfahren Sie, wann sie gut funktionieren und wann ein eingeschränktes Layout besser geeignet ist.

Der Grund dafür ist die Lesbarkeit. Lange Textzeilen, die sich über einen breiten Bildschirm erstrecken, sind schwerer zu lesen als Zeilen, die durch schmalere Ränder begrenzt sind. Für Inhalte, die hauptsächlich aus Text bestehen, sorgt ein Box-Layout für angenehme Zeilenlängen.

Sie können beides auf derselben Website mischen. Ich verwende Breitformat-Layouts für wichtige Seiten wie die Homepage und Landingpages und eine Standardvorlage mit einer Sidebar für Blogbeiträge.

Breitformat-Seite funktioniert nicht? Hier erfahren Sie, wie Sie das beheben

Wenn Sie eine Seite auf Breitformat einstellen, sie aber immer noch boxförmig aussieht oder eine Sidebar anzeigt, sind hier die häufigsten Ursachen und wie Sie jede einzelne beheben können.

Ihr Theme unterstützt keine Breitformat-Ausrichtung

Wenn die Option „Breitformat“-Ausrichtung nicht in der Werkzeugleiste des Block-Editors angezeigt wird, hat Ihr Theme diese nicht deklariert.

Das Theme benötigt eine einzelne Codezeile in seiner functions.php-Datei:

add_theme_support( 'align-wide' );

Überprüfen Sie zuerst die Dokumentation Ihres Themes, um zu sehen, ob es eine Einstellung dafür gibt. Wenn nicht, und Sie sind mit der Codebearbeitung vertraut, fügen Sie diese Zeile zur functions.php-Datei Ihres Child-Themes hinzu. Dies aktiviert sowohl die Optionen „Breit“ als auch „Breitformat“-Ausrichtung im Block-Editor.

Ein Plugin überschreibt Ihr Layout

Einige Plugins fügen Sidebars, Widgets oder Layoutbeschränkungen ein, die Ihre Breitformat-Vorlage überschreiben. Ich habe dies auf vielen Websites gesehen, und es ist nicht immer offensichtlich, welches Plugin die Ursache ist.

Um den Konflikt zu finden, deaktiviere deine Plugins nacheinander und überprüfe deine Seite nach jedem einzelnen. Wenn das Vollbildlayout wieder erscheint, hast du den Übeltäter gefunden.

Wenn du keine Live-Besucher beeinträchtigen möchtest, während du testest, installiere das Plugin Health Check & Troubleshooting. Sein Fehlerbehebungsmodus ermöglicht es dir, Plugins für dich selbst zu deaktivieren, während die Website für alle anderen normal bleibt.

Seitenleisten-Plugins und Widget-Plugins sind die häufigsten Übeltäter.

Einstellungen für die Inhaltsbreite schränken dein Layout ein

WordPress und einige Themes legen eine maximale Inhaltsbreite fest, die verhindert, dass Blöcke die volle Breite einnehmen, selbst wenn du die Ausrichtung auf „Volle Breite“ wählst.

Klicke im Block-Editor auf das Einstellungen-Symbol (Zahnradsymbol) oben rechts und suche nach einem Abschnitt Layout. Wenn dort ein Wert für die Inhaltsbreite festgelegt ist, kann dieser deine Blöcke einschränken.

In Block-Themes wird dies durch die Werte contentSize und wideSize in der Datei theme.json gesteuert. Wenn du diese Werte erhöhst oder entfernst, können Vollbildblöcke bis zum Browserrand reichen.

CSS schränkt deinen Inhaltsbereich ein

Die Stylesheet-Datei deines Themes kann eine max-width für den Inhaltscontainer festlegen, die verhindert, dass er sich ausdehnt, selbst wenn eine Vollbildvorlage angewendet wird.

Um dies zu überprüfen, klicke mit der rechten Maustaste auf deinen Seiteninhalt und wähle Untersuchen (oder drücke F12). Sieh dir das Element des Inhalts-Wrappers an, oft ein div mit einer Klasse wie .site-content, .entry-content oder .content-area.

Wenn du eine max-width- oder width-Eigenschaft siehst, die den Container einschränkt, kannst du sie mit benutzerdefiniertem CSS unter Design → Anpassen → Zusätzliches CSS überschreiben:

.your-content-class {
    width: 100%;
    max-width: none;
}

Ersetze .your-content-class durch den tatsächlichen Klassennamen deines Themes.

FAQs zum Erstellen einer vollbreiten Seite in WordPress

Beginnen Sie mit dem Erstellen von Vollbreiten-Seiten

Eine Seite in WordPress auf volle Breite zu bringen, dauert weniger als eine Minute, wenn Sie wissen, wo Sie suchen müssen. Beginnen Sie mit der integrierten Vorlage Ihres Themes. Wenn Sie mehr Kontrolle über einzelne Abschnitte benötigen, erledigt die Ausrichtung „Volle Breite“ des Block-Editors dies ohne Plugins.

Wenn Sie die vollständige Designkontrolle über eine Landingpage oder ein benutzerdefiniertes Layout benötigen, macht SeedProd es einfach, Vollbreiten-Seiten ohne Code zu erstellen.

Vielleicht möchten Sie auch diese verwandten Anleitungen lesen:

• So ändern Sie Schriftarten in WordPress-Themes (5 Lösungen)
• So fügen Sie Font Awesome einfach zu Ihrem WordPress-Theme hinzu
• So ändern Sie das WordPress-Theme, ohne Inhalte zu verlieren
• So passen Sie Header in WordPress an (4 einfache Wege)
• So bearbeiten Sie Ihre WordPress-Startseite (einfache Methode)

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.

Stacey Corrin Content Marketing Specialist

Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

See Full Bio

WordPress SEO Content Marketing Digital Marketing SaaS Copywriting Web Design