Properly Test and Apply Elementor Page Builder Updates

If you have been using the Elementor Page Builder plugin for a while, you likely have experienced an update that “breaks” your website. However, let’s get one thing straight before we continue here. It’s YOUR fault! Yes, you are reading that correctly. It’s your fault.

You cannot simply press the update button. You cannot rely on others to give you the go-ahead with updates. You have to do some work.

You have to realize that Elementor developers cannot account for how every website is built, what infrastructure it runs on, and so on. Before we get to the meat and potatoes of this guide, here is a list of the common reasons why Elementor updates may be wreaking havoc on your WordPress website.

• You: Yep, you. Despite the pleadings of website professionals, the Elementor community, etc., users still press that update button before running a backup, testing in Staging, etc.
• 3rd-Party Elementor Add-ons: This is another thing that Elementor developers cannot account for 100%. Things will get missed whenever you involve multiple companies trying to coordinate the development, release dates, etc.
• Elementor Core: It is possible that Elementor developers made a mistake. It happens. Again, I’m not blindly defending them here, but they are under pressure to deliver NEW updates while also fixing issues from the past. In some respects, they can’t seem to “win” regarding the Elementor community.
• Misconfiguration: This encompasses many variables that could be their own list item here, like Elementor Experiments that aren’t ready for production, incorrect memory settings, using deprecated PHP versions, plugin conflicts, etc.

Okay, let’s explore how we can avoid issues with Elementor updates. I’ll give you the exact process I use for myself and my clients.

Staging Environment

Elementor has just released a NEW update! 🥳

If you’re like me, you get excited when you see this. What new features are there? Have my issues been fixed? Such mystery and excitement are wrapped up in something as trivial as a software update. So, what now?

First, you should clone a copy of your Live website and push it to your Staging environment.

Many people will say to run a backup of your Live website and then press the update button. THIS IS WRONG!

It’s wrong if you have any traffic to your website or are running an eCommerce website. Why? Simple. When you realize there are issues with your site (if you take the time to notice), your reputation may have already taken a hit, and you may have lost sales.

Doesn’t testing the updates in an environment the public can’t access makes sense? It does, and that is where Staging comes into play. If your hosting vendor does not provide staging, it’s likely time to move on to better hosting. It should be a standard feature, as it is with my preferred hosting vendor.

One of the many benefits of staging environments is that they often (depending on the vendor) have all the caching automatically disabled, so you can get a true look at how your website is faring.

Once your website has been pushed to Staging, test every aspect.

Test the Updates

You do not have to test every Post or Page. You only need to test the ones that are truly unique in their construction.

You’ll pull up your Live site on one monitor and your Staging site on another. If you don’t have multiple monitors, use your device’s built-in, multi-window functionality for a side-by-side comparison.

Below are just some of the checks you can make on your website after applying any update, whether it’s an update from Elementor, WordPress Core, a WordPress theme, or WordPress plugins.

Since every business and website is different, you’ll want to create a unique and comprehensive checklist for your business and website(s).

• Posts: Unless you have uniquely built posts (i.e., using multiple Single Post templates that are unique in terms of the components used to create them), audit just one of your Posts. Does the design look correct? Does it still function properly overall?
• Pages: It’s the same approach as Posts, but Pages have a much greater chance of being uniquely built. So, with Pages, you will want to audit one of each for the ones with a unique build. Do you have one type of Page that uses Elementor CTA widgets? Test it. Do you have a page that uses heavy animation? Test it. You get the idea.
• Menus: Do they look okay? Can people get where they need to go?
• Forms: Is the design intact? Do they still send successfully? Are they still adding people to your newsletter platform?
• Popups: Are they still firing when, where, and how they should? How’s the design?
• Store: Is your Shop page still beautiful? Is it functional in terms of Product filtering, sorting, and searching?
• Cart/Checkout: Run through the entire process of purchasing a Product on your website. Is the design still on point? Is the experience what you would expect? Are the orders getting placed?

If everything checks out, it’s safe to apply the updates.

Apply the Updates

This is when you want to take that FULL backup of your website.

Depending on the features of your particular Staging environment, you can push Staging to Live. However, I recommend just running the updates on your Live website.

There’s no need to move data between environments when you can press an update button. Follow the steps below to apply Elementor updates to your Live website.

1. Take a FULL backup.
2. Apply Elementor update(s).
3. Update the Elementor database if prompted.
4. WordPress Dashboard > Elementor Tools > General > Regenerate CSS & Data > Click ‘Regenerate Files & Data.’
5. If you have a caching plugin, clear it.
6. If you have server-level (hosting) caching, clear it.
7. If you have edge caching, clear it.
8. Clear your browser cache.
9. Give your site a quick look over.

Okay, that’s pretty much all there is to it. This process is not complex and is not a significant time investment. The time it takes to follow the steps outlined in this guide is nothing compared to how long it might take to recover a broken website.