WordPress & Divi : le guide pour bien démarrer !
WordPress & Divi : une grande histoire d’amour ?
Le thème WordPress Divi est un thème intuitif et facile à prendre en main. Toutefois, il est beaucoup plus facile de le dompter lorsqu’on a déjà de l’expérience avec WordPress.
Si vous débutez complètement dans la création de site et que vous avez choisi de vous lancer avec ce thème WordPress, le blog d’Astuces Divi va vous accompagner tout au long du processus de création.
Aujourd’hui, ce blog commence à compter de nombreux articles, il peut s’agir de conseils, d’explications ou de tutoriels simples pour réussir une personnalisation poussée de votre site ou blog avec Divi.
Cependant, il est possible que vous ne parveniez pas à savoir par où commencer. C’est souvent le cas lorsqu’on débute, on lit beaucoup d’articles et on se rend compte, souvent tardivement, que nous aurions dû faire ceci ou cela avant, si nous avions eu connaissances de ces informations…
Ce guide de démarrage avec WordPress et Divi est justement fait pour ça !
Je vous propose une sorte de méthodologie hiérarchisée pour ne rien laisser au hasard.
Voici la liste des articles par ordre de priorité :
Les articles essentiels pour bien débuter :
- Pourquoi choisir le thème Divi ? Quels avantages à utiliser un thème premium alors qu’il existe de nombreux thèmes gratuits ?
- Combien coûte le thème Divi ? Est-il si cher que ça ? Je vous propose un comparatif de tarif avec les autres thèmes et pages builders de ce genre.
- Vous êtes déjà en possession de ce thème ? Découvrez comment installer Divi sur votre site WordPress.
- Avant d’aller plus loin, si vous comptez personnaliser Divi avec du code fait-maison, ce serait bien de créer un thème enfant de Divi. Une fois cela réalisé, vous serez paré pour la suite. Si vous pensez que vous n’aurez pas besoin de faire des modifications poussées, alors cette étape est facultative.
- En suite, vous verrez que ce thème est mis à jour plusieurs fois par mois. Je vous propose de découvrir rapidement comment mettre à jour Divi de manière automatique ou manuelle.
- Bien paramétrer Divi ? On commence d’abord par une série d’articles pour comprendre comment paramétrer ce thème : onglet Général | onglet Navigation | onglet Créateur | onglet Publicité | onglet Disposition | onglet Intégration et onglet Mises à Jour | onglet SEO. Dans ces articles régulièrement mis à jour, chaque option du thème est scrutée à la loupe.
Les articles pour découvrir la version 4.0.x de Divi
- La version 4.0 de Divi offre une nouvelle fonctionnalité : celle de pouvoir construire le design complet à l’aide du Theme Builder. Lisez cet article pour comprendre les nouveautés de Divi 4.0.
- Ce nouveau thème builder fonctionne un peu comme le visual builder mais s’utilise depuis le back-office en version visuelle. Découvrez comment le Divi Theme Builder fonctionne.
- Si vous souhaitez gagner du temps, vous pouvez simplement importer des templates de thème au sein de votre site. Découvrez comment importer/exporter des Divi Theme Templates.
Les articles essentiels pour prendre en main Divi :
- Dans un premier temps, il est essentiel de comprendre que Divi et le Divi Builder sont deux choses différentes. Je vous propose de découvrir pourquoi il ne faut pas les confondre.
- Comment fonctionnent Divi et le Divi Builder. C’est pas toujours facile de comprendre comment créer une page avec un page builder. Cet article est un guide complet destinés aux débutants. C’est idéal de le lire pour mieux comprendre comment ça marche.
- Une fois que vous aurez compris comment un page builder fonctionne au sein de vos pages WordPress, je vous propose de découvrir la liste complète de modules de Divi. Ces modules sont disponibles au sein du page builder lorsque vous créez vos pages. Il est bien de connaitre ce que peut offrir le Divi Builder afin de mieux envisager votre projet.
- Avant de vous lancer tête baissée dans la création de vos pages, vous pourriez d’abord commencer par paramétrer le header de votre site Divi. Celui-ci est un élément essentiel au niveau du design et vous devriez y prêter la plus grande des attentions.
- Sans oublier non plus que vous devrez choisir un type de mise en page. Divi vous permet de créer une « mise en page pleine largeur » ou bien de créer une « mise en page emboitée », appelée aussi, « boxed layout ». Quelle sera votre préférence ?
- Pour gagner du temps, vous pourrez facilement créer une mise en page en un seul clic. Pour cela, découvrez comment importer et exporter une mise en page avec Divi.
Les articles essentiels pour s’inspirer :
- Vous avez déjà un site WordPress et vous souhaitez seulement changer de thème ? Voici deux cas pratiques d’une refont de site avec Divi : de Hungry à Divi et de BeTheme à Divi.
- Quelques exemples de sites de Coaching faits avec Divi.
- Quelques exemples de sites de Restaurant faits avec Divi
- Quelques exemples de sites d’Agence Web faits avec Divi.
- Quelques exemples de sites pour Graphistes et WebDesigners faits avec Divi.
- Sinon, vous savez que vous pouvez utiliser des mise en page toutes prêtes qui vous feront gagner un temps fou ? Le Divi Builder propose des packs de layouts téléchargeables en 1 clic.
Les articles essentiels pour ajouter des fonctionnalités à votre thème Divi grâce à du code :
- Découvrez comment ouvrir les icônes du footer de Divi dans une nouvelle fenêtre de votre navigateur. C’est important si vous ne souhaitez pas que l’internaute quitte votre site au premier clic !
- Vous pourrez également ajouter de nouvelles icônes dans le pied de page de votre site, comme par exemple l’icône de Pinteret ou de Linkedin.
- Il est aussi possible que vous ayez besoin d’ajouter plusieurs images à la une (images de mise en avant) au sein de vos articles. Cet article vous explique comment faire.
- Et si chaque page de votre site avait une couleur différente ? Cela est possible avec un simple code CSS. Ce n’est pas très compliqué. Vous pourrez également faire la même chose avec des images de fond.
- En parlant d’image, c’est également possible d’ajouter une image à chaque élément de votre menu principal. C’est ce que propose ce tutoriel.
- Si vous avez ajouté le plugin WooCommerce pour transformer votre site vitrine en site e-commerce et que vous vous rendez compte que certains boutons de votre boutique ont une couleur qui ne vous convient pas, lisez cet article qui vous permettra d’harmoniser les couleurs de votre boutique avec celles de votre identité visuelle.
Les articles essentiels pour ajouter des fonctionnalités à votre thème Divi grâce à des extensions :
- La plupart des plugins pour Divi sont payants mais j’ai fouiné et je vous propose de découvrir une liste de plugins gratuits pour Divi.
- Vous souhaitez rendre votre site multilingue facilement et rapidement ? Vous envisagez d’utiliser Polylang ou WPML ? Lisez d’abord cet article au sujet de Weglot. Vous verrez comment j’ai traduis mon blog Astuces Divi en moins de 15 minutes.
- Par contre, si c’est une traduction de Divi de qualité que vous recherchez, vous pourrez obtenir Divi en bon français en installant cette extension. Lisez l’article pour voir quelles sont les différences.
- Découvrez Bloom, un optin qui permet de récupérer les adresses email de vos lecteurs afin de les stocker dans vos listes de diffusion. Vous verrez aussi comment rendre l’extension Bloom compatible avec le RGPD ou comment customiser vos popups.
- Vous souhaitez modifier Divi afin que la sidebar se fixe lorsque l’internaute scrolle vers le bas ? Une extension simple vous permet d’y arriver et je vous explique comment l’utiliser.
- Savez-vous qu’il existe un plugin qui permet de faire plein de modifications au sein de Divi sans avoir à coder quoi que ce soit ? Divi Switch propose des tas de fonctionnalités sous forme d’options à cocher. C’est un jeu d’enfant.
- Si vous souhaitez ajouter une bio à la fin de vos articles parce que votre blog est « multi-auteurs ». Vous pourrez le faire facilement grâce à ce plugin.
- Si vous cherchez à enrichir le thème Divi avec de nouvelles icônes, c’est possible grâce à ce pack d’icônes gratuites proposé par ce plugin.
- Si vous voulez ajouter un fil d’Ariane au sein de vos pages et de vos articles, c’est possible ! Suivez ce turotiel qui vous expliquera comment ajouter un breadcrumb à Divi et où vous pourrez le placer.
- N’oubliez pas non plus qu’il est très important que votre site Divi se charge rapidement. Vous pouvez utiliser un plugin de cache pour optimiser le chargement de vos pages mais ce n’est pas la seule solution. Découvrez comment améliorer la rapidité de Divi.
Ma liste des ressources essentielles pour Divi :
Pour commencer, ne vous procurez pas Divi de manière illégale, vous pourriez avoir des soucis par la suite. Votre site pourrait être corrompu ou infecté. Ce serait dommage ! Il n’y a qu’un seul endroit pour obtenir Divi : sur le site officiel de ElegantThemes.
Ensuite, il existe des tas de sites qui proposent des outils ou des ressources (gratuites et payantes) pour enrichir votre site avec Divi. Je suis moi-même cliente de ces marketplaces :
- BeSuperfly
- Aspen Grove Studios
- Divi Space
- Divi Cake
- Divi Den
- Divi Theme Store
- Divi Extended
- Divi Gear
- Divi Professional
- Divi Booster
- Divi Life
- Divi Plugins
Enfin, le blog officiel d’ElegantThemes propose des tas de tutoriels très pertinents pour vous aider à améliorer ou customiser votre site Divi. N’hésitez pas à le parcourir, vous y trouverez de nombreuses pépites. Par contre, tout est en anglais.
Si vous êtes plutôt du genre à ne comprendre que le français, Astuces Divi est là pour ça !
D’ailleurs, vous pourrez retrouver tous les derniers articles classés par thématique :
Si vous n’arrivez pas à trouver ce que vous voulez, vous pourrez parcourir la liste complète de mes articles depuis la page Plan de Site ou bien me contacter pour soumettre une idée de tutoriel. Je verrai si je peux l’intégrer à ma ligne éditoriale.
Si vous avez des soucis avec Divi, n’hésitez pas à contacter le support d’ElegantThemes. Il est là pour corriger les erreurs que vous pourriez rencontrer si cela est en étroite liaison avec le thème ou le page-builder lui-même. Un forum est également disponible.