From Hungry to Divi: practical case of a website redesign

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

The Hungry theme is a WordPress theme sold on ThemeForest. He is specialized in the thematic "restaurant site" theme. In this article, I offer you my feedback on a Divi redesign. I will explain the various steps taken to move from Hungry to Divi.

From the Hungry theme to the Divi theme: before/after in video

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

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

Step 1: Install a WordPress locally

For this project, I used MAMP. I have experienced far too many setbacks with other solutions that I haven't taken the risk for a long time...

I made the choice to start from scratch. The contents of the old site were poor, there was almost nothing to keep. In addition, the Hungry theme had created many Custom Post Types useful for its operation (such as dishes, menus etc.). I had no desire to keep them.

So I created a new WordPress site, I created installed the Divi theme as well as 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 switched Delightful Download (a plugin that had not been updated for more than two years) by Download Monitor. Even if there was no problem (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: Content monitoring

Little by little, I rebuilt the existing site on my local version. Thus, the site in production (the old site) was still accessible on the Internet.

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

It is not a "common" blog or showcase site: a restaurant site is necessary for the smooth running of daily activity. Internet users want to consult the map and must be able to book online!

In short, I followed 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. So I would save redirections later on!

Step 3: Design

In addition to having transcribed some of the content existing on the local site, it was necessary 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 didn't use any ready-made layoutsalthough this would have been an easy solution.

I used the colors of the client's graphic charter and I decorated my sections with the help of the Dividends of Divi.

Step 4: Functionality

In terms of functionalities, nothing complicated: no online shop, no booking system, no newsletter, no blog. The work was therefore lighter!

Being a supporter of the slightest effort, I still used tools that made this redesign easier for me.

For example, for the reservation request form (it is not a system strictly speaking, only a form) built with Caldera FormsI used the plugin's Export-Import tool.

So, I didn't have to rebuild the form fields. It was child's play to export the settings from the old site and re-import them into the new one!

Step 5: SEO optimization

Since I started from scratch, I had to do some in-depth work on SEO. Anyway, the one on the old site was not great....

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

I also optimized the internal mesh and the content of each page, the alternative text of the images etc.

But the SEO optimization work doesn't stop there. It must be constant, it is a fundamental work.

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

Step 6: Optimizing performance

Although WP Rocket was already present on the old site, I have 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 did not retrieve the images used in the old site.

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

Pingdom Tools Performance Report: Before/After

Performance report of the old site:

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

Performance report on the new site:

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

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

Step 7: Migration

The fateful moment of migration comes. My local site was almost finished, so it was necessary to proceed with the exchange...

The idea being 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 have done this step 5 times, without it ever succeeding. The export was always going well, the import too, but the host always sent me an error message.

I like to try to understand, but for the moment, I didn't understand where the error came from... So I had two other solutions to do the migration: do it manually (which is not necessarily complicated but which is rather boring) or use another plugin.

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

So I made my migration with All In One WP Migration. Nothing to say, this solution allowed me to migrate easily, without any problems and at first!

Step 8: Redirecting

Once my new site had replaced the old one, the first step was to forward the old URLs that were no longer existing in the new site.

To do 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 many URLs without you knowing it. So I used a little software for Mac called Integrity (there are lots of equivalents). He gave me the full list of URLs for my old site.

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

Discover other tips and tricks resources needed for your Divi projects.

Step 9: Adjust the details

Indeed, fine-tuning the final details and fine-tuning the work so that the site is close to "perfect" is certainly a double-edged sword. Either we screw it up or we spend a lot of time there!

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

A site is never really finished. It is a thorough and continuous work. Then when it doesn't suit us anymore, well, let's do it again!

For my part, I redo my sites or those of my clients every 2 or 3 years. This is the maximum delay in the web!

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

In this last step, it is important not to forget to integrate the code of Google Analytics in the new site. Not to mention revalidating the property with Google Search Console (depending on the method used, this may not be necessary).

It will also be necessary to check the mobile versions and tablets (it is easier when the site is online) to see if there are any design or screen adaptation defects. And check if all forms and other features are correct.

Finally, it will be necessary to follow the data of the Google Search Console to see if there is no problem (404 errors or others)...

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

Duration of the redesign:  5 days.

Summary of this Divi redesign:

  1. Installing a WordPress locally with Divi

    By using software such as MAMP for example. WordPress is available hereas for Divi, you will need to get a license.

  2. Forward content

    Try to keep the same SLUGS (URL endings) in order to have less work afterwards.

  3. Reconstructing the design

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

  4. Add features and functions

    Install all necessary extensions and replace obsolete plugins with equivalents.

  5. Optimize SEO

    This step is not done in a few minutes, it is a fundamental work. The idea is to start on a good foundation.

  6. Optimize performance

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

  7. Migration: exchange the old site with the new one

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

  8. Think about redirections

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

  9. Fine-tuning the details and ensuring the smooth operation of the site

    A step not to be overlooked. This is how you recognize a well done site ;-)... This step can take time!

Are you interested in practical cases? Read another practical case study of redesign: from BeTheme to Divi.

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

1,713 words

7

You should like it too:

Vidéo mise en avant dans les articles Divi avec ACF

Video highlighted in Divi articles with ACF

This step-by-step tutorial shows you how to create a new custom field in your Divi Articles to add highlighted YouTube videos. You can do this easily with the Theme Builder and ACF.

5 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 🙂

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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