What you see in the Editor is DIFFERENT from what visitors see on screen

Hello. Believe me when I tell you that BEFORE coming here, I tried practically everything.

From searching for solutions online, to reading the first 10 query pages on this same Support page.

I am telling you this because I have seen that, on said site (Support), they are giving identical “solutions” to problems similar to the one I am going to describe below. But, at least in the 5 (five) pages that I read, they NEVER finished solving it!

That is to say: 1) A user asks you – 2) You give them (the SAME indications) but… 3) Most of them DO NOT consult again and/or tell them that the problem has been solved and, consequently, they close the ticket.

For example. They tell everyone practically the same thing that I will describe below: 1) Regenerate the CSS + Clear the cache (Something I have already tried and it DOES NOT work) – 2) Deactivate the plugins and then try one by one. Which in my case does NOT make sense because, in addition to the fact that I have 20 plugins! Until the last update of Elementor (which I activated a few days ago) EVERYTHING worked +/- correctly! (Except a “problem” that I have since I installed Elementor – 3) Change the way of injecting CSS (Which I already tried and NOTHING) – 4) Disable the experiments (They are by default) – 5) Change the template (I am using Hello Elementor , heh) – Etc.

With that said, I’m going to describe the problems below. And frankly, I hope that you take into account what I just mentioned to you.

1st. Problem:
This happens since I installed Hello Elementor and started to redesign the site. And it is that, as you can see in the following screenshots;
1) Publisher
https://ibb.co/hdPSNtR

2) Online site (In an incognito window)
https://ibb.co/27MZg1V

As you can see, the “weight” of the fonts seems to have changed?

However, as if this were not enough, you should know that these fonts are: Open Sans, Normal (400). And as you can see, in the Editor they look as they should but, the Users (which is what matters)… They see EVERYTHING in bold!

This would not be a problem except that, in this way, you can NOT see the highlighted texts with – precisely – bold, heh.
(Note: In the example, the phrase…”How to get your job (NOT another)”…)

3) In case there are any doubts, here is another example, but in a “normal” window in which I have installed an extension that shows precisely the types and weights of the font that I am using (400 when it is normal and 700 when it is bold).

https://ibb.co/2Fwk6Ws

So, if you realize, with this problem, it is impossible for me to highlight ANYTHING because, EVERYTHING looks “highlighted”, heh.

2nd. issue:
This one (unlike the previous one), just happened to me by chance (or not) since I updated Elementor to its latest version (The 3.6.6).

And, although it is similar to the previous one, in this case, instead of highlighting “hidden”.

Specifically as you can see in the following screenshot…

https://ibb.co/hyrJptq

Since (as I already mentioned) I have Hello Elementor installed, I installed Elementor Header & Footer to build both my header and footer.

And in the header (as seen in the screenshot), I installed a beautiful search engine that, as you can see, in the Editor, it looks perfect.

However, when we go to the site itself, it “looks” like this…

https://ibb.co/x7Jbvwf

That is, the magnifying glass icon… DISAPPEARED!

However, if you look at the screenshot below…

https://ibb.co/n6RmmpN

According to the Google Chrome Inspector, the element in question (<button class=”hfe-search-submit” type=”submit”> <i class=”fas fa-search” aria-hidden=”true”></i> </button>), not only that it is But – in addition – it has the styles that I created for it.
That is…

.elementor-12873 .elementor-element.elementor-element-6e0ba68 .hfe-search-form__container .hfe-search-submit {
    width: 40px;
}

Plus…

.elementor-12873 .elementor-element.elementor-element-6e0ba68 button.hfe-search-submit {
    color: #fff;
}
And (just in case)...
.elementor-12873 .elementor-element.elementor-element-6e0ba68 .hfe-search-submit {
    min-width: 50px;
    background-color: #818a91;
    font-size: 20px;

Finally, going to my site but in a “normal” window (to be able to use the Chrome extension), you can see the following…

https://ibb.co/6XNFLXh

That is, the same thing you can see with the Chrome inspector (That magnifying glass in question has: Size: 20px; Line Height: 30px; Color: #ffffff)

Excuse the length of this text. But for me, it is imperative that my texts can have parts that stand out.

And – as for the magnifying glass – it is also extremely important because, if you realize, I have NO menu and the search engine is the ONLY way I plan to offer my readers to search for what they want (It’s an SEO “trick”) which is beside the point but, which is essential in my project).

Finally…
a) I even thought about purchasing the PRO version of Elementor later. But I see that there are even queries of this type by users who already have it.

b) Regarding the Support of Elementor Header & Footer, I sent you a similar query but, focused only on the 2nd. problem (the magnifying glass of the search engine) but, until now they did NOT answer me.

c) Regarding the Hello Elementor Support, I didn’t even try it because I read the 1st ones. 5 pages and I noticed that… There are queries that have NOT been answered for more than 1 year!

I await your comments.

From already thank you very much.

Greetings.

The page I need help with: [log in to see the link]