In this article, I will explain one of my latest projects: a WordPress redesign with Divi. What is a redesign? It is the radical change of a website in order to improve its design but also its functionalities.
A redesign is a very delicate step, it is in my opinion much more complex than a website creation because we have to "do" with constraints that are imposed on us taking into account the content already existing...
Not to mention that most of the time, we come across "bones" that we didn't expect, it's a bit like an iceberg in fact!
I then propose that you come back to a practical case study for the redesign of a restaurant website.
Here is the program:
- Why 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: supporting evidence
- In conclusion
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
A redesign is far from being a whim because the work to be done is not often a piece of cake, I told you a little 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 system to better meet the needs of its customers / Internet users.
First, it will be necessary to discuss with the client or main user of the site what does not suit him/her with his/her current site.
It is necessary to make an inventory and list the various points to be improved, that is generally easy...
What will be more complicated is what the user will absolutely want to keep as it is, that's sometimes more Rock'n'roll....
Why? Why? Because if we change the theme, the design will inevitably change, we will have to adapt it and maybe even have to do custom development.
Anyway, once we have all the cards in hand, we'll be able to choose your new theme or even decide to create a tailor-made one.
In my practical case, the theme used was BeTheme. Sorry for those who spent hours designing it, but this theme is a real pain.
However, it is one of the top 3 sales of ThemeForest (at the time of writing), which means that it doesn't mean anything...
In fact, what really doesn't fit into this theme is its builder page called "Muffin Builder"... They must have forgotten the yeast or they made them burn these 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 consider:
- My client needs a multilingual website => Check compatibility with WPML or Polylang.
- My client will have need for a shop => check compatibility with WooCommerce
- My client will maintain its site itself => do not choose a "gas plant" / also think about theme updates (on ThemeForest, it's a little more complicated for a novice)
- Is the theme compatible with the latest version of WordPress ?
- Is the theme popular or does it come from behind the bundles?
- Is the theme well coded, SEO-Friendly, easy to modify?
- Is the theme well noted?
Once you have done your inventory, you will be able to choose your theme with confidence.
For my practical case, guess which theme I chose? DIVI of course!
It was obvious that I could easily modify it to adapt it to the old design, that I could add a shop and especially that I could improve the user experience (Front and Back side)...
The customer will also be able to easily edit the pages of his site thanks to his intuitive page builder.
Preparing the ground locally is a matter of course...
For my practical case, I started by creating the various layouts on a locally installed WordPress site.
Obviously, the restaurant's website could not remain in maintenance during the design development time of each page.
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 live, 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 start redesigning your WordPress site without local testing beforehand.
For my practical case I started from 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 in maintenance for one or two hours at most.
This step was very simple because I didn't have to migrate. Since the Divi Builder allows import and export complete layoutsIt was child's play!
The good surprise in my case is that the deletion of BeTheme and its Muffin Builder led to the total deletion 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 created via the builder page and it deletes your texts and images when you turn it off, it would be terrible!
That's why I NEVER use a page builder to build my articles, I only use it for the design of my pages.
In other cases, if you use builders pages 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 appear everywhere, look at the following screenshot instead:
This is a case where redesign can become complex...
Also to be read: what to do with shortcodes after disabling the Divi Builder?
Improve the experience and fix any bugs.
Once the site had moved from BeTheme to Divi, I took the opportunity to do some cleaning:
- 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 opt-in, 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 wobbly...
- I took the opportunity to remove unnecessary widgets at the bottom of the page.
- I was able to create an online store using WooCormerce. This plugin integrates perfectly into Divi: no bugs, no visual worries and I really like this tabbed presentation "product description / customer reviews". However, I had to do a few touch-ups to the color of the shop buttons.
- I also added SecuPress Pro and deleted iThemes Security.
Morality: the site has improved in performance, the management of the Divi Builder modules is much simpler than with the Dinosaur Builder, uh, sorry the Muffin Builder. Not to mention that the visitor experience is much more harmonious.
A WordPress redesign with Divi: some evidence to support it....
Well, but you're actually curious and you want to see the result, aren't you? That's normal, that's why I did some tests and before and after videos... Check it out:
=> About Design...
To begin with, let's just talk about visual rendering. Here are two videos, one is a video about the home page of the original site, so with the theme BeTheme. The other was taken after redesigning with the Divi theme…
Before.... with BeTheme:
After... with Divi:
=> About Performance...
Of course, a redesign must make improvements, otherwise it would be a failed redesign. The following image shows that the site has improved in performance.
To be read absolutely: how to improve the performance of your Divi sites?
Before redesigning, with the BeTheme, I did a speed test on the website of Google Page Speed. The result was not pretty: 27/100 in the mobile version and 34/100 in the desktop version!
After the simple change of theme, a new test on PageSpeed shows that we have slightly improved our performance: 35/100 in mobile and 46/100 in desktop. It's already better but not yet great....
Then, the WP Rocket plugin was simply activated, two or three options were checked and then new performance test: 55/100 on mobile and 64/100 on 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.
We will then have to refine all this and eventually add a plugin like Imagify to lighten the images of the site and save a few more micro-seconds of page loading.
We know when we start a redesign but we can't really predict when it will be completed, indeed, a site must constantly evolve...
There are always things to do, things to do, things to do. improvements to be madeThis is essential if your site is to grow with the evolution of your business.
In my practical case, I'm not yet satisfied with the result, there's 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 ElegantThemes' blog full of ideas and tutorials!