From Hungry to Divi: case study of a website redesign

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

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 :

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!

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