Nous allons parler aujourd’hui des deux thèmes WordPress les plus populaires à savoir, le framework Genesis développé par StudioPress et le thème phare d’ElegantThemes : Divi !

Comme vous pourrez le voir en suivant ce lien : il s’agit des meilleurs thèmes WordPress… ou en tout cas, les plus utilisés à travers le Web mondial.
 

Sommaire du comparatif Divi vs Genesis :

Les deux solutions ont été conçues pour remplir certains besoins plus ou moins distincts. Genesis est un framework WordPress minimaliste qui permet aux développeurs de créer facilement des thèmes WordPress personnalisés.

Tandis que Divi est une solution tout-en-un qui permet à quiconque de concevoir un design personnalisé, indépendamment de son expérience en Webdesign et WordPress.

En raison de leur popularité, de nombreux utilisateurs lambda de WordPress réduisent leurs choix de thèmes à Genesis ou à Divi. Dans cet article, seront notamment abordées leurs forces et leurs faiblesses afin que vous puissiez faire un choix en toute connaissance de cause. L’objectif est que vous puissiez déterminer lequel de ces deux thèmes polyvalents vous convient le mieux d’un point de vue technique et concret et non juste pour leur popularité.

Télécharger Divi  |  Télécharger Genesis

La grande différence entre Divi et Genesis

Pour résumer, leur différence se situe dans leur vision des choses :

  1. Divi se concentre sur le fait de vous faciliter la création de superbes mises en page, même si vous ne connaissez aucun code. Mais pour ce faire, il n’utilise pas toujours le code le plus propre ou le plus léger (intégration des shortcodes dans votre base de données WordPress).
  2. Genesis se concentre sur l’optimisation des performances (rapidité) et un code propre. Du coup, la facilité de réalisation des mises en page qui est présente chez Divi ne se retrouve pas chez Genesis.

Présentons-les plus en détail…

Le framework WordPress Genesis

Les frameworks sont normalement utilisés comme modèle pour ensuite créer des thèmes WordPress personnalisés. Alors que certaines personnes modifient simplement un framework pour la création de leur webdesign, il est pourtant plus utile d’utiliser le framework comme thème parent et de créer en plus un thème enfant (child theme). Cette configuration vous permettra de mettre à jour le framework indépendamment du thème enfant ; en d’autres mots la mise à jour sera beaucoup plus facile, voire totalement transparente ! 🙂

Il y a quelques années de cela, les frameworks étaient principalement utilisés par les développeurs. En effet, ils n’ont pas beaucoup de fonctionnalités simples d’utilisation pour le commun des mortels. De même, en toute logique, le thème inclus par défaut dans les frameworks était également très basique.

En innovant par rapport à cela, Genesis a su se faire une place (aussi) dans le monde des thèmes WordPress, côté intégrateurs Web. C’est cette différence qui a su faire sa renommée. Non seulement il dispose d’un panneau de configuration facile à utiliser, mais en plus les thèmes par défaut qui sont proposés sur le site officiel du framework sont superbes. Même s’ils conservent un design minimaliste propre, vous serez séduit par la qualité de leurs réalisations ainsi que leur utilisation des polices d’écriture particulièrement belles.

En webdesign, la typographie c’est la vie !

Pour avoir une première base personnalisée, après avoir installé Genesis sur votre WordPress, tout ce que vous devez faire est de changer les couleurs du thème afin qu’il corresponde à votre charte graphique et d’ajouter votre logo pour avoir un Webdesign qui a un rendu professionnel.

En général, les frameworks WordPress ne sont pas connus pour offrir de nombreuses options dans le tableau de bord. Genesis, lui, tente de garder les choses simples, tout en proposant un certain nombre d’options utiles.

Dans votre admin Genesis, par exemple, vous pourrez lier votre thème à un service de flux RSS tiers comme Feedburner.

De nombreuses options de mises en page sont également disponibles dans le panneau de configuration du thème enfant Genesis que vous aurez sélectionné. La plupart offrent, par exemple, des options pour la sidebar comme :  une barre latérale gauche, une barre latérale droite ou aucune barre latérale. Certains thèmes prennent également en charge deux barres latérales simultanément.

Les options supplémentaires incluent la navigation, le fil d’Ariane, les commentaires et rétroliens, les archives et les paramètres du modèle de blog. Le code généré par Genesis peut également être intégré dans l’en-tête et le pied de page de votre site.

En général, plus vous ajoutez de fonctionnalités et d’options à un thème WordPress, plus il est facile pour les utilisateurs non techniques de l’utiliser. Malheureusement, ajouter plus de fonctionnalités à un thème WordPress augmente également les chances que celui-ci entre en conflit avec d’autres plugins. L’un des avantages d’un framework minimaliste tel que Genesis est qu’il y a justement moins de risque de conflits.

Le thème Divi d’Elegant Themes

Divi a été lancé fin 2013 et a reçu de nombreux éloges de la part de toute la communauté WordPress. Éloges mérités car Divi est un thème WordPress géniale !

Beaucoup de développeurs de thèmes WordPress ont essayé de construire une solution tout-en-un depuis des années, mais peu d’entre eux ont réussi à lancer sur le marché un résultat fiable et durable. L’équipe d’ElegantThemes, elle, a mis au monde Divi.

Télécharger Divi  |  Télécharger Genesis

Chez Elegant Themes, ils ont tout de suite su qu’avec ce produit (l’aboutissement de dizaines d’autres thèmes de leur collection, depuis des années), ils avaient développé quelque chose de spécial. Depuis, ils travaillent sans relâche pour ajouter toujours plus de fonctionnalités utiles à leur thème qui distance de plus en plus ses concurrents, comme, pour ne citer que lui, le best-seller ThemeForest, j’ai nommé Avada (totalement ringardisé par Divi 😀 ).

Le Divi Builder (très important) est le constructeur de page (en backend/admin et en frontend/public) qui vous permet de concevoir vos propres pages en faisant simplement des cliquer-glisser avec des modules dans la zone souhaitée. Cela vous permet de créer facilement des pages complexes et séduisantes en quelques minutes. Plus besoin d’avoir des connaissances en HTML et CSS pour aller loin grâce à cet outil. À moins que vous ne souhaitiez réaliser quelque chose de vraiment très très très spécifique.

Vous pouvez créer de nouvelles lignes et colonnes en quelques secondes et déplacer des modules facilement. Un total de 43 modules sont actuellement disponibles. Cela inclut les barres latérales, les portefeuilles, les cartes Google Maps, les formulaires de contact, les curseurs, les vidéos, les images, les tableaux de prix (price table) pour vos landing pages, et plus encore.

Chaque module peut être configuré en quelques secondes : couleur, taille, police, emplacement et mille autres choses.

Une fois que vous avez créé une mise en page, vous pouvez l’enregistrer et l’utiliser sur d’autres pages facilement. Pas besoin de tout recommencer. D’ailleurs vous pouvez aussi exporter vos constructions sur d’autres sites disposant du constructeur de page Divi, qui peut être installé sur tous les thèmes… même Genesis !

Par exemple, dans mon agence WordPress, nous avons récemment installé ce builder sur un site basé sur Avada. C’était un nouveau client. Cela nous a permis de lui construire des landing pages assez correctes et efficaces dont nous avons le secret. 🙂 (hum, grâce à Divi aussi, il faut l’avouer)

Les possibilités avec le constructeur de pages Divi sont (quasiment) infinies. Il y a peu de choses qu’il n’est pas possible de faire avec. Une fois que vous serez familiarisé avec le fonctionnement du système de modules, vous serez en mesure de créer des conceptions de pages uniques très rapidement, en un claquement de doigts ! C’est évidemment l’un des principaux points forts de Divi.

Télécharger Divi  |  Télécharger Genesis

Points forts de Genesis

Sécurité de Genesis

Vous êtes probablement conscient que chaque minute d’indisponibilité de votre site, c’est autant de perte de crédibilité pour vous.

Le framework Genesis est considéré comme une des solutions les plus sécurisées du marché par les développeurs WordPress.

Afin de s’assurer qu’ils suivent les recommandations de sécurité, StudioPress a engagé des développeurs, pour tester leur framework de manière approfondie en effectuant un examen de sécurité régulier de leur thème.

Comme vous le savez sûrement, la sécurité n’est pas quelque chose à prendre à la légère. Il y a plus de cent mille tentatives de piratage réussies sur les sites WordPress chaque année et 29% de ces tentatives sont causées par un thème WordPress non sécurisé. Il est bon de savoir que si vous utilisez le framework Genesis, vous n’avez pas à vous soucier de l’exploitation de failles de sécurités au coeur de votre thème.

Points forts de Divi

Divi est une solution tout-en-un.

Il permet à n’importe qui, indépendamment de ses connaissances techniques et de son expérience, de créer de superbes designs de site web (ou plus particulièrement de pages Web) complexes et d’aspect ultra-professionnel. Et cela vous permet de faire tout cela en quelques minutes grâce au constructeur visuel depuis l’espace public (frontend).

Compatibilité avec le personnaliseur de thème « temps réel » natif de WordPress

Vous lisez bien !

Lorsqu’on dit « temps réel », cela signifie que vos réglages se voient « en live » sur votre site, à chaque changement.

Il est possible de personnaliser votre thème via le personnalisateur de thème natif de WordPress. Il peut être utilisé pour changer les couleurs, les polices, la navigation, les widgets, et plus encore. Et je vous assure qu’une fois que vous l’aurez utilisé, vous ne pourrez plus vous en passer.

Divi embarque également une page d’options du thème (Theme options).

De là, vous pouvez envoyer votre logo, votre favicon, intégrer des publicités, définir des paramètres SEO (pour le référencement Google) et plein d’autres choses.

Télécharger Divi  |  Télécharger Genesis

Création de votre Webdesign

Avec Genesis

Vous disposez avec Genesis d’une vaste galerie de thèmes enfants très sympas qu’il suffit d’activer pour avoir un design particulier pour son site, avec un univers et des couleurs assez personnelles. Par contre, si ce que vous souhaitez c’est un webdesign sur mesure qui respecte strictement une charte graphique, c’est plus facile de démarrer sur du Divi où la personnalisation graphique sera un peu plus rapide, intuitive et nécessitera moins de templating.

Les utilisateurs ne disposant pas de connaissances techniques ont parfois du mal à tirer le meilleur parti des frameworks WordPress car ils ne savent pas comment les modifier pour les personnaliser entièrement. Dans ce cas, on se retrouve avec des sites Web qui sont pratiquement identifique avec le (child) thème de base, avec les réglages par défaut. Le jeune apprenti webdesigner qui rêvait d’un site unique au monde risque donc d’être un peu déçu.

Rappelons cependant qu’avec Genesis, ce problème n’en est pas vraiment un car il y a des dizaines de thèmes enfants disponibles en 1 clic, proposés directement par StudioPress, la startup qui édite Genesis. Sans compter des dizaines d’autres child-themes mis à disposition par des webdesigners agréés.

Même si l’on peut retrouver le thème ailleurs sur Internet en cherchant bien, il y a peu de chance qu’il soit identique à celui du concurrent de l’autre côté de la rue 🙂

Il existe des thèmes enfants Genesis disponibles pour chaque type de site Web, y compris les sites de BtoB, de magazines, de blogs, des agences immobilières et les sites de photographes, par exemple. Ils sont tous conçus en utilisant les mêmes standards que Genesis.


Consultez la page StudioPress Showcase pour voir des exemples de thèmes enfants en live.

Le framework Genesis a été conçu en HTML5 et respecte scrupuleusement les standards du W3. Les fichiers sont codés plus proprement que la majorité des thèmes, avec des commentaires HTML un peu partout dans les fichiers source pour vous aider à comprendre à quoi sert chaque partie du fichier.

Genesis, c’est un peu le paradis de l’intégrateur WordPress !

Ce framework de thème est (évidemment) responsive design, c’est-à-dire qu’il s’adapte à la navigation sur mobile et tablette. Son minimalisme fait de très bons sites mobiles, par exemple, si vous avez une optique mobile first pour un projet.

Avec Divi

Si vous n’avez pas d’idées pour créer vos mises en page, ne vous inquiétez pas : Divi est livré avec 140 mises en page préconçues ! Pour commencer, tout ce que vous avez à faire est de choisir une mise en page que vous aimez et de la personnaliser comme bon vous semble. Sans cela, je crois que beaucoup d’utilisateurs auraient eu du mal à tirer le meilleur parti de Divi. Ces layouts peuvent être utilisés comme mise en page pour votre propre design personnalisé ou simplement pour vous aider à vous familiariser avec Divi.

Avec Divi, je peux créer des mises en page uniques en quelques minutes en utilisant le Divi Builder. Et quel gain de temps avec le visual builder du frontend ! Cela ne devrait pas vous prendre plus de deux heures, le premier jour, pour vous familiariser avec le fonctionnement de l’édition des pages construites avec le Divi Builder en frontend. Par contre, pour la réalisation d’un webdesign sur mesure complet, il y a bien entendu un travail plus conséquent à fournir, notamment dans les réglages du « Theme Customizer » dont nous avons déjà parlé, ainsi qu’un peu de CSS si vous désirez aller plus loin.

Comme Genesis, Divi est responsive design, de base. Il rendra votre site facilement consultable sur les tablettes et les smartphones. Il changera automatiquement l’apparence de votre conception lorsque quelqu’un visitera votre site Web sur un appareil mobile. Tous les modules sont compatibles avec les mobiles, ce qui fait que votre site Web restera toujours complet et esthétique, peu importe le périphérique de vos visiteurs. Ajoutons à cela que le Visual Builder de Divi propose un bouton « aperçu mobile/tablette » en 1 clic qui permet, sur ordinateur, de voir à quoi ressembleront vos mises en page sur iPhone par exemple, tout cela en vous permettant d’éditer vos pages en temps réel, comme d’habitude 😉

Je ne les utilise pas souvent, mais Divi est aussi compatible avec les formats d’articles (audio, vidéo, citation, etc.) qui ont été intégrés début 2011 dans WordPress 3.1. Cela vous permet d’ajouter tous les types de billets de blog à votre site Web/blog. Rappelons au passage que Divi est aussi un excellent thème e-commerce/WooCommerce.

Aujourd’hui, énormément de thèmes ne supportent toujours pas cette fonctionnalité qui a maintenant quelques années. Seuls les thèmes WordPress consacrés aux blogs le font en général. Encore une fois, ElegantThemes est sur la brèche en rendant Divi compatible avec les dernières fonctionnalités du cœur de WordPress. Cela signifie que Divi peut être utilisé pour développer n’importe quel type de blog, que ce soit pour un blog personnel ou blog d’entreprise.

Télécharger Divi  |  Télécharger Genesis

Gestion de votre SEO

Genesis a quelques fonctionnalités SEO fantastiques. Une fois que vous avez activé Genesis sur votre site Web, il ajoutera une zone sous chaque article et page pour entrer vos détails SEO (un peu comme Yoast, The SEO Framework ou All in One SEO). Cela inclut par exemple, le titre de la page, la description et les mots clés. Genesis vous permet d’intégrer Google+ et de configurer les paramètres SEO de votre page d’accueil, de votre en-tête, vos méta robots, vos paramètres d’archivage, etc. C’est un vrai complément léger aux fonctions du cœur de WordPress, qui remplit bien ce qu’il manque à WP de base pour le SEO.

L’un des grands points forts de Genesis est que si vous activez un plugin WordPress SEO tel que Yoast ou All in One SEO, le framework supprimera complètement ses propres fonctionnalités SEO pour éviter les conflits. La page des paramètres SEO et la zone SEO sous les articles et les pages vont disparaître. Cela garantit que les fonctionnalités SEO intégrées de Genesis n’interféreront pas avec le plugin SEO de votre choix.

Évolutivité et support des thèmes

StudioPress continue de mettre à jour régulièrement Genesis pour s’assurer qu’il fonctionne parfaitement avec la dernière version de WordPress et qu’il ne contient aucun bug. Par conséquent, vous n’avez pas à vous soucier de la pérennité de votre site Web.

Vous obtiendrez également beaucoup de support pour Genesis. Ils sont réputés pour cela !

En plus des tutoriels et des extraits de code, StudioPress dispose d’un forum de support qui est consulté tous les jours par le personnel.

ElegantThemes a publié de nombreuses améliorations importantes à Divi depuis sa sortie. On ne peut plus les arrêter !

Cela montre bien à quel point leur thème est la stratégie centrale pour le futur de cette startup. Cela illustre également le fait que Divi ne va pas cesser de grossir et de s’améliorer au cours des prochaines années.

A contrario, Genesis a fait l’objet de très peu d’amélioration en plusieurs années. Évidemment, Genesis n’a pas le même dessein que Divi. Pour rappel, il s’agit d’un framework minimaliste. Ici se situe donc une grande différence entre ces deux thèmes. Nous sommes arrivés à un stade où l’on se demande comment un thème, ou plutôt un framework avec Page Builder, pourrait encore détrôner Divi un jour sur ses fonctionnalités qui transforment vos réalisations en de réelles œuvres d’art…

ElegantThemes a publié une quantité importante de documentation sur l’utilisation de Divi, mais également, des articles de fond extrêmement utiles sur leur blog. Ils ont une stratégie d’inbound marketing dont on devrait tous s’inspirer ! Chaque tutoriel propose des captures d’écran et des vidéos. Vous pouvez également obtenir des réponses aux questions via le forum de support ElegantThemes, extrêmement réactif également.

Les inconvénients de Genesis et de Divi

Aucun thème WordPress ne peut prétendre être parfait. Chaque besoin a son outil le mieux adapté.

Genesis et Divi sont excellents tous les deux dans un certain nombre de domaines, mais ils sont limités à certains égards. Ironiquement, leurs forces sont parfois aussi leurs faiblesses.

L’une des plus grandes forces de Genesis est son approche minimaliste. C’est l’une des raisons pour lesquelles il est si populaire auprès des développeurs. Le panneau de configuration, par exemple, vous permet de modifier la taille d’une l’image, de choisir la disposition par défaut de celle-ci et d’insérer du code dans l’en-tête et le pied de page de votre site. Toutefois, si vous souhaitez modifier une police, modifier la couleur d’un élément ou modifier la largeur d’une certaine zone, vous devrez passer par la feuille de style du thème. Avec Genesis, il est donc obligatoire (ou très recommandé) de s’y connaitre un minimum en CSS… Si vous avez des connaissances en HTML et en CSS, ce ne sera pas un problème, mais les utilisateurs n’en ayant pas auront du mal à s’éloigner de la mise en page par défaut de leur child-theme. Faire des changements dans la structure de votre site web peut être un peu plus difficile aussi. Certains thème permettent ces modifications de structures de pages très simplement malheureusement cela se fait via le fichier theme.php dans Genesis. Connaissances en PHP requises cette fois-ci…

Heureusement, Genesis offre de nombreux tutoriels sur la façon d’apporter des modifications à votre site Web. Les personnalisations les plus courantes sont répertoriées sur leur page d’extraits de code. StudioPress répond toujours aux questions sur leur forum de support rapidement, donc s’il n’y a pas d’extrait de code publié dans leur zone de documentation, postez une question là-bas.

Inversement, la force de Divi, ce qui le rend si indispensable lorsqu’on est devenu un Divi-addict, c’est peut-être aussi sa faiblesse, à terme.

À force d’en rajouter, encore et encore, ElegantThemes risque de transformer Divi et son Builder en de véritables usines à gaz, avec trop de fonctionnalités ! C’est déjà ce qu’on reprochait au thème Avada. C’est là que Divi laisse un boulevard à Genesis sur le marché des thèmes ultralégers :

  • vous voulez une fusée avec laquelle aller sur mars en combinaison spatiale, drone, casque virtuel et hoverboard ? Choisissez Divi.
  • vous aimez les choses simples, épurées et efficaces, comme un morceau de pain trempé dans l’huile d’olive, avec une pincée de poivre et sel ? Choisissez Genesis.

Télécharger Divi  |  Télécharger Genesis

Une chose qui manque à la version actuelle de Divi est la prise en charge, dans le constructeur de page, des customs post types. ElegantThemes, si tu me lis 😉

Quel starter-theme-framework choisir pour votre site web ?

Eh bien cela dépend de vos attentes et de vos envies. Pourquoi pas acheter les deux ? C’est ce que nous avons fait dans notre agence WordPress.

Par lequel commencer ?

Avez-vous une préférence pour une solution où il faut moins se casser les dents, comme Divi ? Où aimez-vous de temps en temps mettre les mains dans le code de votre WordPress pour tout maîtriser, en dehors d’une interface opaque ?

Si vous n’avez aucune compétence technique (CSS, HTML, PHP) mais que les thèmes enfants de Genesis vous plaisent ; que c’est exactement ce que vous vouliez pour votre site ; alors, choisissez Genesis. Vous en serez satisfait puisque le thème enfant que vous avez choisi est déjà proche du résultat que vous désirez atteindre. Il y aura a priori très peu de situations où vous devrez aller toucher au code de votre site ou faire appel à un professionnel.

Par contre, si vous n’avez aucune compétence technique (CSS, HTML, PHP) mais que vous souhaitez personnaliser l’apparence de votre site Web en détail (polices, couleurs, dispositions, etc), alors orientez-vous vers Divi.

Notez que niveau tarif, Genesis et Divi sont un peu pareils, avec des licences « lifetime » (j’adore) pour quelques centaines d’euros. De notre côté, c’est de loin l’investissement le plus rentable que nous ayons ait fait puisque nous réalisons tous nos sites avec cela.

Là où ElegantThemes parait moins cher, c’est que… 😀

  • il ajoute à la licence Divi, le thème de magazine Extra (très bien lui aussi)
  • Il ajoute quelques plugins comme Monarch (partages sur les réseaux sociaux)
  • et Bloom (capteur d’e-mails pour newsletters MailChimp, etc.)

Notez également que Genesis lui… 🙁

  • n’offre pas de plugin de Page Builder amovible/portable sur n’importe quel site WordPress.

En revanche avec Genesis… 🙂

  • vous aurez accès à des dizaines de thèmes (enfants)

Alors que chez Divi, cela est à acheter (sans obligation) en supplément (souvent cher) dans des boutiques tierces. Rappelons tout de même encore une fois que Divi vous offre gratuitement 140 mises en page préconçues type « layout ». Une excellente inspiration qui vous aidera à réaliser les en-têtes/pieds de page de vos sites Divi.

Vous arrivez à vous y retrouver dans tout ça ? J’espère ! 😀 

Bon, par contre, si vous êtes un développeur ou si vous disposez de beaucoup de compétences techniques, avez l’envie d’apprendre, Genesis Framework peut vous faciliter la création de votre propre thème enfant à partir de rien. Le résultat sera ainsi tout propre, léger, rapide, performant et unique : le top.

Laissez votre avis en commentaire, que vous soyez utilisateur de Genesis ou de Divi, ou les deux, ou aucun des deux ! 😀 Merci !

Vos commentaires sont très appréciés ci-dessous !

Veuillez cependant respecter les bonnes pratiques de commentaires sur les blogs, sinon votre message s'autodétruira après 10 secondes entre mes mains.

  • Vous devez avoir lu l'article, sinon je m'en rendrais compte, et boom !
  • Vous ne pouvez renseigner aucun mot clé SEO dans le champ "nom" (pseudo, nom de société, pas de souci).
  • Vous pouvez renseigner votre "Site Web", vous aurez un lien dofollow, je suis gentil. Par contre, gardez à l'esprit qu'il s'agit d'un lien qui sert à vous identifier en tant qu'individu (site de votre société, votre blog perso, votre chef d'œuvre WordPress...). Je refuse donc : les sites de vos clients, les pages internes que vous peinez à booster, les MFAs sans intérêt, les serruriers, rachats de crédits et autres saloperies.
  • Vous devez avoir un avis sur le sujet abordé (même contradictoire) ou au moins poser une question pertinente. Si vous souhaitez juste me montrer votre gratitude éternelle, faites-le avec un retweet ou un partage Facebook. Donc pas de "merci très bel article" qui n'apporte rien.

À vos plumes !