So erstellen Sie eine Website mit ganzseitigem Scrolling in Elementor

Auch das Erstellen von Vollbild-Bildlaufseiten in Elementor ist sehr einfach und bequem. Um dies zu erreichen, werden wir ein Plugin namens fullPage.js verwenden. Es gibt andere Methoden, um diesen Effekt zu erzielen, wie zum Beispiel CSS-Scrolling oder Elementor- Addons. FullPage.js bietet jedoch die beste Lösung für Kompatibilität, Reaktionsfähigkeit und Benutzerfreundlichkeit.

Erstellen von Websites mit Vollbild-Scrolling in Elementor

Jetzt demonstrieren wir den Prozess der Erstellung einer ganzseitigen Scroll-Website in Elementor.

Schritt 1: Laden von fullPage.js

Um die Plugin-Funktionen von fullPage.js nutzen zu können, müssen wir es zuerst laden.

Der folgende Code muss zum Header unserer Website hinzugefügt werden, damit er korrekt geladen wird:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

Wir benötigen ein Plugin, um diesen Code auszuführen, da Elementor derzeit keine Möglichkeit bietet, Code zum Site-Header hinzuzufügen. Obwohl es mehrere Plugins gibt, die unserem Header Code hinzufügen können, habe ich festgestellt, dass dieses am einfachsten zu verwenden ist.

Wählen Sie nach der Installation des Plugins im WordPress-Dashboard unter „Benutzerdefiniertes CSS und JS“ die Option „Benutzerdefiniertes HTML hinzufügen“ aus. Fügen Sie nun den oben genannten Code ein und achten Sie darauf, ihn sowohl im Header als auch im Frontend zu platzieren.

Der nächste Schritt besteht darin, einige einzigartige JS einzubinden. Um fullPage.js zu initialisieren und seine Optionen und Prozeduren festzulegen, müssen wir jQuery verwenden. Hier sind einige grundlegende Entscheidungen, die für alle Websites mit vertikalem Scrollen gelten.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Stellen Sie sicher, dass dieser Code in die Fußzeile des Frontends eingefügt wird.

In dieser Phase legen wir auch unsere FullPage-Einstellungen fest. Das vorherige Beispiel enthält Navigationspunkte, die auf der rechten Seite unserer Scroll-Site angezeigt werden, sowie das absolute Minimum an Optionen, die für eine ganzseitige Scroll-Site erforderlich sind. Wenn wir unser Design so ändern, dass es responsiv ist, werde ich weitere Alternativen durchgehen. Weitere Informationen zu Ihren Optionen finden Sie in der offiziellen Dokumentation.

Schritt 2: Elementor-Seite einrichten

Das folgende Markup wird von fullPage.js für unsere Scrolling-Seite benötigt.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

Die einzelnen Divs unserer Scroll-Seite mit dem Klassenabschnitt sind jeweils Vollbildabschnitte. Die Verwendung von Vorlagen ist der einfachste Ansatz, damit dies mit Elementor funktioniert.

Lassen Sie uns zunächst unsere eigentliche Seite konfigurieren. Erstellen Sie in Pages eine neue Seite, geben Sie ihr einen passenden Titel und eine URL und bearbeiten Sie sie dann mit Elementor.

Erstellen Sie jetzt einen Abschnitt mit einer Spalte in Elementor. Wir möchten dieser Spalte ein HTML-Widget hinzufügen. Dieses Widget, das Shortcodes für jede einzelne Folie enthält, dient als Rahmen unserer Seite. Wir möchten den folgenden Code hinzufügen:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Stellen Sie sicher, dass der Abschnitt die volle Breite hat. Da wir außerdem den Abstand, den Elementor standardmäßig den Spalten hinzufügt, nicht möchten, setzen Sie den Abstand des Abschnitts und der Spalte auf 0.

Nachdem wir in den späteren Schritten die eigentlichen Folien erstellt haben, ändern wir die Elementor-Vorlagen-ID auf den korrekten Wert.

Schritt 3: Abschnitte einrichten

Der letzte Schritt besteht darin, jeden Abschnitt separat zu erstellen und als Vorlage zu speichern.

Sie benötigen Elementor Pro , um Shortcodes verwenden zu können. Es ist an der Zeit, es zu kaufen, falls Sie noch nicht darüber nachgedacht haben. Sie verfügen über alle Tools, die Sie zum Erstellen einer Website mit Elementor benötigen. Sie müssen nicht immer ein neues Theme kaufen!

Erstellen Sie einen neuen Abschnitt, indem Sie auf „Vorlagen – Neu hinzufügen“ gehen.

Die erste Folie unserer ganzseitigen Scroll-Site wird nun erstellt. Erstellen Sie einen neuen Abschnitt in Elementor und stellen Sie seine Höhe auf „An Bildschirm anpassen“ ein. Nachdem Sie Ihr Material hinzugefügt haben, können Sie es gestalten. Stellen Sie einfach sicher, dass jede Vorlage höchstens einen Teil enthält. Um ein einzigartiges Layout zu erstellen, können Sie beliebig viele Spalten und Innenspalten verwenden.

Speichern Sie Ihre Folie, wenn Sie fertig sind, und kehren Sie dann zu Ihren Elementor-Vorlagen zurück. Die von Ihnen kürzlich entwickelte Vorlage sollte nun in der Liste erscheinen. Nehmen Sie die ID dieser Vorlage und fügen Sie sie durch Kopieren in die Seite ein, die wir in Schritt 2 erstellt haben.

Wiederholen Sie diesen Vorgang nun für jede Folie, die Sie haben. Jede Vorlage muss einen Bereich haben, dessen Höhe an den Bildschirm angepasst ist.

Zusammenfassung

Das ist dann alles! Dies ist die einfachste Möglichkeit, Vollbild-Bildlaufseiten mit fullPage.js in Elementor zu erstellen. Ich hoffe, dass dies Ihnen dabei helfen kann, eine einfache und minimalistische Website für Ihre zukünftigen Unternehmungen zu entwerfen.