Comment créer un beau défilement de pied de page révèle sous les diviseurs de section de Divi

Dans toutes les tendances du design, les pieds de page restent essentiels. Les gens s'y sont tellement habitués, ce qui les rend très conviviaux. Ils aident les visiteurs à organiser leur séjour sur votre site Web et à naviguer vers la page précise qu'ils recherchent. Avec Divi, vous pouvez facilement créer tout type de pied de page en une seule section.

Maintenant, si vous cherchez à donner à votre pied de page une dimension et une interaction supplémentaires, vous allez adorer cet article. Nous combinerons de manière créative une section de pied de page avec des séparateurs de section pour créer un défilement de pied de page.

Allons-y !

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 la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez 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 !

Abonnez-vous à notre chaîne Youtube

1. Créez une nouvelle page vierge et téléchargez la mise en page de votre choix

Ajouter une nouvelle page vierge

La première chose à faire est de créer une nouvelle page vierge.

Télécharger la page de destination du pack de mise en page de l'entreprise SaaS

Basculez vers Visual Builder et téléchargez la page de destination du SaaS Company Layout Pack. Bien que nous utilisions cette mise en page spécifique, vous pouvez faire fonctionner la technique sur n'importe quel type de page sur laquelle vous travaillez.

2. Ajouter un index Z à chaque section et supprimer les animations de section

Ajouter un index Z à la section Hero

Continuez en modifiant l'index z de la section héros sur la page.

• Indice Z : 3

Copier l'index Z et coller dans toutes les autres sections de la page

Copiez l'index z et collez-le dans toutes les autres sections de la page. L'augmentation de l'index z pour chacune des sections est une étape cruciale pour que le didacticiel fonctionne. Cela permettra à chacune des sections d'apparaître en haut de la section de pied de page que nous ajouterons plus tard dans la publication.

Supprimer l'animation de la section des héros

Pour nous assurer que le pied de page reste masqué jusqu'en bas de la page, nous allons également supprimer toutes les animations de section. Ouvrez la section héros et supprimez l'animation.

• Style d'animation : aucun

Étendre l'animation à toutes les sections de la page

Étendez les styles d'animation à toutes les sections de la page.

3. Modifier la dernière section de la page

Changer la couleur d'arrière-plan

Passez à la dernière section de la page et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f2f2f2

4. Ajoutez la section normale n° 1 au bas de la page

Paramètres de section

Couleur de l'arrière plan

Comme vous pouvez le constater dans l'aperçu de cet article, le pied de page apparaîtra sous un séparateur de section. Nous consacrerons une nouvelle section au bas de notre page à ce diviseur de section. Ouvrez les paramètres de la section et utilisez une couleur de fond entièrement transparente. Cela permettra au pied de page d'apparaître à travers le conteneur de section, même si sa position sera en dessous.

• Couleur d'arrière-plan : rgba(0,0,0,0)

Diviseur supérieur

Passez à l'onglet conception de la section et ajoutez un séparateur supérieur de votre choix.

• Style de séparation : rechercher dans la liste
• Hauteur du séparateur : 250 px (ordinateur de bureau), 150 px (tablette), 100 px (téléphone)
• Répétition horizontale du diviseur : 2x

Indice Z

Cette nouvelle section a également besoin d'un indice z accru.

• Indice Z : 3

5. Ajoutez la section régulière #2 au bas de la page

Paramètres de section

Couleur de l'arrière plan

Il est temps de créer la section de pied de page ! Ajoutez une autre nouvelle section régulière au bas de la page et sélectionnez une couleur d'arrière-plan de votre choix.

• Couleur d'arrière-plan : #202332

Dimensionnement

Accédez à l'onglet Conception et assurez-vous que la largeur est de « 100 % ».

• Largeur : 100 %

Espacement

Nous devrons également augmenter le rembourrage supérieur de la section.

• Rembourrage supérieur : 500 px

Indice Z

L'index z que nous attribuons à cette section est inférieur à celui des autres sections de la page. Cela nous aidera à masquer la section jusqu'à ce que nous soyons au bas de la page.

• Indice Z : 2

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement des colonnes

Ouvrez ensuite les paramètres de la colonne 1 et ajoutez un peu de rembourrage à gauche.

• Rembourrage gauche : 20px

Bordure droite de la colonne

Ajoutez également une bordure droite à la colonne.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #515151

Copier Coller les styles de colonnes

Appliquez les modifications à toutes les colonnes en étendant les styles ou en utilisant l'option copier-coller.

Ajouter un module d'image à la colonne 1

Télécharger une image

Il est temps de commencer à ajouter des modules ! Ajoutez un nouveau module Image à la première colonne et téléchargez votre logo.

Dimensionnement

Passez à l'onglet Conception et modifiez la largeur sur différentes tailles d'écran.

• Largeur : 35 % (ordinateur de bureau), 30 % (tablette), 25 % (téléphone)
• Alignement du module : à gauche

Espacement

Ajoutez également une marge inférieure.

• Afficher l'espace sous l'image : Oui
• Marge inférieure : 50px

Ajouter le module de texte n° 1 à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne ! Ajoutez un premier module de texte avec du contenu de votre choix.

Paramètres de texte

Modifiez les paramètres de texte.

• Police du texte : Nunito Sans
• Poids de la police de texte : demi-gras
• Couleur du texte : #ffffff
• Taille du texte : 19px

Espacement

Et ajoutez des marges supérieures et inférieures personnalisées sur différentes tailles d'écran.

• Marge supérieure : 15 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)
• Marge inférieure : 15 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Ajoutez un deuxième module de texte à la deuxième colonne et entrez le contenu de votre choix.

Ajouter un lien

Ajoutez un lien qui correspond à l'élément de pied de page.

• URL du lien du module : #

Paramètres de texte

Modifiez ensuite les paramètres de texte.

• Police du texte : Nunito Sans
• Couleur du texte : #dbdbdb
• Taille du texte : 17 pixels

Espacement

Et ajoutez des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Marge supérieure : 15 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)
• Marge inférieure : 15 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)

Cloner le module de texte #2 autant de fois que nécessaire

Clonez le deuxième module de texte de la colonne 2 autant de fois que nécessaire.

Modifier le contenu

Assurez-vous de modifier le contenu.

Modifier les liens

Avec les liens.

• URL du lien du module : #

Cloner les modules dans la colonne 2 et les placer dans les colonnes restantes

Une fois que vous avez terminé la deuxième colonne, vous pouvez cloner les deux modules autant de fois que nécessaire et placer les doublons dans les deux colonnes restantes de la ligne.

Modifier le contenu

Modifiez le contenu de chaque doublon.

Modifier les liens

Avec le lien.

• URL du lien du module : #

6. Faire la section #2 fixée au bas de la page

Ajouter un CSS personnalisé

Maintenant, pour créer la révélation de défilement, nous allons nous assurer que la section de pied de page colle au bas de notre page en ajoutant deux lignes de code CSS à l'élément principal de la section.

position: fixed;
bottom: 0;

7. Ajoutez une marge inférieure à la section 1 pour créer un effet de révélation

Ajouter une marge inférieure sur différentes tailles d'écran

Nous aurons également besoin d'un espace au bas de notre page pour permettre au pied de page d'apparaître. Ouvrez la section contenant le diviseur de section et ajoutez une marge inférieure sur différentes tailles d'écran et vous avez terminé !

• Marge inférieure : 400 pixels (ordinateur de bureau), 700 pixels (tablette), 800 pixels (téléphone)

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 un magnifique défilement de pied de page sous les diviseurs de section pour créer un effet unique. C'est un excellent moyen de rendre tout pied de page interactif et d'attirer l'attention sur les éléments répertoriés dans le pied de page. Nous espérons que ce didacticiel vous inspirera également pour créer vos propres révélations de pied de page ! 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.