How To Create a Full Width Page in WordPress Using Elementor?

This guide explains all the ways to create a full-width page in WordPress using Elementor, that spans from right to left. The content of the page should take 100% of the screen's width, no matter which theme you are using.

How to Tell If Your Theme is Really Full Width

A lot of free and premium themes claim to be full width, but in fact are not. Here is an easy way to find out if you can create full-width pages on your theme:

  • Create a new page, and choose a full-width template in the WordPress backend editor
  • Click on 'Edit With Elementor'
  • Click on one of the sections, and on the left panel, under "Layout", change the width from "Boxed" to "Full Width"
  • Under "Background & Border", change the background color to green
  • Now click on preview mode, and see if the green area spans the entire width of the screen, from left to right.

If you are having issues with your theme in getting pages to full width, check out these 3 options:

New! Option 1 - Use Stretch Section

We have added a Stretch Section feature, that bypasses the theme limitations by using JavaScript and makes the section span to full width, from left to right. Bare in mind this is not a best practice when it comes to coding standards, but can be used as a quick fix to full-width issues.

To set it, go to Section > Layout > Stretch Section and switch it to 'Yes'.

The following paragraph may confuse you, so if it does just skim through it.

We have also added another option in the Elementor Admin Dashboard, that lets you assign a selector to which the full width will stretch to. For example, you can set this to "#Wrapper", and then the full width will stretch to the wrapper id.

Option 2 - Use a Theme That Supports Full Width

Elementor lets you edit the page within your theme. Many premium themes, like Pojo themes, for example, come with a built-in full-width template. 

To use the full-width template, go to the WordPress editor. Under "page attributes" select "Full Width". This still does not guarantee the page to be full width, and you still need to check the previously mentioned steps to find out if it truly is full width.

Option 3 - Use a Child Theme With Full Width

A lot of themes, like TwentySixteen, don't come with full-width templates out of the box and require you to install a child theme or install a plugin that adds a full-width template to the theme.

Full Width With TwentySixteen

1. Install the  Twenty Sixteen Child theme we've built for you.

2. Go edit the page you created, and under "Page Attributes" select the "Full Width" template. 

3. Go through the 4 steps mentioned earlier, and check to see the green color spans through the whole width of the page.

4. Now you can design any page on Elementor with truly full-width sections.