Accéder à l’Éditeur Visuel

Pour accéder à à l’Éditeur Visuel, depuis la liste des Pages de Formations, deux options sont possibles :

Depuis la page d’une Formation :

1. Survoler le titre de la Page de Formation pour afficher les différents liens
2. Cliquer sur lien Éditer avec Divi

Lors de la modification d’une page :

1. Survoler le titre de la Page de Formation pour afficher les différents liens
2. Cliquer sur le lien Modifier
3. Dans l’Éditeur Page qui s’affiche, cliquer sur le bouton Éditer avec le constructeur Divi

L’Éditeur Visuel est affiché.

1. Pour accéder aux différentes fonctions de l’Editeur Visuel, cliquez sur l’icône violet affiché en bas de votre écran.
2. De nouveaux éléments cliquables sont affichés à gauche, au centre et à droite de l’écran.

La barre d’outils de l’Éditeur Visuel est affichée en bas à gauche de votre écran et vous permet de choisir le mode de travail que vous souhaitez utiliser dans l’Editeur Visuel :

• Mode « Survol » ou « Hover mode » : dans ce mode, le survol de la souris sur un Bloc de type Section, Ligne ou Module affiche une barre d’icônes pour ce Bloc

• Mode « Clic » ou « Click Mode » : dans ce mode, le clic de la souris sur un Bloc de type Section, Ligne ou Module affiche une barre d’icônes pour ce Bloc

• Mode « Grille » ou « Grid Mode » : dans ce mode, les barres d’icônes de tous les Blocs de la Page sont affichés simultanément

La barre d’outils vous permet également de bénéficier d’un aperçu Responsive Design de vos Pages dans différents modes, poste fixe, tablette et smartphone.

Pour masquer la barre d’outils et les autres éléments affichés, cliquez sur l’icône « X » en bas au centre de l’écran.

Accéder et personnaliser les Paramétrages de Page depuis l’Éditeur Visuel

Pour accéder aux Paramètres d’une Page depuis l’Éditeur Visuel

1. Cliquer sur l’icône 3 points, affichée en bas au centre de l’écran, pour faire apparaître toutes les icônes.
2. Cliquer sur l’icône « Engrenage » pour ouvrir les Paramètrages de Page

Pour personnaliser les Paramétrages de Page depuis l’Éditeur Visuel

3. Dans la fenêtre qui s’affiche, depuis les trois onglets : Contenu, Design et Avancé, il est possible de modifier :

• Sous l’onglet Contenu
  – Le Titre
  – L’Extrait (texte qui apparaît pour expliquer le Contenu de la page dans la fonction de recherche)
  – L’Image présentée

• Sous l’onglet Design
  – La Palette de couleur
  – L’Espacement (écartement des colonnes)
  – Le Texte

• Sous l’onglet Avancé
  – Personnaliser CSS
  – Performances
  – Visibilité
  – Poste

Manipuler les Blocs depuis l’affichage visuel

Ajouter des Blocs

Depuis l’Éditeur Visuel, il est possible d’ajouter ou de modifier les Blocs suivants : Section, Ligne, Colonne.

Pour ajouter une Section :

1. Survolez une Section déjà existante
2. Cliquez sur l’icône cercle bleu (+) qui s’affiche en bas de cette Section

Une  nouvelle Section est ajoutée en dessous de la Section déjà existante.

Après avoir ajouté une Section, vous pouvez lui ajouter des Lignes.

Pour ajouter une Ligne à une Section :

1. Cliquez sur l’icône cercle vert (+) qui s’affiche à l’intérieur de n’importe quelle Section vide ou lors du survol d’une Ligne déjà existante
2. Choisissez le colonnage souhaité pour cette Ligne

Une Section peut contenir plusieur Lignes et vous pouvez combiner des Lignes avec des nombres de Colonnes différents pour créer des mises en page variées.

Après avoir ajouté des Lignes, vous pouvez y placer des Modules.

Pour ajouter un Module :

Les Modules peuvent être ajoutés à l’intérieur de chaque Colonne de chaque Ligne, et chaque Colonne peut contenir plusieurs Modules.

• Les Modules sont les Blocs de base de votre Page, ils en constituent le contenu
• Le CMS Knowledge Place est livré avec plus de 30 Modules différents que vous pouvez utiliser comme vous le souhaitez
• Vous pouvez utiliser des Modules de base tels que le texte, les images et les boutons, ou des Modules plus avancés, comme Diaporama et Portefeuille.

1. Cliquez sur l‘icône cercle gris (+) qui existe à l’intérieur de n’importe quelle Colonne vide ou lors du survol d’un Module déjà existant
2. Un panneau vous permet de choisir le Module à ajouter, et un champ de recherche vous permet de retrouver rapidement un Module en tapant tout ou partie de son nom
3. Choisissez le Module désiré

Il est ajouté à votre Page et le panneau de configuration du Module apparaît.

Copier coller un Module Image ou Texte depuis le Presse-papiers

Vous pouvez créer un Module Image ou un Module Texte directement à partir d’une image ou d’un texte que vous avez copié dans le « Presse-papiers » de votre ordinateur.

La barre d’entête de l’Éditeur Visuel comporte une option « Créer un Module à partir du Presse-papiers ».

Dans le cas d’une image, cette option téléverse automatiquement l’image présente dans le presse-papiers dans votre Bibliothèque Médias, puis crée et enregistre un Module Image dans le presse-papiers de l’Éditeur Visuel. Ce module Image est immédiatement disponible pour être collé dans l’Éditeur Visuel en utilisant l’option « Coller Module ».

Voici comment procéder en utilisant par exemple une image créée par l’outil Capture de Windows 10.

4. Votre Module Image est créé et prêt à l’emploi !

Déplacer un Bloc

Vous pouvez modifier la disposition des Blocs par glisser-déplacer. Vous pouvez par exemple :

• Déplacer une Section au-dessus ou en dessous d’une autre Section
• Déplacer une Ligne au sein de sa Section ou dans une autre Section
• Déplacer un Module dans une autre Colonne, Ligne ou Section

Pour déplacer un Bloc :

1. Passez votre souris au dessus du Bloc à déplacer           
2. Déplacez le Bloc en cliquant sur l‘icône Double Croix Fléchée et en maintenant le bouton de souris appuyé    
3. Relâchez le bouton de souris lorsque le Bloc est à l’emplacement souhaité

Si votre Page comporte des Sections standards et des Sections en pleine largeur, vous ne pouvez pas :

• Déplacer un Module en pleine largeur au sein d’une Section standard
• Déplacer un Module standard au sein d’une Section en pleine large

Paramétrer un Bloc (Configurer et personnaliser les Blocs)

Chaque Section, Ligne et Module peut être personnalisée de différentes façons.

Vous pouvez accéder au paramètres d’un Bloc en cliquant sur l‘icône engrenage qui s’affiche en survol de n’importe quel Bloc de la Page.

Cela va afficher le panneau de Paramètres pour le Bloc spécifié.

Chaque panneau de paramètres est divisé en trois onglets : Contenu, Style et Avancé.

Chaque onglet est organisé en volets que vous pouvez ouvrir ou fermer avec un clic de la souris.

• L’onglet Contenu est celui où vous pouvez ajouter du contenu, comme les images, les vidéos, les liens et les étiquettes d’administration
• L’onglet Style est celui où nous avons placé tous les paramètres de conception intégrés pour chaque type de Bloc. Selon ce que vous éditez, vous pouvez contrôler une grande variété de paramètres de conception en un clic : la typographie, l’espacement (rembourrage et marge), les styles de bouton, et bien plus encore.
• L’onglet Avancé permet, si vous voulez encore plus de encore plus de contrôle, d’appliquer un CSS personnalisé, ajuster la visibilité en fonction du périphérique et, selon l’élément que vous éditez, faire des réglages encore plus précis.

Personnaliser l’Éditeur Visuel

Pour personnaliser l’Éditeur Visuel

1. Cliquer sur l’icône avec les 3 points affichée le plus à gauche de la barre d’outils de l’Éditeur Visuel, en bas à gauche de votre écran.
2. La fenêtre « Configurations du constructeur Divi » est affichée.

• Barre d’outils « Configuration du constructeur Divi » : cette barre vous permet d’activer ou désactiver les fonctions que vous souhaitez voir apparaître en permanence dans la barre d’outils de l’Éditeur*.

• Champ « Mode d’affichage par défaut du générateur »  : ce champ vous permet de définir le mode de travail par défaut dans l’Éditeur Visuel.

• Champ « Interface Builder » : ce champ vous permet de choisir le mode de travail par défaut dans le Visual Builder.
  –  « Déplacer module » : dans ce mode, le survol de la souris sur un Bloc de type Section, Ligne ou Module affiche une barre d’icônes pour ce Bloc.
  –  « Déverrouiller le module » :  dans ce mode, le clic de la souris sur un Bloc de type Section, Ligne ou Module affiche une barre d’icônes pour ce Bloc.
  –  « Grille » : dans ce mode, les barres d’icônes de tous les Blocs de la Page sont affichés simultanément.

• Champ « État de l’historique » : ce champ vous permet de définir la fréquence de création de l’état de l’historique pour rendre cette liste plus gérable et améliorer les performances sur les anciens ordinateurs. 

• Champ « Paramètres Modal Position par défaut » : ce champ vous permet de définir la position modale par défaut du panneau de configuration.

• Champ « Options de la Page » : ce champ vous permet de choisir le mode de construction de votre Page, lorsque vous ouvrez la page pour la première fois.

Le groupe de commutateurs suivant :

• « Interface Builder » : ce champ permet de désactiver l’effet rebond à l’ouverture des fenêtres modales du Visual Builder (comme les fenêtres de paramètres des Blocs).
• « Afficher les modules désactivés à 50% d’opacité » :  ce champ vous permet d’activer un affichage avec une opacité de 50% pour les Modules qui sont désactivés, ou de laisser ces Modules masqués
• « Paramètres de groupe en fermés » : ce champ vous permet de choisir si les volets des onglets des panneaux de configuration doivent être ouverts ou fermés par défaut à l’ouverture du panneau de configuration.

Pour quitter l’Éditeur Visuel et revenir à la page telle que l’utilisateur final la verra dans son navigateur,

Pour quitter l’Éditeur Visuel et revenir sur  l’Éditeur de Page :