Guide, Divi : comprendre la Structure de Divi, les éléments de la page et les commandes pratiques de l’Éditeur.

Dans ce guide, je vais vous montrer comment modifier facilement les éléments de votre page lorsqu’elle est créée avec le thème Divi. Divi est un thème ET un constructeur de pages qui permet de personnaliser votre site sans avoir besoin de connaissances en programmation.

1. Accéder à vos Pages et à l’Éditeur Divi
2. Comprendre la Structure de Divi
   • Les Éléments Grisés dans la Page
   • Les Commandes Pratiques de l’Éditeur
3. Modifier un Élément
4. Ajouter un Nouveau Module
5. Vérifier les Modifications sur Smartphone

Pour commencer, connectez-vous à votre tableau de bord WordPress et suivez ces étapes :

• Cliquez sur Pages dans le menu latéral.
• Trouvez la page que vous souhaitez modifier et cliquez sur Modifier.
• Cliquez sur le bouton Activer le constructeur Divi.

Divi utilise une structure composée de sections, de lignes et de modules :

• Sections : Elles contiennent des lignes et peuvent être en pleines largeur ou régulières. Les sections sont indiquées en bleu dans l’interface.
• Lignes : Elles définissent la mise en page et peuvent avoir différentes colonnes. Les lignes sont représentées en vert.
• Modules : Ce sont les éléments que vous ajoutez (textes, images, boutons, etc.). Les modules apparaissent en gris.

Un code couleur pour vous aider !

Chaque couleur représente une couche dans la structure de votre page, ce qui vous permet de visualiser rapidement la hiérarchie des éléments. Voici un aperçu :

• Bleu pour les Sections : Utilisez cette couleur pour identifier rapidement les grandes zones de contenu.
• Vert pour les Lignes : Cela vous aide à repérer les divisions à l’intérieur de chaque section, si les éléments sont répartis dans une ou plusieurs colonnes.
• Gris pour les Modules : Cette couleur permet de voir les éléments individuels que vous ajoutez, comme les textes et les images.

Cette distinction de couleurs facilite la gestion de votre mise en page, et vous permet de sélectionner facilement l’élément que vous souhaitez modifier.

Dans Divi, certains éléments peuvent apparaître en gris dans l’éditeur, ce qui indique qu’ils sont masqués pour certaines vues (PC, tablette ou smartphone). Comprendre cette fonctionnalité est essentiel pour une personnalisation efficace de votre site.

a. Identification des Éléments Grisés

Lorsque vous modifiez une page, les éléments grisés représentent ceux qui sont désactivés ou masqués dans la vue active (PC | Tablette | Smartphone).

• • Cela peut être particulièrement utile pour simplifier la mise en page pour les smartphones.
  • Ou si vous avez besoin de masquer certains éléments de votre page provisoirement.

b. Masquer ou Démasquer des Éléments

1. Accéder aux Paramètres d’un Élément :
   • Cliquez sur l’icône de réglages de l’élément que vous souhaitez modifier.
2. Options de Visibilité :
   • Accédez à l’onglet Avancé. Dans la section Visibilité, vous pouvez cocher ou décocher les cases pour masquer ou afficher l’élément sur les appareils de bureau, tablette ou smartphone. Cela vous aide à organiser votre contenu et à l’adapter à chaque type d’écran.

c. Vérifier les Zones Masquées

• Pour s’assurer que votre site s’affiche correctement sur tous les appareils, passez régulièrement d’une vue à l’autre (bureau, tablette, mobile). Les éléments masqués apparaîtront en gris dans l’éditeur, vous permettant de les repérer facilement et de vérifier leur impact sur la mise en page.

 Le panneau de contrôle se situe en bas de l’éditeur de page Divi, pour l’ouvrir cliquez sur les trois petits points violets. Voici un aperçu de leurs principales fonctionnalités :

1. En bas à gauche  :

• Affichage filaire : Vous permet de visualiser la structure de votre page de manière simplifiée, sous forme de blocs. Cela vous permet d’accéder plus rapidement et facilement à certaines zones ou éléments à modifier.
• Zoom arrière : La fonction de zoom arrière dans Divi est un outil utile qui vous permet de voir une vue d’ensemble de votre page pendant que vous l’éditez.
• Responsive : Les trois icônes représentant différents types de vue PC, tablette et mobile, permettent d’optimiser l’affichage de votre site sur chaque type d’écran en ayant un aperçu en direct.

2. Au centre :

• Insérer une Mise en Page : Cette option vous permet d’ajouter rapidement une mise en page préconçue à votre page.
  
• Sauvegarder dans la Bibliothèque : Avec cette option, vous pouvez enregistrer votre mise en page actuelle ou des sections spécifiques dans la bibliothèque Divi. Cela vous permet de réutiliser ces éléments dans d’autres pages ou projets sans avoir à les recréer, ce qui vous fait gagner du temps et facilite la cohérence de votre design.
  
• Effacer le Modèle : En cliquant sur cette option, vous pouvez supprimer tous les éléments de votre page actuelle, vous permettant de repartir sur une base vierge. 
  
• Au Centre du Panneau de Contrôle : Cette fonctionnalité vous permet soit de fermer le panneau de contrôle en cliquant sur la croix. Soit de le déplacer vers le haut ou sur les côtés de l’écran en restant au survol.
• Réglages de la Page : Cette option ouvre les paramètres de la page, où vous pouvez ajuster les options générales telles que le titre de la page, les réglages SEO, l’image de couverture, et d’autres paramètres spécifiques qui affectent l’apparence et le fonctionnement de la page dans son ensemble.
  
• Modification de l’Historique : Cette fonctionnalité vous permet de voir et de gérer l’historique de vos modifications. Vous pouvez annuler ou rétablir des actions récentes, ce qui est très utile pour corriger rapidement des erreurs ou revenir à une version précédente de votre travail.
• Portabilité : L’option de portabilité vous permet d’importer ou d’exporter des mises en page ou des sections sur votre ordinateur.

3. En Bas à Droite de l’Éditeur Divi

• Icône de Recherche : Cette icône vous permet de rechercher rapidement des éléments dans votre page.
• Icône des Couches (calques) : En cliquant sur cette icône, vous accédez à une vue en couches de votre page.
• Icône d’Aide : Cette icône vous dirige vers la documentation et les ressources d’aide de Divi. Vous pouvez y trouver des tutoriels, des conseils et des réponses à vos questions.
• Bouton de Sauvegarde : Pensez à sauvegarder vos modifications régulièrement. Chaque fois que vous apportez des changements et que vous avez vérifié leur bon fonctionnement, utilisez le bouton de sauvegarde. Cela garantit que vos progrès sont enregistrés et vous pouvez revenir à une version précédente si nécessaire grâce au bouton : « Modification de l’Historique ». Une sauvegarde fréquente vous protège contre la perte de données et vous permet de travailler en toute tranquillité.

Pour modifier un élément, suivez ces étapes :

a. Sélectionner l’Élément

• Sur la page, survolez l’élément que vous souhaitez modifier (par exemple, un texte ou une image).
• Cliquez sur l’icône de réglages (une roue dentée) qui apparaît.

b. Modifier le Contenu

Dans la fenêtre de paramètres qui s’ouvre :

• Texte : Modifiez le texte dans l’onglet Contenu.
• Image : Changez l’image en cliquant sur l’icône de la bibliothèque média (pour savoir comment intégrer une image optimisée pour le web rendez vous sur l’article « Comment Ajouter des Images dans WordPress »).
• Boutons : Pour modifier un bouton :
  • Dans l’onglet Contenu, trouvez les options pour le texte du bouton et l’URL de destination. Vous pouvez changer le texte du bouton (par exemple, « En savoir plus ») et ajouter un lien vers une page ou un site externe.
  • Dans l’onglet Design, vous pouvez personnaliser l’apparence du bouton : couleur de fond, taille, style des bordures, etc… (plus d’informations dans l’article : « Modifier le Design de vos Pages avec Divi »).
• Vidéos : Pour ajouter ou modifier une vidéo :
  • • Dans l’onglet Contenu, sélectionnez le type de vidéo que vous souhaitez utiliser. Vous pouvez ajouter un lien URL ou une vidéo de votre médiathèque (veillez à bien compresser la vidéo avant de l’ajouter à votre page dans ce cas).
  • Collez l’URL de la vidéo dans le champ approprié. Vous pouvez également définir des options comme l’alignement et le ratio d’aspect.
  • Dans l’onglet Design, vous pouvez ajuster les marges et les espacements autour de la vidéo (plus d’informations dans l’article : Modifier le Design de mes Pages avec Divi).

c. Personnaliser le Style

• Allez dans l’onglet Design pour personnaliser l’apparence :
  • Couleur du texte
  • Taille de la police
  • Marges et espacements

Toutes ces étapes et les options en détail dans l’article : « Modifier le Design de vos Pages avec Divi ».

d. Enregistrer vos Modifications

Une fois vos modifications terminées, n’oubliez pas de cliquer sur le bouton Enregistrer en bas de la fenêtre.

Pour ajouter un nouvel élément à votre page :

• Cliquez sur le bouton + (gris) dans la section ou la ligne où vous souhaitez ajouter un module.
• Sélectionnez le type de module que vous souhaitez ajouter (texte, image, galerie, etc.). Attention, les traductions peuvent être approximatives en français.
• Suivez les mêmes étapes que celles indiquées pour modifier le contenu et le style.

Avant de finaliser vos modifications, il est crucial de s’assurer que les changements apportés n’ont pas impacté la vue pour les appareils mobiles. Voici comment procéder :

a. Activer la Vue Résponsive

1. Dans l’éditeur Divi, en bas à droite.
2. Basculez vers la Vue Mobile :
   • • Cliquez sur l’icône pour passer en mode vue mobile. Cela vous permettra de voir comment votre page s’affiche sur un smartphone.

b. Vérifier et Ajuster le Contenu

1. Inspecter Chaque Élément :

• • Examinez le texte, les images et les boutons pour vous assurer qu’ils sont bien visibles et facilement cliquables sur un petit écran.

2. Ajustements Spécifiques :

• • • Si vous constatez des éléments mal alignés ou trop petits, vous pouvez ajuster les paramètres de style (taille de police, marges, espacements) spécifiquement pour la vue mobile.

c. Tester les Liens et Fonctionnalités

N’oubliez pas de tester tous les liens, boutons et formulaires pour vous assurer qu’ils fonctionnent correctement sur smartphone en cas de modification de ces derniers.