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

Join Our Community

Sign up to receive free resources in your inbox every week.

Wicky Design YouTube

Join Our Community

Never miss a post! Join now to receive helpful resources, tips, and tutorials in your inbox weekly. Registration is FREE and emails are delivered every Monday morning.