In this article, I'm going to tell you about one of my latest projects: a WordPress redesign with Divi. What is a redesign? It's the radical change of a website in order to improve its design but also its functionality.
A redesign is a very delicate passage, it is in my opinion much more complex than a website creation because we must "do" with constraints that are imposed on us taking into account the existing content ...
Not to mention that most of the time, you run into "bones" that you didn't anticipate, it's a bit like an iceberg really!
I propose you to come back on a practical case for the redesign of a restaurant website.
Here is the program:
- Why do a redesign?
- How to choose your new theme?
- Is it necessary to prepare the ground locally?
- Take action!
- Improve the experience and fix bugs
- A WordPress redesign with Divi: the evidence to support it
- In conclusion
Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
Why do a redesign?
A redesign is far from being a whim because the work to be done is not often a piece of cake, I told you about it earlier...
So why consider a redesign?
Most of the time it is because the owner of the site wants to renew or improve the existing one to better meet the needs of its customers / Internet users.
First of all, we will have to see with the customer or the main user of the site what does not suit him with his current site.
It is necessary to make an inventory and to list the various points to be improved, that it is generally easy...
What will be more complicated is what the user will absolutely want to keep as is, that's sometimes more rock'n'roll...
Why? Because if you change the theme, the design will inevitably change, you will have to adapt it and maybe even have to do some custom development.
In short, once we have all the cards in hand, we can choose your new theme or even decide to create a custom one.
In my case, the theme used was BeTheme. Sorry for those who spent hours designing it, but this theme is a real pain in the ass.
However, it is in the top 3 of ThemeForest sales (at the time of writing), so it doesn't mean anything...
In fact, what's really wrong with this theme is its page builder called "Muffin Builder"... They must have forgotten the yeast or they burned those muffins, because they leave a bitter taste to all their users!
How to choose your new theme?
To choose your new theme, here are the criteria to take into account:
- My client needs a multilingual site => check the compatibility with WPML or Polylang.
- My client will have need a shop => check compatibility with WooCommerce
- My client will maintain its own site => do not choose a "gas factory" / also think about the theme updates (on ThemeForest, it's a bit more complicated for a novice)
- Is the theme compatible with the latest version of WordPress ?
- Is the theme popular or is it something out of the blue?
- Is the theme well coded, SEO-Friendly, easy to modify?
- Is the theme well noted?
Once you have taken inventory, you can choose your theme with peace of mind.
For my case study, guess which theme I chose? DIVI of course!
It was obvious that I could easily modify it to fit the old design, that I could add a shop and especially that I could improve the user experience (front and back sides)...
The client will also be able to easily edit the pages of his site thanks to its intuitive page builder.
Preparing the ground locally is obvious...
For my case study, I started by creating the various layouts on a locally installed WordPress site.
Obviously, the restaurant's website could not remain in maintenance while the design of each page was being developed.
So I created everything locally and in parallel. This allowed me to compare the visuals and get closer to the original design.
If you do your redesign directly, without going through the local mode, you may not remember what your site looked like before and you will not be able to make comparisons...
This step is therefore essential, do not launch into the redesign of your WordPress site without local testing first.
For my practical case I started with a blank WordPress but I could (should) also have made a local duplication of the site to be redesigned because it allows to discover some conflicts with existing plugins for example.
The environment is unique to each site and there are never any surprises.
The day I had to do the redesign, the site was under maintenance for one or two hours at most.
This step was very easy because I didn't have to do any migration. Since the Divi Builder allows import and export complete layoutsIt was a piece of cake!
The good surprise in my case is that the removal of BeTheme and its Muffin Builder has led to the total removal of all my content.
It worked well for me, but it can be a double-edged sword: imagine if you have hundreds of articles that you have created via the page builder and it deletes your texts and images when you deactivate it, that would be terrible!
That's why I NEVER use a page builder to build my articles, I only use it to design my pages.
In other cases, if you use page builders like Divi Builder or Visual Composer, when you decide to do without them, these plugins will leave stigmas in your content, you will then see shortcodes appearing all over the place, look at the following screenshot instead:
This is a case where the redesign can become complex...
Improve the experience and fix any bugs.
Once the site was switched from BeTheme to Divi, I took the opportunity to clean up a bit:
- I deleted the plugin Shareaholic and I replaced it with Monarch which is much cleaner.
- I deleted Contact Form 7 because Divi has a contact module in a native way.
- As an optin, I added Bloomwhich in my opinion is a great pluginIt is clean, easy to set up and pretty.
- I was finally able to activate WP Rocket (cache plugin), because with BeTheme, it was too shaky...
- I took the opportunity to remove the useless widgets in the footer.
- I was able to create an online store using WooCormerce. This plugin integrates perfectly well with Divi: no bugs, no visual issues and I really like this presentation in tabs "product description / customer reviews". On the other hand, I had to make some touching up the colour of the shop's buttons.
- I also added SecuPress Pro and removed iThemes Security.
Moral: the site has gained in performance, the management of Divi Builder modules is much simpler than with the Dinosaur Builder, or rather the Muffin Builder. Not to mention that the rendering on the visitor's side is much more harmonious.
A WordPress redesign with Divi: some evidence...
Well, blah blah blah is good, but you are curious and you want to see the result, right? That's normal, that's why I made some tests and before and after videos... Take a look instead:
=> Question Design...
To begin, let's just talk about the visual rendering. Here are two videos, one is a video about the homepage of the original site, so with the BeTheme theme. The other one was taken after redesign with the Divi theme…
Before... with BeTheme :
After... with Divi :
=> Question of performance...
Of course, a redesign must bring improvements, otherwise it would be a failed redesign. The following image proves that the site has gained in performance.
Before redesigning, with the BeTheme, I did a speed test on the site of Google Page Speed. The result was not pretty: 27/100 in mobile version and 34/100 in desktop version!
After the simple change of theme, a new test on PageSpeed allows us to see that we have slightly gained in performance: 35/100 in mobile and 46/100 in desktop. It's already better but still not top...
Then, the WP Rocket plugin was simply activated, a couple of options were checked and then a new performance test: 55/100 in mobile and 64/100 in desktop. It's much better...
We are still far from 100/100 but the user experience has already been improved and the site has almost doubled in performance/speed, the operation seems rather conclusive.
You will then have to refine all this and eventually add a plugin like Imagify to lighten the images of the site and gain a few more microseconds of page loading.
We know when we start a redesign but we can't really predict when it will be completed, because a site must constantly evolve...
There are always things to do, things to be done areas of improvementThis is essential for your site to grow along with your business.
In my practical case, I'm not yet satisfied with the result, there is still work to do, especially in the mobile/tablet version... But that's what's exciting: always improving, always evolving!
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!