Please enable the breadcrumb option to use this shortcode!

Les modules Divi > Le Module personne

Le module personne est une manière esthétique de mettre en avant des profils. Très utile dans une page "A propos", il te permettra aussi de présenter ton équipe de manière simple et efficace

Le module personne permet de créer une petite bio très visuelle et de l’insérer à n’importe quelle page de ton site web. Une photo, un sous-titre, une petite description et les liens vers les réseaux sociaux : tout y est pour que tes visiteurs associent des noms et des visages à ton site.

Une présentation esthétique et efficace
Le module personne peut présenter un profil de manière individuelle.
Elodie Sharma

Elodie Sharma

Consultante Junior

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Tu peux également présenter plusieurs profils les uns en dessous des autres ou côte à côte en choisissant une présentation en rangée avec plusieurs colonnes.

Célia Bila

Célia Bila

Développeur Full Stack

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Nelson Frank

Nelson Frank

Chef Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Elodie Sharma

Elodie Sharma

Consultante Junior

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Activer le Visual Builder
Pour créer et modifier le module personne directement sur le visuel de ton site, tu dois activer le visual builder. L’article Découvrir le Visual Builder t’explique comment faire.
Ajouter un Module Personne
Les modules doivent se positionner à l’intérieur d’une rangée (cadre vert).

Pour ajouter une rangée, clique sur le bouton + vert et choisis une colonne.

Comme tu peux le voir dans les exemples ci-dessus, le module Personne est fréquemment utilisé en plusieurs colonnes pour présenter en un coup d’oeil son équipe.

Choisis par exemple : rangée normale / 3 colonnes.

Pour en savoir plus, consulte les articles  Comprendre les sections Divi et Comprendre les rangées Divi.

Pour ajouter un module, clique sur un bouton + gris présent à l’intérieur des rangées.

Une petite fenêtre s’ouvre avec un menu sous forme de cartes.

Les modules sont rangés par ordre alphabétique : Fais défiler le menu vers le bas jusqu’à ton choix ou utilise la barre de recherche tout en haut de la fenêtre de module.

Sélectionne le module Personne.

La configuration du Module

La configuration des modules Divi se présente sous la forme de trois onglets :

  • Contenu
    Tu indiques ici quels sont les textes et les images ou icones que tu vas utiliser pour ton module Personne. Dans cette partie tu entres le contenu sans te soucier de son aspect.
  •  Style
    Tu donnes maintenant le style de ton choix aux éléments que tu as entrés dans la partie contenu.
  • Avancé
    Tu préféres coder ? Tu pexu t’exprimer ici pour personnaliser le style du module en .css.
Onglet Contenu

Choisis les éléments qui vont composer ton profil.
Tu peux laisser des éléments vides si tu ne souhaites pas les utiliser. Tu verras dans les modules « personne » montrés plus haut des profils qui utilisent, par exemple, certains réseaux sociaux et d’autres pas.

Composition du module personne
Partie texte
Compléte ici les champs que tu veux voir apparaître sur le profil. Aide-toi des images ci-dessus pour savoir à quoi chaque champ correspond.

Si ton personnaliseur de thème est bien configuré, les polices et couleurs choisies sont celles que tu as paramétrées pour l’ensemble du site. Tu n’auras donc pas grand chose à faire dans la partie style.

Pour configurer tes polices et couleurs par défaut, lis l’article sur le personnaliseur de thème.

Comme tu utilises le visual builder, tu peux constater tes changements directement sur ta page au fur et à mesure que tu ajoutes des champs.

Tu peux apporter les modifications directement sur ton visuel en cliquant sur la partie du texte que tu veux éditer comme sur l’exemple ci-dessous :

IMAGE

Ajoute l’image de profil que tu souhaites mettre en ligne.

Divi propose trois possibilités pour mettre en ligne simplement une image  :

Bibiothèque de Médias, te permet de sélectionner une image quetu as déjà mise en ligne précedemment.

Envoyer des fichiers, te permet de charger une image depuis ton ordinateur et de la stocker sur ton site.

Le champ Url, permet d’indiquer l’adresse url exacte de ton image.

Pour en savoir plus, reporte-toi à l’article insérer une image qui explore ces trois possibilités en détail.

Partie FOND

Cette partie est rarement utilisée pour le module Personne. Elle se compose de 4 onglets te permettant de choisir :

  • Une couleur de fond
  • Une couleur de fond avec dégradé
  • Une photo téléchargée depuis ton ordi ou prise dans ta bibliothèque de médias
  • Une vidéo
Pour en savoir plus, consulte l’article : Modifier les fonds des Modules.

Partie étiquette admin

L'étiquette permet de se répérer si tu travailles parfois avec le générateur divi sans utiliser le visuel.
Par défaut, toutes les étiquettes portent le nom de leur module (Texte, séparateur, image, personne ...). Tu peux en modifier le nom pour te faciliter leur repérage.

Onglet Style
Gagne du temps !

 

Si ton personnaliseur de thème est bien configuré, les polices et couleurs par défaut sont celles que tu as toi-même choisies. Tu n’auras donc pas grand chose à faire dans la partie style.

 

Pour configurer tes polices et couleurs par défaut, lis l’article sur le personnaliseur de thème.

Icône

Cette option contrôle la couleur des icônes de médiaux sociaux. Par défaut, elles apparaisent en gris et passent en noir quand on les survole afin d’indiquer qu’il s’agit d’un lien. Tu peux ici modifier la couleur de base et la couleur du survol.

Texte

Modifie l’apparence de ton titre rapidement pour garantir sa bonne lisibilité.

Sur un fond foncé, choisis un texte clair. Sur un fond clair, choisis un texte foncé. 

En tête Texte et Corps Texte

En-tête texte modifie le titre de ton Résumé.

Corps Texte modifie ce que tu as écrit dans le contenu ou directement sur ta page.

La police par défaut utilisée par Divi pour tous tes textes est la police Open Sans ou celle que tu as paramétré dans ton personnaliseur de thème.

Tu peux dans cette option choisir une apparence spécifique pour les textes de ce module. Des dizaines de polices issues de Google Font sont disponibles dans le menu déroulant. Tu peux également déterminer les couleurs de tes textes et les mettre en gras, en italique ou en majuscules.

Bordure

Encadre ton module si tu le désires en sélectionnant une couleur et une épaisseur de bordure.

Dimensionnement 

Donne une largeur maximale à ton module

Espacement 

Définis les marges internes et externes pour ton module. Tu peux aussi spécifier les marges à appliquer pour chaque appareil (ordinateur, mobile, tablette).

Animation

Utile si tu souhaites que ton module ne soit pas fixe sur ta page mais apparaisse subrepticement avec un effet (à utiliser avec beaucoup de modération)

Onglet Avancé

Parties Css (Id et classes Css, Personnalier Css)

Tu préféres coder ?

Nomme les classes et les .id pour pouvoir les styliser dans ta propre feuille de style.

Tu peux t’exprimer ici pour personnaliser le style du module en utilisant le langage .css.

Visibilité

Si ton module n’est pas adapté pour la vue ordinateur, mobile ou tablette, tu peux le désactiver sur un ou plusieurs de ces appareils.

Coche les appareils où le module n’apparaitra PAS.

Sauvegarder tes changements

r

N'oublie pas de cliquer sur "Sauvegarder les changements" pour "enregistrer les modifications" apportées sur le visual builder.

Le bouton "Sauvegarder les changements" se trouve tout en bas de ta page. Il est représenté par une bulle violette comportant trois petits points. Clique sur la bulle violette en bas au centre de ta page. En se dépliant elle découvre le bouton "Sauvegarder" sur lequel il faut cliquer.

Newsletter

Rejoins-nous !

Besoin d'aide, une question sur Divi ? Like la page Divi en français, rejoins-nous sur le Groupe Facebook, trouve des solutions et participe toi aussi ! Plus on est de fous plus on aime Divi 😉

Offre à la une

Offre Divi

  • + Licence Divi
  • + Mises à jour automatiques

60€ au lieu de 89€

Les formations

GAGNE DU TEMPS

Il y a forcément une formation adaptée à tes besoins

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Autres ressources « Modules DIVI »

Insérer une image

Insérer une image

Télécharge une image dans ta bibliothèque de médias directement depuis tes options divi, tes modules ou tes sections pour illustrer ton thème

Ajouter le logo

Ajouter le logo

Divi te permet de placer facilement ton logo sur ton site en modifiant les options du thème

Ajouter son Favicon

Ajouter son Favicon

Ajoute un favicon qui sera reconnu par tous les navigateurs sans entrer dans le code

Effectuer les Mises à Jour Divi

Effectuer les Mises à Jour Divi

Effectue les mises à jour Divi

Le thème Divi se répand à toute vitesse. Il convient aussi bien aux débutants qu'aux développeurs et leurs clients. Toi aussi rejoins-nous !

Modules de contenu

Utilisateurs

Polices d'écriture pré-installées

Maîtriser Divi sans perdre de temps

Les Formations Divi

Divi en un tour de Main

Débutant

Cette formation t'accompagne dans toutes les fonctionnalités de bases de Divi.
Un gain de temps inestimable !

Devenez Développeur Wordpress

Avancé

Webmarketing, expérience utilisateur, développement, référencement, sécurité, performance : Devenez un expert en travaillant sur de vrais projets acompagnés par des pros.

Terminer votre cursus avec le module travailler en Agence ou Devenir Auto-Entrepreneur.

Soyez Apte à recevoir votre première rémunération de dev. dès la fin de la formation !

Faire des sites pro sans coder

Confirmé

Tu veux construire tes sites ou ceux des autres sans apprendre le code ?
Avec la puissance de Divi et une formation Class-Active, deviens performant rapidement !

Formations Sur-mesure

Bénéficiaire d'un financement

Tu bénéficies d'un financement à la formation pour te reconvertir ou développer tes savoir-faire ?

Fais nous part de ton objectif pour que nous te proposions une formation qui correspond précisément à ton projet, à ton niveau actuel et à tes besoins.

https://class-active.fr/

Contacte Class:active

Le centre de formation aux métiers du web, 100% online, qui propose des workshops et formations coachés par des professionnels

Tél : 01 84 25 39 48
Web : class-active.fr

Contacte Nous

En cochant la case ci-dessus tu affirmes avoir pris connaissance de notre politique de confidentialité. Tu peux demander la suppression de tes données à tout moment en suivant la procédure et en nous contactant à l’adresse hello+rgpd@bee-too-bee.com.