Obtenez un hébergement instantané avec ELEMEROR et ELEMENTOR Pro

avec CDN, SSL et sauvegardes.

Commencez

Comment créer un pied de page personnalisé avec Divi Builder

Rifat Divi Tutorials Apr 11, 2022

Grâce au Divi Theme Builder, une nouvelle ère dans la création de sites Web a commencé. Avec cette nouvelle fonctionnalité, vous pouvez ajouter dynamiquement des pieds de page globaux à vos pages et articles. Pour ajouter un pied de page à n'importe quelle page ou publication, utilisez simplement le générateur de thèmes de Divi (qui est inclus avec le thème Divi). Maintenant, dans cet article, nous allons vous montrer comment créer et ajouter un pied de page global à votre site Web. De plus, vous pouvez télécharger gratuitement le fichier JSON!

Aperçu

Voyons d'abord à quoi ressemble le pied de page global sur des écrans de différentes tailles avant de commencer.

Procédure de conception

Tout d'abord, connectez-vous à votre tableau de bord WordPress. Dans vos options de thème Divi, accédez au générateur de thèmes.

Là, vous avez la possibilité d'utiliser un pied de page global préexistant ou d'en créer un nouveau à partir de zéro à l'aide de la bibliothèque Divi. Nous allons créer un pied de page personnalisé à partir de zéro dans cette leçon, alors allez-y et sélectionnez la première option.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Rubrique n° 1

Couleur BG

Il est temps de faire preuve de créativité maintenant! Ouvrez la section sur la page et modifiez la couleur d'arrière-plan de la section.

  • Couleur de fond : #000000

Espacement

Ensuite, mettez à jour l'espacement des sections en fonction des valeurs suivantes.

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

Frontière

L'étape suivante consiste à ajouter une bordure en haut, à gauche et à droite.

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

Boîte ombre

Une boîte-ombre devrait également être incluse 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

Ajoutez maintenant une nouvelle ligne à une colonne à la section.

Ajouter un nouveau module de texte

Ensuite, ajoutez un module de texte et ajoutez une copie à ce module.

Paramètres de texte H2

Modifiez les paramètres de texte H2 dans l'onglet de conception du module selon vos besoins:

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

Dimensionnement du module de texte

Le module doit également avoir une largeur maximale.

  • Largeur maximale: 700pixels

Ajouter un module de bouton

Juste en dessous du module de texte, ajoutez un module de bouton et remplissez-le avec n'importe quelle copie que vous aimez.

Alignement des boutons

Modifiez l'alignement du bouton au centre dans l'onglet de conception du module.

  • Alignement des boutons: centré

Paramètres des boutons

Maintenant, stylisons 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: 0pixel
  • Rayon de la bordure du bouton: 100px
  • Espacement des lettres des boutons: 1px
  • Police du bouton : Poppins
  • Poids de la police du bouton: semi-gras
  • Style de police des boutons: majuscules

Espacement des boutons

Il est temps d'ajouter un rembourrage personnalisé.

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

Rubrique n° 2

Couleur de l'arrière plan

Le prochain chapitre normal est là ! Sélectionnez une couleur d'arrière-plan blanche pour la section.

  • Couleur de fond : #ffffff

Espacement

Retirez tout le rembourrage du haut et du bas.

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

Frontière

La section doit également avoir un border-radius ajouté.

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

Boîte ombre

Terminez maintenant l'édition de la section en ajoutant une ombre de boîte.

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

Ajouter une nouvelle ligne

Vous pouvez maintenant ajouter une nouvelle ligne à votre section en suivant ces instructions:

Dimensionnement des lignes

Ouvrez les paramètres de ligne et activez la ligne pour occuper tout l'écran sans ajouter de modules supplémentaires.

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

Écartement des rangs

Retirez le rembourrage de la ligne en haut et en bas.

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

Espacement des colonnes

Accédez aux paramètres de colonne et ajoutez des valeurs de remplissage spécifiques pour les différentes largeurs d'écran.

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

Module de texte 1

C'est le moment ou jamais pour les ajouts de modules ! Ajoutez un module de texte standard à la colonne 1 et remplissez-le avec ce que vous choisissez.

Paramètres de texte

Modifiez les paramètres de texte dans l'onglet de conception du module selon vos besoins:

  • Police du texte : Poppins
  • Poids de la police du texte : Gras
  • Couleur du texte : #000000
  • Taille du texte: 17px
  • Alignement du texte : Centré

Espacement

L'étape suivante consiste à ajouter des marges supérieures et inférieures uniques.

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

Visibilité du module diviseur

Les modules de séparation peuvent être ajoutés juste en dessous du module de texte si l'option "Afficher le séparateur" est cochée.

  • Afficher le diviseur : Oui

Doubler

Changez maintenant la couleur.

  • Couleur de ligne : #000000

Dimensionnement

Le dimensionnement du séparateur peut également être modifié.

  • Largeur : 15%
  • Alignement du module : Centre

Module texte 2

Des modules de texte peuvent maintenant être ajoutés à la colonne.

Lien

Incluez une URL vers la page vers laquelle vous voulez faire pointer ce module.

Paramètres de texte

Dans l'onglet conception, ajustez les paramètres de texte comme suit:

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

Espacement

Prévoyez également de l'espace en haut et en bas de la page.

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

Texte Module 2 Clonage

Il est possible de cloner le deuxième module de texte dans la colonne un nombre illimité de fois une fois sa construction terminée (en fonction du nombre d'éléments de pied de page cliquables que vous souhaitez inclure).

Modifier les liens

Pour chaque copie, assurez-vous de mettre à jour le contenu et les liens du module.

Cloner la colonne deux fois

Vous pouvez cloner une colonne deux fois une fois que vous avez fini de la construire et de tous ses modules.

Colonne 2 Changement de couleur BG

Vous pouvez cloner une colonne deux fois une fois que vous avez fini de la construire et de tous ses modules.

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

Ajouter une nouvelle colonne

Une quatrième colonne doit alors être ajoutée.

Couleur de l'arrière plan

Colorisez le fond de la nouvelle colonne.

  • Couleur de fond: #0fffc7

Espacement

En plus des valeurs de remplissage dans la colonne.

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

Icône de médias sociaux

Ajoutez un module de suivi des médias sociaux à la colonne 4 pour compléter le tableau.

Alignement

Dans l'onglet Conception, ajustez la position du module.

  • Alignement du module : Centre

Icône

Modifiez maintenant la couleur de l'icône.

  • Couleur de l'icône: #000000

Courriel

Continuez en insérant un module d'inscription aux e-mails dans la colonne 4, puis en supprimant le titre et le contenu du corps. Ensuite, liez un compte de messagerie personnel. Si le compte de messagerie n'est pas ajouté, le module n'apparaîtra pas une fois que vous aurez quitté le générateur.

Supprimez également BG du module de messagerie.

Réglage des champs

Accédez à l'onglet conception et effectuez les ajustements suivants dans les champs:

  • Couleur de fond 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

Bouton

Changez maintenant le style du 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: 0pixel
  • Rayon de la bordure du bouton: 100px
  • Espacement des lettres des boutons: 1px
  • Police du bouton : Poppins
  • Poids de la police du bouton: semi-gras
  • Style de police des boutons: majuscules
  • Rembourrage supérieur: 15px
  • Rembourrage inférieur: 15px

Ajouter un module de texte dynamique

Enfin, nous devons ajouter un module de texte pour terminer cette conception. Dans la zone de contenu, sélectionnez l'option de contenu dynamique. À partir de là, apportez les modifications suivantes.

  • Contenu dynamique: date actuelle
  • 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

Dans l'onglet Conception, modifiez les paramètres suivants.

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

Espacement

Vous avez terminé avec les paramètres du module si vous ajoutez une marge supérieure.

  • Marge supérieure: 50px

Aperçu final

Jetons un dernier coup d'œil aux résultats sur différentes tailles d'écran maintenant que nous avons terminé tous les processus.

Réflexions finales

Nous vous avons appris à utiliser le nouveau générateur de thèmes de Divi pour créer un superbe pied de page global personnalisé dans ce guide. Avec l'aide des modules intégrés et des options de conception de Theme Builder et de Divi , vous pouvez créer de magnifiques sites Web en quelques heures. Notre objectif est que vous utilisiez ce didacticiel pour construire de jolis pieds de page globaux Divi à l'avenir. N'hésitez pas à laisser des questions ou des commentaires dans la section des commentaires ci-dessous!