Login
Uncategorized
Updated on September 11, 2025

How to Fix Theme Preloader Issues and Add a Day-Night Switcher in Elementor Headers

Minhaz Ahmed
3 minutes
107 Views
Share

If you’re using Elementor to build new pages or headers and have run into issues with your theme’s preloader not working correctly, or if you’ve noticed the absence of a day-night (dark mode) switcher widget, this guide provides solutions and helpful tips for addressing both problems.

Understanding the Issues

  • Preloader not working on new Elementor pages: Some users notice that the theme’s animated preloader does not appear or function properly when creating new pages with Elementor.
  • No day-night switcher in header builder: The theme does not provide an out-of-the-box widget for toggling between light and dark modes, limiting design options when building headers in Elementor.

Diagnosing the Preloader Problem

Before troubleshooting, make sure to test if the preloader issue occurs consistently or only on specific new pages. Check the settings for both your theme and Elementor, as some themes may require extra configuration for preloader effects to work with custom templates.

It’s also helpful to share screenshots or screen recordings with support teams if the issue is inconsistent—it may be a conditional display or a conflict with custom scripts added via Elementor.

How to Fix the Preloader Not Working with Elementor

  • Check Theme Settings: Make sure the preloader is enabled for all page types in your theme’s customizer or settings panel.
  • Template Compatibility: If the new page uses Elementor’s Canvas or Full Width template, the theme’s preloader may not initialize. Try switching templates or checking theme documentation for Elementor compatibility.
  • Plugin Conflicts: Deactivate other plugins (especially caching, speed, or script optimizer plugins) temporarily to see if they interfere with the preloader.
  • Update Everything: Ensure you are using the latest versions of your theme, Elementor, and related plugins.
  • Custom Code: If you’ve added custom JS or CSS, comment these out to check for conflicts.

Adding a Day-Night (Dark Mode) Switcher to Elementor Headers

If your theme doesn’t offer a built-in day-night switcher widget, you can add this feature with the following options:

  • Use a Third-Party Plugin: Plugins like WP Dark Mode or Darklup add a customizable dark mode toggle that can be embedded in any section or header built with Elementor.
  • Manual Integration: If you’re comfortable with code, insert a dark mode toggle widget or custom HTML/JS block into your header using Elementor’s HTML widget. You may need to write or adapt a dark mode script to switch classes on the <body> tag, and add the relevant CSS rules.
  • Custom Shortcodes: Some dark mode plugins provide shortcodes or widgets specifically for Elementor. Insert these where you want the switcher to appear in your header design.

Best Practices and Recommendations

  • When reporting issues like preloader malfunctions, gather as much information as possible (screenshots, steps to reproduce, active plugins) to expedite support.
  • For adding dark mode, leverage reputable plugins to ensure design consistency and avoid manual code conflicts.
  • Always backup your site before making significant changes to theme files or adding custom scripts.

Conclusion

Both the preloader and dark mode switcher issues are common when customizing with Elementor and dynamic themes. By checking theme settings, ensuring compatibility, and using trusted plugins for new features like a day-night toggle, you can create engaging, user-friendly pages and headers. If problems persist, don’t hesitate to reach out to your theme’s support team with detailed information.

Post Views: 109

Leave a Comment

ChatbotKnowledge BaseContact

Chatbot Avatar

Jobus Templating

Jobus is developer-friendly, offering full control over pre-built templates for

Developer Docs for Jobus

Jobus empowers developers with a flexible template override system, enabling com

Jobus- login setup

The Login Form Settings in Jobus empower admins to tailor the user experience. C

Company options

The Company Settings section empowers administrators to tailor company profiles,

Candidate Options

Administrators can customize candidate profile layouts, manage attributes like s

Job Options

The Job Options section in Jobus empowers administrators to configure every aspe

Jobus Settings

The Jobus Settings panel empowers you to control every element of your job board

Shortcodes

The Jobus Dashboard Shortcodes allow administrators to easily assign and display

Employer Dashboard

The Employer Dashboard in Jobus offers a centralized, intuitive hub for recruite

Candidate Dashboard

The Candidate Dashboard in Jobus offers job seekers a streamlined way to manage

Dashboards

Jobus offers dedicated dashboards for candidates and employers, each tailored to

Companies Widget

The Companies widget enables you to display a curated list of companies in an at

Chat Icon Close Icon