In this article, I will present one of my last projects: a WordPress redesign with Divi. What is a redesign? This is the radical change of a website to improve its design but also its features.
A redesign is a very delicate passage, it is in my opinion much more complex than creating a website 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 run into "bones" that we hadn't planned, it's kind of like an iceberg in fact!
I suggest you go back to a practical case for the recasting of a restaurant website.
Here is the program:
- Why do a redesign?
- How to choose your new theme?
- Do we have to prepare the ground in local?
- Take action!
- Improve experience and fix bugs
- A WordPress redesign with Divi: the evidence to support
- In conclusion
Why do a redesign?
A recast is far from being a whim because the work to be done is not often cake, I told you a little earlier...
Then why consider a redesign?
Most of the time it is because the owner of the site has desire for renewal or improvement of existing to better meet the needs of its customers/users.
As a first step, you will have to see with the customer or the main user of the site what is not suitable for him with his current site.
We need to make an assessment and list the various points to be improvedThis is usually easy...
What's going to be more complicated is what the user is going to want to keep as it is, that's a few times more Rock
Why? Because If we change the theme, the design will change, it will have to be adapted and perhaps even have to make tailor-made development.
Anyway, once we have all the cards in hand, we're gonna be able to choose its new theme or even decide to create a tailor-made one.
In my practical case, the theme used was BeTheme. Sorry about those who spent hours designing it, but This theme is a real plague.
Yet, it is one of the top 3 sales of ThemeForest (at the time I write this article), which means nothing...
Actually, what's really wrong with this theme is his building page called "Muffin Builder"... They must have forgotten the yeast or they burned them down. muffins, because they leave a bitter taste to all their users !
Now discover the Divi Builder!
How to choose your new theme?
To choose its new theme, the following criteria should be taken into account:
- My client needs a multilingual site => verify compatibility with WPML or Polylang.
- My client will have need a shop => verify compatibility with WooCommerce
- My client maintain its site itself => do not choose a "gas plant" / think also about updates of themes (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 is it coming from behind the fagots?
- Is the theme well coded, SEO-Friendly, easy to modify?
- Is the theme well noted?
Once you have done your inventory, you can choose your theme calmly.
For my practical case, guess what theme I chose? DIVI Of course!
It was obvious that I could easily modify it so that it fits the old design, that I could add a shop and above all that I could improve the user experience (front and back side)...
The client will also be able to easily edit the pages of his website thanks to his intuitive page builder.
Preparing the ground locally is obvious...
For my practical case, I started by creating the various layouts on one WordPress site installed in local.
Of course, the restaurant site could not remain in maintenance during the design time of each page.
So I created everything locally and in parallel. This allowed me to compare visuals and get closer to the original design.
If you do your live redesign, without going through 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 in the redesign of your WordPress site without local testing.
For my practical case I left a WordPress blank but I could (must) also do a local duplication, of the site to be recast because it allows to discover some conflicts with existing plugins for example.
The environment is site-specific and we are never safe from surprises.
Take action!
The day I had to do the redesign, the site was under maintenance for up to one or two hours.
This was a very simple step because I didn't have to migrate. As the Divi Builder allows to import and export complete layoutsIt was a play!
The good surprise in my case is that the removal of BeTheme and its Muffin Builder trained total deletion of all my contents.
It worked out for me, but it can be double-edged: imagine if you have hundreds of articles that you created via the Builder page and that it deletes your texts and images when you disable it, it would be terrible!
That is why I never use a builder page to build my articles, I only use it for the design my pages.
In other cases, if you use building pages like the Divi Builder or Visual Composer, when you decide to do without it, these plugins leave stigmas in your contentthen you will see appear shortcodes all over, look at the following screenshot:
Voilà un cas où la refonte peut devenir complexe...
Also read: what to do with shortcodes after deactivated the Divi Builder?
Améliorer l'expérience et corriger les éventuels bugs.
Once the site had passed from BeTheme to Divi, j'en ai profité pour faire un peu de ménage :
- J'ai supprimé le plugin Shareaholic et je l'ai remplacé par Monarch qui est bien plus "propre".
- J'ai supprimé Contact Form 7 because Divi holds a contact module natively.
- Comme optin, j'ai ajouté Bloom, which I think is a great pluginIt is clean, easy to set and pretty.
- J'ai enfin pu activer WP Rocket (caching) because with BeTheme, c'était trop bancal...
- J'en ai profité pour supprimer les widgets inutiles en pied de page.
- J'ai pu créer une boutique en ligne à l'aide de WooCormerce. Ce plugin s'intègre parfaitement bien dans Divi : pas de bugs, pas de soucis de visuels et j'aime beaucoup cette présentation en onglets "description du produit / avis clients". Par contre, il m'a fallu faire quelques retouches in the color of the buttons of the shop.
- J'ai également ajouté SecuPress Pro and deleted iThemes Security.
Morality: the site has gained in performance, management of Divi Builder modules est bien plus simple qu'avec le Dinosaur Builder, uh, sorry on Muffin Builder. Not to mention that the visitor-side rendering is much more harmonious.
Une refonte WordPress avec Divi : quelques preuves à l'appui...
Bon, le bla-bla c'est bien, mais en fait vous êtes curieux et vous avez envie de voir le résultat, n'est-ce pas ? C'est normal, c'est pour cette raison que j'ai fait des tests et des vidéos avant-après... Regardez plutôt :
=> Question Design...
Pour commencer, parlons simplement du rendu visuel. Voici deux vidéos, l'une est une vidéo concernant la page d'accueil du site d'origine, donc avec le thème BeTheme. L'autre a été prise après refonte avec the theme Divi...
Avant... avec BeTheme :
Après... avec Divi :
=> Question performance...
Of course, one recast needs to make improvements, sinon ce serait une refonte ratée. L'image suivante prouve bien que le site a gagné en performance.
To be read absolutely: how to improve the performance of your Divi sites?
Avant refonte, avec le BeTheme, j'ai fait un test de rapidité sur le site de Google Page Speed. Le résultat n'était pas joli-joli : 27/100 mobile version and 34/100 desktop version !
Après le simple changement de thème, un nouveau test sur PageSpeed permet de voir qu'on a légèrement gagné en performance : 35/100 mobile and 46/100 desktop. C'est déjà mieux mais pas encore top...
Then the plugin WP Rocket was simply activated, two or three options were checked and then new performance test: 55/100 mobile and 64/100 desktop. C'est beaucoup mieux...
On est encore loin du 100/100 mais l'expérience utilisateur a déjà été améliorée et le site a presque doublé en performance/vitesse, l'opération parait plutôt concluante.
Then you will have to fine-tune all this and eventually add a plugin like Imagify to lighten the images of the site and gain a few more micro-seconds of page loading.
In conclusion
On sait quand on commence une refonte mais on ne peut pas vraiment prévoir quand celle-ci sera achevée, en effet, un site doit constamment évoluer...
There are always things to do. improvements, cela est indispensable pour que votre site grandisse en même temps que l'évolution de votre business.
Dans mon cas pratique, je ne suis pas encore satisfaite du résultat, il y a encore du boulot, surtout en version mobile/tablette... Mais c'est ça qui est excitant : toujours s'améliorer, toujours évoluer !
Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!
Bonjour,
Suite à la lecture de votre newletter, j’ai fais une visite complète de votre nouveau blog et je confirme que c’est une bonne nouvelle d’avoir un blog en français qui traite du thème Divi.
J’hésite depuis longtemps à acheter ce thème pour plusieurs raisons :
– ses performances (rapidité, les titres souvent en h2 au lieu d’avoir un h1, la compatibilité mobil etc…)
– la construction de la page d’accueil
Après avoir lu vos articles, je suis de nouveau tenté par ce thème mais, je ne suis pas certaine de ne pas faire une erreur.
Actuellement, j’utilise un thème gratuit/premium (Sydney) que j’ai bidouillé à ma façon.
Ce thème donne de très bons résultats en l’état mais, ne me convient pas vraiment.
Je présente des recettes de cuisine avec une mise en page particulière (colonne bootstrap) et je ne voudrais pas perdre la mise en page de mes articles en changeant de thème.
J’aimerais présenter mes dernières recette en page d’accueil mais, est-ce possible avec Divi ?
Vous voyez que je me pose énormément de questions avant de franchir le pas. J’ai passé trop d’heures à peaufiner mon blog que je ne voudrais pas tout casser.
Cordialement
Bonjour Edith et bonne année ! Lorsque on change de thème, il y a de grandes chances d’avoir des surprises… souvent mauvaises… le mieux serait de tester la refonte en local. Il faudrait dupliquer votre blog actuel avec le plugin Duplicator et de le migrer en local sur MAMP par exemple. Cela pourrait faire l’objet d’un prochain article bien que vous pourriez trouver cela facilement sur le web. Ma question est : vos articles de recettes sont-ils fait avec un constructeur de page comme Elementor ou Visual Composer ? Si c’est le cas, vous devrez soit conserver ce constructeur sous Divi, soit tout refondre. Cela prendra du temps. Il faut évaluer le temps-risques-bénéfices. Pour les H2, cela fait longtemps que Elegant Thème a corrigé cela. Pour la performance, ça dépend de beaucoup de facteurs. Comme je l’ai expliqué dans cet article, je ne regrette pas d’avoir changé BeTheme pour Divi mais il y a encore des optimisations à faire… Pour conclure, je dirais que vous pouvez tester mais en local d’abord, histoire de ne pas être déçue… Bonne continuation !