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 visitent sur votre site Web et à naviguer vers la page précise qu’ils recherchent. Avec Divi, vous pouvez facilement créer n’importe quel 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 ce post. Nous combinerons de façon créative une section de pied de page avec des séparateurs de section pour créer un reveal de défilement de pied de page.

Allons-y, allons-y !

 

Aperçu

Avant de nous plonger dans le tutoriel, jetons un coup d’œil rapide sur le résultat à travers les différentes tailles d’écran.

Ordinateur de bureau

défilement du bas de page

Mobile

défilement du bas de page

 
 

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

Ajouter une nouvelle page vierge

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

défilement du bas de page

Télécharger la page d’atterrissage du pack de mise en page SaaS de l’entreprise

Passez à Visual Builder et téléchargez la page d’accueil 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.

footer scroll

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

Ajouter l’index Z à la section

Continuez en changeant l’index z de la section héros de la page.

  • Z Index : 3

footer scroll

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. Augmenter l’index z pour chacune des sections est une étape cruciale pour faire fonctionner le tutoriel. Cela permettra à chacune des sections d’apparaître en haut de la section de pied de page que nous ajouterons plus tard dans le message.

footer scroll

footer scroll

Supprimer l’animation de la section

Pour s’assurer que le pied de page reste caché jusqu’au bas de la page, nous allons également supprimer toutes les animations de section. Ouvrez la section et supprimez l’animation.

  • Style d’animation : Aucun

footer scroll

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

Étendre les styles d’animation à toutes les sections de la page.

footer scroll

footer scroll

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 changez la couleur de fond.

  • Couleur d’arrière-plan : #f2f2f2f2f2

footer scroll

4. Ajouter la section régulière #1 au bas de la page

Section Paramètres

Couleur d’arrière-plan

Comme vous pouvez le constater dans l’aperçu de ce billet, le pied de page apparaîtra sous un séparateur de section. Nous dédierons une nouvelle section au bas de notre page à ce séparateur de section. Ouvrez les paramètres de la section et utilisez une couleur d’arrière-plan entièrement transparente. Ceci permettra au pied de page de s’afficher à travers le conteneur de section, même si sa position se trouve en dessous.

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

footer scroll

Séparateur supérieur

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

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

footer scroll

Index Z

Cette nouvelle section a également besoin d’un index z plus élevé.

  • Z Index : 3

footer scroll

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

Section Paramètres

Couleur d’arrière-plan

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

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

footer scroll

Dimensionnement

Allez dans l’onglet design et assurez-vous que la largeur est ‘100%’.

  • Largeur : 100%.

footer scroll

Espacement

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

  • Top Padding : 500px

footer scroll

Index Z

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

  • Z Index : 2

footer scroll

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à l’aide de la structure de colonnes suivante :

footer scroll

Dimensionnement

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

  • Largeur de gouttière personnalisée : Oui
  • Largeur de gouttière : 1
  • Égaliser la hauteur des colonnes : Oui

footer scroll

Espacement des colonnes

Ouvrez ensuite les réglages de la colonne 1 et ajoutez un peu de rembourrage gauche.

Rembourrage gauche : 20px

footer scroll

footer scroll

Colonne Bordure Droite

Ajoutez également une bordure droite à la colonne.

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

footer scroll

Copier les styles de colonnes

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

footer scroll

footer scroll

Ajouter le module image à la colonne 1

Télécharger l’image

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

footer scroll

Dimensionnement

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

  • Largeur : 35% (bureau), 30% (tablette), 25% (téléphone)
  • Alignement des modules : Gauche

footer scroll

Espacement

Ajoutez également une marge inférieure.

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

footer scroll

Ajouter l’élément de texte no 1 à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne ! Ajoutez un premier élément de texte avec le contenu de votre choix.

footer scroll

Paramètres texte

Modifiez les paramètres du texte.

  • Police de texte : Nunito Sans
  • Poids de la police de texte : Semi gras
  • Couleur du texte : #ffffffffffff
  • Taille du texte : 19px

footer scroll

Espacement

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

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

footer scroll

Ajouter l’élément de texte no 2 à la colonne 2

Ajouter du contenu

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

footer scroll

Ajouter un lien

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

  • URL du lien du module : #

footer scroll

Paramètres texte

Modifiez ensuite les paramètres de texte.

  • Police de texte : Nunito Sans
  • Couleur du texte : #dbdbdbdbb
  • Taille du texte : 17px

footer scroll

Espacement

Et ajoutez du rembourrage personnalisé en haut et en bas sur différentes tailles d’écran.

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

footer scroll

Cloner l’élément de texte #2 autant de fois que nécessaire

Cloner le deuxième élément de texte dans la colonne 2 autant de fois que nécessaire.

footer scroll

Modifier le contenu

Assurez-vous d’en modifier le contenu.

footer scroll

Modifier les liens

Avec les liens.

  • URL du lien du module : #

footer scroll

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

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

footer scroll

Modifier le contenu

Modifiez le contenu de chaque duplicata.

footer scroll

Modifier les liens

Avec le lien.

  • URL du lien du module : #

footer scroll

6.Fixer la section #2 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.

01
02
position: fixed;
bottom: 0;

footer scroll

footer scroll

7. Ajouter la marge inférieure à la section #1 pour créer l’effet de révélation

Ajout d’une marge inférieure sur différentes tailles d’écran

Nous aurons également besoin d’espace au bas de notre page pour permettre au pied de page de s’afficher. Ouvrez la section contenant le séparateur de section et ajoutez une marge inférieure sur différentes tailles d’écran et c’est fini !

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

footer scroll

footer scroll

Aperçu

Maintenant que nous avons franchi toutes les étapes, jetons un dernier coup d’œil sur le résultat à travers différentes tailles d’écran.

Ordinateur de bureau

footer scroll

Mobile

footer scroll

Derniers points

Dans ce billet, nous vous avons montré comment créer de superbes révélateurs en bas de page sous les séparateurs de sections pour créer un effet unique. C’est une excellente façon de rendre n’importe quel pied de page interactif et d’attirer l’attention sur les éléments qui sont énumérés dans le pied de page. Nous espérons que ce tutoriel vous inspirera à créer votre propre section ! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Traduit depuis DIVI à l’adresse : http://bit.ly/2YZpCAl

 

Profitez de la puissance du meilleur plugin jamais conçu pour mettre en forme son site web

Découvrir Divi