I’ve noticed that Elementor usually will have a FOUC (Flash of Unstyled Content) when building a new site – I ended up going an overly complicated route of pulling in the post id and printing out that pages specific css in the header.
But the answer is a lot simpler than I thought.
Simply go into Elementor Settings » Advanced CSS » Print Method » Internal Embedding.
<?php global $post; $elementorcss = "https://" . $_SERVER['SERVER_NAME'] . "/wp-content/uploads/elementor/css/post-" . $post->ID . ".css"; ?> <link rel='stylesheet' id='elementor-fouc-fix' href='<?php echo $elementorcss; ?>' type='text/css' media='all' />;
Place this in your template or header, and walla ! you have your content styled again!
The negatives to note about this method:
Its not a registered style sheet in the WordPress admin header – so will be uneffected by caching plugins – possibly a good thing if you are getting css render issues.
And if you print this out in the body – for purposes of AJAX pages – it won’t be HTML valid – however it will still render perfectly fine.