From Hungry to Divi: case study of a website redesign

Updated on 10/09/2019 | Published on 06/03/2019 | 7 comments

The Hungry theme is a WordPress theme sold on ThemeForest. It is specialized in restaurant site" theme. In this article, I offer you my experience of a Divi redesign. I explain the various steps taken to go from Hungry to Divi.

From Hungry to Divi Theme: before and after in video

Site Web avant refonte : thème Hungry
Site Web après refonte : thème Divi

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

Step 1: Installing a local WordPress

For this project, I used MAMP. I have had too many setbacks with other solutions that I have not taken the risk for a long time...

I decided to start from scratch. The contents of the old site were poor, there was almost nothing to keep. Moreover, the Hungry theme had created many Custom Post Types that were useful for its operation (such as dishes, menus etc.). I did not want to keep them in any case.

So I created a new WordPress site, I installed the Divi theme and most of the plugins used in the old site.

I found equivalents for plugins that were no longer maintained by their developer. For example, I swapped Delightful Download (a plugin that had not been updated for over two years) by Download Monitor. Even if there were no problems (conflicts) with the old one, when you do a redesign, you might as well do it "thoroughly".

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

Step 2: Monitoring the content

Little by little, I rebuilt the existing site on my local version. This way, the production site (the old one) was still accessible on the internet.

For a restaurant website, it is unimaginable to leave it in maintenance for several days, the time to make the redesign.

It is not a blog or a "common" showcase site: a restaurant site is necessary for the daily business. People want to see the menu and they need to be able to book online!

Anyway, I forwarded most of the pages and rebuilt the main menu (the structure of the site).

I took care to keep the SLUG of each page (the end of the URL) so that they match those of the old site. This way, I would save redirects later on!

Step 3: Design

Apart from transcribing some of the existing content from the local site, we had to tackle the design!

The advantage is that I had "carte blanche". That's pretty cool!

So I built my pages "block by block". I did not use ready-made layoutsThis would have been the easy way out.

I used the colours of the client's graphic charter and embellished my sections with the Dividers of Divi.

Step 4: The features

In terms of functionality, nothing complicated: no online shop, no reservation system, no newsletter, no blog. So the work was light!

As I am a proponent of the least effort, I still used tools that made this redesign easier.

For example, for the reservation request form (not a system per se, just a form) built with Caldera FormsI used the Export-Import tool of the plugin.

So I didn't have to rebuild the form fields. It was a breeze to export the settings from the old site and import them back into the new one!

Step 5: SEO optimization

Since I started from scratch, I had to do a lot of work on the SEO. Anyway, the old site was not very good...

So I installed Yoast SEO and I optimised each page for a keyword, not to mention optimising the metadata (title and description).

I also optimised the internal linking as well as the content of each page, the alternative text of the images etc.

But the SEO work doesn't stop there. It has to be constant, it's an in-depth job.

Not to mention that the Divi theme requires special attention in terms of SEO: read here how Make Divi SEO-Friendly.

Step 6: Optimising performance

Although WP Rocket was already present on the old site, I improved its settings. But most of the optimization work was done on the images...

During this redesign, I took the opportunity to import ultra light images. I didn't use the images from the old site.

Thus, I have gained considerable weight and optimised loading time. As you can see below :

Pingdom Tools performance report: before and after

Performance report of the former site :

  • Grade: D (69/100)
  • Page size: 12.4 MB
  • Loading time: 2.46 s.
  • Number of requests: 155

New site performance report :

  • Grade: B (85/100)
  • Page size: 2.1 MB
  • Loading time: 0.97 s.
  • Number of requests: 34

During this redesign with Divi, the site has really improved in performance. Google will quickly see this and the user will appreciate the improvement!

Step 7: Migration

Then came the fateful moment of migration. My local site was almost finished, so it was time to make the switch...

The idea is to import the new site in parallel with the old one, within the hosting, using FileZilla.

To perform this delicate step, I used Duplicator. A plugin that assists us in the migration. The problem is that I did this step 5 times, without it ever succeeding. The export always went well, the import too, but the host always sent me an error message.

I like to try to understand, but for the time being, I didn't understand where the error could come from... So I was left with two other solutions to do the migration: do it manually (which is not necessarily complicated but is rather boring) or use another plugin.

I tried the second solution, to use another plugin. At worst, if it didn't work, I would have switched to the other option...

So I did my migration with All In One WP Migration. Nothing to complain about, this solution allowed me to migrate easily, smoothly and on the first try!

Step 8: Redirects

Once my new site had taken the place of the old one, I had to forward the old URLs that no longer existed to the new site.

For this, I used two tools: Integrity and Redirection

First, before overwriting the old site, I took care to recover all the existing URLs. I didn't do this manually, of course, because WordPress creates a lot of URLs without you knowing it. So I used a little software for Mac called Integrity (there are lots of equivalents). The latter gave me the entire list of URLs for my old site.

In a second step, after migration, I installed the Redirection. Thanks to him, I was able to start forwarding old URLs to avoid broken links: this is bad for SEO. Some redirects were simple, for others I used the Regex option. This allows you to do batch redirects and saved me a lot of time.

Find out more tips and resources needed for your Divi.

Step 9: Set the details

Indeed, tying up loose ends and fine-tuning the work so that the site is close to "perfect" is certainly a double-edged step. Either you botch it up or you spend an inordinate amount of time on it!

I admit I haven't finished this step yet. And yes, I'm a bit stupid to present you this redesign before the site is "perfectly perfect"... But that's the game.

A website is never really finished. It's an ongoing process. Then when it doesn't suit us anymore, we start again!

For my part, I redesign my sites or those of my clients every 2 or 3 years. That's the maximum delay in the web!

At worst, you can push it to 4 years, but beyond that, you risk having a site that is a bit obsolete, either in terms of design or in terms of functionality.

In this last step, you should not forget to integrate the Google Analytics in the new site. Don't forget to revalidate the property with Google Search Console (depending on the method used, this may not be necessary).

You should also check the mobile and tablet versions (this is easier when the site is online) to see if there are any design or screen adaptation faults. And check that all forms and other features are correct.

Finally, it will be necessary to follow the data from the Google Search Console to see if there are any problems (404 errors or others)...

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

Duration of the redesign :  5 days.

Summary of this Divi redesign :

  1. <strong class="schema-how-to-step-name"><a href="#step1">Installer un WordPress en local avec Divi</a></strong>

    Using software such as MAMP for example. WordPress is available hereAs for Divi, you will need to obtain a license.

  2. <strong class="schema-how-to-step-name"><a href="#step2">Faire suivre le contenu</a></strong>

    Try to keep the same SLUGS (URL endings) so that you have less work to do later on.

  3. <strong class="schema-how-to-step-name"><a href="#step3">Reconstruire le design</a></strong>

    Build your pages from scratch or import a ready-made Divi design.

  4. <strong class="schema-how-to-step-name"><a href="#step4">Ajouter les fonctionnalités</a></strong>

    Install all necessary extensions and replace obsolete plugins with equivalent ones.

  5. <strong class="schema-how-to-step-name"><a href="#step5">Optimiser le SEO</a></strong>

    This step is not done in a few minutes, it is a thorough job. The idea is to get off to a good start.

  6. <strong class="schema-how-to-step-name"><a href="#step6">Optimiser la performance</a></strong>

    Google and Internet users like fast and efficient sites. Install and set up a cache plugin like WP Rocket.

  7. <strong class="schema-how-to-step-name"><a href="#step7">Migration : échanger l’ancien site avec le nouveau</a></strong>

    For an easy migration, use a plugin like Duplicator or All In One WP Migration.

  8. <strong class="schema-how-to-step-name"><a href="#step8">Penser aux redirections</a></strong>

    Check the links that have not been followed. Make redirects using the Redirection plugin.

  9. <strong class="schema-how-to-step-name"><a href="#step9">Peaufiner les détails et veiller au bon fonctionnement du site</a><br></strong>

    A step that should not be neglected. That's how you recognize a well-made website ;-)... This step can take time!

Interested in case studies? Read another case study on redesign: from BeTheme at Divi.

Refont ede site avec Divi
Du thème Hungry au thème Divi
Website redesign tips with Divi

1,713 words

7

You might like it too:

7 Commentaires

  1. Rdgs

    Bonjour,
    Je suis débutant dans le domaine. Je n’ai pas trop compris comment tout le processus se déroule je crois.

    Lorsqu’on veut faire une refonte on doit aussi acheter un nouveau nom de domaine etc ?
    Ou alors il s’agit de bien garder le squelette du site ( nom de dom, hebergement, url) , mais seulement changer sa peau ( le design, fonctionnalité etc).

    Au fait, merci pour ce blog il est juste génial lorsqu’on débute avec divi et tout le système de création de site web 🙂 !

  2. Lycia Diaz

    Hello Rdgs ! Merci à toi. Pour une refonte tu as diverses solutions. Dans le cas de cet article, j’ai refait un site de À à Z et je l’ai placé à la place de l’ancien. Dans d’autres cas tu peux simplement changer le thème WordPress et conserver l’existant, tu ne refais donc que le design. Et dans certains cas tu peux changer le nom de domaine mais peut-on appeler une refonte alors ? Je pense que serait plutôt une nouvelle création ou bien une migration… après ce ne sont que des termes 😉

  3. Audrey

    bonjour,
    tout d’abord je tiens à vous adresser un très chaleureux merci pour ce blog, je suis débutante et je dois dire que je trouve ici de précieuses ressources sans lesquelles je me sentirai un peu perdue !, et surtout qui me font de plus en plus apprécier Divi, (…alors que j’y étais plutôt allergique au début ;))
    Je dois faire une refonte d’un site qui utilise le thème Oshine avec le builder Tastu.
    La solution la simple me semble être effectivement de le faire en local (même si j’appréhende moi aussi la phase de migration… je ne l’ai faite qu’une fois, comme je disais je suis novice ^^, mais sur un WP vierge qui venait tout juste d’être crée.) J’aurai donc deux petites questions 🙂
    la première, existe il une solution pour que mon client puisse voir l’évolution de la refonte si elle se fait en local ? sinon comment faire la refonte en ligne mais sans venir interférer avec le site actuel (vu que je compte partir d’un autre thème et builder…)
    la deuxième : comment se passe la migration de local à en ligne par rapport aux données de l’ancien site (y a t il des précautions à prendre pour éviter des embûches ou cafouillages…)
    Merci d’avance pour vos réponses,
    et encore merci pour ce blog 🙂 !!!
    Audrey

  4. Lycia Diaz

    Bonjour Audrey et merci pour tes encouragements !
    Alors, je vais essayer de répondre précisément à tes questions :
    1/ Si tu choisis de développer le site en local et que tu veux que ton client puisse suivre l’évolution, il faudra choisir Local by Flywheel comme serveur local. Celui-ci te permet de partager une URL temporaire avec ton client.
    2/ Tu peux aussi le faire en ligne dans un sous-dossier de ton hébergement ou bien sur un sous-domaine (par exemple : http://www.mondomaine.com/mondossier ou http://www.monsousdomaine.mondomaine.com). Mais dans ces cas, tu devrais avoir la possibilité de créer une 2ème base de données (selon l’offre de l’hébergeur, tu pourras pas) et en plus, tu devras aussi faire une migration ensuite vers le vrai nom de domaine (ainsi que nettoyer tout le reste). Donc ce n’est pas trop une bonne solution.
    3/ Si tu développe de zéro en local, il faut que tu oublies les contenus de l’ancien site car ils seront écrasés après importation du nouveau site.
    4/ Si l’ancien site n’a pas beaucoup de contenu, reprendre tout de zéro est une bonne solution.

    Bref, on pourrait en discuter longtemps 😉 il n’y a pas de bonne ou mauvaise solution. C’est comme quand tu dois choisir un itinéraire pour aller d’un point A vers un point B en voiture 😉

    J’espère t’avoir aidé.

  5. audrey

    re
    merci pour ta réponse et tes pistes, cela me permet d’y voir plus clair en effet, et me conforte dans mon idée de le faire en local (le site a effectivement peu de contenu actuellement). Merci aussi pour le tuyau pour local by flywheel, je l’ai regardé de plus prêt et cet outil me paraît tres très interessant 😉
    encore merci et très bon we à toi 🙂

  6. Mimi

    Bonsoir Lycia

    En voulant faire la refonte d’un site avec le thème DIVI, j’ai télécharger un layaout toute ma page est en décalé, le texte, les images, les boutons ne s’affichent pas au bonne endroit. Comment remédier a ce problème.

  7. Lycia Diaz

    Salut Mimi tu dois avoir des problèmes de marges. Édite toutes les sections et mets les à zéro pour voir.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This