Fixed in 2024: Elementor Post Images Flashing If Image Ratio Is Set

Elementor Post Image Flash Problem
In This Article

Elementor is a WordPress page builder plugin which is a very useful tool for designers and developers who build websites using WordPress.

 

I’ve seen that many people are having problem when they add a post grid to their Elementor website, when the website loads the Elementor post image jumps or flashes or flickers for a small amount of time and then becomes normal again.

 

Someone on github said in 2018, “The problem is, when the page is loading – for a split second – it loads the original image and after that it crops it. The result is this ugly flicker/flash after every reload.” But the problem is still not fixed by the Elementor team. Today, we will see how to fix it in many ways.

 

 

Loop Grid Method

For this method Elementor Pro is mandatory. First, we will create a Loop Item which will contain the post template of the post grid we want to add in our website. In the loop item, we will add the featured image. Then we can add post title, post excerpt etc. anything we desire.

 

For the featured image we will not add any image ratio, we will add a fixed height and width. Suppose, we need a featured image with a width of 250px and height of 200px. After adding fixed width and height we can now save the loop item and head to the page where we want to add the loop grid.

 

In the loop grid, we will select the loop item. Select query and pagination as we need. After saving the page, when we will preview it and reload we can see the problem is gone. There will be no flashing or jumping or flickering when the website loads if image ratio is set.

 

Custom CSS Method

If you don’t have Elementor Pro, no need to worry. We can stop the flickering or flashing or jumping of the images using CSS. Actually this problem is caused by the <a> html tag that contains the image in post grid.

 

First, let’s add a custom css class to the post grid. Suppose it’s “post-grid“. We will set a fixed height and width for the post image and hyperlink tag of the post grid. Here is the css code:

 

.post-grid a {

height: 200px;

width: 250px;

}

 

.post-grid img {

height: 200px;

width: 250px;

}

 

Now, this should solve our problem. There will be no flashing or jumping when the post images loads in the website. Elementor team has been informed about this problem and it should be solved soon.