How To Add WPDark Mode To WordPress, Elementor, Divi And More
Hi guys in this Tutorial, I’m going to show you how to add dark mode onto your WordPress website. It only takes a couple of minutes to do so like and subscribe and let’s get into the rest of the tutorial.
Okay guys the first thing you’re going to need to do is go to the WP pool website. There is a link for this in the bottom of the tutorial. Scroll down slightly on their home page and what you’ll see is the WP POOL dark mode plugin from here click on find out more features. What you’ll notice is there is over ten thousand active users meaning it is a very trusted plugin.
So why might you want the dark mode feature on your website? It not only relieves stress on your end users eyes. It also increases engagement with your website meaning that people will spend more time on your website and more likely to buy something. So what are some of the features that WP Pool dark mode offer firstly offers OS based colour mode. This means if your viewer is in dark mode on their phone tablet or on their browser then your website will automatically change to dark mode.
Another great feature is their time mode this lets you set an automatic time for your website to turn to dark mode. The great thing is, it is automatic to your end users time zone. Moving down the page you’ll see there’s multiple switches and toggles to turn on dark mode. They also offer pre-made colour templates for dark mode.
If you want to add an animation to your toggle or you want to change its position you can do that within the plugin. You can also fully customize your dark mode colours letting your site stay on brand and looking cool. So you might be wondering what page builders are compatible with WP dark mode. You won’t be disappointed to find that all the major page builders are supported from Elementor to Divi. Through to Gutenberg and WP bakery, plus others.
You can also add a light mode image and a dark mode image making sure your visitors have a perfect experience. If you have an online shop then don’t worry Woo-Commerce is fully supported with WP Pool dark mode. You can still run custom CSS and it’s compatible with thousands of WordPress themes.
Now if you’re still unsure whether this is the plugin for you then you can scroll down to the bottom of the page and read some of their many reviews. If you’re sold on the idea then go and click the buy now button at the bottom of the page choose whether you want to buy annually or a lifetime license. Click the buy now button again, once the payment page has loaded fill in your details click pay and follow the instructions on how to finish setting up WP POOL dark mode.
If you want a free trial of the plugin then scroll to the bottom of the page and click try for free. This does only come with a few limited features. Click on download and once it has finished downloading onto your pc you will need to head over to your WordPress dashboard. Once you are in your WordPress dashboard click on plugins on the left-hand side. Then click add new on the top row and click upload plugin.
Select choose file and upload the WP POOL dark mode zip and click install now. Finally once the plugin has installed click on the activate plugin button. You’ll then be taken to the WP POOL dark mode settings window. The first page you’ll come to is the general settings page. In here you can control where WP POOL dark mode is operational on your site. Underneath is advanced settings, in here you can make dark mode default. If you’ve signed up you can set your timers in here.
Next down is your colour settings and this is where you can change your dark mode colours. Free users have two to choose from where paid users have 13 plus. The option to choose their own custom colours. Moving down again now we’re going to click on switch settings three users have three toggles they can use whilst paid users have 19. In here you can change the size of your switches and also add animations. Like before these animations are limited to free users two for free users and an additional six for paid.
By selecting on the animation it will give you a preview of how it reacts for page. Users you can also choose the position and where you want your icon to be displayed. Next on the list is include and exclude this is where you can add or remove different sections of your posts from dark mode. Underneath that is triggers where you can choose which pages and posts are included on dark mode.
All of these options are only available for paid users. Remember if you do want to be a paid user then there is a link at the bottom of the description. Next on the list is performance and I’m not gonna lie I don’t know what this one does yet but underneath that is accessibility settings. In here you can enable font size toggles keyboard shortcuts and dynamic content mode. In the Woo Commerce section it lets you exclude certain items that you don’t want to be shown in dark mode.
In the next section down is your image settings. This is where you can add a light or dark mode image or lower picture brightness and grayscale. In the video section you can add a light or dark mode video underneath that you can add custom CSS. Nearly to the end and we’re going to click on animation. This is where you choose how dark mode enters your page. It can slide in roll in or slide to the right plus a few extras.
Another great feature is the analytics. This tells you how many people are using dark mode or light mode on your website. This is a feature only for paid users. Finally is support. Don’t forget if you make any changes you do need to click on the save button at the bottom of the page.
So you’re probably wondering what it actually looks like once you have it installed on your website. If I click on visit page in the top left in the bottom right you’ll see the moon icon. Once clicked dark mode will slide in and it’s ready to use. Even as a free version this does look pretty cool. Just think of how good it’ll look on your own personal or business website. Remember there is a link HERE. If you choose to sign up it is an affiliate link. It doesn’t cost you any more to use but it does give me a very small percentage of their profits.
If you choose to buy that’s it for this video don’t forget to like and subscribe and if you’ve got any questions hit me up in the comments box.
see you next time
