Get a professional website for $99 per month. One week turnaround.

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.


  • 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:

Javascript Code:

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

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

document.getElementById('btnFullscreen').addEventListener('click', function() {


*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