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
- Step 1: Install a WordPress locally
- Step 2: Content monitoring
- Step 3: Design
- Step 4: Functionality
- Step 5: SEO optimization
- Step 6: Optimizing performance
- Step 7: Migration
- Step 8: Redirecting
- Step 9: Adjust the details
From the Hungry theme to the Divi theme: before/after in video
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.
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:
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:
- Installing a WordPress locally with Divi
- Forward content
Try to keep the same SLUGS (URL endings) in order to have less work afterwards.
- Reconstructing the design
Build your pages from scratch or import a ready-made Divi design.
- Add features and functions
Install all necessary extensions and replace obsolete plugins with equivalents.
- 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.
- Optimize performance
Google and Internet users like fast and efficient sites. Install and configure a cache plugin like WP Rocket.
- Migration: exchange the old site with the new one
For an easy migration, use a plugin like Duplicator or All In One WP Migration.
- Think about redirections
Check for links that have not been followed. Make redirections using the Redirection plugin.
- 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.