Support » Plugin: Elementor Website Builder - More than Just a Page Builder » Elementor styling not being applied

  • Resolved deanes

    (@deanes)


    Wordpress v5.0.1
    Elementor v2.3.6
    I am baffled by an issue in Elementor; any styles I change to Elementor widgets are no longer being applied following an update to a page.

    I can create a new page in Elementor and Publish and all settings are applied normally but…if I make styling changes to elements and Update the page in Elementor then styling is removed.

    I see the styling applied and changing on the Elementor edit page but not when I preview the page.

    One Example is the Title widget.
    All the styles applied on the Content tab are applied normally but any changes to Color and Typography on the Styles tab are not applied.
    Or at least they are applied when I edit and Publish a New Page but if I come back and make changes then styling is removed. i.e. font reset to default, colors reset to default
    Similarly Background images applied to Sections are not being displayed, if they are changed they are not displayed.
    Any sections added to a previously Published and Updated page are affected in the same way. Styling is not applied.

    I have tried switching to theme 2018 and disabling all plugins and caching and removing all custom CSS but the issue remains.
    If make changes to custom CSS in the WordPress Customizr I do see these styles applied.

    I am seeing the issue now on two different sites, the symptoms appear to be identical.

    I am not seeing anything in Elementor-System Info-Debug

    Any suggestions would be gratefully received…

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi I am having the same issue. With content e.g. Titles and text fields not showing with the same colour and font formatting on the site as in the Elementor Editor.

    Any help would be greatly appreciated.

    • This reply was modified 5 years, 3 months ago by lapapo.
    Thread Starter deanes

    (@deanes)

    @lapapo. In my case certain style changes were not being seen as they were cached by the Cloudflare CDN service which is linked to the site via the hosting settings.
    First I thought it was a caching issue and had switched off all caching plug-ins and caching settings via the hosting control panel. The problems remained and then I discovered that the Cloudflare CDN was active. In Cloudflare there’s a switch for ‘Development Mode’. When that is on all my style changes are shown as expected.
    If you have de-activated all the caching options that you know of and the problem remains it would be worth contacting your hosting provider to check if there’s any caching going on that you are not aware of. Good luck.

    I have changed my settings to reflect what type of color I want for text and also, I tried to change the text color while doing a live edit – it would not change at all!
    Text looks grey and I want BLACK – it will not change.
    Any suggestions?

    I have the same problem – default font is not working

    Tried to turn off every catching – still doesnt work

    Still cannot solve the problem

    Have the same problem. text color not editable in post content widget.

    I have the same problem , worpress will not update text colours or element colours in Elementor latest version and latest wordpress?

    I’m also facing same issue pages seem fine but posts still affects this issue

    Have a look at the solutions described on the official Elementor page: https://docs.elementor.com/article/204-my-changes-do-not-appear-online

    For me, the problem was the browser cache. So I cleared the browser data and the styling appeared like magic. To do that, go to chrome://settings -> Advanced -> Clear browsing data (mainly the “cached images and files”).

    Do not clear the cookies, as you will be logged out of many websites and that’s frustrating.

    Clearing cache etc didnt work for me.

    I was pasting my text into the text box and this style was overiding the elementor style.

    So i had to re type everything into the text box and this then worked with elementor style options….

    Les

    (@theagencies)

    Why is this marked as resolved? It clearly isn’t, for many, including us.
    Within the editor, the page’s styling and formatting looks correct. However, when viewing the live page, it’s just a plain white page with plane black text only.
    No fonts, no icons and no layout.

    Our setup: Astra theme with all caching plugins disabled (including CloudFlare)

    It seems we may have a mix of issues here that all sound similar but are likely not and it’s usually best to start your own thread.

    That said, I think some might be having cache issues but not all. Cache busting can be a painful task even for the most experienced of developers. It really requires an understanding of all caching mechanisms that could be in play.

    For most of my sites, there are at least 4 separate cache layers that each need to be addressed.

    – browser cache – right-click and choose inspect to open the browser debugger and now you can right-click the refresh button to see the option “Empty Cache and Hard Reload” just be aware that with G’s Chrome browser, if you are logged into a G account synced with the browser, some caching is provided through the cloud services and clearing browser cache doesn’t always work until one logs out of G services completely.

    – WordPress caching – There is a whole host of plugins and caching options and each will need to be checked and cleared after making any edits. Sometimes WordPress helps the browser cache along by adding version strings to scripts and style sheets telling the browser to load the old version. There are many write ups on how to remove these url vars containing version numbers as a means to force flush.

    – Host level caching – Often there is tools like Cachewall within your hosts cpanel or dashboard and these can be some of the most aggressive and often overlooked too.

    – DNS/external 3rd party caching service like Cloudflare. In this case, visitors receive your website’s content from Cloudflare and not directly from your website. Cloudflare acts as the middle man, pulling content from your server when requests come in and keeping a cached layer to serve up must faster to your visitors. As the OP suggested, with Cloudflare you can enable the development mode which allows all caching to purge and halt for a period of 4 hours. This feature is even built into their WordPress plugin.

    Ok, as for some others here, I don’t think it is cache related. I think some of you may have some themes or plugins with stronger css declarations in which Elementor’s generated css becomes overridden. Learning how to use the browser’s inspect tool and read the css style properties is crucial and there are all kind of tutorials on the net.

    Especially in the case of seeing the Elementor styling apply to the preview window when editing but the front end doesn’t reflect this, inspecting the code will reveal if this is a caching issue (i.e. the recently changed Elementor styles are not present anywhere in the code at all) or if it’s a theme/plugin with stronger written css and you can see the Elementor styles crossed out.

    The reason for this is because the theme/plugin that is causing this has rules built for the structure that matches the code generated on the front end while in Elementor’s editor, the code structure is slightly different with different classes, wrapper divs etc and the underlying theme or other plugin’s css does not apply because the html structure doesn’t match their css declarations.

    This is where posting your own thread can help because we can focus on each individuals problem, review their example urls and inspect the code so we can better help determine cache vs css vs a bug/conflict.

    Another possibility for some of you is some other code malfunction is happening where it sounds like you are making edits within Elementor, seeing the changes in the preview, saving and then viewing on the front end and somehow losing the styling altogether (possibly even previous styling pre-edit) and when going back to the editor, all previously set styles have been reset as if the Element was just dragged into the editor. If this is the case, we really need to troubleshoot this on an individual basis. There could be missing files or some other conflict causing this where clearing cache and checking css code is not going to fix this problem.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Elementor styling not being applied’ is closed to new replies.