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

Las puntas de Divi entraron en ser en 2017, y desde entonces nunca he logrado hacer una revisión completa. Hice cambios a la derecha a la izquierda, pero nunca había actualizado su diseño. ¡Era tiempo alto! De hecho, creo que un sitio web o blog debe rehacer una belleza cada dos o tres años... Son los peores zapateros de la historia. 🤣. En este artículo, explico cómo hice el rediseño de mi blog Divi Tips.

El iceberg de un rediseño del sitio

Los pasos que siguen varían dependiendo del estado del sitio y la cantidad de trabajo que se debe realizar durante su proyecto de rediseño. Por eso no podrás seguirlos "paso a paso", sino "caso por caso"...

Fase 1 - Migración local

Inicialmente, solo quería refrescar el diseño de Consejos Divi. Pensé que era suficiente para cambiar dos o tres cosas y no sería más complicado. Pero cuando empecé, directamente en el sitio de producción, me di cuenta rápidamente de que 2 horas no serían suficientes 😫 ¡Oye! Finalmente tomé la decisión de duplicar mi sitio localmente para trabajar tranquilamente y lograr un resultado satisfactorio.

Para ello, he utilizado UpdraftPlus - que está en la base un plugin de respaldo - pero que también permite migrar sitios con la versión PRO. Lo copí a un sitio local en el local WP.

Una vez que el sitio fue migrado, vi líneas de error de back-office no visibles en el sitio de producción. Así que me di cuenta de que algunas extensiones habían sido muy viejas, así que hablaremos de ello después de...

Fase 2 - Diseño completo rediseño

👉 Supresión del tema infantil

Fue mi perspicacia: tema del niño.

Cabe señalar que antes de octubre de 2019 y la apariencia del constructor de temaTuvimos que "recodificar" los patrones de un tema en un tema infantil. También fue el lugar perfecto para añadir nuevas características como añadir un nuevo icono en el pie 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.

Así que tomé una decisión radical, borré totalmente el tema infantil. Después de todo, también sirve sitios locales: permitirse experimentar, probar, soltar!

Y ahí: boom 💣 ¡Oye! Era obvio que esto tendría un impacto en el diseño de Divi...

Pero no importa, mi objetivo era empezar casi desde cero, ¡y ese objetivo se logró!

👉 Cambiar fuentes

Quería cambiar las fuentes utilizadas en Divi Tips. He reemplazado. Geometos por Abril Fatface para valores, y Poppins por Lato para el cuerpo del texto.

Para respetar la confidencialidad y el RGPD, Importé estas fuentes localmente para no utilizar fuentes de Google Fonts.

👉 Elección de nuevos colores

Para ser honesto, nunca me gustó los viejos colores, los había elegido para mantener la consistencia con los del Editor Visual. Pero no podía soportarlo más. 😮‍💨...

He estado pensando, ¿tengo que cambiar radicalmente todo? ¿Qué significaría que mis 140 imágenes resaltadas ya no serían consistentes con los nuevos colores? Y que sería un trabajo fenomenal si tuviéramos que rehacerlos en los nuevos colores...

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

Así que he enumerado las herramientas nativas de Divi que permitirían cambiar los colores de estas imágenes resaltadas sin tener que reemplazarlas...

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.

Reescribir un blog, en conclusión...

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?