Redesign of the Astuces Divi blog: discover the adventure!

Divi tips came into being in 2017, and since then I have never managed to make a complete overhaul. I made changes to the right to the left, but I had never really updated his design. It was high time! Indeed, I believe that a website or blog should remake a beauty every two or three years... Like, they're the worst shoemakers ever. 🤣. In this article, I explain how I made the redesign of my Divi Tips blog.

The iceberg of a site redesign

The steps that follow vary depending on the state of the site and the amount of work to be done during your redesign project. That's why you won't be able to follow them "step by step", but rather "case by case"...

Phase 1 - Local migration

Initially, I just wanted to refresh the design of Divi Tips. I thought it was enough to change two or three things and it wouldn't be more complicated. But when I started, directly on the production site, I quickly realized that 2 hours wouldn't be enough 😫 Hey! I finally made the decision to duplicate my site locally to work quietly and achieve a satisfactory result.

For this, I used UpdraftPlus - which is at the base a backup plugin - but which also allows to migrate sites with PRO version. I copied it to a local site on Local WP.

Once the site was migrated, I saw back-office error lines not visible on the production site. So I realized that a few extensions had been badly aged, so we'll talk about it after...

Phase 2 - Complete design redesign

👉 Abolition of the Child Theme

It was my haunting: child theme.

It should be noted that before October 2019 and the appearance of the Theme BuilderWe had to "recode" the patterns of a theme in a child theme. It was also the perfect place to add new features like adding a new icon at the footer For example.

Divi tips, dating back to 2017, accumulated a lot of code in her child's theme and I knew that sooner or later, you would have to put your hands in the cambodia.

So I made a radical decision, I totally deleted the child theme. After all, it also serves local sites: to allow yourself to experiment, to try, to let go!

And there: boom 💣 Hey! It was obvious that this would have an impact on the design of Divi...

But it doesn't matter, my goal was to start almost from scratch, and that goal was achieved!

👉 Changing fonts

I wanted to change the fonts used on Divi Tips. I've replaced Geometos by Abril Fatface for securities, and Poppins by Lato for the body of text.

To respect confidentiality and GDPR, I imported these fonts locally to not use Google Fonts fonts.

👉 Choice of new colors

To be honest, I never liked the old colors, I had chosen them to maintain consistency with those of the Visual Builder. But I couldn't take it anymore. 😮‍💨...

I've been thinking, do I have to radically change everything? Which would mean that my 140 highlighted images would no longer be consistent with the new colors? And that it would be a phenomenal job if we had to redo them in the new colors...

Or can I find a trick to keep my highlighted images while changing a little those colors that are really dull?

So I listed the native tools of Divi that would allow to change the colors of these highlighted images without having to replace them...

Bingo! Divi's filter options allowed me this:

At the blog article template from Divi theme, I tried to increase color saturation to 200% using the Filter options of the module displaying the highlighted image. The result convinced me: I keep most of the original colours while making them brighter. This is how the color palette of the blog has evolved:

I cheated a little with blue, orange and beige, which do not result from saturation of old colors...

👉 Rebuilding main page layouts

Fortunately, Divi Tips does not have many pages, only a small handful. So it was easy to activate the Visual Builder on the homepage and the few landing pages to update the design, change colors, review texts and provisions...

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

Once the homepage was almost ready, I worked to rebuild the design of the main theme models, namely:

• Models for articles: four models in total, because I wanted to use distinct colors in each model.
• Models for category archives: four in total again here, since I have four categories with four different colors.
• Template of error page 404
• The search results page template

👉 Replacement of Divi Blog Modules

Basic, the Divi Builder offers a blog module to display the query loop (the blog results), but this one is not very sexy, or let's say it does not offer many options to customize it 👇

In the old version of Divi Tips, I had coded a custom style in my child theme. For this redesign, I decided to dispense with the Divi Blog module to replace it with WPGridBuilder extension, and here's the result:

It must be said that WPGridBuilder is not easy to take in hand, it is addressed to initiates, myself, I took time to understand its functioning, but I am very satisfied with the result, the game was worth it! In addition, this extension brings a lot of comfort to blog readers who can easily filter the results. Take a test on the blog page and you will see. So WPGridBuilder allowed me to improve design and UX.

👉 Change of logo

I was asked: "Why ice cream?". Those who really know me don't offend, because they know there's something wrong with my head. 🤪So, yes, why ice cream? Because at the base, the A and D of Divi Tips made me think of an ice cone, and then the slogan of the beginning was Fresh tips for Divi. All right, I'll give it to you, it's a little hairy...

Today, for this redesign, I thought to myself "to display an ice, as much as it really looks like an ice cream"... It's not said it's the final logo, but in the meantime, it'll be this one!

Phase 3: Cleaning and cleaning!

Until then, I've only told you about what's visible, so the tip of the iceberg. The most pleasant and satisfying part of a redesign! But the upside down is another story.

A 7-year-old site has inevitably accumulated a lot of unwanted things.

First of all, there are the extensions that have been followed over time:

• WooCommerce => uninstalled and never replaced
• MailPoet => GetResponse => replaced by a SendFox script
• Secupress => iThemes Security => WP Cerber => and finally replaced by various security extensions.
• Bloom => uninstalled and never replaced
• Monarch => uninstalled and never replaced
• Pin It => uninstalled and never replaced
• Yoast => replaced by SEOPress
• Etc.

I certainly forget tons!

Then there are the host changes: o2switch => Kinsta => WPServer.

Finally, there are all the custom CSS and scripts that have been added over the years. He's a real melody!

So I took my pain in patience and I removed, cleaned, little bit by bit.

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 !

And I'm back for 7 years with a clean database!

Phase 4: Last modification and control

Lors de cette étape, j'en ai profité pour implémenter mon plugin wpLingua to manage multilingual. 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 :

• correct shells,
• convert the articles that had been published before Gutenberg's release into a block (there were still some articles left).
• 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.

Phase 5: Production of the new version

In the same way that the site was duplicated locally the time of the redesign, the new version must then be produced. So reverse migration!

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.

So this is a good thing done: updated design and improved visitor experience!

ChatGPT: my redesign assistant!

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.

(click to enlarge images)

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.

Rewrite a blog, in 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.

How often do you refresh your blogs and websites?