Comment créer un site Web à défilement pleine page dans Elementor

Créer des 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 en termes de compatibilité, de réactivité et de convivialité.

Création de sites Web à défilement plein écran dans Elementor

Nous allons maintenant démontrer le processus de création d’un site Web à défilement pleine page dans Elementor.

Étape 1: Chargement de fullPage.js

Afin d'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 pas de moyen d'ajouter du code à l'en-tête du site. Bien qu'il existe plusieurs plugins pouvant ajouter du code à notre en-tête, j'ai trouvé que celui-ci est le plus simple à utiliser.

Sélectionnez Ajouter du HTML personnalisé sous CSS et JS personnalisés dans le tableau de bord WordPress après avoir installé le plugin. 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 du 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 front-end.

Nous définissons également nos paramètres FullPage dans cette phase. L'exemple précédent inclut des points de navigation, qui apparaîtront sur le côté droit de notre site à défilement, ainsi que le strict minimum d'options nécessaires pour un site à défilement pleine page. Lorsque nous modifierons notre conception pour qu'elle soit réactive, j'examinerai d'autres alternatives. Visitez 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 défilante.

<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 défilante 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 maintenant une section avec une colonne dans Elementor. Nous souhaitons ajouter un widget HTML à cette colonne. Ce widget, qui comprend des shortcodes pour chaque diapositive individuelle, servira de cadre à notre page. Nous souhaitons 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 remplissage qu'Elementor ajoute par défaut aux colonnes, définissez le remplissage de la section et de la colonne sur 0.

Après avoir créé les diapositives réelles au cours des étapes suivantes, nous modifierons l'identifiant du modèle Elementor à sa valeur correcte.

Étape 3:Configurer les sections

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 shortcodes. Le moment est venu de l’acheter si vous n’y avez pas déjà 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 accédant à Modèles - Ajouter un 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 dont vous disposez. Chaque modèle doit comporter 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 défilantes 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.