La création de pages défilantes en plein écran dans Elementor est également très simple et pratique. Pour y parvenir, nous allons utiliser un plugin appelé fullPage.js . Il existe d'autres méthodes pour obtenir cet effet, telles que le défilement CSS ou Elementor Addons. Cependant, fullPage.js fournit la meilleure solution pour la compatibilité, la réactivité et la convivialité.

Création de sites Web défilants en plein écran dans Elementor

Nous allons maintenant démontrer le processus de création d'un site Web de défilement d'une page entière dans Elementor.

Étape1: Chargement de fullPage.js

Pour utiliser les fonctions du plugin fullPage.js , nous devons d'abord le charger.

Le code suivant doit être ajouté à l'en-tête de notre site Web pour qu'il se charge correctement:

<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>

Nous avons besoin d'un plugin pour exécuter ce code car Elementor n'offre actuellement aucun moyen d'ajouter du code à l'en-tête du site. Bien qu'il existe plusieurs plugins qui peuvent ajouter du code à notre en-tête, j'ai trouvé que celui-ci est le plus facile à utiliser.

Sélectionnez Ajouter du code HTML personnalisé sous CSS personnalisé & JS dans le tableau de bord WordPress après avoir installé le plug-in. Maintenant, collez le code susmentionné, en veillant à le placer à la fois dans l'en-tête et dans le front-end.

La prochaine étape consiste à inclure un JS unique. Pour initialiser fullPage.js et définir ses options et procédures, nous devons utiliser jQuery. Voici quelques choix fondamentaux qui s'appliquent à tous les sites à défilement vertical.

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

Assurez-vous d'inclure ce code dans le pied de page du frontal.

Nous définissons également nos paramètres FullPage dans cette phase. L'exemple précédent comprend des points de navigation, qui apparaîtront sur le côté droit de notre site de défilement, ainsi que le strict minimum d'options nécessaires pour un site de défilement pleine page. Lorsque nous modifions notre conception pour qu'elle soit réactive, je passerai en revue plus d'alternatives. Consultez la documentation officielle pour plus de détails sur vos options.

Étape 2 : configurer la page Elementor

Le balisage suivant est requis par fullPage.js pour notre page de défilement.

<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>

Les divs individuels de notre page de défilement avec la section de classe seront chacun des sections en plein écran. L'utilisation de modèles est l'approche la plus simple pour que cela fonctionne avec Elementor.

Commençons par configurer notre page actuelle. Créez une nouvelle page dans Pages, donnez-lui un titre et une URL appropriés, puis modifiez-la à l'aide d'Elementor.

Créez une section avec une colonne dans Elementor maintenant. Nous voulons ajouter un HTML-Widget à cette colonne. Ce widget, qui comprend des codes abrégés pour chaque diapositive individuelle, servira de cadre à notre page. Nous voulons ajouter le code suivant:

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

Vérifiez que la section est pleine largeur. De plus, comme nous ne voulons pas du rembourrage qu'Elementor ajoute par défaut aux colonnes, définissez le rembourrage de la section et de la colonne sur 0.

Après avoir créé les diapositives réelles dans les étapes ultérieures, nous modifierons l'identifiant du modèle Elementor à sa valeur correcte.

Étape3: Configurer les rubriques

La dernière étape consiste à créer et à enregistrer séparément chaque section en tant que modèle.

Vous aurez besoin d' Elementor Pro pour utiliser les codes courts. Le moment est venu de l'acheter si vous n'y avez pas encore pensé. Vous disposez de tous les outils dont vous avez besoin pour créer un site Web à l'aide d'Elementor. Pas besoin de toujours acheter un nouveau thème !

Créez une nouvelle section en allant dans Modèles - Ajouter nouveau.

La première diapositive de notre site défilant pleine page va maintenant être créée. Créez une nouvelle section dans Elementor et définissez sa hauteur sur "Ajuster à l'écran". Maintenant que vous avez ajouté votre matériel, vous pouvez le styliser. Assurez-vous simplement que chaque modèle contient au maximum une partie. Pour créer une mise en page unique, vous pouvez utiliser autant de colonnes et de colonnes internes que vous le souhaitez.

Enregistrez votre diapositive lorsque vous avez terminé, puis revenez à vos modèles Elementor. Le modèle que vous avez récemment développé devrait maintenant apparaître dans la liste. Prenez l'ID de ce modèle et collez-le dans la page que nous avons créée à l'étape 2 en le copiant.

Répétez maintenant cette procédure pour chaque diapositive que vous avez. Chaque modèle doit avoir une zone dont la hauteur est ajustée pour correspondre à l'écran.

Emballer

C'est tout, alors ! C'est le moyen le plus simple de créer des pages de défilement en plein écran avec fullPage.js dans Elementor . J'espère que cela pourra vous aider à concevoir un site Web simple et minimaliste pour vos futures entreprises.