How to Add a Fullscreen Toggle Button in Elementor

Home Elementor How to Add a Fullscreen Toggle Button in Elementor

October 20, 2021

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