Lorsqu’il s’agit d’illustrer un processus en plusieurs étapes sur un site web, il est essentiel d’avoir une présentation claire et fluide. L’intégration d’un module code dans Divi permet d’avoir un contrôle précis sur la mise en forme et l’affichage. Cependant, plusieurs défis peuvent se poser : personnalisation des icônes, gestion des flèches entre les étapes et adaptation au format mobile. Voici comment ce projet a évolué.

Structurer un processus par étapes dans Divi

La première approche a consisté à créer une structure HTML avec des titres, des descriptions et des icônes. L’objectif était d’obtenir une mise en page propre, facilement intégrable dans un module code de Divi. L’utilisation des balises h2 et h3 a permis d’assurer une bonne hiérarchie de contenu pour le référencement naturel.

Dès cette étape, un premier constat a été fait : bien que la mise en page soit fonctionnelle, elle manquait encore de personnalisation et d’éléments visuels clairs pour guider l’utilisateur. C’est ainsi qu’est venue l’idée d’intégrer des icônes spécifiques et de fluidifier la transition entre chaque étape grâce à des flèches directionnelles.

Remplacement des références de l’entreprise

Dans le cadre d’une modification du projet, il a fallu adapter toutes les références à une entreprise spécifique. Ce type de modification peut sembler anodin, mais il est facile d’oublier certaines occurrences, notamment dans les classes CSS ou les textes d’accompagnement. Une vérification minutieuse a permis de s’assurer que toutes les mentions avaient bien été remplacées, évitant ainsi toute confusion entre les identités visuelles.

Intégrer des icônes monochromes en SVG

L’une des demandes spécifiques concernait l’utilisation d’icônes monochromes, en blanc, afin d’obtenir un design plus épuré et cohérent. Plutôt que d’utiliser des images statiques, le choix s’est porté sur des icônes SVG directement intégrées dans le code.

Cette solution présente plusieurs avantages : les SVG sont indépendants de la résolution et permettent une personnalisation facile avec du CSS. Toutefois, l’un des défis a été de s’assurer que tous les navigateurs les affichent correctement et que leur couleur reste bien en accord avec le design global du module. Une simple modification du fill="white" a permis de régler cette contrainte.

Ajouter des flèches directionnelles entre les étapes

Une fois les icônes mises en place, une autre amélioration a été apportée : des flèches entre les différentes étapes pour symboliser la progression. Initialement, plusieurs approches ont été envisagées : l’utilisation d’images, de caractères spéciaux ou encore de balises SVG.

Finalement, la solution retenue a été d’ajouter les flèches sous forme de pseudo-éléments CSS. Cela a permis d’assurer une intégration fluide sans alourdir le code avec des images externes. Néanmoins, cette approche a nécessité quelques ajustements pour éviter que les flèches ne se retrouvent mal positionnées lorsque les étapes ne s’affichaient plus sur une seule ligne.

Adapter l’affichage pour mobile

L’un des derniers points à résoudre concernait la compatibilité mobile. Sur un écran large, la disposition horizontale fonctionnait bien, mais dès que l’affichage se réduisait, les éléments risquaient de se chevaucher. Deux solutions ont été testées : conserver un affichage en ligne en réduisant la taille des blocs ou empiler les étapes verticalement.

La seconde approche a été retenue, car elle assurait une meilleure lisibilité. Un media query CSS a permis de détecter la taille de l’écran et d’ajuster automatiquement la disposition. Dans cette version mobile, les flèches directionnelles ont été supprimées pour éviter des décalages visuels inutiles.

Conclusion

Ce projet a permis de mettre en place un module code dans Divi à la fois fonctionnel et adaptable. L’intégration des icônes SVG, l’ajout de flèches et la gestion du responsive ont constitué les principaux défis, mais chaque ajustement a contribué à une meilleure expérience utilisateur.

Si des difficultés similaires apparaissent dans un projet web, il ne faut pas hésiter à nous contacter. Trouver des solutions adaptées à chaque besoin est essentiel pour garantir un rendu optimal, tant sur ordinateur que sur mobile.