Comment créer une barre de pied de page collante avec les options collantes de Divi

Si vous cherchez un moyen d'ajouter un CTA qui suit vos visiteurs pendant qu'ils naviguent sur votre site Web, vous pouvez envisager d'opter pour une barre de pied de page collante. Une barre de pied de page collante est utilisée en bas de votre navigateur et vous pouvez inclure n'importe quel appel à l'action de votre choix, qu'il s'agisse d'un bouton ou d'informations de contact. Dès que les visiteurs font défiler la zone de pied de page de votre page, la barre de pied de page et la conception du pied de page fusionnent tout en modifiant les styles de votre barre de pied de page collante. Cette belle esthétique pourrait vous aider à augmenter les taux de conversion sur vos pages ! Vous pourrez également télécharger gratuitement le fichier modèle JSON.

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 GRATUITEMENT le modèle de pied de page global

Pour mettre la main sur le modèle de pied de page global gratuit, vous devrez d'abord le télécharger en utilisant le 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 !

1. Créer un nouveau modèle de pied de page

Accédez à Divi Theme Builder et ajoutez un nouveau pied de page global ou personnalisé

Commencez par accéder au Divi Theme Builder dans le backend de votre site WordPress. Là, ajoutez un nouveau pied de page global ou personnalisé.

Commencez à construire à partir de zéro

Commencez à créer le modèle de pied de page à partir de zéro.

2. Construire la conception du pied de page

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et appliquez une couleur de fond noire.

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

Ajouter la ligne n° 1

Structure des colonnes

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

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

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

Dimensionnement

Passez à l'onglet de conception de la ligne et modifiez ensuite les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur: 90%
• Largeur maximale : 2580px
• Alignement des lignes : Centre

Espacement

Ajoutez également des rembourrages haut et bas personnalisés sur des écrans plus petits.

• Rembourrage supérieur : 5 pixels (tablette et téléphone uniquement)
• Rembourrage inférieur : 5 pixels (tablette et téléphone uniquement)

Frontière

Ensuite, ajoutez des coins arrondis réactifs aux paramètres de bordure.

• Tous les coins :
  • Bureau : 30 pixels
  • Tablette et téléphone : 15px

Débordements

Et pour nous assurer que nous pouvons créer des chevauchements plus tard dans le didacticiel, nous définirons les débordements de lignes sur visibles.

• Débordement horizontal : Visibile
• Débordement vertical : visible

Colonne 1 & 3 Visibilité

Pour éviter que trop d'éléments de la barre de pied de page n'apparaissent sur des écrans plus petits, nous masquerons la première et la dernière colonne de notre ligne sur la tablette et le téléphone.

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules, en commençant par un module Blurb dans la colonne 1. Ajoutez du contenu de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres des icônes

Passez à l'onglet de conception du module et stylisez l'icône en conséquence :

• Couleur de l'icône : #f5d72e
• Icône de cercle : Oui
• Couleur du cercle : #000000
• Placement des images/icônes : en haut
• Alignement image/icône : Centre
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 32 px

Paramètres de texte

Ensuite, modifiez les paramètres de texte.

• Alignement du texte : Centre
• Couleur du texte : clair

Paramètres du texte du titre

Apportez également quelques modifications aux paramètres du texte du titre.

• Police du titre : Poppins
• Couleur du texte du titre : #000000

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

• Police de caractère : Poppins
• Poids de la police de caractères : Ultra gras
• Taille du corps du texte : 20 px

Dimensionnement

Mettez ensuite la largeur du contenu sur « 100 % » dans les paramètres de dimensionnement.

• Largeur du contenu : 100 %

Espacement

Pour créer un chevauchement, ajoutez une marge supérieure négative aux paramètres d'espacement.

• Marge supérieure : -60px

Animation

Et complétez les paramètres du module en supprimant l'icône d'animation dans les paramètres d'animation.

• Animation d'image/icône : pas d'animation

Cloner le module Blurb et placer le doublon dans la colonne 3

Une fois que vous avez terminé le premier module Blurb dans la colonne 1, clonez-le une fois et placez le doublon dans la colonne 3.

Modifier le contenu et l'icône

Modifiez le contenu et l'icône du doublon.

Ajouter le module Blurb à la colonne 2

Sélectionnez l'icône

Ensuite, ajoutez un nouveau module Blurb à la colonne 2. Laissez la zone de contenu vide et sélectionnez une icône de votre choix.

Couleur de l'arrière plan

Ajoutez ensuite une couleur d'arrière-plan.

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

Paramètres des icônes

Passez à l'onglet de conception du module et modifiez les paramètres de l'icône en conséquence :

• Couleur de l'icône : #ffffff
• Placement des images/icônes : en haut
• Alignement image/icône : Centre
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 30 px

Dimensionnement

Apportez ensuite quelques modifications aux paramètres de dimensionnement.

• Largeur : 70 pixels
• Alignement du module : Centre
• Hauteur : 40px

Espacement

Ensuite, appliquez des valeurs de marge et de remplissage personnalisées sur différentes tailles d'écran.

• Marge supérieure : -20 px (tablette et téléphone uniquement)
• Rembourrage supérieur : 5px
• Rembourrage inférieur : 0px

Frontière

Ensuite, ajoutez des coins arrondis aux paramètres de bordure.

• Tous les coins : 10px

Animation

Et supprimez l'animation par défaut dans les paramètres d'animation.

• Animation d'image/icône : pas d'animation

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Le prochain et dernier module dont nous avons besoin dans cette ligne est un module de texte dans la colonne 2. Ajoutez du contenu de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Poids de la police de texte : demi-gras
• Taille du texte : 18px
• Hauteur de la ligne de texte : 1,8 em
• Alignement du texte : Centre

Ajouter la ligne n° 2

Structure des colonnes

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

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne, accédez à l'onglet conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2
• Largeur maximale : 2580px

Espacement

Ajoutez ensuite une marge supérieure et inférieure.

• Marge supérieure : 50px
• Marge inférieure : 50px

Ajouter un module d'image à la colonne 1

Télécharger une image

Ajoutez un module image à la colonne 1 et téléchargez votre logo ou tout type d'image de votre choix.

Dimensionnement

Passez à l'onglet de conception du module et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 59 %
• Alignement du module : à gauche

Ajouter un module de texte à la colonne 2

Ajouter du contenu H3

Ensuite, ajoutez un module de texte à la colonne 2 avec du contenu H3 de votre choix.

Paramètres de texte H3

Modifiez les paramètres de texte H3 du module comme suit :

• Police de la rubrique 3 : Poppins
• Titre 3 Poids de la police : gras
• Titre 3 Couleur du texte : #6d6d6d

Cloner le module de texte 3x et répartir sur les colonnes 3 et 4

Une fois que vous avez terminé ce module de texte, vous pouvez cloner trois fois et répartir les doublons sur les deux colonnes restantes de la ligne.

Modifier le contenu

Assurez-vous de modifier le contenu de chaque module de texte en double.

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du module de texte précédent dans la colonne 2 et ajoutez du contenu lié de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police de texte : Poppins
• Taille du texte : 30 pixels
• Hauteur de la ligne de texte : 1 em
• Alignement du texte : à gauche
• Couleur du texte : clair

Paramètres de texte de lien

Modifiez également la couleur du texte du lien.

• Couleur du texte du lien : #ffffff

Cloner le module de texte au besoin

Une fois que vous avez terminé le module de texte, clonez-le autant de fois que vous le souhaitez.

Modifier le contenu

Assurez-vous de modifier le contenu et les liens dans chaque module en double.

Ajouter un module de texte à la colonne 3

Ajouter du contenu

Ensuite, ajoutez un autre module de texte à la colonne 3. Ajoutez du contenu lié de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police de texte : Poppins
• Taille du texte : 22px
• Hauteur de la ligne de texte : 1 em
• Alignement du texte : à gauche
• Couleur du texte : clair

Paramètres de texte de lien

Modifiez également la couleur du texte du lien.

• Couleur du texte du lien : #ea6c01

Cloner le module de texte au besoin

Clonez ce module autant de fois que nécessaire.

Modifier le contenu

Et, bien sûr, modifiez le contenu et les liens au besoin.

Ajouter un module de texte à la colonne 4

Ajouter du contenu

Dans la colonne 4, nous ajouterons un autre module de texte sous le premier module de texte. Ajoutez du contenu de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police de texte : Poppins
• Taille du texte : 16px
• Hauteur de la ligne de texte : 1,8 em
• Alignement du texte : à gauche
• Couleur du texte : clair

Ajouter le suivi des médias sociaux à la colonne 4

Ajouter des réseaux sociaux de choix

Ensuite, ajoutez un module de suivi des médias sociaux à la fin de la colonne. Ajoutez les réseaux sociaux de votre choix.

Supprimer la couleur d'arrière-plan de chaque réseau social individuellement

Supprimez la couleur de fond de chaque réseau social individuellement.

Espacement

Revenez aux paramètres normaux du module, accédez aux paramètres d'espacement et ajoutez des valeurs de marge personnalisées.

• Marge supérieure : -15px
• Marge de gauche : -8px

Ajouter la ligne n° 3

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, passez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2
• Égaliser les hauteurs de colonne : Oui
• Largeur maximale : 2580px

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Ensuite, ajoutez un module de texte à la colonne 1. Insérez du contenu de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police de texte : Poppins
• Couleur du texte : #595959
• Taille du texte : 13 pixels
• Alignement du texte : Centre

Paramètres de texte de lien

Modifiez également la couleur du texte du lien.

• Couleur du texte du lien : #595959

Cloner le module de texte deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé le module de la colonne 1, vous pouvez le cloner deux fois et placer les doublons dans les deux colonnes restantes de la ligne.

Modifier les alignements de texte

Modifiez les alignements de texte pour chaque module de texte en double en conséquence :

• Module de texte dans la colonne 2 :
  • Bureau : Centre
  • Tablette et téléphone : à gauche

• Module de texte dans la colonne 3 :
  • Bureau : à droite
  • Tablette et téléphone : à gauche

Modifier le contenu

Et modifiez également le contenu des deux modules en double.

3. Appliquer des effets collants à la barre de pied de page

Ouvrez la ligne n° 1 et appliquez les paramètres persistants

Maintenant que notre base de conception est en place, il est temps d'appliquer l'effet collant. Ouvrez la première ligne de la section, accédez à l'onglet avancé et appliquez les paramètres persistants suivants :

• Position collante : coller au fond
• Décalage inférieur collant :
  • Bureau : 50px
  • Tablette et téléphone : 20 pixels

Styles de lignes collantes

Couleur de l'arrière plan

Maintenant que nous avons rendu notre ligne collante, nous pouvons appliquer des styles collants à la ligne et à tous ses éléments enfants. Commencez par ajouter une couleur d'arrière-plan collante à la ligne 1.

• Couleur de fond collante : #000000

Appliquer des styles collants aux modules Blurb dans les colonnes 1 et 3

Paramètres des icônes

Ensuite, ouvrez les modules Blurb dans les colonnes 1 et 3 et ajoutez une couleur de cercle collant.

• Couleur du cercle collant : #ea6c01

Paramètres du texte du titre

Ajoutez également une couleur de texte de titre collante.

• Couleur du texte du titre collant : #ea6c01

Appliquer des styles collants au module Blurb dans la colonne 2

Couleur de l'arrière plan

Ensuite, ouvrez le module Blurb dans la colonne 2 et appliquez une couleur d'arrière-plan collante.

• Couleur de fond collante : #ea6c01

4. Enregistrez toutes les modifications apportées au modèle et au générateur de thème

Une fois que vous avez terminé les étapes difficiles, assurez-vous d'enregistrer vos modifications de modèle et de générateur de thème avant d'afficher le résultat sur votre site Web !

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 faire preuve de créativité avec les options persistantes de Divi. Plus précisément, nous vous avons montré comment créer une barre de pied de page collante qui fusionne avec la zone de pied de page principale une fois que les gens font défiler la page sur laquelle ils se trouvent. Vous avez également pu télécharger le fichier modèle JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à 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.