Create Full-Width Pages in WordPress : Using a full-width page can give a great hit to your website. As full-width pages connect directly with the content rather than having any sidebars.

A Full-Width page is where you can easily display your large content without any mess. The focus will be on your content, with no popups or extra content.

However, WordPress Themes mostly hold this Full-width page feature. But what if your theme does not support this feature?

Not to worry, we are here to help you create a Full-Width Page in WordPress. We are going to display some easy methods to help you create a full-width page.

Let’s get started.

How to Create Full-Width Pages in WordPress

• Method 1: Create Full-Width Page using Theme’s Full-width template
• Method 2: Create Full-Width Page Template using a plugin
• Method 3: Create Full-Width Page using a page builder plugin
• Method 4: Create Full-Width Page Manually

Method 1: Create a Full-Width Page using the Theme’s Full-width template

The first method to create a full-width page is the easiest one. And that too if your theme holds the full-width template feature. Well, almost all WordPress themes do have this feature. Even, the free themes also come with this feature. So, it becomes easier to add a full-width page to your website.

• Firstly, add a new page from the Page section under the WordPress dashboard.
• Click on the Add New button and this will create a new page for you.
• Next, hover over the Page Attributes in the content editor section on the right-hand side. You will then see a Template dropdown list.
• From there, you will find different template options along with the Full Width Template. It is not obvious that your theme should have this option. If it has, then you should select and the Full-Width Page will be displayed.

Method 2: Create a Full-Width Page Template using a Plugin

The second method we are going to use is by using a plugin. This is also an easier method to create a full-width page template as it works for all themes and page builder plugins.

For this tutorial, we are going with one of the popular plugins called the Fullwidth Templates plugin.

Firstly, you need to install and get the plugin activated on your website. The activation process will add three new options under the dropdown list of the page attributes. And the options are:

• FW No Sidebar. This option deletes the sidebar from the page without losing any content. This option goes best if you are just using the WordPress built-in editor.

• FW Full-Width. This option deletes the sidebar, title, and comments and makes a full-screen layout of the page. This is the actual motive behind this plugin to create a full-width page but it has limited customizations.

• FW Fullwidth No Header Footer. This option will remove everything from the page along with the header and footer.

Method 3: Create a Full-width page using a Page Builder Plugin

The third method comes in contact where we are going to create a full-width page using a page builder plugin.

This also seems a simpler method where you get to use the drag-and-drop feature for designing page layouts.

With so many page builder plugins out there in WordPress, we are moving ahead with the Thrive Architect plugin. It is one of the best page builder plugins having drag-and-drop features and no access to codes.

• Get the Thrive Architect plugin installed and activated on your website.
• Now create a new page from the Page section under the WordPress dashboard.
• You will see the Launch Thrive Architect Button at the top of the page and Press it.
• This will take you to the prompt to choose which type of page you wish to create. Either you can go for a normal page or a pre-built landing page.
• We are clicking on the pre-built landing page.
• This will take you to the plugin’s template directory and choose from it according to the full-width page. Then, tap the template you chose to place.
• The template page will display a grid of default templates named “Smart Landing Page Sets”. You can now choose from a variety of options for creating a page.
• And for this guide, we are going to tap on the Sales Page template and then press the Apply Template. And this will load the template.
• Being on the Thrive Architect editor, you can easily customize the images, background, text and much more. Editing elements on it is just a click away. Simply click on the particular element to place it on your page. Clicking on an element will display the editing section on the left side.
• For example, you have clicked on the background option, then you find certain options to apply. You can even enable the button to make sure that the content covers the whole screen.
• Moreover, the thrive architect editor comes with various basic and advanced looks to apply using drag and drop features.
• Once done, click the upward arrow next to the Save Work Button. Then, tap the Save and return to the post editor option.
• Once done, you will be able to publish your draft. Also, you can visit your blog page to see the full-width page.

Method 4: Create Full-Width Page Manually

This method counts last if none of the above methods works for you. This brings editing the WordPress Theme files and requires basic knowledge of codes.

Before moving forward, it is recommended to take a full backup of your site. Or at least back up your current theme. If in case of any mishap, you will be able to restore your content.

Once the backup is done, open any text editor or the Notepad on your device and paste this code:

<?php

/*

*

Template Name: Full-Width

*/

get_header(); ?>

• Now, you have to save this file with the name “full-width.php” on your PC. While saving, change the file type to “All Files” to avoid saving it as a .txt file.
• The above code simply defines the template name and then it asks WordPress to fetch the header file.
• After the header part, you just need the content part, right? For this, you have to connect to an FTP client and then visit the /wp-content/themes/your-theme-folder/.
• Here, you have to locate your theme’s default page template file named page.php.
• You have to open this file and copy the whole code after the get_header() line. Then, paste this part to the “full-width.php” file on your device.
• Make sure you delete this part of the file:

<?php get_sidebar(); ?>

• This line will display the sidebar on your full-width page. So you must remove this line from the file. You may find more such lines of code on your file and decide which sidebars are required. Also, there will be no such line of code if your theme does not have any sidebar on pages.
• And after removing all the sidebar codes and making changes, you need to upload this file to your theme folder using the FTP client.
• This is how you are done creating and uploading a custom full-width template file on your theme. Now, you are ready to create a full-width page template on your website.
• Move your mouse cursor ahead to the WordPress dashboard and create a new page in the WordPress bloc editor.
• On the right side of the page, again look for the Page Attributes option and tap the dropdown list. Here, you will the Template menu and text box to select the type of template. Choose the Full-Width option and tap the Publish button on the top.
• If in case, your page occurs with some sidebars, then you must use styles to make it look full-width.
• After this, you have to use the Inspect the Tool to locate the CSS classes by your theme for defining the content area. Then you have to use the CSS to expand its width up to 100%.
• Also, you can add the CSS code by visiting the Appearance tab and then the Customize button. Tap the Additional CSS at the bottom part of the page.
• You can use the following CSS code:

.page-template-full-width .content-area {

width: 100%;

margin: 0px;

border: 0px;

padding: 0px;

}

.page-template-full-width .site {

margin:0px;

}

And this will help you display the whole page in a full-width proportion.

The manual process may seem a little bit crucial for non-developers. Hence, we recommend using the above three methods to create a Full-width page in WordPress.

Conclusion

Have you understood well about all the methods for creating a full-width page in WordPress? Well, we have made it too easier for you to understand all the methods. The first three methods are easy and even beginners can use it. The last one, the manual process is for the developers and those who have coding skills. So, start applying one of the methods for creating a full-width page on your website.