Webseiten zu scrollen kann je nach der Art des Laptops oft Probleme machen und ist manchmal unpräzise und unpraktisch. Vor allem bei Laptops mit Trackpad macht es oft noch mehr Sinn, lediglich zu den Pfeiltasten des Keyboards zu wechseln, anstatt das Trackpad zu benutzen. Haben Sie das auch schon einmal erlebt? Wenn ja, müssen Sie sich jetzt keine Sorgen um Ihre Website machen. Die Lösung, die wir für Sie haben, ist eine ganzseitige Scroll-Website.

Die ganzseitige Scroll-Funktion  macht es für jeden einfach eine Webseite zu scrollen. Genau wie beim Lesen eines Buches müssen Sie nur einmal scrollen, um zur nächsten Seite zu gelangen. Wie praktisch, oder? Wenn Sie also hier sind, um zu lesen, wie Sie Ihre Website hochwertig, einfach zu navigieren und beeindruckend für Ihr Publikum machen können, dann sind Sie an der richtigen Stelle.

Erstellen eines Divi Child Themes

Das Erste, was wir tun müssen, ist, ein Divi Child Theme zu erstellen. Der Grund warum es ein Divi Child Theme sein muss liegt darin, dass wir für diese Art von Seite ein neues Seiten-Template erstellen müssen, das als Grundlage das Divi Seiten-Template hat. Das Erstellen eines Divi Child Themes sorgt ebenfalls dazu, dass bei einem Update der individuelle Code für das fullPage.js nicht überschrieben wird. 

Wenn Sie lernen möchten, wie man ein Divi Child Theme erstellt, lesen Sie bitte hier. 

Fullpage js mit Divi verbinden

Sobald Sie Ihr Divi Child Theme erstellt haben, müssen Sie das fullPage.js integrieren.

Hier ist, was Sie tun müssen:

  1. Gehen Sie zu fullpage.js und laden Sie die Bibliothek herunter.
  2. Klicken Sie auf Herunterladen und entpacken Sie die heruntergeladene Datei.

3. Suchen Sie im extrahierten Ordner nach dem Ordner „dist“.

4. Gehen Sie zurück zu Ihrem Divi Child Theme und erstellen Sie ein Unterverzeichnis namens  „fullpage“.

5. Erstellen Sie im Unterverzeichnis „fullpage“ den Ordner „dist“ und fügen Sie dort alle Dateien für das fullpage ein.

Glückwunsch! Sie haben gerade die fullpage.js Bibliothek in Ihrem Divi Child Theme installiert. Nun geht es zum nächsten Schritt.

Erstellung benutzerdefinierter Seitenvorlagen

Nun müssen wir eine benutzerdefinierte Seitenvorlage mit der Standard-Divi-Seitenvorlage erstellen. Nur so lässt sich der Divi Builder auch weiterhin zusammen mit dem Fullpage.js benutzen. Führen Sie dazu die folgenden Schritte aus.

  1. Kopieren Sie die page.php, Divis Standardseitenvorlage, in Ihr Divi Child Theme.
  2. Benennen Sie die Seite „page.php“ in „page_template-fullpage.php“ um.

Bearbeiten Sie nun die Seite „page.php“, indem Sie diese mit einem Text-Editor Ihrer Wahl öffnen.

  1. Fügen Sie folgendes Tag unten nach dem PHP-Eröffnungstag ein (<?php).
  /*
 Template Name: FullPage Scroll
 */

4. So sollte es aussehen.

5. Suchen Sie nach der Zeile, die Folgendes enthält:

„<div class=“entry-content“>“

Fügen Sie dann die Zeile darunter ein.

„<div id=“fullpage“ class=“fullpage“>“

Es sollte so aussehen:

6. Suchen Sie das schließende Tag von entry-content wie folgt:

</div><!– .entry-content –>

Und fügen Sie diese Zeile unten ein

</div><!– .fullpage –>

Durch die oben genannten Schritte haben wir jetzt einen Abschnitt „Fullpage.js“ in den Abschnitt  „Entry-Content“ eingebettet.

JavaScript-Datei als fullpage.js

Lassen Sie uns nun das „Fullpage.js“ in das Theme einbinden

  1. Gehen Sie zu Ihrem Divi Child Theme und erstellen Sie im Ordner „fullpage“eine neue JavaScript-Datei mit dem Namen ‚fullpage-config.js‘

2. Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre fullpage-config.js ein.

 (function($){
 $(document).ready(function() {
 if ($("body").hasClass("page-template-page_template-fullpage")) {
 $('#fullpage').fullpage({
 navigation: true,
 navigationPosition: 'right'
 });
 }
 });
})(jQuery);

3. Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre functions.php im Divi Child Theme ein.

function enqueue_fullpage_files() {
 wp_enqueue_style( 'fullpage-css', get_stylesheet_directory_uri() . '/fullpage/jquery.fullpage.min.css' );
 wp_enqueue_script( 'fullpage', get_stylesheet_directory_uri() . '/fullpage/jquery.fullpage.min.js', array( 'jquery' ), '1.0.0', true );
 wp_enqueue_script( 'fullpage-config', get_stylesheet_directory_uri() . '/fullpage/fullpage-config.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_fullpage_files' );

4. Ebenfalls müssen wir ein paar CSS Anpassungen vornehmen damit das Fullpage richtig mit Divi zusammen funktioniert.

/*
Theme Name: Divi Child
Theme URI:
Description: Studenten Webdesign
Author: Pascal Cabart
Author URI: https://studentenwebdesign.de
Template: Divi
Version: 1.0.0
*/
/* FullPage */


/* FullPage */
.page-template-page_template-fullpage.et_fixed_nav.et_show_nav #page-container {
position: relative;
}

.page-template-page_template-fullpage #et-main-area {
padding-top: 0;
}

.page-template-page_template-fullpage #fullpage {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.page-template-page_template-fullpage .et_pb_section.section {
height: 100vh;
padding-top: 0 !important;
}

/* Adjust Section Sizes for Header and Footer */

.page-template-page_template-fullpage .fp-tableCell {
padding-top: 136px;
padding-bottom: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

@media all and (max-width: 981px) {

.page-template-page_template-fullpage .fp-tableCell {
padding-top: 80px;
padding-bottom: 70px;
}

.page-template-page_template-fullpage .et_pb_section {
padding-top: 0 !important;
}

/* Footer Adjustments */

.page-template-page_template-fullpage #main-footer {
position: fixed;
width: 100%;
bottom: 0;
}

@media all and (max-width: 980px) {

.page-template-page_template-fullpage #footer-info,
.page-template-page_template-fullpage 
.et-social-icons {
display: none;
}
 #footer-bottom {
 padding: 10px 0;
}
}
/* Fix for Chrome-specific misalignment problem */
.page-template-page_template-fullpage article {
 height: -webkit-fill-available;
}

fullPage.js Divi Seiten Template

Sie haben jetzt ein Divi Child Theme, das installierte Fullpage.js, eine benutzerdefinierte Seitenvorlage und ein JavaScript der fullPage.js Konfiguration.  Nun können Sie mit dem Divi Builder ganz normal Ihre fullPage.js Seite erstellen.

  1. Beginnen Sie mit dem Erstellen einer neuen Seite. Gehen Sie zu Ihrem Dashboard, gehen Sie zur Registerkarte „Seiten“ und klicken Sie dann auf Neu hinzufügen.

Stellen Sie sicher, dass Sie in den Einstellungen den „FullPage Scroll“  als Seitenvorlage auswählen. In meinem Fall habe ich es „Blank Page Full Page Scroll“ genannt.

3. Fügen Sie eine neue Sektion hinzu und weisen Sie dieser die CSS Klasse „section“ zu. Klicken Sie dazu auf das Moduleinstellungssymbol > Erweitert und fügen Sie „section“ im Feld CSS-Klasse hinzu.
4. Jede dieser Sektion wird eine volle Seite einnehmen, das heißt als erstes Beispiel können Sie 3 Solcher Sektionen erstellen, die Seite dann speichern und das Scrollen dann direkt in Live ausprobieren. Eine Beispielseite dafür werde ich hier bald veröffentlichen.

Das ganzseitige Scrollen ist eine beeindruckende Funktion, die Ihre Website haben kann. Obwohl wir versuchen, unser Wissen weiterzugeben, kann es aufgrund der Einzigartigkeit unserer eigenen Websites zu Problemen kommen. Wenn dieser Blog jedoch für Sie funktioniert, hinterlassen Sie einen Kommentar, um zu sagen, wie es für Sie aussieht. Wenn es mir im Kommentar nicht davon erzählt und wir sehen, wie wir es für Sie ausarbeiten können.