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

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

This was the project that I got for design then implementing to the Wordpress installation. The site were using Enfold theme which is built with Avia builder.

I am not enjoy use those builder 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 usually. Its easy and client can learn fast how to edit the contents or images.

Started the implementation with creating staging installation. Created 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 that 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 staging site and was really sure that creating staging without SSL configured is not too important or will giving an effect for the push live button.

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

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

If I open console from browser inspection tool, there's appears a warning that says mixed content. I was really sure this is because 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 in the first time, "mixed content on Elementor" seems best.

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

By go to the Elementor > tools > "Replace URL" tab, there are two input fields. First field for the old URL and new URL for the other one. This mean, replace the non secure protocol with the secure one.

Or simply, just write the non http your domain link with the https. Example, write "http://yourdomain.com" for the first field, then "https://yourdomain.com".

Just like that, and the warning is gone.

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

You can use some plugins that works the same just like from the elementor. Like:

Better Search Replace or SSL Insecure Content Fixer

Lastly,

If you are using Elementor, using other plugin will not works because the issue is happen in the Elementor widgets.

My case just one from 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 find you helps.


Try this Elementor page builder alternative

Zion Builder | Lifetime deal for unlimited websites
Fast WordPress Page Builder plugin. with features like Theme-Builder, Header and Footer Builder, WooCommerce Builder, Dynamic Data, Repeaters, Slider & Modal builder, Child Selectors, Mega-menu, Library of pre-designed templates & elements, animations, etc.
Fast Wordpress page builder (aff)

Let me know your thought or you find a mistake/outdated content for this post.

Get the latest update of tutorials, inspirations and useful resources for website design and development to your email box.