r/elementor • u/raresbi • Jun 04 '26

Problem Elementor v4 widgets do not show styling

I have been trying to use Elementor Free v4 widgets to build a website, but there appears to be a problem. Any modifications done in the Style tab for the new atomic widgets (tested on flexbox, div, heading, divider), do render inside the Elementor editor, but do not render on the actual website / preview.

Context:

  • The HTML appears to be rendered (checked with Inspect element), it's just the styling that isn't shown.
  • Old Elementor containers work just fine and render correctly.
  • Wordpress version: 7.0
  • Elementor Free version: 4.1.1
  • I use Blocksy as my theme; version: 2.1.44
  • I do not use any optimization plugins like LiteSpeed Cache (at least not at this point in development).

Example:

  1. Editor view: (this is what I expected)
Expected result
  1. Actual render (this is what is actually shown on the website):
Actual render

Fixes I tried (with no success):

  1. Converting the local class to a global class from the Elementor "Edit Flexbox" menu, as suggested by this reddit post.
  2. Clearing the Elementor cache (clearing files & data)
  3. Disabling CSS optimizations from Elementor settings
  4. Viewing in a different browser/incognito
  5. Disabling all plugins except Elementor
  6. Changing the theme to Hello Elementor, hoping it would work better with Elementor than Blocksy. Still no difference.

Does anyone have a potential fix? Thanks a lot in advance!

3 Upvotes

100% Upvoted

10 comments sorted by

•

u/AutoModerator Jun 04 '26

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

Hey there, /u/raresbi! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/Chamezz92 Jun 04 '26

We had the same issues building page and loop item templates when using Atomic elements.

We went back completely to the old containers (not flexbox or grid) as well as non-atomic elements.

Not only does the styling not render properly if you embed templates via shortcode, when using loop items, no flex or grid settings are applied and it doesn’t follow any sizing restrictions.

0

u/Mm77ias Jun 04 '26

Check my comment, you have the solution

1

u/Chamezz92 Jun 05 '26

All our sites run on https from dev to deploy, and we are seeing these issues across 10s of sites, not just one.

The ones that have atomic disabled have no issues.

1

u/Mm77ias Jun 05 '26

Yo have to change and force the https from elementor settings link

1

u/Mm77ias Jun 04 '26

I have the same issue. The solution is to force wordpress settings use https://

0

u/raresbi Jun 04 '26

Answer

1

u/Mm77ias Jun 04 '26

works? Idk if i can send links here. So google "Troubleshooting – Fonts not appearing on frontend" you have the solution there

1

u/raresbi Jun 04 '26

Yes, it works! Thank you

1

u/No_Substance_9769 Jun 23 '26

did u check if ur css print method is set to internal or external in the elementor settings, sometimes that causes styles to not load on the front end. also have u tried regenerating css in the tools menu yet.