Möchten Sie eine Seite in voller Breite in WordPress erstellen?

Viel WordPress-Themes Sie erhalten bereits eine integrierte Seitenvorlage in voller Breite, die Sie verwenden können. Einige WordPress-Themes verfügen jedoch nicht über diese Funktion. hierin tutorielzeigen wir Ihnen, wie Sie auf einfache Weise eine Seite in voller Breite in WordPress erstellen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Erstellen Sie eine Seite in voller Breite in WordPress

Methode 1: Verwenden einer integrierten Breitenvorlage für Ihr WordPress-Design

Diese Methode wird empfohlen, wenn Ihr WordPress-Theme bereits eine Seitenvorlage in voller Breite enthält. Wenn Sie noch keine haben, sehen Sie sich die folgende Auswahl an und holen Sie sich eine.

Zuerst müssen Sie eine Seite bearbeiten oder eine neue erstellen, indem Sie " Seiten> Hinzufügen Eine neue Seite.

Wählen Sie im Seitenbearbeitungsfenster aus Volle Breite als Vorlage unter dem Kontrollkästchen Seitenattribute.

Auswahl der Seitenvorlage

Nach der Auswahl des Modells Volle BreiteSie müssen Ihre Seite registrieren. Sie können die Seite weiter anpassen, um weiteren Inhalt hinzuzufügen, oder auf die Vorschau-Schaltfläche klicken, um sie in Aktion zu sehen.

Seite mit voller Breite

Wenn Sie auf Ihrem Seitenbearbeitungsbildschirm keine Option für die Vorlage "Volle Breite - Volle Breite - Vorlage" haben, bedeutet dies, dass Ihr WordPress-Design diese nicht hat. 

Aber keine Sorge, wir zeigen Ihnen, wie Sie ganz einfach eine Seite in voller Breite erstellen können, ohne ein WordPress-Design zu ändern.

2-Methode: So erstellen Sie eine Seitenvorlage mit voller Breite

Diese Methode erfordert, dass Sie die Dateien des von Ihnen verwendeten WordPress-Themas bearbeiten und ein grundlegendes Verständnis von PHP, CSS und HTML haben.

Übrigens laden wir Sie auch ein, die zu konsultieren 8 beste WordPress-Plugins zum einfachen Erstellen Ihrer Layouts 

Aber bevor Sie weiter gehen, müssen Sie Erstellen Sie ein WordPress-Backup oder zumindest ein Backup Ihres aktuellen WordPress-Themas. Auf diese Weise können Sie Ihre Website problemlos wiederherstellen, wenn etwas Schlimmes passiert. 

Zuerst müssen Sie einen Texteditor wie Notepad öffnen und den folgenden Code in eine leere Datei einfügen:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Jetzt müssen Sie diese Datei speichern als " Voll width.php Auf deinem Computer.

Dieser Code legt einfach den Namen einer Dateivorlage fest und weist WordPress an, die Header-Vorlage zu extrahieren.

Dann benötigen Sie den Inhaltsteil des Codes. Stellen Sie über einen FTP-Client eine Verbindung zu Ihrer Website her (oder Dateimanager in cPanel) dann gehe zu " / Wp-content / themes / your-Thema-Ordner / ".

Dann müssen Sie die Datei mit dem Namen " page.php ". Dies ist die Standard-Seitenvorlagendatei Ihres Themas.

Alles nach der Funktion kopieren « get_header () Und füge es in eine Datei ein " Voll width.php Die du auf deinem Computer erstellt hast.

Nun müssen Sie sich den Inhalt der Datei "full-width.php" ansehen und diese Codezeile löschen:

<?php get_sidebar(); ?>

Diese Zeile nimmt einfach die Seitenleiste und zeigt sie in Ihrem WordPress-Theme an. Wenn Sie dies entfernen, wird die Seitenleiste Ihres Themas bei Verwendung der Vorlage nicht angezeigt Volle Breite.

Möglicherweise wird diese Zeile in Ihrem WordPress-Design mehrmals angezeigt. Wenn Ihr WordPress-Theme mehrere hat Seitenleisten (Widget-Bereiche in der Fußzeile werden auch als Seitenleisten bezeichnet)Sie sehen jede Seitenleiste, auf die im Code verwiesen wird, einmal. Sie müssen entscheiden, welche Seitenleisten Sie behalten möchten.

Ihre Website wird anscheinend langsam geladen Warum müssen Sie beginnen, Ihr WordPress-Blog durch Bilder zu optimieren

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

So übernimmt unser Code full-width.php die Änderungen. Ihr Code sieht je nach Thema möglicherweise etwas anders aus.

<?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 -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Dann müssen Sie die Datei herunterladen Voll width.php »Auf Ihrem WordPress-Theme-Ordner mit dem FTP-Client.

Sie haben 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 Dashboard und bearbeiten oder erstellen Sie eine neue Seite.

Suchen Sie im Seitenbearbeitungsbildschirm das Kontrollkästchen Seitenattribute und klicken Sie auf das Dropdown-Menü unter der Option "Vorlage".

Auswahl des Modells in der Ausgabe der WordPress-Seiten

Sie können Ihr Modell sehen. Fahren Sie fort, wählen Sie es aus und speichern oder aktualisieren Sie die Seite.

Jetzt können Sie Ihre Website besuchen und sehen, dass die Seitenleisten verschwunden sind und Ihre Seite als einspaltige Seite angezeigt wird. Es ist möglicherweise noch nicht voll, aber jetzt können Sie es anders streamen.

Machen Sie Ihre Website bekannt, indem Sie das entdecken 7 WordPress-Plugins zur Optimierung der SEO Ihrer Bilder

Sie müssen das Inspect-Tool verwenden, um die CSS-Klassen zu ermitteln, mit denen Ihr Thema den Inhaltsbereich definiert.

Anschließend können Sie die Breite mithilfe von CSS auf 100% einstellen. Wir haben den folgenden CSS-Code 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 aus mit Twenty Seventeen.

Präsentation des Demo-Themas WordPress

Das ist alles für dieses Tutorial. Ich hoffe, Sie können damit Seiten in voller Breite erstellen.

Die oben genannten Methoden sind kostenlos für diejenigen, die es sich leisten können und schnell und einfach Layouts in voller Breite oder voller Breite erstellen möchten.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Divi Builder

Divi Builder ist ein hochwertiger Builder von Seiten, der von sehr geschätzt wird Elegant Themes. Obwohl es im Allgemeinen als Teil des Divi WordPress-Themas verwendet wird, ist Divi Builder auch ein eigenständiges Plugin, das Sie für andere WordPress-Themes verwenden können.

Divi e1544278044306

Mit Divi Builder können Sie Ihre Inhalte über eine visuelle Oberfläche im Front-End sowie eine Oberfläche im Back-End bearbeiten, obwohl die meisten Benutzer die erste Oberfläche bevorzugen.

Grundsätzlich wird anstelle der Seitenleisten alles in Popups und schwebenden Schaltflächen angezeigt. Sie erhalten Zugriff auf 316 vorgefertigte Vorlagen, die auf 40 verschiedene Präsentationspakete verteilt sind, sowie die Möglichkeit, Ihre eigenen Designs als Vorlagen zu speichern.

Wir schlagen vor, Sie zu entdecken Wie erstelle ich ein professionelles Blog?

Eine der Eigenschaften von Divi war schon immer die Kontrolle über die Stile, die er Ihnen gibt. Auf drei verschiedenen Registerkarten können Sie verschiedene Einstellungen konfigurieren, einschließlich ansprechender Steuerelemente, anpassbarer Abstände und mehr.

Sie können sogar benutzerdefiniertes CSS hinzufügen, da der CSS-Editor eine grundlegende Validierung und automatische Vervollständigung umfasst. Eine der Kritikpunkte von Divi Builder war immer, dass es sich darauf stützt Kurzwahlnummern. Das bedeutet, dass, wenn Sie es eines Tages deaktivieren, eine Reihe von Shortcodes in Ihren Inhalten verbleiben. Obwohl dies ein wenig deprimierend ist, ist es jetzt weniger problematisch, dass Plugins wie Shortcode Cleaner existieren.

Herunterladen | Demo | Web-Hosting

2. Themify Builder

Themify Builder ist nicht überraschend das Angebot des Themify-Teams. Es integriert es in mehrere ihrer WordPress-Themes, um Kunden einfache Anpassungsoptionen zu bieten. Sie können es aber auch als eigenständiges Plugin kaufen und mit jedem WordPress-Theme verwenden.

Themify Builder-Animationsbildschirm e1544277050530

Wie Divi Builder und WPBakery Page Builder können Sie mit Themify Builder Layouts im Front-End oder Back-End erstellen. Eine weitere gute Sache ist, dass Sie mit diesem Plugin Ihre responsiven Breakpoints anpassen können (aber nur auf der gesamten Website-Ebene).

Entdecken Sie So installieren und konfigurieren Sie WooCommerce befolgen für Erstellen Sie einen Online-Shop und verkaufen Sie Ihre Produkte einfach im Internet 

Eine coole Sache an Themify Builder ist, dass Sie immer noch den Standard-WordPress-Editor verwenden können, während andere Seitenersteller Sie dazu zwingen, die WordPress-Oberfläche zu verwenden. Seitenersteller für alles.

Herunterladen | Demo | Web-Hosting

3 Elementor

Das Elementor WordPress-Plugin wurde ursprünglich im Jahr 2016 gestartet und ist einer der jüngsten Seitenersteller auf dieser Liste. Trotz des späten Starts hat Elementor schnell über 1 aktive Installationen auf WordPress.org durchgeführt und ist damit einer der beliebtesten WordPress-Seitenersteller.

Elementor Pro e1544277036401

Was seinen Ruf ausmacht, ist die flüssige visuelle Oberfläche, die verschiedenen Stiloptionen und andere leistungsstarke Funktionen wie die vollständige Erstellung von WordPress-Themen.

Die Benutzeroberfläche ist in zwei Hauptteile unterteilt, mit einer dritten Zone für bestimmte Parameter. Die kostenlose Version von Elementor bietet kostenlose 28-Widgets. Die Pro-Version bringt über 30 weitere Widgets, insgesamt 58-Widgets in der Pro-Version. Die kostenlose Version enthält ungefähr 40-Vorlagen, während die Pro-Version Hunderte von zusätzlichen Vorlagen enthält.

 Herunterladen | Demo | Web-Hosting

Andere empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Hier ist ! Das war's für dieses Tutorial. Wenn Sie ein WordPress-Thema haben, das keine Seite mit voller Breite als Vorlage bietet, hoffen wir, dass dieses Tutorial Ihnen bei der Behebung dieses Mangels geholfen hat. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

... 

Pin It auf Pinterest