Le Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position.

Regardez le guide vidéo :

Steps to Use ElementsKit Sticky Content:

• Aller à ElementsKit → Modules → Enable Contenu collant → Save.
• Open page in Élémentor.
• Select section/column/widget → Advanced → ElementsKit Sticky.
• Choose Sticky Type (Top / Bottom / Scroll Up / Column).
• Set Offset, Sticky Until (CSS ID), Background if needed.
• Update and test on devices.

Follow the module’s detail functions:

Activer le module de contenu collant #

To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Go to ElementsKit from your dashboard and follow the steps:

1. ElementsKit sous ElementsKit brancher
2. Go to MODULES
3. Toggle the Sticky Content module SUR
4. Cliquer sur Sauvegarder les modifications

Steps 2: Sticky on Top #

Cette fonctionnalité vous aidera à coller n'importe quelle section en haut de la page.

Regardez notre guide vidéo :

Ou suivez les instructions étape par étape :

• Aller vers ElementsKit → En-tête de pied de page → Cliquez sur Modifiez avec Elementor.

• Créer une nouvelle page -> Cliquez sur le Icône ElementsKit pour insérer n'importe quelle page prête à partir de nos modèles prédéfinis.

1. Clique sur le Icône de la section intérieure.
2. Aller à Avancé
3. Développer ElementsKit Sticky.
4. Sélectionnez l'option Collant➔ Haut dans la liste déroulante

• Allez maintenant sur votre page -> Vous pouvez voir que votre en-tête est collant en haut.

Changement de couleur d'arrière-plan du collant sur le dessus #

You can change the background color whenever you need. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.

• Choisissez une couleur de fond collant : Blue.
• Cliquez sur Mettre à jour

Collant jusqu'au dessus #

Si vous souhaitez rendre vos sections collantes sur plusieurs sections et arrêter de rester collantes après une section spécifique, vous pouvez définir cet ID de section ici. Rendons-le collant jusqu'à la section À propos de nous.

• Cliquer sur Modifier avec Elementor.

1. Clique sur le Our School Goals 2019 inner section icon
2. Aller à Avancé
3. Find Layout

Met le CSS ID and Copy it.

• Aller à Entête➔Avancé➔Elementskit collant➔Collant jusqu'à.
• Maintenant, collez cette section à propos de nous Identifiant CSS dans le Collant jusqu'à champ.

• Vous pouvez maintenant voir que l'en-tête est Sticky Until the Our School Goals 2019 Section.

Fonctionnalité d'ajout de classe #

ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is “ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.

1. Allez dans le personnalisateur-> CSS supplémentaire.
2. Utilisez la classe : "ekit-sticky-effets" et faites la couleur de fond Gris.

• Allez dans l'en-tête -> Supprimez le Couleur de l'arrière plan.
• Ajoutez un décalage. Par exemple : 50 px.

• Vous pouvez voir que la couleur d'arrière-plan est Transparent. Mais après un défilement jusqu'à 50 pixels, une couleur d'arrière-plan est ajoutée.

Décalage collant sur le dessus #

• Vous pouvez décider de la quantité d'espace à laisser pendant que votre contenu ou votre image restera collé en haut. Vous pouvez faire la même chose pour d’autres positions collantes. Fournissez le décalage collant : 100 px. Vous pouvez voir que l'en-tête s'affiche après 100 px.

• Il existe trois options de choix d'appareil pour afficher le sticky : Tous les appareils, ordinateur de bureau uniquement, ordinateur de bureau et tablette. Choisissez une option pour décider exactement sur quel(s) appareil(s) vous souhaitez afficher le contenu comme collant.

Afficher Sticky lors du défilement vers le haut #

Cette fonctionnalité vous aidera à coller n'importe quelle section de la page lorsque vous faites défiler vers le haut.

Regardez notre guide vidéo :

Ou suivez les instructions étape par étape :

• Go back to ElementsKit collant choix.

• Sélectionnez l'option collante➔ Afficher lors du défilement vers le haut dans la liste déroulante.

Cliquez sur Mettre à jour-> Accédez à votre page-> Actualiser-> Faites défiler vers le haut.

Vous pouvez voir que l’en-tête est collant lorsque vous faites défiler vers le haut.

Collant jusqu'au défilement vers le haut #

Let’s make it sticky until the Care About Us Section.

• Click on the sticky Care About Us Icône de la section intérieure.
• Now, going to the Layout settings from Advanced tab, met le ID CSS et copiez-le.

• Cliquez sur l'en-tête de navigation collant Icône de la section intérieure.
• Aller à Avancé
• Trouver Elementskit collant and paste that sticky header section’s Identifiant CSS dans le Collant jusqu'à champ.

• Cliquez sur Mettre à jour-> Accédez à la page d'accueil-> Actualiser-> Faites défiler vers le haut.
• Vous pouvez maintenant voir que l'en-tête est collant jusqu'à ce que la section d'en-tête collante et lorsque la section vidéo arrive dans l'en-tête n'est plus collante.

Collant en bas #

Cette fonctionnalité vous aidera à coller n'importe quelle section en bas de la page.

Regardez notre guide vidéo :

Ou suivez les instructions étape par étape :

• Clique sur le Icône ElementsKit pour insérer n'importe quel pied de page à partir de nos modèles prédéfinis.

Aller à Éléments ➔ Faites glisser les widgets suivants et déposez-les sur la zone sélectionnée.

• Titre.
• Logo Client.
• Vidéo.
• Titre.

• Clique sur le Icône de la section intérieure du pied de page.
• Aller à Avancé-> Développer ElementsKit Sticky.
• Sélectionnez l'option collante➔ Bas dans la liste déroulante.

• Cliquez sur Mettre à jour-> Accédez à votre page-> Actualiser-> Faites défiler vers le haut.
• Vous pouvez voir que le pied de page est collant lorsque vous faites défiler vers le haut.

Collant jusqu'en bas #

Rendons-le collant jusqu'à la section collante inférieure.

• Clique sur le Bas collant Icône de la section intérieure.
• Maintenant, en allant dans les paramètres avancés, définissez le ID CSS et copiez-le.

• Cliquez sur le pied de page Icône de la section intérieure.
• Aller à Avancé➔ Elementskit collant➔ Collant jusqu'à.
• Maintenant, collez la section collante du bas Identifiant CSS dans le Collant jusqu'à champ.

• Cliquez sur Mettre à jour-> Accédez à la page d'accueil-> Actualiser-> Faites défiler vers le haut.
• Vous pouvez maintenant voir que l'en-tête est collant jusqu'à ce que la section collante inférieure et lorsque la section du logo du client apparaît dans le pied de page n'est plus collante.

Collant sur la colonne #

Cette fonctionnalité vous aidera à coller n'importe quelle section sur la colonne.

Regardez notre guide vidéo :

Ou suivez les instructions étape par étape :

• Sélectionnez votre structure dans la zone sélectionnée. Ici, je prends 3 colonnes.

Aller à Éléments ➔ Faites glisser les widgets suivants et déposez-les sur la zone sélectionnée.

• Titre.
• Image.
• Boîte à icônes.

Rendons le titre et la section image collants.

• Clique sur le Icône de la section intérieure du titre.
• Aller à Avancé-> Développer ElementsKit Sticky.
• Sélectionnez l'option collante➔ Colonne dans la liste déroulante.

• Clique sur le Icône de la section intérieure de l'image.
• Aller à Avancé-> Développer ElementsKit Sticky.
• Sélectionnez l'option collante➔ Colonne dans la liste déroulante.

• Cliquez sur Mettre à jour-> Accédez à votre page-> Actualiser-> Faites défiler vers le bas.
• Vous pouvez voir que le titre et l'image sont collants et que le côté droit du contenu de la boîte d'icônes est toujours en mouvement.