Elementor Mixed Content Not Secure After Staging

Accessing the final developed site on Microsoft Edge is HTTPS but it is not secure. How is that happen?

That made me confuse when the first time facing this issue on the Microsoft Edge address bar.

This was the project that I got for design and then implemented into the WordPress installation. The site was using Enfold theme which is built with Avia builder.

I do not enjoy using those builders actually. Because I have to imagine the implementation in the classic editor about what I am doing with the builder. I decided to use Elementor builder just like usual. It's easy and clients can learn fast how to edit the contents or images.

Started the implementation by creating a staging installation. Created a subdomain from cPanel, turned off the search engine indexing and added robots.txt to disable the robot crawling the site.

I know that indexing was off when creating the staging installation from cPanel Softacolous, but as you can see the small note below the check box says "It is up to search engines to honor this request.". Yeah, this is method is not strong enough to block the robot crawler. Blocking using robots.txt is best in my opinion.

This is what I usually do by creating a staging site and was really sure that creating staging without SSL configured is not too important or will give an effect for the push live button.

But, after the development is done and trying to push the site to a live version the issue came up.

Almost all the media content has HTTP links not with HTTPS. No lock icon but a warning icon on the address bar.

If I open the console from the browser inspection tool, there appears a warning that says mixed content. I was really sure this is because of the staging process at that time.

Finding the solution for mixed content on Elementor

I have to be specific to find the on the internet the first time, "mixed content on Elementor" seems best.

Hit the search and select some top listed then yeah, I found it and bit surprised because it is really simple to fix this.

By going to the Elementor > tools > "Replace URL" tab, there are two input fields. The first field is for the old URL and the new URL is for the other one. This means, replacing the non-secure protocol with the secure one.

Or simply, just write the non-HTTP domain link with the HTTPS. For example, write "http://yourdomain.com" for the first field, then "https://yourdomain.com".

Just like that, the warning is gone.

There are some other solutions to solve this issue. For example, if you are not using Elementor for the site builder.

You can use some plugins that work the same just like from the Elementor. Like:

Better Search Replace or SSL Insecure Content Fixer

Lastly,

If you are using Elementor, using other plugins will not work because the issue is happening in the Elementor widgets.

My case is just one of the causes, there are several causes that can make this warning appear. You need to do a deep inspection to identify the cause. Hope this finds you helps.