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

Wicky Design YouTube

Get our latest videos by subscribing for FREE to our YouTube channel. New videos are uploaded weekly!

Join Our Community

Join now to receive helpful resources, tips, and tutorials in your inbox.

Is it time for a website upgrade?

Is it time for a website upgrade?

Are you giving off the right first impression? Take the quiz to find out how your site measures up.