OpenByt – Your Ultimate Source for Free WordPress Knowledge

Complete Guide to Creating a Professional Preloader in Elementor Pro for a Smoother Website Experience

tomsqum

Introduction

One effective way to enhance this experience is by adding a preloader—an animation or image that appears while the page content loads in the background. This gives users a seamless transition as they wait, ensuring your site feels polished and professional. In this guide, we’ll walk through each step of setting up a preloader in Elementor Pro, allowing you to display custom animations or brand logos that reinforce your site’s identity.

Click to go to Elementor Pro genuine purchase channel.

What is a Preloader and Why Use It?

A preloader is a placeholder animation or graphic that displays while your site’s content is loading. This can be especially useful for pages with heavy content that may take longer to load. Using a preloader creates a better user experience by reducing perceived load time, keeping users engaged, and preventing them from seeing partially loaded pages. Additionally, a preloader allows you to showcase your branding and add a bit of personality to your website.

How to Create a Preloader in Elementor Pro

Step 1: Create a Header Template

The first step is to create a header template that includes the preloader. By placing the preloader in a header template, you can ensure it appears consistently across all pages on your website.

Access the Theme Builder:

Create a New Header Template:

Publish the Template:

Step 2: Add a Container and Set a CSS ID

Now, let’s add a container that will house the preloader animation. Setting a unique CSS ID for this container will allow us to target it with CSS and JavaScript later.

Add a Container:

Set the CSS ID:

Step 3: Add an Icon or Image Widget

To create the visual element of your preloader, you can add an Icon or Image widget to display either a loading icon or your brand’s logo.

Add the Widget:

Set the CSS ID for the Widget:

Style the Icon or Image:

Step 4: Add an HTML Widget to Control the Preloader

Next, we’ll add an HTML widget that contains JavaScript to control when the preloader is displayed and when it disappears. This script will hide the preloader after a short delay, allowing your content to load smoothly.

Add the HTML Widget:

Insert JavaScript Code:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      document.getElementById('abc_preload').style.display = 'none';
      document.getElementById('content').classList.add('visible');
    }, 2000); // Adjust the delay as needed (in milliseconds)
  });
</script>

This code will hide the preloader 2 seconds after the page content has started loading. Based on your website’s average load time, you can adjust the 2000 value to increase or decrease the delay (in milliseconds).

Set the CSS ID for the HTML Widget:

Step 5: Add Custom CSS for Styling the Preloader

With the structure in place, we’ll add custom CSS to style the preloader container and the loading animation.

Open Custom CSS Settings:

#abc_preload {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#abc_loader {
  border: 8px solid #363636;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#abc_preloader_adds {
  display: none;
}
https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-15-21-17-14.mp4

Step 6: Publish the Template and Test the Preloader

Publish the Header Template:

Test the Preloader:

Conclusion

Adding a preloader to your Elementor Pro website enhances user experience by creating a seamless transition while content loads. This animation or graphic engages users, reducing perceived load times, and reinforces your brand’s identity with custom visuals like logos or loading icons. The setup process involves:

Customizable and responsive, a well-designed preloader adds a polished touch to your site, ensuring a smooth, professional experience across all devices.

FAQs

1. What are the benefits of using a preloader?

A preloader can enhance user experience by reducing perceived loading time, keeping users engaged, and adding a professional look to your site. It also helps prevent users from seeing partially loaded pages, creating a smoother browsing experience.

2. Can I customize the preloader animation?

Yes, you can customize the preloader animation by modifying the CSS in the code. You can change the #abc_loader element to include different types of animations, colors, sizes, and other visual effects. If desired, You can replace the icon with a GIF or another custom animation.

3. How can I adjust the duration of the preloader?

In the JavaScript code, you’ll see a 2000 value in the setTimeout function, representing the delay in milliseconds. You can change this value to increase or decrease the time the preloader is visible. For example, changing it to 3000 will make the preloader display for 3 seconds.

Exit mobile version