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.

IF your system is still doing this however I’ve put together a simple script that gets the post ID and then echos the pages specific styles into the header.  This is also great as well if you are using an AJAX navigation with Push state urls (PJAX), and using ELEMENTOR is part of what is being loaded via ajax. Keep in mind Javascript events will need to be destroyed and reinitialised each time.

<?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.

Leave a Reply

Your email address will not be published. Required fields are marked *