4 Methods to Fix Elementor Full Width not working (No.4 is Super Simple)

Quick Note: No additional elementor addons & pro version required. You can fix the elementor full width not working in the free version as well as the pro.

So you already know the definition of the Elementor full-width page & using it instead of the Elementor canvas layout.

If not then here’s a quick explanation…

✍ An Elementor full-width page means the content stretches from right to left and takes 100% of the screen width while displaying elementor created content along with your website header, footer & sidebar (if enabled)

But unfortunately, the page isn’t set to full width & the editor isn’t extending to the full width of your screen. Several factors from theme settings to single-page layouts can cause the issue with properly creating a full-width page.

Well, no worries as the below listed 4 methods will help you fix the elementor full width not working issue in minutes.

Let’s keep things simple & start from the basics…

Method 1: First & foremost, Cross check the Post & Page attributes inside the Elementor editor & set the page layout as full-width

If your theme does not support a full-width layout, you may experience this issue & to override the settings, you’ll simply need to enable a full-width page layout inside the elementor editor.

To do this, simply click on the little gear icon in the left corner to enter the page/post settings. 

Next up, right next to page layout options, select the Elementor full width from the dropdown & then click on update to save the changes as shown in the video below…

Once done, check your page in a new tab or better to check in an incognito window (just to avoid caching issues) & see if the problem is solved or not.

If yes, voila!

You can get back to work & if not, stay with me & follow the second method.

Method 2: Try making a fresh start but an easy one to fix the elementor full width not working issue

Sometimes the simplest-looking things are the most effective ones.

I’ve experienced several issues with Elementor editor, be it the full-width issue, server error issue, or setting the accordion widget to start closed & whatnot.

And whenever I face this issue, this is the simplest thing to do…

Step 1: Create a New Page with Elementor

Step 2: Before doing anything inside the editor, Set the page layout as “Elementor full width” from the page settings

Step 3: The last step is to simply copy all the content from your old page to the new one & hit update. This works like a charm. So give it a try.

Here’s a quick video tutorial for the same that you can watch at 1.5x speed…

Method 3: Try the Canvas layout & manually set up headers & footers

If both of the above methods didn’t work then the last known method is to simply set the page layout to “Elementor canvas layout”.

In both the elementor full-width & canvas layout,  the content stretches from right to left and takes 100% of the screen width.

But the only difference between the elementor canvas and the elementor full-width layout is the canvas layout won’t show your website header, or footer while the full-width layout will display elementor created content along with your website header, footer & also the sidebar (if enabled)

So, if you’d like to have your website header & footer, then simply copy & paste your header & footer section (if created with elementor page builder)

To conclude…

For your elementor-created page, set the page layout from the page/post settings to “Elementor Canvas”.

This will result in a full-width layout & will erase your site header & footer.

Next up, 

If you want your site header & footer to be on this page & if you have created your website header & footer with an elementor, simply copy-paste the header & footer sections to this elementor page.

This way, you've your site header, and footer & the page layout is also full-width.

Method 4: Install the “Fullwidth templates” plugin & get the job done in secs

Most WordPress folks don’t prefer adding a plugin for such little things but if you’re not one of them, then you’ll find this one easy.

Fullwidth templates for any theme & page builder – It’s a plugin by Brainstorm Force that simply does what the title indicates. It helps you add full-width page templates to any page/post irrespective of your theme & page builder.

The plugin comes with 3 following templates…

• FW Full-width: Similar to Elementor’s full-width template. No sidebar, page title, or comment section.
• FW Fullwidth No Header Footer: A completely blank canvas.
• FW No-sidebar: The name says it all, it simply removes the sidebar of your theme.

Here’s the step-by-step guide on how to set a fullwidth page/post using the fullwidth plugin…

Step 1: Hover over the Plugins section in your Admin area and click on “Add New”

Step 2: Search for “fullwidth templates”

Step 3: Install & activate the plugin. There are no settings required, so move to the next step.

Step 4: Add a fullwidth template to the page you want

Now here's something you need to know…

• This plugin works with Gutenberg as well as page builders and adds full-width templates to any theme you're using
• This plugin works without page builders, so it's not necessary to have one
• Deactivating or uninstalling the plugin will revert the changes

Now that you know it works well with Gutenberg, simply add a new page or edit the existing one & then in the blocks settings (on the right-hand side), under the post/page settings, look for “Template” settings.

Step 5: Set Template as “FW Fullwidth”

Click on the template anchor link & then in the popup, Select “FW full-width” from the dropdown menu & then save/update changes.

That's it! Now, Shout hurray!

Just kidding, back to your work dude :D

By now, you should have successfully fixed the elementor full width not working issue.

Did method 4 of adding a plugin work for you? Or the second one?

Do let me know which method worked for you so that other elementor folks reading this post benefit from the same. Also, your comment encourages me to create more elementor tutorials & guides.

Also, do give it a share if you think this tutorial might be helpful to other elementor users.

More Elementor Tutorials:
1) How to set the Elementor Landing page as Homepage
2) How to set Elementor accordion closed by default
3) How to add custom fonts to Elementor
4) How to add iFrames in Elementor