DIVI: PREMIÈRE PRISE EN MAIN
Création d’une page
Dans l’épisode précédent, nous avons créé une page d’accueil intitulée Manger Healthy: Les Meilleures Recettes de Cuisine. Nous nous rendons donc dans le menu Page et nous ouvrons notre page d’accueil.
Différences entre une page et un article sur WordPress
Avant d’aller plus loin, expliquons la différence fondamentale entre une page et un article.
Un article est dynamique. Il est relié à d’autres articles via des catégories que l’on peut définir à volonté. Il fait partie d’une bibliothèque que l’on peut trier par date, par auteur, par catégorie,…
Une page est statique. Elle s’affiche en-dessous d’un menu ou via un lien interne de votre site. Vous pouvez la mettre à jour comme bon vous semble mais elle n’est pas supposée être reliée à d’autres pages par des catégories.
Il est à noter qu’en dehors de ces différences fondamentales, l’édition des articles et des pages s’effectue exactement de la même manière.
Activation du Divi Builder
Le menu d’édition de la page nous permet de définir quelques paramètres fondamentaux sur lesquels nous reviendrons plus tard. Pour activer le divi builder sur votre page, il suffit de cliquer sur Utiliser le générateur Divi.
Ceci fait, on remarque que l’éditeur textuel standard de WordPress a été remplacé. Le générateur DIVI se présente sous une forme structurelle où chaque élément est décrit dans un tableau. Au premier coup d’oeil, on peut comprendre que DIVI fonctionne par emboîtement entre des sections en bleu, des lignes en vert et des modules en gris.
Import d’une template sous DIVI
La première fois que nous lançons DIVI, il nous propose un tutoriel que vous pouvez suivre si vous souhaitez vous familiariser avec l’interface. Nous choisissons pour notre part de commencer directement à construire.
Alors que nous nous apprêtons à éditer une page pour la première fois, DIVI nous propose trois options: Build from scratch pour démarrer sur une page vierge, Choose a premade layout afin d’importer une template ou Clone existing page qui nous permet donc de dupliquer une page du site et l’utiliser comme base de départ. Nous choisissons d’installer une template et nous cliquons donc sur Browse Layouts
Utiliser une template, n’est-ce pas faire preuve de peu d’originalité?
La question est légitime et le risque existe qu’un de vos concurrents utilise la même mise en page de site que vous. Toutefois, le monde est vaste et la probabilité reste faible, d’autant que le principe consiste à se servir de la template pour la customizer et l’adapter à votre style.
Installation de votre template et premier aperçu du DIVI Builder
À ce jour, DIVI propose plus de 50 templates regroupées sous formes de Packs. Nous nous orientons vers un modèle adapté aux recettes de cuisine intitulé Food Recipes et nous cliquons dessus.
Divi nous propose alors de choisir le modèle de page que nous souhaitons importer et nous choisissons ‘Landing Page’. Nous cliquons sur ‘Use this layout’.
Après un petit temps de chargement, notre page d’accueil est enfin installée. Nous constatons immédiatement qu’il nous est possible d’éditer le texte directement à même la page. C’est l’un des avantages de DIVI même si il est souvent préférable d’éditer le texte via l’éditeur intégré.
Lorsque l’on édite le texte, une boite de dialogue apparaît reprenant tous les outils textes nécessaires. En bas à gauche de la page, on peut régler le mode d’affichage de DIVI: en vue structurelle, vue desktop, tablette ou smartphone. Le bouton sauvegarder permet comme on se le doute d’enregistrer le travail tandis que les icônes du centre offrent diverses possibilités comme le fait de sauvegarder ou d’importer une mise en page, d’effacer l’article, de régler les paramètres généraux de l’article ou de parcourir l’historique des modifications.
Nous venons d’apprendre à créer une page et à importer une template. Au prochain épisode, nous analyserons plus en profondeurs toutes les possibilités offertes par le Divi Builder.
