Skip to Main Content

How to create a full width page on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Do you want to create a full-width page on WordPress?

A lot of WordPress themes already come with a built-in full width page template that you can use. However, some WordPress themes do not have this feature. In this tutorial, we will show you how to easily create a full-width page on WordPress.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

create a full width page in WordPress

Method 1: Using a built-in width template on your WordPress theme

This method is recommended if your WordPress theme is already provided with a full-width page template. If you don't have one, check out the following selection and get one.

First you need to edit a page or create a new one by visiting " Pages> Add " a new page.

On the page edit window, select Full Width as a template under the page attributes check box.

Selection of the page template

After selecting the model Full Widthyou must register your page. You can continue to customize the page to add more content or click the preview button to see it in action.

Page with full width

If you don't have a Full Width - Full Width - template option on your page edit screen, it means your WordPress theme doesn't have it. 

But, do not worry, we'll show you how to easily create a full-width page without changing a WordPress theme.

2 Method: How to Create a Page Template with a Full Width

This method requires you to edit the files of the WordPress theme you are using and to have a basic understanding of PHP, CSS and HTML.

By the way, we also invite you to consult the 8 best WordPress plugins to easily create your layouts 

But, before going any further, you must create a WordPress backup or at least a backup of your current WordPress theme. This will help you easily restore your website if something bad happens. 

First, you need to open a text editor like Notepad and paste the following code into a blank file:


Now you need to save this file as " Full-width.php On your computer.

This code simply sets the name of a file template and tells WordPress to extract the header template.

Next you will need the content part of the code. Connect to your website using an FTP client (Or file manager in cPanel) then go to " / Wp-content / themes / your-theme-folder / ».

Then you have to locate the file called " page.php ". This is the default page template file for your theme.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Copy everything after the function « get_header () And paste it into a file " Full-width.php That you have created on your computer.

Now you have to look at the contents of the file "full-width.php" and delete this line of code:

This line simply takes the sidebar and displays it in your WordPress theme. By removing this, your theme will not show the sidebar when using the template Full Width.

You may see this line appear more than once on your WordPress theme. If your WordPress theme has several sidebars (widget areas the footer are also called sidebars)you will see each sidebar referenced once in the code. You must decide which sidebars you want to keep.

Your website seems to be loading slowly, discover Why you need to start optimizing your WordPress blog by images

If your theme does not display sidebars on your page, you may not find this code in your file.

This is how our full-width.php code takes care of making the changes. Your code may look slightly different depending on your theme.



    
        

    


Then you have to download the file Full-width.php »On your WordPress theme folder using the FTP client.

You have successfully created and uploaded a custom full width page template to your theme. The next step is to use this template to create a full width page.

Head to your dashboard and edit or create a new page.

On the page edit screen, locate the page attributes checkbox and click the drop-down menu under the "Template" option.

Selection of the model in the edition of wordpress pages

You will be able to see your model. Go ahead, select it and save or update the page.

Now you can visit your website, and you will see that the sidebars are gone, and your page appears as a single column page. It might not be full yet, but now you are ready to stream it differently.

Make your website popular by discovering the 7 WordPress plugins to optimize the SEO of your images

You will need to use the Inspect tool to discover the CSS classes your theme uses to define the content area.

Then you can adjust its width to 100% using CSS. We used the following CSS code:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

.page-template-full-width .content-area {width: 100%; Margin: 0px; Border: 0px; Padding: 0px; } .page-template-full-width .site {margin: 0px; }

Here's how it will look like Twenty Seventeen.

Presentation of demo theme wordpress

That's all for this tutorial, I hope it will allow you to create full-width pages.

The above methods are free for those who can afford and want to quickly create full width or full width layouts easily.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Divi Builder

Divi Builder is a high quality builder of pages very appreciated by Elegant themes. Although it is generally used as part of the Divi WordPress theme, Divi Builder is also a standalone plugin that you can use on other WordPress themes.

Divi e1544278044306

Divi Builder allows you to edit your content using a visual interface on the front-end as well as an interface on the back-end, although most users prefer the first interface.

Basically instead of the sidebars it's all in popups and floating buttons. It gives you access to 316 pre-designed templates spread across 40 different presentation packs, as well as the ability to save your own designs as templates.

We propose you to discover How to create a professional blog

One of Divi's traits has always been the control of the styles he gives you. On three different tabs, you can configure various settings, including responsive controls, customizable spacing, and more.

You can even add custom CSS, as its CSS editor includes basic validation and auto-completion. One of the criticisms of Divi Builder has always been that it relies on shortcodes. Which means that if you disable it one day, it will leave a bunch of shortcodes in your content. Although this is a little depressing, it is less of a problem now that plugins like Shortcode Cleaner exist.

Download | Demo | Web hosting

2. Themify Builder

Themify Builder is, unsurprisingly, the offering of the Themify team. It integrates it into several of their WordPress themes to provide customers with simple customization options. But you can also buy it as a standalone plugin and use it with any WordPress theme.

Themify builder animation screen e1544277050530

Like Divi Builder and WPBakery Page Builder, Themify Builder allows you to create layouts in the front-end or back-end. Another good thing is that this plugin allows you to customize your responsive breakpoints (but only at the whole website level).

Discover How to install and configure WooCommerce to create an online store and easily sell your products on the Internet 

An interesting thing about Themify Builder is that it still allows you to use the standard WordPress editor, while other page builders force you to use the Page Builder interface for everything.

Download | Demo | Web hosting

3. Elementor

Originally launched in 2016, the Elementor WordPress plugin is one of the youngest page builders on this list. Despite its late start, Elementor quickly racked up over 1 active installs on WordPress.org, making it one of the most popular WordPress page builders.

Elementor pro e1544277036401
What makes its reputation is its fluid visual interface, its different style options and other powerful features such as the complete creation of WordPress themes.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Its interface is divided into two main parts, with a third zone for certain parameters. The free version of Elementor offers 28 free widgets. The Pro version brings about 30 other widgets, a total of 58 widgets in the Pro version. The free version includes about 40 free templates, while the Pro version brings hundreds of additional templates.

 Download | Demo | Web hosting

Other recommended resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here is ! That's it for this tutorial. If you have a WordPress theme that does not offer a Full Width page as a template, then we hope this tutorial has helped you solve that shortcoming. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

... 

This article features 1 comment

  1. Hello; Hi,
    I have the theme "thethetheen" and I followed the 2x method to create a house without sidebars. It works in the sense that on the left it leaves the menu bar, empty, but the color remains. You see the empty sidebar and therefore the cmq page is asymmetric

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
10 shares
Share8
tweet1
Save1