Subscribe on YouTube

Check out our videos on branding, web design, SEO, and online business.

How to Add a Fullscreen Toggle Button in Elementor

Home Elementor How to Add a Fullscreen Toggle Button in Elementor

In this video I will show you how to easily add a full screen toggle button to your Elementor website. This functionality can be helpful if you want to present your website in a presentation mode similar to a PowerPoint presentation.

I will show you how to add this button in your header section if you are using Elementor Pro. I will also show you how to add this button to the main content area of your website.

Timestamps:

  • 0:00 Introduction
  • 1:10 Elementor Backend Overview
  • 1:49 Add Javascript Code in Footer
  • 2:50 Add Fullscreen Button In Header
  • 6:04 Add Fullscreen Button In Body
  • 7:56 Add Multiple Fullscreen Buttons

JavaScript Fullscreen API Reference Code:
https://www.thewebflash.com/toggling-fullscreen-mode-using-the-html5-fullscreen-api/

Javascript Code:

				
					<script>function toggleFullscreen(elem) {
  elem = elem || document.documentElement;

  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

document.getElementById('btnFullscreen').addEventListener('click', function() {
  toggleFullscreen();
});</script> 
				
			

* Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources

Template Restyles

Get a new website in only 7 days with our new template restyle service. The perfect solution for a new business owner.