FREE Global Dark Mode Toggle Switch Plugin for Elementor
Вставка
- Опубліковано 7 сер 2024
- In this Elementor tutorial, we will see how to enable Dark Mode Toggle Button Swicth in 2 modes of Light and Dark Theme. This plugin brings 2 unique modes, i.e. Blend Mode and Global Colour Mode. You can add dark mode toggle switch on any Elementor WordPress site and theme for completely FREE.
Live Demo - theplusaddons.com/widgets/ele...
Get The Plus Addons for Elementor PRO - theplusaddons.com/pricing/
🔥 USE CODE " UA-cam10 " TO ENJOY EXTRA 10% DISCOUNT
⏯️ Don't Forget to Subscribe to our UA-cam channel for ✨ the latest updates -
ua-cam.com/users/POSIMYTHInn...
Works on any WordPress Theme, no coding knowledge required. Easiest way to add Day Night Theme on Elementor website. You also Ignore Dark Mode for Images or any Section using CSS Classes.
Exclusive Features of Elementor Dark Mode Plugin
✅ 2 Different Modes
✅ Elementor Global Colours Dark Mode
✅ Blend Dark Mode
✅ Custom upload Dark Mode Switcher Icon
✅ Custom Positioning of Dark Mode Switcher, i.e. Add anywhere in your website
✅ Auto-Match OS Theme, Browser Theme
✅ Save Toggle Switch selection of Dark/ Light Mode
✅ Ignore Images, Section using Custom CSS classes
Dark Mode, also known as Night Theme, is a very popular choice these days, from site like Facebook to Google, every website is adding Dark Mode.
Read More Here- blog.posimyth.com/how-to-add-...
---
Time stamps 🕐
0:00 Intro
1:45 Activating the FREE Dark Mode Elementor Widget
2:39 Method 1: Using Global Colors for Dark Mode
8:42 Method 2: Using Mix Blend Mode for Dark Theme
9:20 Ignore Dark Mode for Images, Sections etc
12:01 End Notes
---
⏯️ Don't Forget to Subscribe to our UA-cam channel for ✨ the latest updates - ua-cam.com/users/POSIMYTHInn...
⚡SUPERCHARGE YOUR WEBSITE NOW⚡ - pmly.cc/supercharge
🔥 USE CODE " UA-cam10 " TO ENJOY EXTRA 10% DISCOUNT
---
Important Links 🔗
▶️ Website - theplusaddons.com/
▶️ Join our Facebook Community - pmly.cc/30p9p
▶️ Add your favourite feature on our Roadmap - pmly.cc/7b8zo
▶️ Hit Like on our Facebook Page - pmly.cc/2erv3
▶️ Need Help with our widgets, refer our Docs - pmly.cc/66kav
▶️ Enjoy Premium Support- pmly.cc/asg4f
If you have any questions, feel free to say Hi👋 on our messenger
▶️- pmly.cc/eldxv
#ElementorDarkMode #Day/NightTheme #ElementorTutorial - Навчання та стиль
using the global color options, does this only work with the 4 global color types (primary, secondary, text, accent). What if we have some custom colors in our global colors? how do we associated a darkmode color to those global custom colors?
This just inverts all colors. Also all Images So i cant use this. Ignore does not work.
Hi, I love this tutorials also, you are all a great team, Thx for this...
But i have 3 questions:
1: I see a hoover background on the switcher how do i turn that off or do i need some CSS code for that?
2: How do I stick this switcher on the top left?
3: We can download a json file voor a switcher(button) How do we upload it in to the dark mode ?
Love from Dotty
Hello, Dotty, Thank You for your kind words 🥰
Can you please submit a ticket at our helpdesk: store.posimyth.com/helpdesk/.
Our team will guide you with the above process
@@posimyth Ohw Sorry, I tought this was the right way, but I wil do that, Thanks a lot.
the only issue about this thing is: there is not a single option NOT to have this floating design... i would prefer to just use the switch at any point i specify! Right now its way to prominent with the floating only...
Use the z index value to hide it behind something.
The custom classes do not work correctly with elementor pages. After I set classes for targeted page assets and use a comma after them, they break. .ignore-dark is what I set. It works fine. When I put .ignore-dark,
We apologize for any inconvenience you may have experienced.
To help us resolve this issue as quickly as possible, please submit a ticket at our helpdesk: store.posimyth.com/helpdesk/.
Our technical support team will look at your issue and do their best to find a solution.
@@posimyth Unfortunately I can't, I get a 403 forbidden (I am in Thailand) on the link you sent. Also... In addition to my previous comment about putting the theme classes before the class I set to target items. if there is not a blank space before the first .class, it breaks. So, there must first be a blank space, then the classes, and the last class as to be that which is set to target specific, in this case .ignore-dark.
I figured out the link. I will speak with them. Thank you. It's a great widget but it's clunky and buggy for heavy customs. It can be improved and be better.
First we think, then we do, then we do better!
⭐ Quick Tip: To Add Dark Mode Switcher on whole site, add this dark mode widget either on site Header or Site Footer Template in Elementor
- Do you love Dark Mode or Light Mode ❓
The plugin is amazing. The only problem is that it not allow you to fit and show it in the menu.
Hey there, I'm having an issue where Global Colors does not seem to be working. No matter what colors I choose, it is always set to Mix Blend mode. I put the widget on my header. What could be going on?
Hello there,
Please join us via livechat our team will help you with this.
@@posimyth How di I do that? The link to messenger does not work.
Thanks for the tut. However, the plugin is not working as desired. The feature to ignore elements based on class does not work. Can you give a little more detail on how you have gotten this to work? Also, you were not detailed enough on the actual dark mode colors. How do you make them replace the default colors? Thanks.
To help us resolve this issue as quickly as possible, please submit a ticket at our helpdesk: store.posimyth.com/helpdesk/.
Our technical support team will look at your issue and do their best to find a solution.
@@posimyth link does not work
@@n8tr0nweb3 Please join us via live chat!
Help! i dont see the button in the editor!
Hello Marker,
Can i confirm if the Dark mode widget is activated from The Plus Settings > Widgets dashboard
Global color doesn't work. Any compatibility issue?
We apologize for any inconvenience you may have experienced.
To help us resolve this issue as quickly as possible, please submit a ticket at our helpdesk: store.posimyth.com/helpdesk/.
Our technical support team will look at your issue and do their best to find a solution.
@allwebservice Were you able to solve this? I'm having the same issue.
@@aydesignart No.