How to Create a Full Width Page in WordPress

A full width page can really make your WordPress website pop, which is why so many premium themes come with a full width layout. However, in case you are not using a theme with a built-in full width page, you can easily use a plugin or the Elementor page editor to lay it out. We will show you how.

But first, you may be wondering: what exactly is a full width page? This question, and three methods of creating and laying out a full width page, are what this article is all about.

When to Use a Full Width Page Layout

A full width layout can be a great way to showcase graphics. If you are designing a visuals-forward webpage, you can use them to full effect by displaying them in the fullness of their glory, without sidebars and other elements cluttering your webpage space. If you are running a text-heavy blog or news website, a full width layout will mean that your users will have to read through lines of text stretching the full width of the page, which is a strain on the eyes. A good solution to this might be to introduce tabs, but a full width layout still works best for image content.

Even if the website you are looking at is not a graphics-laden portfolio, a full width layout may give your website a dynamic, modern look. Still, a traditional, box-layout design confers a more serious, professional tone. Depending on what kind of business you’re in, a full width layout may not be right for you.

How to Change a Page Layout To Full Width In a Theme

If your theme already has a full width layout, you are in luck. It will be easy enough to find. Simply load the page you want to lay out in full width, find the Page Attributes section in the Document tab of your right-hand side menu, and select the Full Width layout there.

And that is all there is to it. You can now continue to edit your full width page as you would any other page. The specific, of course, will depend on your theme.

How to Create a Full Width WordPress Page Using a Plugin

Now, if your theme lacks a full width page template, you can try modifying it using a plugin. The plugin we will be using is Fullwidth Templates. You need to install and activate the Fullwidth Templates plugin. If you are not sure how to install a plugin, we have a handy tutorial just for you.

Once you have done that, you will find that you have three new templates in the Page Attributes section of the page you are editing. FW Fullwidth simply creates a full width page in case your theme does not provide you with one, FW Fullwidth No Header Footer also removes the header and the footer for an ultra-minimalist look, and FW No Sidebar will only remove your sidebar, if you are using it, freeing up more space on your page.

Below, for instance, is what a page with just some placeholder text and an image looks like in FW Fullwidth No Header Footer mode: the plugin has cleaned up nearly everything. Of course, this makes for an extremely minimalist, no frills whatsoever solution considering the theme we are using (though it is pretty much guaranteed to be the fastest loading page we have ever created), but it may work for you depending on your content.

Bear in mind, though: this plugin was tested with a lot of the most popular themes and page builders, but, depending on the layout, might not work with yours. It is usually best to rely on the theme’s settings if you are not an experienced WordPress user.

How to Create a Full Width WordPress Page Using Elementor

If you are using Elementor, you are in luck: this page editor already has the functionality you need.. Find the page you wish to convert to full width, or create a New Page using the New Page command on your left-hand side menu. Next, click on the button to Edit with Elementor.

The next thing you want is the Settings (gear) icon. It is located at the bottom of the left-hand side menu.

Then, under the Page Layout menu, choose Full Width. But this just means that the page will allow content to stretch to full width.

In order to make your content take up the full width of the screen, you need to set that up using the element’s Layout settings. Simply click on the element’s Edit menu, and change its layout from the default Boxed to Full Width, and your content will now stretch fully between the vertical edges of the page.

And you are all set! See how only the second text section, the one whose layout we’ve changed from boxed to full width, stretches from margin to margin.

Note that your theme’s settings or a plugin’s settings (Page Attributes discussed above) may override Elementor’s page settings. That’s not much of a problem, you simply need to change the theme’s page settings to Full Width, too, as described above.

In Conclusion

As you can see, with Elementor, laying out a full width page in WordPress is no trouble at all. So, if you are aiming to impress desktop and mobile users alike with your responsive design skills, or if you are aiming to create a visually impressive and immersive webpage for your WordPress website, you now have an extra tool at your fingertips.