Créer des révélations de défilement en ligne avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer de superbes révélations de défilement en ligne à l'aide du DJ Layout Pack. C'est un excellent moyen d'attirer l'attention sur un conteneur de colonne spécifique sur votre site Web, sans avoir à l'ajouter plusieurs fois à votre page. Nous ajouterons un effet de survol/relâchement sympa à la technique qui aidera les visiteurs à s'accrocher au conteneur de la colonne et à le laisser tomber quand ils en ont envie. Vous pourrez également télécharger le fichier JSON gratuitement !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT The Inline Scroll Reveals Layout

Pour mettre la main sur la mise en page gratuite du défilement en ligne, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Créer une nouvelle page à l'aide de la page d'accueil de DJ Layout Pack

Ajouter une nouvelle page

Pour ce didacticiel de cas d'utilisation, nous allons utiliser l'une des dispositions DJ. Commencez par créer une nouvelle page, donnez un titre à votre page et passez à Visual Builder.

Télécharger la page d'accueil DJ

Continuez en téléchargeant la mise en page de la page d'accueil DJ sur votre page.

Ajouter une valeur d'index Z plus élevée à chaque section de la page

Ajouter un index Z supérieur à la section Hero

Nous allons corriger une colonne spécifique et lui permettre de s'afficher où nous voulons. Le contraire est également vrai ; nous voulons le cacher là où nous ne voulons pas qu'il apparaisse. Pour ce faire, nous allons donner à chaque section de la page (à part celle dans laquelle se trouve la colonne, qui est la section #2 de la page) une valeur d'index z plus élevée. Commencez par ouvrir la section héros et augmentez l'index z dans les paramètres de visibilité.

• Indice Z : 2

Copier l'index Z

Une fois que vous avez ajouté l'index z, vous pouvez le copier.

Coller dans d'autres sections de la page, à l' exception de la section 2

Et collez-le sur toutes les autres sections de la page, à l' exception de la section 2 (la section qui contient la colonne que nous allons transformer en un révélateur de défilement en ligne).

Modifier la section #2

Placer le contenu de la colonne dans des lignes séparées

Modifier la structure des colonnes de ligne

Commençons par modifier la deuxième section, en commençant par la structure des colonnes de la ligne.

Ligne en double

Continuez en clonant la ligne.

Supprimer des modules dans des lignes

Supprimez les modules de texte et de bouton de la première rangée et les modules audio de la deuxième rangée.

Modifier la ligne n°1 de la section n°2

Supprimer certains modules audio (pour s'adapter à des tailles d'écran plus petites)

Dans les prochaines étapes, nous allons corriger la colonne contenant les modules audio. Maintenant, pour nous assurer que la colonne s'adapte à la hauteur de la fenêtre d'affichage des écrans plus petits, nous devrons supprimer certains modules audio.

Ajouter la marge inférieure à la ligne

Continuez en ouvrant les paramètres de ligne, en allant dans l'onglet Conception et en ajoutant un peu de rembourrage en bas. Nous aurons besoin de cet espace pour permettre à la colonne de se révéler lors du défilement plus tard dans le didacticiel.

• Marge inférieure : 700px

Ouvrir les paramètres de colonne

Il est temps de commencer à transformer la colonne en un révélateur de défilement en ligne ! Ouvrez les paramètres de la colonne.

Ombre de la boîte de survol

Ensuite, accédez à l'onglet Conception et modifiez certaines valeurs d'ombre de la boîte au survol.

• Force de flou d'ombre de boîte : 150px
• Couleur de l'ombre : rgba(0,0,0,0.55)

Échelle de transformation de survol

Augmentez également la taille de la colonne au survol en modifiant les valeurs d'échelle de transformation.

• Bas : 110%
• À droite : 110 %

Élément principal par défaut

Pour rendre la colonne fixe, nous allons ajouter quelques lignes de code CSS à l'élément principal de la colonne.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

Survolez l'élément principal

Assurez-vous d'ajouter également la ligne CSS à position fixe à l'élément principal de survol. Cela empêchera la colonne de clignoter.

position: fixed;

Indice Z par défaut

Maintenant, dans des circonstances normales, nous voulons que le module apparaisse sous tout le contenu de la page. Pour être sûr que cela se produise, nous allons modifier l'index z de la colonne.

• Indice Z : 0

Hover Z Index

Au survol, cependant, nous voulons que la colonne chevauche tout le contenu de la page. Dès que quelqu'un libère la colonne, elle retombera à sa place derrière tout le contenu de la page. Modifiez l'index z au survol en conséquence :

• Indice Z : 10

Modifier la ligne n°2 de la section n°2

Ajouter un rembourrage supérieur à la colonne

Pour des raisons esthétiques, nous allons ouvrir la colonne de la deuxième rangée de la section 2 et ajouter un rembourrage supérieur personnalisé.

• Rembourrage supérieur : 80px

Ajouter une marge inférieure personnalisée aux sections de la page

Localiser la section

Ouvrir les paramètres de la section

Maintenant que nous avons modifié la colonne de révélation du défilement en ligne, nous devons créer de l'espace pour qu'elle apparaisse. Nous l'avons déjà fait pour la ligne dans laquelle elle se trouve (espacement inférieur de 700 pixels), mais nous permettrons également à la colonne de se révéler à d'autres endroits de la page. Ouvrez les paramètres de la section suivante :

Ajouter une marge inférieure

Accédez aux paramètres d'espacement et ajoutez une marge inférieure. L'ajout d'une marge inférieure créera un espace vide sur la page qui permettra à la colonne d'index z faible de s'afficher.

• Marge inférieure : 700px

Localiser la section

Ouvrir les paramètres de la section

Ouvrez ensuite la section suivante :

Ajouter une marge inférieure

Et ajoutez une marge inférieure ici aussi.

• Marge inférieure : 700px

Supprimer le rembourrage de section en excès

Supprimer le rembourrage inférieur de la section 2

Maintenant, la seule chose qui nous reste à faire est d'optimiser la façon dont notre conception correspond à la révélation du défilement en ligne. Ouvrez la deuxième section de la page et retirez le rembourrage inférieur.

• Bas : 0px

Localiser la section

Ouvrir les paramètres de la section

Ouvrez ensuite les paramètres de la section suivante :

Supprimer le rembourrage inférieur et ajouter un rembourrage supérieur

Ajoutez du rembourrage supérieur et retirez le rembourrage inférieur.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 0px

Localiser la section

Ouvrir les paramètres de la section

Passons à la dernière section. Ouvrez les paramètres de la section.

Supprimer le rembourrage supérieur

Retirez le rembourrage supérieur et le tour est joué !

• Rembourrage supérieur : 0px

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer des révélations de défilement en ligne avec Divi et le DJ Layout Pack. C'est un excellent moyen d'ajouter de l'interaction à votre site Web. Nous espérons que ce didacticiel vous inspirera également pour créer votre propre défilement en ligne fixe ! Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.