From Hungry to Divi: a practical case of website redesign

The Hungry theme is a WordPress theme sold on ThemeForest. He specialises in theme « restaurant site ». In this article, I propose my feedback from a revamped Divi. I will explain the various steps that have been taken to go from Hungry to Divi.

From Hungry theme to Divi theme: before/after video

Step 1: Install a local WordPress

For this project, I used MAMP. I've had too many troubles with other solutions that I haven't taken the risk in a long time...

I made the choice of 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 useful for its operation (such as dishes, menus etc.). I never wanted to keep them.

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

I found equivalents for plugins that were no longer maintained by their developer. For example, I exchanged Delightful Download (a plugin that had no longer been updated for more than two years) by Download Monitor. Even if there was no problem (conflicts) with the old, when a recast is made, as much as do it "fully".

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

Step 2: Content Tracking

Little by little, I rebuilt the existing site on my local version. Thus, the site in production (old site) was always 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 see the map and must be able to book online!

In short, I followed most of the pages and I rebuilt the main menu (the structure of the site).

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

Step 3: Design

Besides having transcribed some of the content on the local site, we had to tackle design!

The advantage is that I had "white card". That's pretty cool!

So I built my "block by block" pages. I didn't use any ready-made pageseven if it would have been an easy solution.

I used the colors of the client's graphic chart and I enhanced my sections with the help of Dividers Divi.

Step 4: Features

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

Being supporter of every effort, I still used tools that facilitated this redesign.

For example, for the booking request form (this is not a system itself, only a form) built with Caldera Forms, I used the tool Export-Import plugin.

So I didn't have to rebuild the form fields. It was a child's game to export the settings from the old site and reimport them into the new one!

Step 5: SEO optimization

Since I'm back from scratch, I had to make a substantive work on SEO. Anyway, that of the old site wasn't top...

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

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

But the job SEO optimisation Don't stop there. It must be constant, it is a work of substance.

Without forgetting that the theme Divi requires special attention in terms of SEO: read here how make Divi SEO-Friendly.

Step 6: Performance optimization

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

During this redesign, I took the opportunity to import images ultra light. I did not recover the images used in the old site.

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

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

Step 7: Migration

Arrive the fateful moment of migration. My local site was almost complete, so it was necessary exchange…

The idea being to import the new site in parallel from the old, within the accommodation, using FileZilla.

To complete this delicate step, I used Duplicator. A plugin that assists us in migration. The concern is that I did this step 5 times, without it ever succeeding. The export was always going well, the import also but the host systematically sent a message of error.

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

I tried the second solution, that of using another plugin. At worst, if it didn't work, I'd have moved on to the other option...

So I made my migration with All In One WP Migration. Nothing to say, this solution has made it possible to migrate easily, without encumbering and at first glance!

Step 8: Redirections

Once my new site had taken the place of the oldAs a first step, the old URLs that no longer existed in the new site had to be followed.

For this, I used two tools: Integrity and Redirection

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

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

Discover more tips and resources required for your Divi projects.

Step 9: Set the Details

Indeed, adjust the last little details and refine the work so that the site is close to "perfect" is certainly a double-edged step. Either we screw her up or we spend some crazy time there!

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

A site is never really finished. It is a substantive and continuous work. Then when it doesn't suit us, well, we'll do it again!

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

At worst, you can grow up to 4 years but beyond that, you may have a somewhat obsolete site, either in terms of design or in terms of functionality.

In this last stage, we must not forget d Google Analytics in the new site. Not to mention revalidating the property with the Google Search Console (depending on the method used, this may not be necessary).

You will also have to check mobile and tablet versions (it's easier when the site is online) to see if there is any defects in the design or adaptation to screens. And check if all forms and other features are correct.

Finally, the data from the Google Search Console to see if there is no problem (errors 404 or others)...

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

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