Comment ajouter des widgets de menu de catégorie de publication à votre pied de page Divi Global

Lorsque vous créez un pied de page personnalisé dans le générateur de thème de Divi, il existe plusieurs façons d'aborder l'ajout des éléments de pied de page. Vous pouvez opter pour un pied de page basé sur un module, où vous ajoutez des éléments de pied de page dans des modules de texte avec des liens appropriés, mais vous pouvez également décider d'ajouter différents widgets de pied de page à votre conception, en utilisant le module de barre latérale de Divi, et de les styliser à l'aide du module intégré de Divi. option. Dans le tutoriel d'aujourd'hui, nous allons vous montrer comment procéder pour la deuxième option. Plus précisément, nous allons vous montrer comment ajouter des widgets de menu de catégorie de publication à votre pied de page. Le style de conception que nous utilisons correspond parfaitement au pack de mise en page des recettes alimentaires. Nous commencerons par ajouter les différentes catégories de publications à notre site Web. Nous allons ensuite créer les menus de pied de page dans WordPress. Ensuite, nous créerons nos widgets et enfin, nous ajouterons les widgets à notre pied de page Divi personnalisé dans le Divi Theme Builder. Vous pourrez également télécharger le fichier JSON gratuitement !

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. Configurer des catégories de publication pour votre site Web

Accédez à vos catégories de messages

Dans la première partie de ce didacticiel, nous allons nous assurer que toutes les catégories de publication sont configurées avant de commencer à les ajouter aux menus de pied de page personnalisés. Pour ce faire, accédez à vos catégories de publication dans votre backend WordPress.

Configurer la structure de catégorie de poste de votre choix

Configurez toutes les différentes catégories de publication que vous souhaitez inclure dans votre pied de page si vous ne l'avez pas déjà fait. Pour ce didacticiel, nous aurons besoin de trois groupes différents de catégories de publication car nous allons inclure trois widgets de menu de catégorie de publication différents dans notre pied de page personnalisé.

2. Créez plusieurs menus WordPress de catégorie

Aller aux menus

Ensuite, nous allons créer un menu séparé pour chaque groupe de catégories de publication. Accédez aux menus dans les paramètres d'apparence de votre site Web WordPress.

Créer un premier menu de pied de page

Ajoutez un premier menu de pied de page et en lui donnant un nom reconnaissable.

• Nom du menu : Menu de pied de page n° 1

Ajouter des catégories de messages

Ajoutez votre premier groupe de catégories de publications à ce nouveau menu.

Créer un deuxième et un troisième menu de pied de page pour d'autres catégories de messages

Faites la même chose pour deux autres groupes de catégories de messages.

• Nom du menu : Menu de pied de page #2

• Nom du menu : Menu de pied de page n° 3

3. Créer des widgets de pied de page

Aller aux widgets

Maintenant que nous avons mis en place nos catégories de publication et nos menus de catégorie de publication, nous pouvons les placer dans nos widgets de la zone de pied de page. Pour ce faire, accédez aux widgets dans votre backend WordPress.

Ajouter le menu de pied de page n°1 à la zone de pied de page n°1

Là, ajoutez un premier widget de menu de navigation à votre zone de pied de page #1. Dans le menu de navigation, sélectionnez le premier menu de pied de page que vous avez créé dans la partie précédente de ce didacticiel.

Ajouter le menu de pied de page #2 à la zone de pied de page #2

Placez le menu de la deuxième catégorie de publication dans la deuxième zone de pied de page.

Ajouter le menu de pied de page n°3 à la zone de pied de page n°3

Et le troisième menu de pied de page dans la troisième zone de pied de page.

Ajouter des messages récents à la zone de pied de page #4

Le dernier widget dont nous avons besoin, que nous ajouterons à la quatrième zone de pied de page, est le widget des publications récentes. Ce widget affichera dynamiquement vos 5 derniers messages récents sous forme de liens.

3. Construire un pied de page global dans le générateur de thèmes Divi

Accédez à votre générateur de thème Divi et commencez à créer un modèle de pied de page

Maintenant que nos catégories de publications, nos menus de catégories de publications et nos widgets sont en place, il est temps de passer à Divi ! Accédez à votre Divi Theme Builder et commencez à créer un pied de page global ou personnalisé.

Paramètres de section

Couleur de l'arrière plan

Une fois à l'intérieur du modèle de pied de page, vous remarquerez une section. Ouvrez cette section et ajoutez-y une couleur d'arrière-plan. Le style que nous utilisons tout au long de cette conception correspond parfaitement au pack de mise en page des recettes alimentaires, mais l'approche fonctionnera avec n'importe quel type de conception que vous choisissez.

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

Image de fond

Ajoutez ensuite une image d'arrière-plan. Si vous souhaitez utiliser exactement le même que dans ce tutoriel, vous pouvez le trouver dans le dossier que vous pouvez télécharger au début de ce tutoriel.

• Taille de l'image d'arrière-plan : Ajuster

Espacement

Passez à l'onglet de conception de la section et supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter la ligne n° 1

Structure des colonnes

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

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez un arrière-plan dégradé.

• Couleur 1 : rgba (10,10,10,0,05)
• Couleur 2: rgba (10,10,10,0.18)

Dimensionnement

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

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

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez des valeurs de remplissage personnalisées dans l'onglet Conception.

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Frontière

Nous utilisons également une bordure droite sur le bureau.

• Largeur de la bordure droite :
  • Bureau : 2px
  • Tablette et téléphone : 0px
• Couleur de la bordure droite : #ff7864

Paramètres de la colonne 2

Espacement

Ensuite, ouvrez les paramètres de la colonne 2 et appliquez-y les valeurs de remplissage suivantes :

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Ajouter un module d'image à la colonne 1

Télécharger le logo

Il est temps d'ajouter des modules, en commençant par un module d'image dans la colonne 1. Téléchargez un logo de votre choix et stylisez-le comme vous le souhaitez.

Ajouter un module de texte à la colonne 2

Ajouter du contenu H2

Dans la deuxième colonne, nous ajoutons un module de texte avec du contenu descriptif H2.

Paramètres de texte H2

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

• Police de la rubrique 2 : Cormorant Garamond
• En-tête 2 Poids de la police : moyen
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte :
  • Ordinateur de bureau et tablette : 40 pixels
  • Téléphone : 35px
• Titre 2 Hauteur de ligne : 1,3 em

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Dans cette rangée, nous allons placer tous nos widgets. Choisissez la structure de colonnes suivante :

Couleur de l'arrière plan

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

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

Dimensionnement

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 : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur maximale : 1680px

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut.

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

Tout l'espacement des colonnes

Ensuite, ouvrez les colonnes individuellement et appliquez les valeurs de remplissage suivantes à chacune d'entre elles :

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Bordure de la colonne 1

Ensuite, nous allons ajouter une bordure à la colonne 1.

• Largeur de la bordure droite :
  • Ordinateur de bureau et tablette : 2 pixels
  • Téléphone : 0px
• Couleur de la bordure droite : #ff7864

Bordure de la colonne 2

Nous utilisons la même bordure, avec des valeurs réactives différentes, pour la deuxième colonne.

• Largeur de la bordure droite :
  • Bureau : 2px
  • Téléphone et tablette : 0px
• Couleur de la bordure droite : #ff7864

Bordure de la colonne 3

Et enfin, nous ajouterons également une bordure droite à la troisième colonne.

• Largeur de la bordure droite :
  • Ordinateur de bureau et tablette : 2 pixels
  • Téléphone : 0px
• Couleur de la bordure droite : #ff7864

Ajouter un module de barre latérale à la colonne 1

Il est temps d'ajouter nos widgets de menu de catégorie de publication ! Pour ce faire, nous utiliserons le module de barre latérale intégré de Divi. Ajoutez-en un à la première colonne de la ligne.

Sélectionnez la zone de pied de page #1

Sélectionnez la première zone de pied de page. Ceci est lié à notre premier menu de catégorie de publication que nous avons créé.

• Zone des widgets : zone de pied de page n° 1

Disposition

Passez à l'onglet de conception du module et désactivez le séparateur de bordure.

• Afficher le séparateur de bordure : Non

Paramètres du corps du texte

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

• Police de caractère : Montserrat
• Poids de la police du corps : moyen
• Couleur du corps du texte : #ffffff
• Taille du corps du texte : 13 px

Espacement

Et complétez les paramètres du module en ajoutant des rembourrages supérieur et inférieur aux paramètres d'espacement.

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %

Cloner le module de la barre latérale deux fois et placer les doublons dans les colonnes 2 et 3

Une fois que vous avez terminé le premier module de la barre latérale, vous pouvez le cloner deux fois et placer les doublons dans les colonnes 2 et 3.

Modifier les zones de pied de page

Modifiez la zone de widget pour chaque doublon pour afficher les différents menus de catégorie de publication que vous avez créés.

• Zone des widgets : zone de pied de page n° 2

• Zone des widgets : Zone de pied de page n° 3

Ajouter un module de barre latérale à la colonne 4

Maintenant, dans la dernière colonne, nous ajoutons un nouveau module de barre latérale.

Sélectionnez la zone de pied de page #4

Dans ce module, nous sélectionnons la quatrième zone de pied de page que nous avons créée contenant nos publications récentes.

• Zone des widgets : zone de pied de page n° 4

Paramètres du texte du titre

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

• Police du titre : Cormorant Garamond
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 30 px

Paramètres du corps du texte

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

• Police de caractère : Montserrat
• Poids de la police du corps : moyen
• Couleur du corps du texte : #dddddd
• Taille du corps du texte : 13 px

Espacement

Et complétez les paramètres du module, et ce didacticiel, en ajoutant des rembourrages haut et bas personnalisés aux paramètres d'espacement du module. C'est ça! Assurez-vous d'enregistrer toutes les modifications de Divi Theme Builder avant de visualiser le résultat sur votre site Web.

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %

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é comment combiner le Divi Theme Builder avec les widgets de pied de page WordPress et le module Divi Sidebar. Plus précisément, nous vous avons montré comment ajouter des widgets de menu de catégorie de publication à votre pied de page global pour faciliter la navigation de vos visiteurs. Cette approche vous aidera à styliser les éléments de pied de page à l'aide des options intégrées de Divi tout en conservant les menus et les widgets de pied de page dans votre backend WordPress. Vous avez également pu télécharger le fichier 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.