From BeTheme to Divi: practical case of a WordPress redesign with Divi

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 and functionality.

A redesign is a very delicate passage, it is in my opinion much more complex than creating a website because we must "do" with constraints that are imposed on us taking into account the content already existing...

Not to mention that most of the time, you run into "bones" that you didn't expect, it's kind of like an iceberg in fact!

I suggest you go back to a practical case for recasting 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 behind it
• 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 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 improvedIt's usually easy...

What's going to be more complicated is what the user is going to want to keep in the state, that's a few times as much Rocks...

Why? Because If we change the theme, the design will change, we will have to adapt it and perhaps even have to make tailor-made development.

Anyway, once we have all the cards in hand, we'll 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...

In fact, 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 factory" / 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 into 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.

Discover Divi now!

Preparing the ground in local, it's 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 in local and 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 make a local duplication, from the site to be recast as this 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 very simple because I didn't have to migrate. As the Divi Builder allows 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 well but it can be double-edged: imagine if you have hundreds of articles that you created via the build page and that it deletes your texts and images when you disable it, it would be terrible!

This is why I don't use page builder to build my articles, I use only 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 overInstead, look at the following screenshot:

Here's a case where the redesign can become complex...

Also read: what to do with shortcodes after deactivated the Divi Builder?

Improve experience and correct any bugs.

Once the site had passed from BeTheme to DiviI took the opportunity to clean up a little:

• I deleted the plugin Shareaholic and I replaced it with Monarch which is much "cleaner".
• I deleted Contact Form 7 because Divi holds a contact module natively.
• As an optin, I added Bloom, which I think is a great pluginIt is clean, easy to set and pretty.
• I was finally able to activate WP Rocket (caching) because with BeThemeIt was too dreadful...
• I took the opportunity to remove unnecessary widgets at the footer.
• I was able to create an online shop using WooCormerce. This plugin fits perfectly well in Divi: no bugs, no visual worries and I like this presentation in tabs "product description / customer reviews". However, some retouches in the color of the buttons of the shop.
• I also added SecuPress Pro and deleted iThemes Security.

Morality: the site has gained in performance, management of Divi Builder modules is much simpler than with the Dinosaur Builder, uh, sorry on Muffin Builder. Not to mention that the visitor-side rendering is much more harmonious.

A WordPress redesign with Divi: some evidence to support...

Well, the bla-bla is good, but in fact you're curious and you want to see the result, right? It's normal, that's why I did tests and videos before and after... Look at this.

=> Design question...

For starters, let's just talk about visual rendering. Here are two videos, moon is a video about the home page of the original site, so with the theme BeTheme. The other was taken after redesign with the theme Divi…

Before... with BeTheme:

After... with Divi:

=> Performance question...

Of course, one recast needs to make improvementsOtherwise it would be a failed recast. The following image proves that the site has gained in performance.

To be read absolutely: how to improve the performance of your Divi sites?

Before redesign, with the BeTheme, I did a speed test on the site of Google Page Speed. The result wasn't pretty-joli: 27/100 mobile version and 34/100 desktop version !

After the simple change of theme, a new test on PageSpeed allows us to see that we gained slightly in performance: 35/100 mobile and 46/100 desktop. It's already better but not yet 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. It's much better...

We are still far from the 100/100 but the user experience has already been improved and the site has almost doubled in performance/speed, the operation seems rather conclusive.

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

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. improvements, this is essential for your site to grow at the same time as the evolution of your business.

In my practical case, I am not yet satisfied with the result, there is still work, especially in mobile/tablet version... But this is what is exciting: always improve, always evolve!

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