How to easily create Dark Mode for posts and pages with Elementor

A step by step guide to easily transform your website into something more creative.

Welcome to Dark Mode with Elementor

So you might have heard, dark mode is what’s trending and getting heaps of recognition. The big platforms like YouTube, Twitter, and Medium have been using it and even Apple made that their big feature for their Mojave update. And just this week, Sketch rolled out their updated version 52 now with dark mode. So why all the hype? Well, it’s just kind of cool to have. It gives a fresh look to what we look at and can be visually stunning. It’s a huge improvement on UI and it helps those of us that stare into bright screens to give our eyes a break. And most importantly, it’s different!

Making a post & webpage with dark mode using Elementor

For the last few months now we have been using Elementor for our projects and the more we get into it, the more we test how flexible it is and the possibilities have been blowing us away. The conditions, the hooks, the dynamic content. And now for a current project, we’re using Custom Post Types with ACF and seeing the true potential of a tool like Elementor. 

Why use dark mode for your webpage or post?

There can be many reasons to add dark mode. To start, it just make things look cool. It adds style and creativity. Also, it can be good for UX, creating a microinteraction which improves user engagement. If you want to have your viewers stay on your page or post longer, this is a good way of doing that.
 
And another good reason to add dark mode is because you can. And easily with Elementor. And without code or complex customizations! Anyone can do this no matter your skill level. Below I have laid out out a simple step by step guide to making your own page or post with dark mode.

What you will need to get started

  • Elementor Pro. I have not tried this with the free version. I am sure it can work somehow but for this tutorial we will be using the pro version. If you have not bought the pro version yet and are still on the fence, let me assure you it is a great investment.
  • One of the listed plugins here for their Switcher Toggle widget. Element Pack, UA by Astra, and Premium Addons for Elementor. Unfortunately these are not free but having at least one of them is more than worth the cost and will open up more of the creativity you can do for your websites. For this project, I will be using the Switcher widget by Element Pack.
  • A header template. If you already are using a header template with your site, you can use it for this tutorial. But if you are using your theme’s header then you will need to create a header template. Here is a link on how to do this. After you made your header template come back and continue.

Now Let's

To start, we will be creating our post or page and then our templates in Elementor. Please note this technique will work the same for a blog post or a page.

First Phase - Creating Templates

I’ll start by making a new post, giving it a name and then hit publish. And make sure to have comments disabled for this post. This method won’t work for default comments on posts We can add them later with Elementor. To disable comments select screen option in the back of your post and then select Discussion. Scroll down and de-select Allow Comments.

Now lets create templates in Elementor.

  • First we will create a new header template. Got to Elementor > My Templates > Add New > Select Header and call it Dark Mode Header and Create Template.
  • The front end editor will open with pre-made header templates showing. Do not select these and just click the X on the top right hand corner.
  • We will leave this blank for now and just set up conditions. The idea behind this step is to remove your website's header from just the dark mode page you are building so you can make a light and dark mode header and menu.
  • Click Publish and now add a condition. Leave on Include and Select Singular > Select All Posts (or All Pages) > Click on All and enter name of your post or page and select it > now hit Publish
  • Test that it worked correctly by going to your post/page and it should be blank with no header or menu.

Next Creating Page Templates

  • Got to Elementor > My Templates > Add New > Select Page and call it Light Mode Page and Create Template and publish.
  • Repeat this step and make a second page template and call it Dark Mode Page and create template

Second Phase - Adding Content & Styling Templates

Let’s start with the Dark Mode Header template. We are only going to add one widget to this template. The Switcher, Content Switcher, or Content Toggle depending on which Plugin you have. They all work the same. I am using the Switcher widget by Element Pack

  • Style up the switcher to how you like it. When you are done your template should have nothing but the switcher on it.

Next - Light Mode Page Template

Time to design! This is where you will build your page or post.

  • First step, add your header template. This can look confusing because you will already see a header in your template, but that header will not show due to the conditions set previously. So your template should have two headers and look like this.
  • Next build the rest of your page and post. Get it detailed until you are 100% sure that it is ready and good to go.
  • Click update and save as a template. We are going to use this template next for our Dark Mode page.

Next - Dark Mode Page Template

  • Open up your Dark Mode Page template. Click on add template and add your Light Mode Page template.
  • Now your Light Mode and Dark Mode pages should be identical.
  • On your Dark Mode page, go through each section changing backgrounds to dark colors and text to white, including the header. And be sure to NOT change anything else like paddings and margins! Just colors. And that’s it. Super easy and fast.

Last Step -Back to Dark Mode Header

For the final step and putting all of this together, go back to your Dark Mode Header template and lets connect all of your templates by adding the Dark and Light Mode pages to your Switcher plugin. Edit your switcher and in Switch A go to Select Source and choose Elementor Template. Then in Content select Light Mode Page. And do the same for Switch B by adding your Dark Mode Page. And that’s it! You can go back to your post or page and test it out.

So Many Possibilities with Elementor

I hope this tutorial helps others to open up their creativity and possibilities for their websites. At JediSites, we have been using Elementor for the last 4 months and the more complex projects we are getting, the more we are finding solutions by using the dynamics of Elementor. We feel that we are only scratching the surface of the possibilities of what could be achieved with Elementor and as we continue to push the limits, we will continue to share what we are learning, new techniques, and solutions to complex tasks and functions.

If you think this can help others please share and please leave comments! Cheers

We are always working hard to bring more useful articles. Sign up to have the first look.

How to easily create Dark Mode for posts and pages with Elementor

A step by step guide to easily transform your website into something more creative.

Welcome to Dark Mode with Elementor

So you might have heard, dark mode is what’s trending and getting heaps of recognition. The big platforms like YouTube, Twitter, and Medium have been using it and even Apple made that their big feature for their Mojave update. And just this week, Sketch rolled out their updated version 52 now with dark mode. So why all the hype? Well, it’s just kind of cool to have. It gives a fresh look to what we look at and can be visually stunning. It’s a huge improvement on UI and it helps those of us that stare into bright screens to give our eyes a break. And most importantly, it’s different!

Making a post & webpage with dark mode using Elementor

For the last few months now we have been using Elementor for our projects and the more we get into it, the more we test how flexible it is and the possibilities have been blowing us away. The conditions, the hooks, the dynamic content. And now for a current project, we’re using Custom Post Types with ACF and seeing the true potential of a tool like Elementor. 

Why use dark mode for your webpage or post?

There can be many reasons to add dark mode. To start, it just make things look cool. It adds style and creativity. Also, it can be good for UX, creating a microinteraction which improves user engagement. If you want to have your viewers stay on your page or post longer, this is a good way of doing that.
 
And another good reason to add dark mode is because you can. And easily with Elementor. And without code or complex customizations! Anyone can do this no matter your skill level. Below I have laid out out a simple step by step guide to making your own page or post with dark mode.

What you will need to get started

  • Elementor Pro. I have not tried this with the free version. I am sure it can work somehow but for this tutorial we will be using the pro version. If you have not bought the pro version yet and are still on the fence, let me assure you it is a great investment.
  • One of the listed plugins here for their Switcher Toggle widget. Element Pack, UA by Astra, and Premium Addons for Elementor. Unfortunately these are not free but having at least one of them is more than worth the cost and will open up more of the creativity you can do for your websites. For this project, I will be using the Switcher widget by Element Pack.
  • A header template. If you already are using a header template with your site, you can use it for this tutorial. But if you are using your theme’s header then you will need to create a header template. Here is a link on how to do this. After you made your header template come back and continue.

Now Let's

To start, we will be creating our post or page and then our templates in Elementor. Please note this technique will work the same for a blog post or a page.

First Phase - Creating Templates

I’ll start by making a new post, giving it a name and then hit publish. And make sure to have comments disabled for this post. This method won’t work for default comments on posts We can add them later with Elementor. To disable comments select screen option in the back of your post and then select Discussion. Scroll down and de-select Allow Comments.

Now lets create templates in Elementor.

  • First we will create a new header template. Got to Elementor > My Templates > Add New > Select Header and call it Dark Mode Header and Create Template.
  • The front end editor will open with pre-made header templates showing. Do not select these and just click the X on the top right hand corner.
  • We will leave this blank for now and just set up conditions. The idea behind this step is to remove your website's header from just the dark mode page you are building so you can make a light and dark mode header and menu.
  • Click Publish and now add a condition. Leave on Include and Select Singular > Select All Posts (or All Pages) > Click on All and enter name of your post or page and select it > now hit Publish
  • Test that it worked correctly by going to your post/page and it should be blank with no header or menu.

Next Creating Page Templates

  • Got to Elementor > My Templates > Add New > Select Page and call it Light Mode Page and Create Template and publish.
  • Repeat this step and make a second page template and call it Dark Mode Page and create template

Second Phase - Adding Content & Styling Templates

Let’s start with the Dark Mode Header template. We are only going to add one widget to this template. The Switcher, Content Switcher, or Content Toggle depending on which Plugin you have. They all work the same. I am using the Switcher widget by Element Pack

  • Style up the switcher to how you like it. When you are done your template should have nothing but the switcher on it.

Next - Light Mode Page Template

Time to design! This is where you will build your page or post.

  • First step, add your header template. This can look confusing because you will already see a header in your template, but that header will not show due to the conditions set previously. So your template should have two headers and look like this.
  • Next build the rest of your page and post. Get it detailed until you are 100% sure that it is ready and good to go.
  • Click update and save as a template. We are going to use this template next for our Dark Mode page.

Next - Dark Mode Page Template

  • Open up your Dark Mode Page template. Click on add template and add your Light Mode Page template.
  • Now your Light Mode and Dark Mode pages should be identical.
  • On your Dark Mode page, go through each section changing backgrounds to dark colors and text to white, including the header. And be sure to NOT change anything else like paddings and margins! Just colors. And that’s it. Super easy and fast.

Last Step -Back to Dark Mode Header

For the final step and putting all of this together, go back to your Dark Mode Header template and lets connect all of your templates by adding the Dark and Light Mode pages to your Switcher plugin. Edit your switcher and in Switch A go to Select Source and choose Elementor Template. Then in Content select Light Mode Page. And do the same for Switch B by adding your Dark Mode Page. And that’s it! You can go back to your post or page and test it out.

So Many Possibilities with Elementor

I hope this tutorial helps others to open up their creativity and possibilities for their websites. At JediSites, we have been using Elementor for the last 4 months and the more complex projects we are getting, the more we are finding solutions by using the dynamics of Elementor. We feel that we are only scratching the surface of the possibilities of what could be achieved with Elementor and as we continue to push the limits, we will continue to share what we are learning, new techniques, and solutions to complex tasks and functions.

If you think this can help others please share and please leave comments! Cheers

We are always working hard to bring more useful articles. Sign up to have the first look.
Scroll to Top