FREE Global Dark Mode Toggle Switch Plugin for Elementor

POSIMYTH Innovations - WordPress Tutorials

Подписаться 8 тыс.

Просмотров 15 тыс.

50% 1

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 " RU-vid10 " TO ENJOY EXTRA 10% DISCOUNT
⏯️ Don't Forget to Subscribe to our RU-vid channel for ✨ the latest updates -
ru-vid.com...
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 RU-vid channel for ✨ the latest updates - ru-vid.com...
⚡SUPERCHARGE YOUR WEBSITE NOW⚡ - pmly.cc/supercharge
🔥 USE CODE " RU-vid10 " 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

Хобби

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@imthatguydavid 8 месяцев назад

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?

@phpvbacoder9000 11 месяцев назад

This just inverts all colors. Also all Images So i cant use this. Ignore does not work.

@posimyth 2 года назад

⭐ 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 ❓

@leonardofavaretto2289 Год назад

The plugin is amazing. The only problem is that it not allow you to fit and show it in the menu.

@secondsky Год назад

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...

@Pedant_Patrol Год назад

Use the z index value to hide it behind something.

@dottybucannon7527 Год назад

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

@posimyth Год назад

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

@dottybucannon7527 Год назад

@@posimyth Ohw Sorry, I tought this was the right way, but I wil do that, Thanks a lot.

@dl9151 Год назад

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,

@posimyth Год назад

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.

@dl9151 Год назад

@@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.

@dl9151 Год назад

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!

@aydesignart 6 месяцев назад

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?

@posimyth 6 месяцев назад

Hello there, Please join us via livechat our team will help you with this.

@aydesignart 6 месяцев назад

@@posimyth How di I do that? The link to messenger does not work.

@marker9308 Год назад

Help! i dont see the button in the editor!

@posimyth Год назад

Hello Marker, Can i confirm if the Dark mode widget is activated from The Plus Settings > Widgets dashboard

@n8tr0nweb3 6 месяцев назад

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.

@posimyth 6 месяцев назад

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.

@n8tr0nweb3 6 месяцев назад

@@posimyth link does not work

@posimyth 6 месяцев назад

@@n8tr0nweb3 Please join us via live chat!