目錄

• Why Preloader Animations Matter
• Preloader Styles You Could Use
• Step-by-Step: Adding a Custom Preloader in Elementor
  • Step 1: Install a Preloader Plugin
  • Step 2: Installing Preloader Plus
  • Step 3: Configuring the Preloader Settings
  • Step 4: Choosing Your Preloader Animation
  • Step 5: Adjusting Design and Timing
• Integrating Preloader with Elementor for Greater Control
• Testing and Optimizing Your Preloader
• Final Thoughts: Making Your Elementor Website Stand Out

Why Preloader Animations Matter

A preloader can transform the first impression of your Elementor website into something memorable. Instead of a blank page or the dreaded loading spinner, a well-designed preloader adds a touch of personality and keeps your visitors engaged as they wait for your content to appear. In this article, I’ll guide you through the process of creating and customizing preloader animations in Elementor, breaking it down into simple steps anyone can follow.

Imagine you’ve clicked on a link, and you’re stuck staring at a blank screen. It’s frustrating, right? Preloader animations solve this problem by providing visual feedback that the page is actively loading—keeping visitors entertained and reassured that their experience will be worthwhile. Not only do preloaders enhance user engagement, but they also help convey your brand’s personality through visual creativity.

Preloader Styles You Could Use

Before diving into how to add preloaders to your Elementor website, let’s explore the different styles you could use:

1. Spinner Animation: A classic choice. Simple yet effective, the rotating spinner tells users something is happening.
   • 使用個案: Suitable for minimalist or tech-oriented websites. This style is straightforward and non-distracting, making it ideal for websites where simplicity is key.
   • Customization Tips: Use your brand colors for the spinner to maintain consistency.
2. Progress Bar: Ideal if you want to convey an exact loading percentage, giving visitors a sense of how long they need to wait.
   • 使用個案: Great for content-heavy sites like e-commerce or blogs with many images. Progress bars give users a clear indication of loading progress, reducing frustration.
   • Customization Tips: Customize the progress bar color to align with your website’s primary color palette, and consider adding a label like “Loading… Please wait” to make it more informative.
3. Logo Animation: You can animate your logo to keep things on-brand while showing some creative flair.
   • 使用個案: Perfect for brand-focused websites such as agencies, fashion brands, or creative portfolios. This type of preloader reinforces brand identity.
   • Customization Tips:使用下列工具 After Effects 或 LottieFiles to create lightweight SVG animations of your logo. Ensure the animation loop is smooth and doesn’t last longer than a few seconds.
4. Text Fade-In/Out: Words like “Loading…” that appear and fade are a simple yet impactful option, adding a personal touch.
   • 使用個案: Ideal for personal blogs or community websites. It creates a warm and friendly feel, making users feel more connected.
   • Customization Tips: Customize the text to fit your brand’s voice—use something unique like “Hold tight, amazing content is on the way!” to add personality.

The goal is to choose a preloader that aligns with your brand, matches the style of your website, and keeps your users engaged while the content loads.

Step-by-Step: Adding a Custom Preloader in Elementor

Now, let’s get into the details of how you can add a custom preloader animation to your Elementor website. No need to worry if you’re not a coding expert—this method is beginner-friendly.

Step 1: Install a Preloader Plugin

The easiest way to add a preloader animation in Elementor is by using a plugin. Some of the most popular options include:

• LoftLoader: A highly customizable plugin that integrates well with Elementor.
• 預先載入 Plus: Offers great flexibility for adding animations and adjusting settings.
• PageLoader: A premium option with extensive control over design and display.

For this tutorial, let’s use the 預先載入 Plus plugin as an example, as it’s user-friendly and offers a lot of customization without needing to touch any code.

Step 2: Installing Preloader Plus

1. Navigate to the WordPress Dashboard.
   • Log in to your WordPress admin panel.
   • From the dashboard, you’ll have access to install plugins and customize settings.
2. Go to Plugins > Add New.
   • Click on the 外掛程式 menu on the left sidebar, then click 新增.
3. Search for “Preloader Plus” in the search bar.
   • Type “Preloader Plus” into the search bar and press Enter.
4. 按一下 立即安裝 然後 啟動.
   • Once you find the plugin, click 立即安裝.
   • After the installation completes, click 啟動 to enable the plugin on your website.

Once activated, you’ll see the Preloader Plus settings in your WordPress dashboard.

Step 3: Configuring the Preloader Settings

1. Open Preloader Plus Settings from the dashboard.
   • 前往 Settings > Preloader Plus to access the configuration options.
2. 導覽到 General Settings 標籤。
   • Here, you can enable or disable the preloader and set up its basic behavior.
3. Enable the Preloader by switching on the toggle.
   • This will activate the preloader across your website based on the settings you choose.

Next, it’s time to decide when and where you want your preloader to be active. You might only want it for your homepage, or perhaps across the entire site.

• Pages to Show: Select the pages where you want the preloader to be visible (e.g., Homepage, All Pages, etc.).
  • 提示: For a better user experience, consider only enabling the preloader on pages with heavy content that takes longer to load.
• Display Frequency: Choose whether to show it on the first page load only or for every time a visitor navigates to a new page.
  • 提示: Using it only for the first page load can improve the overall browsing experience by reducing repetitive loading animations.

Step 4: Choosing Your Preloader Animation

1. 前往 Style Settings 標籤。
   • In this tab, you can configure the appearance of your preloader.
   • 範例: You can visit https://example.com to see how a logo animation preloader can enhance branding for a creative portfolio.
2. Select Preloader Type: Choose between spinner, progress bar, or custom animation.
   • Depending on your brand’s style, select the type of preloader that best fits your needs.
   • 範例: For an e-commerce website like https://shopdemo.com, a progress bar works well to keep users informed.
3. For 自訂預先載入程式, upload a GIF or SVG of your logo if you want a branded animation.
   • 按一下 Upload to add your custom preloader animation.

A custom GIF of your brand logo can be a great way to leave an impression on your visitors. You can use tools like Canva 或 Figma to create simple logo animations.

• 提示: Make sure your custom animation is lightweight to avoid slowing down the loading process. Aim for an animation file size of less than 200KB for optimal performance.

Step 5: Adjusting Design and Timing

• 背景顏色: Set the background color to match your brand’s palette. You can use a color that contrasts with your logo to make it stand out.
  • Instructions: Click on the color picker in the 背景顏色 section and choose a color that complements your website’s theme.
• Animation Duration: Set the duration for how long the animation should play. Usually, keeping it under 3 seconds works best for retaining user attention without frustration.
  • 提示: Test different durations to find the sweet spot where the preloader feels neither too fast nor too slow.
• Page Fade In/Out: Use fade-in/fade-out effects to provide a smoother transition between the preloader and the actual content.
  • 提示: A slight fade-in effect can make the transition feel more polished and less abrupt.

Integrating Preloader with Elementor for Greater Control

If you want more granular control over where and when your preloader appears, you can integrate Preloader Plus with Elementor by using Elementor’s Custom CSS feature.

• In Elementor, edit the page where you want to add the preloader.
  • Navigate to the page you want to edit and click 使用 Elementor 編輯.
• Open the 進階 tab, and scroll down to 自訂 CSS.
  • Click on the 進階 tab on the left panel, then scroll down to find the 自訂 CSS 領域。
• Add CSS code to create preloader animations for specific sections of the page. For example:

/* Custom CSS for Preloader */
.preloader-section {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

• 提示: Use this feature to add preloaders only to critical sections that take longer to load, such as image galleries or video embeds. This helps keep the rest of the page fast and responsive.

Testing and Optimizing Your Preloader

Now that you’ve set up your preloader, it’s important to test it. Here are some tips:

• Check on Different Devices:使用下列工具 瀏覽器堆疊 to see how your preloader looks on mobile, tablet, and desktop views. Ensure it provides a consistent experience across all devices.
  • Instructions: Open BrowserStack, select the devices you want to test on, and navigate to your website.
• Monitor Loading Speed: Remember, a preloader should enhance the experience without significantly slowing down your page. Use tools like GTmetrix 或 Google PageSpeed Insights to ensure that your site’s loading speed is optimized.
  • 提示: If your preloader is negatively affecting load times, consider optimizing the animation file size or limiting the use of preloaders to specific pages.
• Avoid Overuse: Preloader animations are effective, but overusing them on every page can frustrate visitors. Use them strategically—typically on heavier pages that need extra time to load.
  • 提示: Test user behavior with and without preloaders on specific pages using tools like Hotjar to see if preloaders are improving or hindering user experience.

Final Thoughts: Making Your Elementor Website Stand Out

A well-designed preloader is more than just a loading screen—it’s a powerful branding tool and user experience enhancer. To take your Elementor website to the next level, don’t stop at just adding a preloader. Continuously optimize your site’s performance and consider how each interaction—from preloaders to page animations—adds to your brand story.

With these steps and tips, you now have everything you need to create a custom preloader that not only keeps visitors engaged but also reinforces your brand identity.