Greetings WordPressers! Today, we bring you a handy tip for fixing a common issue in Elementor that can often cause unsightly visual hiccups on your website.
Have you ever noticed odd styles loading before the actual stylized elements when a page loads with Elementor? This unsightly flicker is known as a Flash of Unstyled Content (FOUC) and can degrade your users’ experience on your site. In this post, we’ll guide you on how to tackle this issue and improve your website’s aesthetics.
What is a Flash of Unstyled Content (FOUC)?
FOUC is a situation where an unstyled web page appears briefly before the browser renders the CSS to style it. Typically, this phenomenon occurs when the browser’s built-in CSS styles the elements on the page before your chosen style has a chance to load.
You might have seen this on the Hands Elemental kit demo site. When the page is refreshed, there is a momentary display of unstyled content in the sidebar, which is not very appealing. This ugliness is caused by the default Elementor styling loading before our custom sidebar style, causing a brief moment of FOUC.
How Can We Fix This?
Elementor’s developers acknowledge this issue, and they offer an easy fix, which we’re about to share with you. There are two methods that they suggest:
- Change the CSS Print Method to Inline: In Elementor settings, under the Advanced tab, there is an option to change the print method. However, keeping it as an external file improves the performance, so we recommend against this option.
- Enqueue the Specific CSS for a Specific Template: This is a more desirable method as it ensures you’re not loading unnecessary CSS across your entire website. You only load the specific CSS required for the template upfront.
Here’s how you can implement this method:
First, you need to insert some code into your website. There are multiple ways to do this, but adding it to your theme’s function.php file is not recommended. Instead, the code should be added to the functions.php file of your child theme or to a custom plugin.
For our example, we’ll be adding it to a bespoke plugin.
Implementing the Code
To implement the fix, you first need to copy the provided code and swap out the placeholder template ID for the ID of your flickering sidebar. This can be done easily in Elementor Pro by checking the shortcode link for your template. If you’re not using Elementor Pro, hover over your template name, and you will see the ID in the URL.
Once you have your ID, it’s time to insert the code into your plugin. Go to your WordPress dashboard, find your custom plugin, and open the plugin editor. If you are unsure about creating your own plugin, check out this guide on creating your own WordPress plugins.
Paste the code into your plugin file, replace the placeholder with your template ID, and hit update.
That’s it! When you refresh your page, you should no longer see the FOUC. If you don’t notice the change immediately, it could be due to cache on your website. Make sure to flush your website cache and your hosting cache to see the changes.
And voila! No more unsightly flicker. Elementor is looking much better, isn’t it?
As always, we’d love to hear your thoughts on this quick fix. Do you know of any other methods to address this issue? Or perhaps there are other WordPress-related topics you’d like to discuss? Feel free to drop a comment below. Until next time, happy web building!
