Comment créer un site WordPress avec Divi ?
7 clés pour bien commencer
Ce tutoriel WordPress Divi est destiné aux débutants en webdesign, aux personnes qui ont entendu parler du Thème Divi d’Elegant Themes et de son Visual Builder, qui ne savent pas vraiment comment cela fonctionne mais qui souhaiteraient débuter avec ce fabuleux outil. ?
Dans ce tutoriel, je passe en revue 7 points importants à connaître afin de bien débuter, de l’installation de Divi jusqu’au Thème Builder en passant par la structure d’une page Divi avec les sections, les rangées et les modules.
Vous ne savez pas où et comment installer votre site WordPress pour profiter de Divi et de son Web Builder ?
Pas de souci, n’hésitez pas à regarder cette autre vidéo ici de ma chaîne où je vous présente o2switch, le super hébergeur français à 5€HT/mois en illimité (nom de domaine compris) pour un hébergement WordPress de qualité. Je vous présente leur formule, je vous accompagne dans votre inscription et je vous guide pas à pas dans l’installation de WordPress.
1- Installer Divi d’Elegant Themes
Pour cela, rendez-vous sur le site d’Elegant Themes les créateurs de Divi.
Une fois que vous aurez réglé votre licence, vous aurez accès à votre compte client et dans le menu du haut sur « Account », le menu déroulant vous permet d’accéder à « My downloads » (Mes téléchargements) et à partir de là vous aurez accès au téléchargement de Divi.
2 formules sont proposées :
Pour réaliser votre site WordPress, vous avez besoin d’un thème. Si vous choisissez la formule de gauche vous allez installer le Thème Divi et son constructeur de page appelé le Divi Builder. Le Thème Divi est parfaitement optimisé pour le Divi Builder. Cette installation va se faire dans WordPress comme l’installation de n’importe quel autre thème.
En revanche, si vous choisissez la formule de droite, vous allez installer uniquement le Divi Builder sans le Theme Divi. Cette installation se sera via la procédure classique de n’importe quel plugin ou extension WordPress. Il n’y a pas de souci, Divi Builder est compatible avec les autres thèmes de WordPress et il est possible d’éditer et de créer des pages avec un autre thème.
Cela dit, le thème Divi est vraiment pensé pour le Divi Builder et c’est cette formule que nous téléchargerons. Pour cela, cliquez sur « Download the Divi Theme « et vous voyez qu’il est bien spécifié en dessous que le Divi Builder est inclus. Le téléchargement du fichier Divi.zip démarre automatiquement. Ensuite, rendez-vous dans le menu de WordPress dans Apparences > Thèmes > Ajouter > Téléverser un thème. Selectionnez le fichier Divi.zip téléchargé puis installez le « Package » comprenant le Thème Divi + le Divi Visual Builder.
2- Entrer la clé API de Divi
Entrer la clé API est une étape à ne pas négliger. Cette clé API va permettre de faire la connexion entre votre application Divi et les serveurs d’Elegant Themes pour essentiellement 2 choses :
– La première, c’est que grâce à cet clé API vous allez pouvoir faire les mises à jour de Divi qui sont assez fréquentes et essentielles pour bénéficier des dernières évolutions du produit.
– La deuxième c’est que cette clé API va vous donner accès à plus de 200 layouts qui sont mises en page prêtes à l’emploi réalisées par des webesigners professionnels de chez Elegant Themes.
Pour récupérer la clé API, retournez sur le site d’Elegant Themes, toujours dans la partie Account du menu supérieur, cliquez sur « Username & ApI Key » qui signifie Nom d’utilisateur et clé API.
Je vous rappelle qu’avec une seule licence Divi, vous pourrez créer une infinité de site web pour vous, vos amis ou vos clients. :)
C’est ici que vous pourrez générer une clé API par site. Ce panneau de contrôle est pratique car il vous donne la main sur tous les sites que vous avez créés et donc si vous supprimez la clé API d’un site celui-ci en sera directement affecté.
Descendez au bas de la page pour créer une clé API. Cliquez sur « Generate a new Api Key » qui signifie Générez une nouvelle clé API.
Cliquez sur la clé pour la copier, dans « Label », inscrivez un nom pour vous souvenir du site auquel cette clé API est liée.
Retournez ensuite dans votre interface administrateur WordPress. Dans le menu de gauche en bas, choisis Divi > Option du Theme et choisissez le dernier onglet qui est l’onglet Mise à jour.
Dans nom d’utilisateur vous devez entrer votre nom d’utilisateur chez Elegant Themes et non le label que nous venons d’entrer chez Elegant Themes. C’est vraiment important sinon vos mises à jour ne fonctionneront pas et en dessous dans Clé API. Vous pouvez coller la clé API.
En dessous, vous vous avez un bouton « Roll back to the previous version » qui vous permettra de revenir à la version précédente de Divi au cas ou la mise à jour se passerait mal.
Et ensuite vous sauvegardez les changements et le petit « Check » vert vous indique que tout est OK.
Si vous voulez changer la langue de Divi, vous pouvez facilement le modifier en allant ici réglage > général puis langue du site. Divi se calque sur la langue de votre site WordPress.
3- Définir la palette des couleurs de Divi
La 3ème chose à faire quand vous débutez un site avec Divi, c’est de définir la palette des couleurs.
Cela se passe, dans le menu de gauche Divi puis option du thème et sur le 1er onglet dans général vous voyez « Palette par défaut de sélectionneurs de couleurs ».
Vous avez ici 8 pastilles qui vont vous servir à définir les principales couleurs de votre site.
Alors pourquoi est il important et pratique de définir ces couleurs dès maintenant ? Pour la simple raison qu’à tout moment cette palette définie ici réapparaîtra à chaque moment de la création de votre site. Que ce soit lors de la création d’une section, d’une rangée avec une couleur de fond ou lors des paramétrages des modules avec la couleur des polices de caractères, des bordures etc. Cette palette sera affichée et vous permettra de choisir toujours les mêmes couleurs pour certains éléments de votre site afin d’obtenir une unité, une harmonie générale entre vos pages.
Il existe également un autre type de palette dans Divi qui est une palette de couleurs globale accessible directement depuis les paramètres des sections, rangés ou modules. Je vous en reparlerai un peu plus tard dans ce tutoriel.
Pour définir chacune de ces couleurs, cliquez sur la pastille et choisissez dans le nuancier la couleur qui vous convient. Vous voyez en haut que chaque couleur correspond à un code hexadécimal précédé d’un #. C’est à cet endroit qu’il faudra entrer le code couleur pour changer de couleur.
Si vous n’êtes pas inspiré dans le choix de couleurs harmonieuses, il existe des sites qui peuvent vous aider.
Pour ma part, j’utilise souvent coolors.co qui met à disposition des centaines de palettes harmonieuses qui vous aideront dans votre choix. Il vous suffira de copier le code couleur souhaité et de remplacer celui de la pastille dans Divi.
4- Définir les polices de caractères
Un autre point qu’il est intéressant de régler dès le début, c’est votre paire de polices de caractères par défaut. Cela vous évitera à chaque fois que vous éditerez un module avec Divi d’aller appeler vos polices. De plus en termes de webdesign, il ne faut pas mélanger de nombreuses polices et en changer à chaque paragraphe ou page. Tout comme les couleurs, il est important de conserver une unité et une harmonie générale. C’est pourquoi 1 police ou 2 sont acceptables. Dans le cas où vous choisiriez une paire de polices, une sera appliquée aux titres et l’autre au texte.
Il n’est pas toujours facile de trouver 2 polices qui vont bien ensemble.
Tout comme pour les couleurs, il existe des sites de « pairing » qui vont vous aider à trouver le mariage parfait entre 2 polices de caractères. C’est le cas du site mixfont.com qui dispose d’un générateur de polices, ce sont des Google fonts que vous retrouverez dans Divi donc pas de souci.
Lorsque vous aurez trouvé vos polices de caractères par défaut rendez-vous dans votre menu WordPress de gauche dans Divi > Personnaliseur de Thème. Une nouvelle page s’affiche puis choissez à gauche Paramètres généraux > Typographie et vous pourrez modifier ici la police de l’en-tête et police du corps de texte.
5- Créer une page avec Divi
Pour créer une page avec Divi rendez-vous au même endroit que pour créer une page avec l’éditeur classique de WordPress.
Allez dans le menu de gauche sur « Pages » puis « Ajouter ».
Saisissez un titre puis cliquez sur le bouton du dessous « Utiliser Divi Builder » ce qui va activer le constructeur visuel de page Divi.
Lorsque que vous cliquez sur ce bouton pour la première fois, 3 choix vont vous être proposés :
a) Soit vous pouvez cloner une page (le choix de droite), c’est à dire qu’en cliquant sur ce bouton la liste des pages crées avec le Divi Builder va apparaitre. Il suffit de choisir la page souhaitée et l’intégralité des éléments de cette page sera copié sur votre nouvelle page.
Cette fonction peut être intéressante et peut vous faire gagner un temps précieux.
Par exemple si vous avez une page au design complexe que vous vous voulez répéter sur une autre page de votre site en changeant simplement le contenu, cette solution peut être très intéressante.
b) Soit vous pouvez choisir la mise en page (le choix du milieu), en cliquant une galerie de plus de 200 mises en page se déclinant à chaque fois en plusieurs pages apparaîtra. Ces layouts (mises en page) ont été réalisés par des professionnels du webdesign et sont très bonne qualité. Il vous suffit alors de choisir une page pour que l’intégralité des éléments de cette page soit importée dans votre nouvelle page. C’est un moyen assez rapide de créer rapidement un site au look professionnel. J’avais justement réalisé un tutoriel ici où j’avais utilisé ce procédé.
c) Soit vous créez une page en partant d’une page vierge. C’est le choix de gauche intitulé « Constuire à partir de zéro ».
6- Sections, rangées, modules Divi
Voici comment est structurée une page du Page Builder Visuel de Divi.
– Tout d’abord nous avons un long encadré bleu (A) qui traverse toute la page, cet élément est appelé section.
– Dans chaque section en cliquant sur le petit disque vert avec le plus vous allez pouvoir insérer un autre élément appelé rangée (B), c’est cet encadré vert (c’est comme un tableau de positionnement)
-Dans chaque rangée en cliquant sur le petit disque gris foncé vous allez pouvoir placer un module (C), modules qui vont peu à peu constituer votre page.
De nombreux modules (C) au design avancé sont prêts à être insérés en cliquant simplement dessus : le module accordéon, appel à l’action, barre latérale, bascule, blog, bouton etc.).
La section, la rangée et le module sont imbriqués les uns dans les autres. Pour ajouter une nouvelle section, il suffit de se placer sous la section supérieure et de cliquer sur le petit disque bleu avec un plus.
Ces 3 éléments que sont Les sections, les rangées modules ont à peu près le même menu. (D)
A savoir qu’il est possible de les déplacer en glisser/déposer en utilisant la croix, voyez je peux déplacer cette ranger dans la section du dessous.
En cliquant sur l’engrenage vous accédez aux réglages de l’élément ici de la rangée.
Les 2 petits rectangles superposés permettent de dupliquer l’élément.
Comme vous l’aurez deviné, la poubelle sert à effacer l’élément.
La fonction petite icone avec des colonnes est propre au menu de la rangée et va servir à définir le nombre de colonnes souhaité et leur positionnement afin de pouvoir y insérer plusieurs modules.
A chaque fois que vous cliquez sur l’icône engrenage d’une section, d’une rangée ou d’un module, une fenêtre avec 3 onglets s’ouvre :
a) Onglet Contenu, c’est là que vous entrerez le contenu « brut » de l’élément.
b) Onglet Style, c’est ici que vous apporterez une amélioration visuelle au contenu. (taille, espacement, couleur etc.)
c) Onglet Avancé, vous trouverez dans cet onglet des options supplémentaires.
A noter que quand la fenêtre paramètres d’un module est ouverte et que vous passez la souris sur les différentes parties de votre module, de petits pinceaux apparaissent.
En cliquant sur le pinceau de l’élément, vous serez conduit directement au Style (dans la fenêtre paramètres) applicable à cette partie du module. Ces pinceaux sont très pratiques, ils vous permettent de vite vous y retrouver et de gagner du temps.
Au sujet de la palette des couleurs que l’on retrouve dans les paramètres de tous les éléments de Divi, il existe aussi une autre palette, nommée palette globale comme je vous le disais précédemment, qui est une option récente du Divi Builder.
Lorsque la palette des couleurs apparait dans un module par exemple, si je clique sur « Globale », je vais pouvoir définir des couleurs. Par exemple en cliquant sur le plus je peux choisir une couleur d’un bleu foncé. Je peux ensuite l’appliquer à plusieurs éléments de cette page ou à d’autres pages. Ce peut être du texte, des titres des couleurs de fond de section ou de rangée etc. Mais ce qui est intéressant avec cette fonction c’est que si je modifie ensuite cette même couleur par un bleu ciel par exemple eh bien tous les éléments auxquels le bleu foncé auront été appliqués en premier lieu se changeront en bleu ciel, d’où le nom de palette globale. Imaginez un site avec des centaines de pages sur lesquelles des couleurs globales auraient été appliquées, ce serait le moyen parfait de le relooker rapidement (en termes de couleurs) et ce en 1 clique, ce qui habituellement aurait pris plusieurs heures. :)
7- Le Divi Thème Builder
Une autre point, une autre fonction importante de Divi à connaître c’est le Thème Builder.
Pour y accéder, dans le menu de gauche WordPress, choisissez Divi > Thème Builder. Thème builder signifie Constructeur de Thème.
Dans le thème builder, vous allez pouvoir construire des modèles de pages qui vont s’appliquer à toutes les pages du même type.
Quand vous ajoutez un modèle de page, vous pouvez travailler sur 3 parties :
a) L’en-tête (header) c’est le bandeau supérieur de la page comprenant le menu et parfois le logo du site. Attention, la bannière ne fait pas partie de l’en-tête.
b) Le corps de la page (body) qui s’étend de la bannière jusqu’à la fin du contenu.
c) Le pied de page (footer) qui va regrouper le plus souvent quelques liens vers d’autres pages du site, un rappel de menu voire un formulaire d’abonnement à une Newsletter.
L’en-tête et le pied de page sont souvent les mêmes au cours des pages, il est possible de les définir comme globaux en utilisant le modèle de site web par défaut. Ainsi à chaque fois que vous créerez une nouvelle page le footer et le header seront déjà en place.
Pour ajouter un nouveau modèle de page, il suffit de cliquer sur le + de « Ajouter un nouveau modèle ». Une fenêtre apparaît vous demandant de choisir le type de page auquel s’appliquera ce modèle. Les modèles de pages sont classés par catégories : page (classique), articles (blog), archives etc. A noter que si vous créez un boutique en ligne WooCommerce et que vous installez le plugin, une nouvelle catégorie sera créée et vous pourrez créer des pages personnalisées pour votre page produit, votre caddy etc.
Le thème Builder est une fonction vraiment très pratique de Divi, elle vous permet de gagner du temps en ayant une mise en forme déjà prête. Elle contribue aussi à une cohérence du design entre les pages de votre site. Il est par exemple très pratique de créer un modèle pour vos articles de Blog, ainsi à chaque fois que vous écrirez un nouvel article la mise en page et les mises en forme seront en accord avec vos anciens posts.
