Please enable the breadcrumb option to use this shortcode!

Les modules Divi > Le Module Résumé

Le module résumé est une combinaison élégante texte / image idéale pour donner un impact visuel fort à une information concise

Présenter ses services de manière percutente, permet à ses visiteurs d’identifier rapidement les valeurs de son entreprise, ou les avantages d’un produit : le module résumé est le module parfait !

Une mutitude de possibilités design

Voici quelques exemples visuels de ce que l’ont peut faire avec le module résumé :

Activer le Visual Builder
Pour créer et modifier le module résumé directement sur le visuel de votre site, tu dois activer le visual builder. L’article Découvrir le Visual Builder t’explique comment faire.
Ajouter un Module Résumé

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 Résumé est fréquemment utilisé en plusieurs colonnes pour présenter en un coup d’oeil plusieurs services ou valeurs.

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, cliquez 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 Résumé.

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 résumé. 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 peux t’exprimer ici pour personnaliser le style du module en .css.
Onglet Contenu

Choisis les éléments qui vont composer ton résumé.
Tu peux laisser des éléments vides si tu ne souhaites pas les utiliser. Tu verras dans les exemples montrés plus haut des résumés qui utilisent, par exemple, uniquement des titres mais aucun texte.

Composition du module résumé
Partie texte

Tu peux ajouter du texte de deux manières :

  • Dans le champ Contenu de la fenêtre de Paramètres
  • Encore plus simple, clique sur ton site à l’endroit où tu viens d’ajouter ton module : Tape ou Modifie ton texte directement sur le site.
LIEN

En indiquand une adresse url valide, tu transformes ton titre en un lien. C’est pratique pour emmener directement le visiteur à la page dédiée où il trouvera des détails sur cette information quand elle existe.

ICôNE

Tu peux accompagner ton résumé soit par une image, soit par une icône, soit par… aucun des deux.
Pour utiliser une icône, pousse le curseur « Utilisez les icônes ». Divi propose alors une liste d’icônes disponibles.
Clique sur celui de ton choix.
Tu le vois apparaître sur ton module.

IMAGE

Si tu n’as PAS choisi d’utiliser l’icône, Divi te propose d’ajouter une image ou une icône n’appartenant pas à Divi. Elle se placera au dessus ou à gauche de ton titre selon ton choix dans l’onglet Style.

Clique sur « Mettre en ligne ».

Divi propose  trois possibilités pour mettre en ligne simplement une image ou une icône  :

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

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

Le champ Url, te permet d’indiquer l’adresse url exacte de ton image ou icône.

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 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 ordinateur ou prise sur 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.

Image et icône

 

Place ton image ou ton icone au dessus du titre ou à sa gauche.

 

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 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ée 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 ? 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

4 Commentaires

  1. thibaud

    Merci pour ces informations. A quel point peut on modifier les images ? La sélection d’icônes est limitée. Peut on en importer d’autres ?

    Réponse
    • Céline Peyrot

      Bonjour Thibaud 🙂

      Pour les icônes, il n’est pas possible d’en importer directement dans divi. Par contre il est possible d’utiliser des moyens détournés pour utiliser d’autres icônes. Voici un tutoriel pour utiliser les icônes fontawesome dans Divi : https://www.elegantthemes.com/blog/tips-tricks/font-awesome-wordpress

      🙂

      Réponse
  2. Joris

    Bonjour,

    Comment fait-on pour que l’icône ne soit plus cliquable svp ? Le mieux que je puisse faire est de la rediriger sur la page ou elle se trouve, et cela provoque un retour en haut de page… Merci 🙂

    Réponse
    • Céline Peyrot

      Bonjour Joris,

      Elle ne l’est pas normalement si l’option « lien » dans l’onglet « Contenu » est vide. Est-ce le cas chez toi ?

      Réponse

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.