Rediseño del blog Astuces Divi: ¡descubre la aventura!

Astuces Divi a vu le jour en 2017, et depuis, je n'avais jamais réussi à faire une refonte complète. J'avais fait des modifications à droite à gauche, mais je n'avais jamais réactualisé réellement son design. Il était grand temps ! En effet, j'estime qu'un site ou un blog devrait se refaire une beauté tous les deux ou trois ans... Comme quoi, ce sont les cordonniers les plus mal chaussés 🤣. Dans cet article, je vous explique comment j'ai réalisé la refonte de mon blog Astuces Divi.

L'iceberg d'une refonte de site

Les étapes qui suivent varient selon l'état du site et la masse de travail à réaliser lors de votre projet de refonte. C'est pourquoi vous ne pourrez pas les suivre "pas à pas", mais plutôt au "cas par cas"...

Phase 1 - Migration en local

Au départ, je voulais simplement rafraichir le design d'Astuces Divi. Je me suis dit qu'il suffisait de changer deux ou trois choses et que ça ne serait pas plus compliqué. Mais quand j'ai commencé, directement sur le site en production, j'ai vite compris que 2 heures ne suffiraient pas 😫 ! J'ai finalement pris la décision de dupliquer mon site en local pour travailler tranquillement et aboutir à un résultat satisfaisant.

Pour cela, j'ai utilisé UpdraftPlus - qui est à la base un plugin de sauvegarde - mais qui permet également de migrer des sites avec la version PRO. Je l'ai copié sur un site en local sur Local WP.

Une fois le site migré, j'ai vu apparaitre des lignes d'erreurs en back-office, non visibles sur le site en production. J'ai donc réalisé que quelques extensions avaient mal vieilli, on en reparlera après...

Phase 2 - Refonte complète du design

👉 Supresión del tema infantil

C'était ma hantise : tema del niño.

Il faut savoir qu'avant octobre 2019 et l'apparition du Thème Builder, on était obligé de "recoder" les modèles d'un thème dans un thème enfant. C'était aussi l'endroit idéal pour ajouter de nouvelles fonctionnalités comme l'ajout d'une nouvelle icône en pied de page Por ejemplo.

Consejos Divi, que datan de 2017, acumularon un montón de código en el tema de su hijo y yo sabía que tarde o temprano, usted tendría que poner sus manos en la cambodia.

Alors, j'ai pris une décision radicale, j'ai carrément supprimé le thème enfant. Après tout, ça sert aussi à ça les sites en local : se permettre d'expérimenter, de tenter, de se lâcher !

Et là : boom 💣 ! Il était évident que cela aurait des conséquences sur le design d'Astuces Divi...

Mais ce n'est pas grave, mon objectif était de repartir quasiment de zéro, et ce but était atteint !

👉 Cambiar fuentes

Quitte à repartir de zéro, j'avais envie de changer les polices utilisées sur Astuces Divi. J'ai remplacé Geometos por Abril Fatface para valores, y Poppins por Lato para el cuerpo del texto.

Para respetar la confidencialidad y el RGPD, j'ai importé ces polices en local pour ne pas utiliser celles de Google Fonts.

👉 Elección de nuevos colores

Pour être honnête, les anciennes couleurs ne m'ont jamais plu, je les avais choisies pour garder une cohérence avec celles du Visual Builder. Mais je n'en pouvais plus 😮‍💨...

J'ai un peu réfléchi : dois-je radicalement tout changer ? Ce qui impliquerait que mes 140 images mises en avant n'auraient plus aucune cohérence avec les nouvelles couleurs ? Et que cela représenterait un travail phénoménal s'il fallait les refaire aux nouvelles couleurs...

¿O puedo encontrar un truco para mantener mis imágenes resaltadas al cambiar un poco esos colores que son realmente aburridos?

J'ai donc répertorié les outils natifs de Divi qui permettraient de changer les couleurs de ces images mises en avant sans avoir à les remplacer...

Bingo ! Les options de filtres de Divi m'ont permis cela :

En el plantilla de artículo del blog del tema Divi, j'ai tenté d'augmenter la saturation des couleurs à 200% à l'aide des options de Filtre du module affichant l'image mise en avant. Le résultat m'a convaincu : je conserve l'essentiel des couleurs d'origine tout en les rendant plus lumineuses. C'est donc de cette manière que la palette de couleur du blog a évolué :

J'ai un peu triché avec le bleu, l'orange et le beige, qui ne résultent pas de la saturation d'anciennes couleurs...

👉 Reconstruir diseños de página principales

Heureusement, Astuces Divi n'est pas doté de nombreuses pages, une petite poignée seulement. Il a donc été facile d'activer le Visual Builder sur la page d'accueil et les quelques landing pages pour réactualiser le design, changer les couleurs, revoir les textes et les dispositions...

👉 Reconstruction du design des modèles du thème

Une fois que la page d'accueil était presque prête, je me suis attelée à reconstruire le design des principaux modèles du thème, à savoir :

• Modelos para artículos: quatre modèles au total, car j'ai voulu utiliser des couleurs distinctes dans chaque modèle.
• Modelos para archivos de categoría: quatre au total ici encore, puisque j'ai quatre catégories avec quatre couleurs différentes.
• Le modèle de la page d'erreur 404
• La página de resultados de búsqueda plantilla

👉 Sustitución de los módulos de blog Divi

De base, le Divi Builder propose un module blog pour afficher la boucle de requête (les résultats du blog), mais celui-ci n'est pas très sexy, ou disons qu'il ne propose pas de nombreuses options pour le personnaliser 👇

Dans l'ancienne version d'Astuces Divi, j'avais codé un style personnalisé dans mon thème enfant. Pour cette refonte, j'ai décidé de me passer du module Blog de Divi pour le remplacer par l'extension WPGridBuilder, y aquí está el resultado:

Il faut dire que WPGridBuilder n'est pas facile à prendre en main, il s'adresse à des initiés, moi-même, j'ai mis du temps à comprendre son fonctionnement, mais je suis très satisfaite du résultat, le jeu en valait la chandelle ! De plus, cette extension apporte beaucoup de confort aux lecteurs du blog qui peuvent facilement filtrer les résultats. Haga una prueba en la página del blog y verá. Donc WPGridBuilder m'a permis d'améliorer le design ainsi que l'UX.

👉 Cambio de logo

On m'a demandé : "Pourquoi la glace ?". Ceux qui me connaissent vraiment ne s'en offusquent pas, car ils savent qu'il y a truc qui ne tourne pas rond dans ma tête 🤪... Donc, oui pourquoi la glace ? Car à la base, le A et le D d'Astuces Divi m'ont fait penser à un cône glacé, et puis le slogan du début était "des astuces fraiches pour Divi". Bon, je vous l'accorde, c'est un peu tiré par les cheveux...

Aujourd'hui, pour cette refonte, je me suis dit "à afficher une glace, autant qu'elle ressemble vraiment à une glace"... Ce n'est pas dit que ce soit le logo définitif, mais en attendant, ce sera celui-ci !

Fase 3: Limpieza y limpieza!

Jusque-là, je ne vous ai parlé que de ce qui est visible, donc la partie émergée de l'iceberg. La partie la plus plaisante et satisfaisante d'une refonte ! Mais l'envers du décor, c'est une autre histoire.

Un sitio de 7 años ha acumulado inevitablemente muchas cosas no deseadas.

Tout d'abord, il y a les extensions qui se sont succédées au fil du temps :

• WooCommerce = alojamiento desinstalado y nunca reemplazado
• MailPoet = titulado GetResponse = confianza reemplazado por un script SendFox
• Secupress = prenda iThemes Security = prenda WP Cerber = prenda y finalmente reemplazado por varias extensiones de seguridad.
• Bloom = título desinstalado y nunca reemplazado
• Monarch = título desinstalado y nunca reemplazado
• Pin It = curso desinstalado y nunca reemplazado
• Yoast = profesor reemplazado por SEOPress
• Etc.

J'en oublie certainement des tonnes !

Ensuite, il y a les changements d'hébergeurs : o2switch => Kinsta => WPServeur.

Finalmente, hay todos los CSS y scripts personalizados que se han añadido a lo largo de los años. ¡Es una verdadera melodía!

J'ai donc pris mon mal en patience et j'ai supprimé, nettoyé, petit bout par petit bout.

Dans un premier temps, j'ai utilisé la version PRO de WP Database Cleaner pour faire un nettoyage avancé et minutieux de ma base de données. Ayant déjà utilisé cette extension, j'avais confiance et je la trouvais drôlement efficace... Mais vous n'allez pas croire la suite : dans le backoffice, cette extension vous "fait croire" qu'elle supprime bien tout. Quelle surprise en ouvrant PHP MyAdmin : j'ai retrouvé mes tables Yoast, WooCommerce, MailPoet, etc. que je venais de supprimer avec WP Database Cleaner... J'ai donc fait une bonne sauvegarde de la base de données puis j'ai tout supprimé manuellement, rien ne vaut l'humain !

¡Y he vuelto por 7 años con una base de datos limpia!

Fase 4: Última modificación y control

Lors de cette étape, j'en ai profité pour implémenter mon plugin wpLingua para gestionar multilingüe. Même si la traduction est automatique, il faut passer manuellement sur chaque page du site pour générer la première traduction, et ce, pour chaque langue. Disons que ce n'est pas obligatoire, mais si le site a beaucoup de contenu et qu'il génère déjà du trafic, c'est mieux.

J'ai donc parcouru la dizaine de pages du site et les 140 articles du blog pour effectuer un contrôle minutieux de la nouvelle version d'Astuces Divi, et cela m'a permis de :

• Cañones correctos,
• convertir los artículos que habían sido publicados antes de la liberación de Gutenberg en un bloque (aún quedaban algunos artículos).
• trouver des images cassées, suite aux changements d'hébergeurs : par exemple, il restait 24 images dont le lien pointait vers le CDN de Kinsta, sachant que le blog n'est plus là bas depuis longtemps.
• corriger le CSS personnalisé de certains blocs Gutenberg qui n'étaient plus en harmonie avec les nouvelles couleurs du site.
• ajouter la table des matières aux articles qui n'en avaient pas.
• etc.

Fase 5: Producción de la nueva versión

De la misma manera que el sitio fue duplicado localmente el tiempo del rediseño, la nueva versión debe entonces ser producida. ¡Así que la migración inversa!

Une fois en ligne, c'est le moment de vérifier que tout est OK sur divers navigateurs mais aussi en versions mobiles. C'est également à ce moment-là que j'ai réactivé WP Rocket, l'extension de cache qui permet améliorer la performance. Bien sûr, vous me connaissez, j'avais pris soin de faire un test de performance sur PingdomTools avant et après la réimportation du nouveau site et le résultat est surprenant :

La performance s'est améliorée à tous les niveaux : grade / poids de la page / temps de chargement et nombre de requêtes. Je précise que WP Rocket était installé et activé lors des deux tests.

Así que esto es algo bueno hecho: diseño actualizado y experiencia de visitante mejorada!

ChatGPT: ¡mi asistente de rediseño!

Pour terminer, je voulais préciser que ChatGPT a été mon fidèle assistant pour cette refonte. C'est incroyable comme il m'a aidé. Par exemple :

• Il m'a aidé à créer ou parfaire certaines règles de CSS personnalisé.
• Il a créé 3 petits shortcodes (Code Court) qui m'ont permis de supprimer 3 extensions obsolètes.
• Il a créé des scripts qui m'ont permis de trouver plus facilement des articles selon un détail précis (par exemple la présence d'un shortcode indésirable, ou la présence de certains liens...).
• etc.

(haga clic para ampliar las imágenes)

Je lui en ai tellement demandé que j'ai l'impression de l'avoir exploité 🤣 !

Bien sûr, j'en ai pris et j'en ai laissé. C'est mieux quand on a quelques notions, cela permet de vérifier si le code fournit par ChatGPT semble être correct... Aussi, quand il dit qu'il faut placer le code fournit dans le thème, on sait très bien qu'il ne faut pas faire cela ! On place le code dans un thème enfant ou dans Code Snippet (ce qui est mon cas) : voir toutes les façons d'ajouter du code ici.

Refonte d'un blog, en conclusion...

On arrive à la fin de cette aventure 🥵. Je n'ai pas tout dit car ce serait trop long mais j'espère que vous appréciez la nouvelle version d'Astuces Divi, que vous aimez ses nouvelles couleurs, ses polices et sa nouvelle expérience utilisateur !

Ce qu'il faut surtout retenir, c'est que cette refonte a été "facile" car je n'ai jamais activé le Visual Builder de Divi sur mes articles ! J'utilise toujours Gutenberg sur mes articles et je gère le design du modèle via le Thème Builder. Cette façon de faire m'a évité de devoir réactualiser le design article par article ! Vous imaginez 140 articles, combien de temps cela prendrait ? Comme expliqué, j'ai juste eu à réactualiser le design sur mes quelques pages (page d'accueil & landing pages), le reste du travail a été fait au sein des quelques modèles créés au niveau du thème builder.

¿Con qué frecuencia actualizas tus blogs y sitios web?