Add a Dark Mode Toggle/Switch in WordPress Website using Elementor (WITHOUT PLUGIN)

  Рет қаралды 25,318

Make Dream Website

Make Dream Website

Күн бұрын

Пікірлер: 63
@JohnXionidis
@JohnXionidis 11 ай бұрын
Great tutorial thank you very much! I would like to ask if can we directly target the h1, h2, p, img, btn etc directly without the need to copy those long elementor classes?
@lunamcnally2062
@lunamcnally2062 2 жыл бұрын
Super helpful! What would I add to the script if I would like to auto-detect the user's system preference rather than requiring them to use the toggle?
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
That need more custom code. If you need any additional features you can email me for that
@lunamcnally2062
@lunamcnally2062 2 жыл бұрын
@@MakeDreamWebsite thank you!
@servicemanager1816
@servicemanager1816 Жыл бұрын
Does this work for every page of the site?
@ammarsayal
@ammarsayal Жыл бұрын
I made full notes and also applied them on my website, this tutorial is excellent i only thing that I want you to explain that social icons are not changing their color in the dark mode in elementor so plz help me to solve it. You can make a short video on shorts or insta. Just a suggestion Thank you
@ulyssefontaine1095
@ulyssefontaine1095 Жыл бұрын
Hi Great tutorial ! Is there a possibility to simply change a global color with CSS in dark mode ?
@jabeztadesse
@jabeztadesse Жыл бұрын
Exactly
@onedigitsolution1979
@onedigitsolution1979 8 ай бұрын
Light and dark theme feature is not working on another pages like my single blog post page is not picking light and dark theme color feature. Champ could you solve my problem?
@yhmunna9444
@yhmunna9444 Жыл бұрын
Amazing. But for the hero section how can i use this background?
@thegoriberchannel757
@thegoriberchannel757 Жыл бұрын
It would be helpful to say where you got the dark class. because it's not working
@rossrivalbendillo5582
@rossrivalbendillo5582 Жыл бұрын
This one is cool , nut when I performed a transition with putting the toggler inside a popup or off-canvas menu it doesn't work. Can we rework and update on the script to make this function?
@fidelisagency6015
@fidelisagency6015 7 ай бұрын
great video ! Thank you so much !!
@MakeDreamWebsite
@MakeDreamWebsite 7 ай бұрын
You're welcome!
@WebEditor-w2t
@WebEditor-w2t Жыл бұрын
Do you know that? Your video's are so helpfull for us.
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Thanks! Glad to know that...
@Webvision-e4r
@Webvision-e4r Жыл бұрын
hi i am busy for the past day watching your videos is this still working with flex container?
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
As those are made for section/column, I'vent test it for containers
@MikeKellner
@MikeKellner 2 жыл бұрын
Hello, could I add the JS code to functions.php and the styles to the child theme to have dark mode work site-wide?
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
You can place them on anywhere, but you have to write the css code for each elements separately. This is one of the drawback of this process
@devduttbhatt8461
@devduttbhatt8461 Жыл бұрын
Great Tutorial. Will this work on Divi Theme? will you please create one tutorial for Divi Theme? Thank you.
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
No, this method is for Elementor Only. Not sure if it also works for Divi... most probably not.
@Euhangaming
@Euhangaming 9 ай бұрын
Hi, this is really awesome tutorial. However what if i wanted it to be global? is that possible thanks!!! MOre to you good sir!!
@MakeDreamWebsite
@MakeDreamWebsite 9 ай бұрын
Then you can use browser cookie and get the data from cookie when page loaded.
@Euhangaming
@Euhangaming 9 ай бұрын
@@MakeDreamWebsite i mean i want to make it available through out the website not just for 1 page, how do i do that?
@wouterverloop8534
@wouterverloop8534 9 ай бұрын
Same question here! @@Euhangaming
@wouterverloop8534
@wouterverloop8534 9 ай бұрын
For example: I now made the changes on my homepage. Works accordingly, many thanks! But I would like to have visitors get the same settings if they navigate to the About page, or shipping page. How can we enable that? Cookies don't seem to work for this.
@Euhangaming
@Euhangaming 9 ай бұрын
@@MakeDreamWebsite thank you but cookie works on 1 page only, how about when i want it available to other page, like my about page, services page and what not. I tried doing the same thing for the other pages, but it didn't work, it will only work for 1 page, how do i make it global that way its accessible throughout the website. Thanks a lot
@WTPleo
@WTPleo Жыл бұрын
Hey brother, can you please tell me if there is a way to get colorized shadow for an image (like the option that Phlox theme has for the "advanced image" widget) but without the Phlox theme, with using CSS? I know it's possible but I just don't have enough CSS knowledge.. Thank you man!
@xxxtiannn07
@xxxtiannn07 Жыл бұрын
Hello, does the dark mode apply on all pages when toggled? Thanks!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Yes, but, you also need to apply these for your other pages too
@xxxtiannn07
@xxxtiannn07 Жыл бұрын
@@MakeDreamWebsite thank you! Your tutorials are amazing!
@emeralddeagrella3263
@emeralddeagrella3263 2 жыл бұрын
This works amazing! I do have a question tho, is there a way to get the hover color over a menu in dark mode as well? It's a small accent I wish was included otherwise, loving the new dark mode on my website. :)
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Yes it's possible, you need to add more CSS for the dark hover state
@victousrei9909
@victousrei9909 2 жыл бұрын
Hello bro, but the performance of the site, is slower with plugin or doing this????
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
The performance effect of this is so negligible whether you use a plugin or this method. But, if you compare between two, this method wins. Because plugin may have some unnecessary code.
@sheikhtheseoguy
@sheikhtheseoguy 2 жыл бұрын
Bro where's the video of the website you have used in this tutorial? I am not getting the video from I button or end screen.
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Not referring to this exact template. But, that was the tutorial about "How to make create a page with Elementor". BTW, if you want that template, you can email me.
@adem6370
@adem6370 2 жыл бұрын
Hey. I created a sticky header with your video about the subject and it looks good. But now there is a very annoying scroll problem which disappears when I deactive the header I created with your help. The problem isn't very noticeable in Chrome desktop, it is noticeable in Edge desktop but it kind of disappears after the site loads and I scroll down and back. But in mobile, no matter what the browser is, scrolling is far from being smooth and it results an unusable website for visitors. Thanks.
@jabeztadesse
@jabeztadesse Жыл бұрын
When will elementor have this built in?
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
It's not a difficult thing to do for them. But, they don't do it most probably because if they started to add each and every functionality into Elementor their plugin size would be huge.
@jabeztadesse
@jabeztadesse Жыл бұрын
@@MakeDreamWebsite That makes sense, so they have to prioritize what's important. I think Dark Mode is very important still since it's not a gimmek, it's an accessibility requirement for some site standards.
@visualmodo
@visualmodo 2 жыл бұрын
Very good video!
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Thank you!
@denvirrr
@denvirrr 2 жыл бұрын
hey can u do tutorial how to import codepen to elementor??
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
There is no specific rule to convert CodePen code in Elementor. For each project the process of converting can be different. But, if you have a good knowledge of HTML, CSS and JS and Elementor DOM, you can sense which portion need to import in your Elementor page.
@denvirrr
@denvirrr 2 жыл бұрын
@@MakeDreamWebsite please make the tutorial sir, i need the stripe gradient animation because its so cool
@maged.william
@maged.william 2 жыл бұрын
starts @ 8:10
@mikibeat6248
@mikibeat6248 2 жыл бұрын
hi if you have any wodpress projects i can help
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Do you have good knowledge of HTML, CSS, JS, WordPress Theme Development and Elementor. If so, you can email me some of your portfolios.
@hackernet7553
@hackernet7553 9 ай бұрын
Wow🔥🔥👍
@MakeDreamWebsite
@MakeDreamWebsite 9 ай бұрын
🙏🙏
@ethanwanoreck378
@ethanwanoreck378 2 жыл бұрын
The website with code snippets no longer works
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Which version of Elementor do you use? Are you using the new flexbox container?
@ethanwanoreck378
@ethanwanoreck378 2 жыл бұрын
@@MakeDreamWebsite I meant your website with code snippets was down last night, looks to be back up now.
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
@@ethanwanoreck378 Thanks for letting me know...
@dutchguitarguy7232
@dutchguitarguy7232 Жыл бұрын
@@MakeDreamWebsite I use containers and the code doesn't seem to be working unfortunately...
@ebizz8972
@ebizz8972 2 жыл бұрын
give us all code
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Code link is in the description
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Calm down man! Why you're so arrogant. The problem may cause for several reasons like theme code conflict, plugin conflict, elementor version update etc. And in WordPress, technically no one can guarantee 100% to work any functionality in all cases. You can't call it misleading. You see in the comment section it works for many people and the really appreciate. And if for someone it doesn't work they'll also ask for help politely, not in this bad way. You shouldn't expect any favour/help from anyone in the world with this kind of behaviour. Thanks!
@ammarsayal
@ammarsayal Жыл бұрын
I made full notes and also applied them on my website, this tutorial is excellent i only thing that I want you to explain that social icons are not changing their color in the dark mode in elementor so plz help me to solve it. You can make a short video on shorts or insta. Just a suggestion Thank you
Toggle between dark mode & light mode in Elementor using GSAP
28:04
啊?就这么水灵灵的穿上了?
00:18
一航1
Рет қаралды 103 МЛН
Ouch.. 🤕⚽️
00:25
Celine Dept
Рет қаралды 29 МЛН
FREE Global Dark Mode Toggle Switch Plugin for Elementor
12:29
POSIMYTH - WordPress Tutorials
Рет қаралды 16 М.
PLAY VIDEO ON SCROLL - GSAP Scrolltrigger Elementor (No plugin)
5:54
Nicolai Palmkvist
Рет қаралды 275 М.
Give Your Website a Perfect Color Scheme, Fast & Easy
14:53
Wes McDowell
Рет қаралды 17 М.
Js Dark Mode Toggle Elementor Pro
15:36
The Digital Alchemist
Рет қаралды 6 М.
Dark Mode no Elementor
21:01
Othon Ciparoni
Рет қаралды 9 М.
啊?就这么水灵灵的穿上了?
00:18
一航1
Рет қаралды 103 МЛН