Guide d’utilisation

ÉDITEUR VISUEL DIVI

Activer le visual builder

Lorsque vous visitez le site web tout en étant connecté, une barre de WordPress apparaît dans le haut de votre navigateur. Pour modifier le contenu de la page, vous devez passer en mode d’édition. Pour ce faire, appuyez sur l’option « Activer le Visual Builder ».

La page va ensuite recharger en mode édition et vous pourrez modifier le contenu. Dans le cas d’une nouvelle page qui ne possède pas encore de contenu, vous devez d’abord sélectionner une option parmi les suivantes.

Pour écrire vous-même le contenu au complet, choisir « Construire à partir de zéro ». Si vous créez une page qui ressemble beaucoup à une page déjà existante, choisir « Cloner une page existante ». N’utilisez pas une mise en page à partir de l’option centrale. Pour la suite des exemples, j’utiliserai une page vierge.

Sections et rangées

Tout le contenu dans Divi se catégorise en trois grandes familles : Les sections, les rangées et les modules. Une section est une partie du site web contenant une ou plusieurs rangées. Les rangées quant à elles offrent plusieurs nombres et configurations différentes de colonnes dans lesquelles sont placés les modules. Finalement, les modules sont le cœur du contenu, ce sont les textes, images et tout autre type de contenu qui sera affiché sur le site web.

Pour ajouter une section, appuyez sur le bouton : + bleu
Sélectionnez ensuite le type de section désiré. La grande majorité du temps, une section de type « Normal » est la bonne option pour ajouter votre contenu.

Pour ajouter une section, appuyez sur le bouton : + vert
Sélectionnez ensuite la configuration de colonnes désiré.

Les modules DIVI

À l’intérieur d’une rangée, vous pouvez ajouter autant de modules que vous voulez. Vous pouvez aussi combiner plusieurs configurations de rangées pour créer du contenu plus varié. Pour ajouter un module, appuyez sur le bouton : + gris Sélectionnez ensuite le type de module désiré.

Pour modifier un module, appuyez sur le bouton + gris qui apparaît au survol du module dans Divi. Chaque module possède des paramètres similaires, soit le Contenu, le Style et les paramètres Avancés.

Dans l’onglet Contenu, vous pourrez changer les titres, images, et texte des modules (cela varie en fonction du module choisi). Dans l’onglet Style, vous pourrez changer les dimensions, couleurs et tailles de polices du contenu. L’onglet Avancé sert à ajouter des classes et identifiants CSS, ajouter du code personnalisé et faire des animations avancées. À moins de savoir ce que vous faites, ignorez ce menu.

Vous trouverez ci-dessous une description des principaux modules de Divi.

Après toute modifications, n’oubliez pas de sauvegarder avec le bouton « Sauvegarder » au bas à droite de la page, ou à l’aide du raccourci clavier « CTRL+S ».

Le module texte est l’un des principaux modules utilisés dans la création de site web. Vous pouvez l’utiliser pour afficher des titres, sous-titres, listes à puces, listes ordonnées, liens et texte normal. Le texte va dans l’onglet « Texte > Corps ». Vous pouvez aussi changer la couleur de fond du module avec l’onglet
« Fond » plus bas dans la même page.

Depuis l’onglet style, vous pouvez modifier les couleurs et tailles des différents types de texte. Veuillez noter que cette procédure est la même pour tout module Divi contenant du texte.

Tout d’abord, sélectionnez le type de texte à modifier (Dans l’ordre : normal, liens, listes à puces, listes ordonnées, citations « blockquotes »).

Modifiez ensuite les paramètres désirés puis sauvegardez à l’aide du bouton 

Dans le module image, vous n’avez qu’a appuyer sur l’image pour la changer à partir de la médiathèque de Divi, à partir de votre ordinateur ou en utilisant une URL externe.

Le module bouton est très utile pour afficher des liens de façon plus visuels et appeler l’utilisateur à s’engager dans une action (voir aussi l’Appel d’action). Les deux parties les plus importantes lors de la création d’un bouton sont le texte et le lien.

Le texte est ce qui est affiché sur le bouton.

Le lien est l’action du bouton. Cela peut être une page externe, une page de votre site, un pop-up. Les possibilités sont infinies.

N.B si le lien désiré est un article ou une page du site web, plutôt que d’écrire le lien de la page, utilisez l’icône du côté droit du champs « URL du lien du bouton ». Cela vous permet d’ajouter un lien dynamique qui change automatiquement si le lien de la ressource venait à changer.

Ces deux modules sont très semblables. Il s’agit d’un titre que vous pouvez cliquer pour afficher du contenu supplémentaire. La différence est que l’accordéon est un ensemble de bascules qui s’ouvrent une seule à la fois

Dans l’onglet Style, vous pouvez modifier le style de base de toutes les bascules d’un même accordéon. Depuis l’onglet contenu, vous pouvez ajouter autant de bascules que vous désirez et modifier leur contenu individuellement (Titre, contenu, style).

Le module vidéo est pratiquement identique au module vidéo. La seule différence est la présence d’options supplémentaires dans le style pour modifier le bouton « Jouer ». Vous pouvez ajouter le vidéo directement dans votre site web, mais la pratique recommandée est d’ajouter les vidéos à partir de YouTube.

Le module résumé est en réalité la combinaison d’un module image avec deux textes (titre et corps)

Le module appel d’action est la combinaison d’un titre, d’un corps et un bouton. Ces boutons servent à présenter une action et inciter le visiteur à agir sur votre site web (Visiter la boutique, remplir un formulaire, initier un contact, etc.). Le bouton n’apparaît que si une URL est ajoutée dans l’onglet Lien.

Le module d’infolettre est utile si vous possédez un service d’infolettres tel que MailChim ou, MailPoet.

En plus du titre et du contenu, vous devez également ajouter le compte de messagerie associé. Étant donné la complexité de la logique associée à ce type de contenu, il est recommandé de ne pas créer ce genre de module par vous-même.

Responsive Design

Par défaut, tout élément de Divi est « responsive », c’est-à-dire qu’il s’adapte à la taille de l’écran du visiteur. Cependant, certains éléments comme les textes doivent quand même subir quelques modifications (notamment la taille du texte). Pour modifier une valeur seulement pour une taille d’écran spécifique, utilisez l’icône de téléphone sur n’importe quelle propriété (couleur, taille, dimension, contenu, etc.) et changez les valeurs pour chaque type.

Vous pouvez ensuite redimensionner la taille de votre écran pour voir le résultat. Il est recommandé de vérifier sur votre téléphone mobile et si possible sur une tablette pour vérifier vos changements.