L’écosystème de Divi évolue, s’agrandit et voit régulièrement apparaitre de nouvelles extensions.

Dans cette course au best-seller, certains plugins commencent à tirer leur épingle du jeu.

On vous a présenté Divi Toolbox précédemment, mais un nouveau venu est en train de chambouler les services tiers de notre thème favori : Divi Pixel.

À l’instar des extensions d’Elementor, le nouveau standard des add-ons est le tout-en-un et on peut dire que Divi Pixel est le premier à proposer un large panel de possibilité visant à améliorer notre workflow.

Divi Pixel, le nouveau venu dans l’écosystème

Sorti début 2020, Divi Pixel est une extension premium créée par des développeurs estoniens.

Son tarif est supérieur à ce que l’on à l’habitude de voir dans les extensions tierces dédiées à Divi, et pourtant plutôt similaire à ce que se fait actuellement du côté d’Elementor :

Contrairement aux nombreux plugins actuellement disponibles, Divi Pixel se veut un must-have englobant l’ensemble des besoins que nous pourrions avoir durant nos développements avec Divi.

Il intègre ainsi de nombreux réglages de personnalisation pour les différentes parties du site : entête, pied de page, options globales, réseaux sociaux et mobile.
Le principal avantage est qu’il embarque également de nombreux modules complémentaires (actuellement au nombre de 16) pour ajouter des fonctionnalités à Divi, et que les développeurs prévoient d’en publier régulièrement.

Alors que vaut ce nouveau plugin ?
Nous allons le voir tout de suite en commençant par…

Les options offertes par Divi Pixel

Tout comme Divi Toolbox, Divi Pixel propose de nombreux réglages globaux permettant de personnaliser votre site.

Voyons tout d’abord…

L’onglet Général

L’onglet général se divise en 3 sous-parties permettant :

• d’ajouter des options globales à votre site
• de personnaliser l’entête et le menu de navigation
• de personnaliser le pied de page de votre site

1 – General

Cette première sous-partie propose des options devenues assez standard mais néanmoins pratiques :

• Custom Login Page : permet de modifier la page de connexion de l’administration WordPress via le personnalisateur : couleurs, marges, police, logo… Tout y passe.
• Custom Browser Scrollbar : permet de modifier l’apparence de la barre de défilement du navigateur. C’est une option sympa pour personnaliser un site de fond en comble ;
• Allow SVG uploads : pour autoriser le téléversement de fichier .svg sur votre site ;
• Customize Back To Top Button : offre la possibilité de personnaliser le bouton de retour vers le haut, ainsi que son lien ;
• Hide Projects Cutom Post Type : permet de masquer le type de contenu Projets automatiquement ajouté par Divi à l’activation du thème ;
• Rename Projects Custom Post Type : si vous souhaitez utiliser ce type de contenu mais le renommer et changer son slug, cette option vous sera utile ;
• Hide Admin Bar : une option que je n’avais jamais vue ailleurs mais qui est plutôt sympa si on souhaite visualiser son site comme un visiteur. Elle permet de masquer la barre d’administration en permanence et de ne l’afficher que lorsque l’on rapproche la souris du haut de l’écran ;
• Add Custom Map Marker : permet de remplacer le marqueur habituel du module Carte par l’image de son choix ;
• Add Preloader : ajoute une animation de préchargement de la page. Divi Pixel en propose 28 mais vous laisse la possibilité d’en utiliser un personnalisé si vous le souhaitez.

Voila pour les options globales du site.
Passons maintenant à …

2 – Header & Navigation

Les options de personnalisation du menu sont les suivantes :

• Customize Header & Navigation Style : applique des animations au passage de la souris sur vos items de menus parmi 12 effets intégrés (notamment le soulignement par les trois points comme sur le site officiel de Divi Pixel), permet de personnaliser en profondeur les sous-menus et de transformer le premier ou dernier item de votre menu en bouton d’appel à l’action ;
• Remove Main Header Shadow : supprime l’ombre affichée sous le menu principal ;
• Do Not Shrink Header On Scroll : vous avez surement déjà remarqué cet effet un peu énervant du menu qui se réduit lorsque vous scrollez vers le bas de page. Et bien en activant cette option le problème ne se produira plus ;
• Change Logo On Scroll : cette option vous permet d’uploader un second logo qui sera affiché sur le menu fixe de Divi ;
• Zoom Logo On Hover : applique un effet de zoom lorsque vous passez la souris sur le logo du menu.

3 – Footer

Les options concernant le pied de page sont :

• Hide Footer Bottom Bar : cache la barre inférieure du pied de page;
• Force Footer to Bottom : oblige le pied de page à être au bas de l’écran, même si le contenu de la page est faible;
• Reveal Footer Effect : ajoute un effet d’apparition du pied de page au scroll de la souris. L’effet est adaptable différemment suivant les pages ou les tailles d’écran.

L’onglet Blog

Passons maintenant aux options de personnalisation de la partie Blog de votre site Divi.
Il y a ici des paramètres qui ne sont plus vraiment utiles depuis la mise en place du Theme Builder, mais ils pourraient vous être utiles si jamais vous ne l’utilisez pas.

De nombreux choix disponibles :

• Custom Archive Page Style : permet de modifier la mise en page de vos pages blogs et catégories parmi 6 dispositions: nombres d’articles par lignes , articles en quinconce… Utile si vous n’utilisez pas le Theme Builder.
• Add icons to meta text : ajoute des icônes devant la date, l’auteur, le nombre de commentaires et la catégorie. C’est une option pratique pour ajouter une petite touche de modernité à vos articles;
• Hide Excerpt Text : masque le résumé des articles sur les pages d’archives et catégories;
• Remove Sidebar : supprime la barre latérale pour passer vos articles en mode pleine largeur;
• Remove Sidebar border : supprime la bordure gauche de la barre latérale;
• Add Read More Button : ajoute un bouton “Lire Plus” dont le libellé est personnalisable sur les articles listés sur les pages d’archives et catégories;
• Add Author Box : ajoute une boite de présentation de l’auteur sous chaque article. Le texte est à modifier sur votre page de profil dans l’administration de WordPress;
• Add Blog Navigation : ajoute des flèches de navigation “Précédent” et “Suivant” sous chaque article. Le libellé est également personnalisable;
• Related Articles : affiche des articles en relation à la fin de vos articles. Le nombre d’articles affichés est modifiable, ainsi que le titre de l’encart;
• Customize Comment Section : permet de modifier l’apparence des commentaires depuis le personnalisateur WordPress : couleur, police, ombre, taille… Tout est possible.

Social Media

Les options concernant les réseaux sociaux permettent d’une part d’en définir plusieurs, et ensuite de choisir ou les afficher :

• Open Social Links in New Tab : permet d’ouvrir vos réseaux dans une nouvelle fenêtre;
• Individual Icon Locations : vous permet d’afficher les icônes de réseaux sociaux dans le pied de page, le menu de votre choix, et la barre de menu supérieure de Divi. Option inutile si vous utilisez déjà le Theme Builder;
• Networks : la liste de tous les réseaux disponibles à afficher aux emplacements sélectionnés précédemment : facebook, Pinterest, Dribble…

Mobile

Les options mobiles sont très utiles pour améliorer le menu standard de Divi et personnaliser vos sites facilement.

1 – Les options générales

• Enable Custom Menu BreakPoint : permet de définir un point de rupture personnalisé pour votre menu, et ainsi de l’adapter à votre nombre d’items par exemple;
• Fixed Mobile Header : permet de conserver votre menu toujours visible à l’écran, même sur mobile. Attention cependant à ne pas gêner la navigation;
• Hide Search Icon on Mobiles : masque l’icône de recherche sur mobile;
• Change Logo on Mobiles : si vous souhaitez afficher une autre logo sur téléphone, vous pouvez le définir ici.

4 – Les options dédiées au menu sur téléphone

C’est ici que vous pouvez vraiment améliorer l’aspect du menu sur téléphone :

• Enable Custom Mobile Menu Style : permet d’accéder à de nombreuses options de personnalisation du menu et de l’afficher en plein écran;
• Add Hamburger Icon Animation : propose 6 choix d’animation pour l’icône hamburger du menu mobile;
• Collapse Submenu Items on Mobiles : ferme automatiquement vos sous-menus sur téléphone.

Modules

Nous voici à la deuxième partie intéressante de cette extension : les modules Divi ajoutés.

En plus des options de personnalisation pour l’ensemble du site, Divi Pixel ajoute pour l’instant 12 modules supplémentaires au Divi Builder. 4 autres sont en cours de publication et de nombreux autres seront ajoutés au fur et à mesure.

Cet onglet ne sert qu’à masquer les modules que vous ne voulez pas voir dans votre Divi builder. C’est utile si vous ne les utilisez pas tous pour ne pas être noyer dans la liste des modules lorsque vous en cherchez un :

Concernant les modules ajoutés, commençons par …

Le module Before/After

Le module Before/After permet d’ajouter une section comparant 2 images dynamiquement. Idéal pour présenter des travaux de rénovation par exemple.

Le module Breadcrumbs

Le module miette de pain que vous connaissez surement permet d’ajouter un fil d’ariane directement depuis le Divi Builder à vos pages.
Tout est entièrement personnalisable via les options habituelles du Visual Builder.

Le module Button Grid

Ce module est très utile car il permet d’aligner autant de bouton que vous le souhaitez sur la même ligne en un seul module.

Le module Carrousel

Le module Carrousel permet de créer des sliders personnalisés. Il est également possible d’en créer en important des modèles depuis la bibliothèque Divi.
Différents types de carrousel sont disponibles, et vous pouvez ajouter n’importe quel type de contenu à l’intérieur.

Le module Compteur

Rien d’incroyable ici.
On ne va pas se mentir, ce type de module n’est pas l’un des plus utilisé mais il vous offrira une personnalisation bien plus poussée que celui de base intégré par Divi.

Le module FlipBox

Un module intéressant pour afficher des “FlipBox”.
Le principe est simple, vous affichez des infos sur une face, et vous pouvez en afficher d’autres sur l’arrière de votre module, visible uniquement au passage de la souris.
Cela peut être pratique pour afficher des prestations par exemple.

Le module Floating Image

Il permet de faire flotter des images les unes par rapport aux autres pour donner un côté dynamique à votre page.
Idéal pour tout ce qui serait sites de start-ups ou de restauration.

Voyez-vous d’autres cas d’utilisation?

Le module Masonry Gallery

Ce module ajoute la possibilité d’intégrer une galerie de type masonry, qui permet d’aligner les éléments parfaitement tout en conservant leur ratio.
Le nombre d’images par ligne est personnalisable, tout comme la marge les séparant.

Le module de notation par étoiles

Divi Pixel intègre également un module de notation par étoiles qui pourra être très efficace couplé à vos produits WooCommerce ou à des tests/avis dans vos articles de blogs.

Le nombre d’étoiles affichées ainsi que leur apparence est entièrement personnalisable via le Visual Builder, et il prend également en compte les chiffres à virgule.

Le module carrousel de témoignages

Surement le module le plus abouti de Divi Pixel, car vous allez le voir, il est très puissant et pratique.

Il permet, comme son nom l’indique, d’afficher des témoignages sur vos pages via un slider possédant les mêmes caractéristiques que le module carrousel précédent.
Son principal atout est qu’il permet de récupérer automatiquement vos témoignages reçus depuis WooCommerce, Google et Facebook. Ce genre de fonctionnalité est plutôt rare et les extensions premiums le permettant son souvent à un prix élevé.
Vous pouvez bien entendu en entrer manuellement si vous le souhaitez.

Le module Tilt Image

Je ne suis pas fan personnellement de ce type d’effet sur les contenus, mais il permet de faire bouger vos images en suivant le mouvement de la souris.

Utilisez-vous ce genre d’animation sur vos sites ? Dans quel cas ?

Le module Typing Text

Le module Typing Text est un module assez classique permettant d’ajouter un effet de machine à écrire à du texte, tout en permettant une personnalisation via le Divi Builder.

Nous avons fait le tour des modules disponibles, voyons maintenant ceux qui prochainement publiés.

Le module Image Hotspot

Le module Image Hotspot vous sera peut-être très pratique car il permet d’ajouter des points d’intérêt cliquables à une image.

Vous pouvez ensuite afficher des informations supplémentaires ou des boutons d’appel à l’action dans la bulle apparaissant sur votre point d’intérêt.

Le module Price List

Encore un module qui s’avèrera pratique : la possibilité de mettre en forme facilement et automatiquement une Liste de prix avec des images, une description et un titre. Le tout avec un alignement impeccable et via le Visual Builder.

Idéal pour tous vos sites de restaurants ou de prestations.

Le module Hover Box

Une fonctionnalité régulièrement demandée sur le groupe Facebook Support Divi Community ou dans les commentaires: la possibilité d’afficher du texte et un bouton au passage de la souris sur une image.
Eh bien ce module sera parfait pour vous, il permet tout cela en quelques clics tout en étant personnalisable à souhait.

Le module Compte à rebours

Un module Compte à rebours sera prochainement disponible pour créer des designs un peu plus élaborés lors de vos lancements d’offres ou de sites.

L’onglet Layout Injector

Je ne vous le présenterais pas en détail ici car depuis la sortie du Theme Builder il n’a pas forcément d’intêret.

Il permet d’injecter des modèles depuis votre bibliothèque Divi avant/après l’entête, le pied de page ou dans différentes pages, ou encore d’assigner l’un de vos modèles à votre page 404.

Tout ceci étant possible et très simple avec le Theme Builder, la seule raison d’utiliser ces options est d’avoir un site Divi utilisant uniquement le design de base.

L’onglet Settings

Le dernier onglet disponible, celui des options générales de l’extension :

C’est ici qu’il faudra mettre vos identifiants Facebook et Google pour récupérer les témoignages.

À noter que vous pouvez également facilement importer et exporter les réglages de Divi Pixel pour paramétrer plusieurs sites de la même façon.

Conclusion

Après un gros tour de cette extension plutôt chargée en options, Divi Pixel s’avère être un couteau suisse très prometteur.

Son prix relativement élevé s’inspire de ce qui se fait actuellement en terme de business model chez la plupart des développeurs et n’est pas choquant au vu de ce qu’il propose.
Il n’a pas à rougir non plus comparé à Divi Toolbox, qui propose un peu plus d’options mais pas de modules supplémentaires.

Je reste actuellement mitigé sur l’utilité de l’ensemble, mais d’ici quelques mois et la publication de nouveaux modules intégrés je pense qu’il deviendra l’un des incontournables de l’écosystème Divi et pourrait même faire de l’ombre à pas mal d’autres plugins.

Qu’en pensez-vous ?
Dites-nous tout en commentaires.

Partager