If you are in the WordPress environment and have a website built and customized with Elementor, then this article is for you as we are going to show you how you can use Elementor dark mode on your site.
As you may already know, one of the best things about being in the WordPress environment is, that you can build a website with no coding or web development knowledge whatsoever. Thanks to the WordPress derivatives (themes and plugins) that enable you to make this happen.
Page builders like Elementor will make your WordPress customization effort easier. Within a few moments, you can change the overall look of your site.
So it is clear that Elementor is the kind of tool that can make your website building experience robust and smooth. It saves you time and trouble by making things codeless along the way. No need for css filter darken method or HTML codes for making page elements dark.
If you want to add dark mode to your Elementor-built WordPress site, we will show you some really easy and simple steps to make that happen.
Does WordPress Have a Dark Mode of Its Own?
No, WordPress doesn’t have any default dark mode option built-in. However, there are numerous dark themes available for customizing your site. Either you have to use a plugin to enable dark mode on your WordPress site or use a dark theme otherwise.
In this article, we will be using a dark mode plugin called Darklup – Dark Mode Plugin which will help you get your desired dark mode on your live site.
Why Choose Darklup for your WordPress Site?
With its growing number of popularity and usage, dark mode has topped the list of best features in the tech world. On top of that if you have a WordPress site then it becomes even more of an ease to use that feature.
Coming back to the plugin in question. Darklup is one of the best dark mode plugins that not only enables you to have a dark-colored theme all over your site but also opens the door to more interesting features that give you a totally immersive experience.
Along with frontend dark mode, you can also have dark mode enabled for the backend as well. This will give maximum comfort while you are working in the backend. On the other hand, a stylish collection of toggle switches is also available for the front end.
Moreover, you can fully customize the background color for dark mode. You will be given a collection of color presets to choose from and also do custom coloring of background color, link color, text color, etc. of both front and backend. That’s not all, looking at some more interesting features of Darklup – Dark Mode Plugin we see,
- Dark mode element or widget for displaying toggle switch on any page.
- Advanced AI-based dynamic dark mode.
- Image replacement functionality.
- Time-based dark mode.
- OS aware dark mode.
- WooCommerce support.
- Usage analytics report.
- Floating switch buttons.
This tool will give you the best dark design and will make your site look more stylish and attractive in dark mode. Most importantly, it comes with major page builder support including Elementor.
With the elementor widget of Darklup – the best dark mode plugin, you can place your dark mode toggle switch on any page, anywhere you want.So, let’s look at the simple steps to enable Elementor dark mode on your WordPress website.
How Do You Turn On Dark Mode in Elementor?
With the help of the Elementor widget feature, you can easily place the Darklup switch button anywhere and get Elementor dark mode on your site. Do not worry, it is not a tough task to do, follow the steps carefully and at the end of the article, you will be able to enjoy the elementor or dark mode.
So let’s dive in.
NOTE: Here we will be using the free version of Darklup (Darklup Lite) for this tutorial.
Step 1: Installing and Activating Darklup Plugin
So, first of all, you have to install the Darklup plugin (free version in this case) from the WordPress repository. Navigate to your plugins option on the admin sidebar and click on ”Add New”. Then search for “Darklup” and install then activate the plugin.
Step 2: Build a Page and Edit With Elementor
Now you have to build a page using elementor. Go to your WordPress Dashboard > Pages > Add New.
After building a new page, click on the “Edit with Elementor” button as shown below.
Step 3: Drag and Drop “Dark Mode Switch” widget on Your Page
In the elementor editing panel look for the “Dark Mode Switch”. Then drag and drop the dark mode buttons on the editing areas (drag widget here) of your pages (as shown below).
Step 4: Choose Switch Style and Adjust the Button
Our dark mode plugin has 15 switch styles that you will see on the left panel as shown below. Choose any style for the dark mode button that you wish and it will be set.
Step 5: Just Update and Publish The Page
Finally, you just have to update the changes you made by clicking on the green “Update” button at the bottom and then click “Publish”. That’s it, now go to your live page and enjoy dark mode.
Whether you are using any elementor toggle or elementor link color of your choice, Darklup – Dark Mode Plugin will make them stand out in dark mode making your site visually pleasing to the eyes.
Turn on Dark Mode for Your Entire Website
Well, Darklup will help you to turn on the dark mode and customize in more convenient ways. As you installed the plugin on your WordPress website. Let’s explore its valuable features more effectively.
First Go to your WordPress Dashboard. Now navigate to the Darklup.
In the Advanced Settings of the plugin you can access various settings such as –
- Enable Frontend Dark Mode – Add the dark mode option for the frontend portion of your website.
- Enable Dashboard Dark Mode – Also add the dark interface for the backend portion for your website.
- Dark Mode as Default – Enable the default dark mode.
- OS Aware Dark Mode – Turn on the OS detected dark mode for your website.
You have to enable the first option to enable the dark mode for your website. Now click on the Save Settings button.
As you can see,we have enabled the dark mode on our website. Now the user can enable/disable the dark mode by clicking the dark mode switch within a few minutes. But the way you can also customize switch styles from the “Switch Styles” menu.
There are 15 different types of switches available for the dark interface. Just choose any of the switch styles based on your demand.
Darklup is always ready to give you a flexible dark mode customization opportunity. If you have an Elementor-powered website, you can easily turn on the dark mode with this plugin. Just install and activate the plugin. We have shown you the full process of Elementor dark mode customization. Just follow the step-by-step rules. Best of luck with your WordPress customization journey.