Comment créer un pied de page personnalisé avec le générateur de thème de Divi

Le Divi Theme Builder marque une nouvelle ère et change la façon dont nous concevons les sites Web. L'une des parties les plus importantes de cette fonctionnalité est de pouvoir ajouter dynamiquement des pieds de page globaux à vos pages et publications. Une fois que vous avez conçu un pied de page, vous pouvez l'ajouter automatiquement à n'importe quel type de page ou de publication à l'aide de Theme Builder de Divi. Maintenant, dans ce didacticiel, nous vous guiderons étape par étape tout au long du processus de création et d'ajout d'un pied de page global à votre site Web. Vous pourrez également télécharger le fichier modèle JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide à la conception globale du pied de page sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le pied de page global personnalisé GRATUITEMENT

Pour mettre la main sur le pied de page global personnalisé 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 !

Abonnez-vous à notre chaîne Youtube

1. Accédez au générateur de thèmes de Divi

Commencez par vous rendre dans le générateur de thèmes dans vos options de thème Divi.

2. Ajouter et créer un pied de page global

Là, vous pouvez ajouter un pied de page global à partir de votre bibliothèque Divi ou commencer à en créer un à partir de zéro. Dans ce didacticiel, nous allons créer un pied de page personnalisé à partir de zéro, alors allez-y et choisissez la première option.

Ajouter la section #1

Couleur de l'arrière plan

Il est temps de commencer à créer ! Ouvrez la section que vous pouvez trouver sur la page et modifiez la couleur d'arrière-plan de la section.

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

Espacement

Modifiez ensuite les paramètres d'espacement de la section.

• Marge supérieure : 6vw
• Marge gauche : 6vw
• Marge droite : 6vw
• Rembourrage gauche : 30 px
• Rembourrage droit : 30 px

Frontière

Ajoutez ensuite des bordures en haut à gauche et à droite.

• En haut à gauche : 20 pixels
• En haut à droite : 20 pixels

Boîte ombre

Incluez également une ombre de boîte dans les paramètres de la section.

• Force du flou de l'ombre de la boîte : rgba(0,0,0,0.18)
• Couleur de l'ombre : rgba(0,0,0,0.18)

Ajouter une nouvelle ligne à la section

Structure des colonnes

Continuez en ajoutant une ligne à votre section en utilisant la structure de colonnes suivante :

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Ajoutez un module de texte avec du contenu H2.

Paramètres de texte H2

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

• Police de la rubrique 2 : Poppins
• Titre 2 Poids de la police : semi-gras
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 31px (ordinateur de bureau), 24px (tablette), 18px (téléphone)
• En-tête 2 Hauteur de ligne : 1,6 em

Dimensionnement

Ajoutez également une largeur maximale au module.

• Largeur maximale : 700 px

Ajouter un module de bouton à la colonne

Ajouter une copie

Ajoutez un module de bouton juste en dessous du module de texte dans votre colonne et entrez une copie de votre choix.

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement des boutons au centre.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en stylisant le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 12px
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : 1px
• Police des boutons : Poppins
• Poids de la police du bouton : semi-gras
• Style de police des boutons : majuscule

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 14 pixels
• Rembourrage inférieur : 14px
• Rembourrage gauche : 40 px
• Rembourrage droit : 58 px

Ajouter la section #2

Couleur de l'arrière plan

Passons à la prochaine section régulière ! Choisissez une couleur de fond de section blanche.

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

Espacement

Retirez ensuite tout le rembourrage supérieur et inférieur.

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

Frontière

Ajoutez également un rayon de bordure à la section.

• En haut à gauche : 20 pixels
• En haut à droite : 20 pixels

Boîte ombre

Et complétez les paramètres de la section en ajoutant une ombre de boîte subtile.

• Force du flou de l'ombre de la boîte : 135 px
• Couleur de l'ombre : rgba(0,0,0,0.18)

Ajouter une nouvelle ligne à la section

Structure des colonnes

Une fois que vous avez terminé les paramètres de la section, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

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

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la ligne.

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

Espacement des colonnes

Continuez en ouvrant les paramètres de colonne et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 100 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)
• Rembourrage inférieur : 100 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module de texte normal à la colonne 1 et insérez le contenu de votre choix.

Paramètres de texte

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

• Police de texte : Poppins
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 17 pixels
• Alignement du texte : Centre

Espacement

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

• Marge supérieure : 10px
• Marge inférieure : 30px

Ajouter un module diviseur à la colonne

Visibilité

Juste en dessous du module de texte, ajoutez un module de séparation et assurez-vous que l'option « Afficher le séparateur » est activée.

• Afficher le diviseur : Oui

Ligne

Changez la couleur de la ligne en noir.

• Couleur de la ligne : #000000

Dimensionnement

Modifiez également les paramètres de dimensionnement du diviseur.

• Largeur : 15 %
• Alignement du module : Centre

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Continuez en ajoutant un autre module de texte à la colonne.

Ajouter un lien

Ajoutez un lien vers la page à laquelle vous souhaitez que ce module se réfère.

Paramètres de texte

Ensuite, passez à l'onglet Conception et modifiez les paramètres de texte comme suit :

• Police de texte : Poppins
• Poids de la police de texte : léger
• Couleur du texte : #777777
• Taille du texte : 15 pixels
• Alignement du texte : Centre

Espacement

Ajoutez également des marges supérieure et inférieure.

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

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

Une fois que vous avez terminé le deuxième module de texte de la colonne, vous pouvez le cloner autant de fois que vous en avez besoin (en fonction du nombre d'éléments de pied de page cliquables que vous souhaitez inclure).

Modifier le contenu et les liens

Assurez-vous de modifier le contenu du module et les liens pour chaque doublon.

Cloner la colonne entière deux fois

Une fois que vous avez terminé la colonne et ses modules, vous pouvez cloner la colonne entière deux fois.

Couleur d'arrière-plan de la colonne 2

Ensuite, ouvrez les paramètres de la colonne 2 et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan de la colonne 2 : #f9f9f9

Modifier le contenu et les liens

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

Ajouter une nouvelle colonne

Ensuite, ajoutez une quatrième colonne à la ligne.

Couleur de l'arrière plan

Modifiez la couleur d'arrière-plan de la nouvelle colonne.

• Couleur d'arrière-plan : #0fffc7

Espacement

Avec les valeurs de remplissage de la colonne.

• Rembourrage supérieur : 70 pixels
• Rembourrage inférieur : 70px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

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

Ajouter des réseaux sociaux

Continuez en ajoutant un module de suivi des médias sociaux à la colonne 4.

Réinitialiser les styles de réseaux sociaux

Réinitialisez les styles d'élément pour chaque réseau social que vous ajoutez.

Alignement

Ensuite, passez à l'onglet Conception et modifiez l'alignement du module.

• Alignement du module : Centre

Paramètres des icônes

Modifiez également la couleur de l'icône.

• Couleur de l'icône : #000000

Ajouter le module d'option d'e-mail à la colonne 4

Supprimer du contenu

Continuez en ajoutant un module Email Optin à la colonne 4 et supprimez le titre et le corps du contenu.

Compte email

Ajoutez ensuite un compte de messagerie. Sans ajouter le compte de messagerie, le module ne s'affichera pas une fois que vous aurez quitté le générateur.

Supprimer la couleur d'arrière-plan

Continuez en supprimant la couleur de fond du module.

• Utiliser la couleur d'arrière-plan : Non

Paramètres des champs

Passez à l'onglet Conception et modifiez les paramètres des champs comme suit :

• Couleur d'arrière-plan des champs : rgba(0,0,0,0)
• Couleur du texte des champs : #000000
• Police des champs : Poppins

• Taille du texte des champs : 13px
• Largeur de la bordure des champs : 1px
• Couleur de la bordure des champs : #000000

Paramètres des boutons

Stylisez également le bouton de votre module.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 12px
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : 1px
• Police des boutons : Poppins
• Poids de la police du bouton : semi-gras
• Style de police des boutons : majuscule

• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px

Ajouter un module de texte dynamique à la colonne 4

Contenu dynamique

Le prochain et dernier module dont nous avons besoin pour compléter cette conception est un module de texte. Activez l'option de contenu dynamique dans la zone de contenu.

Ensuite, sélectionnez l'option « Date actuelle ».

• Contenu dynamique : date actuelle

Et modifiez les paramètres du contenu dynamique comme suit :

• Avant : Copyright ©
• Après : | Tous les droits sont réservés
• Format de date : personnalisé
• Format de date personnalisé : 20 ans

Paramètres de texte

Ensuite, passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police de texte : Poppins
• Couleur du texte : #000000
• Taille du texte : 16px

Espacement

Complétez les paramètres du module en ajoutant une marge supérieure et le tour est joué !

• Marge supérieure : 50px

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 ce tutoriel, nous vous avons montré à quel point il est facile de créer un magnifique pied de page global personnalisé avec le nouveau Theme Builder de Divi. Le module intégré et les options de conception de Theme Builder et Divi vous aident à gagner beaucoup de temps et à créer de superbes sites Web en un rien de temps. Nous espérons que ce tutoriel vous inspirera pour créer de magnifiques pieds de page globaux pour vos prochains projets Divi. 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.