BlogThemes

How to Create a Full Width Page in WordPress

Do you need to create a full width web page in WordPress? Many WordPress themes already include a built-in full-width web page template that you need to use. Nevertheless some themes would not have that function. On this article, we’ll present you the way to simply create a full width web page in WordPress.

Creating a full width page in WordPress

Methodology 1: Utilizing a Constructed-in Full Width Template in Your WordPress Theme

This technique is really helpful in case your theme already comes with a full-width web page template.

First you have to edit a web page or create a brand new one by visiting Pages » Add New web page.

On the web page edit display screen, choose full width as your template underneath web page attributes meta field.

Selecting full width template

After choosing the total width template, you have to save your web page. You possibly can proceed modifying the web page so as to add extra content material or click on on the preview button to see it in motion.

Full width page using theme's full width template

When you don’t have full width template choice in your web page edit display screen, then which means your theme doesn’t have a full width web page template.

Don’t fear, we’ll present you the way to simply create a full-width web page with out altering your WordPress theme.

Methodology 2: Create Full-Width Web page Template Manually

This technique requires you to edit WordPress theme recordsdata and have some fundamental understanding of PHP, CSS, and HTML. When you haven’t completed this earlier than, then check out our information on the way to copy / paste code in WordPress.

Earlier than continuing any additional, you need to create a WordPress backup or at the least a backup of your present theme. It will aid you simply restore your website if one thing goes improper.

First, you want open a plain textual content editor like Notepad and paste the next code in a clean file:

1
2
3
4
5
6
<?php
/*
*
Template Title: Full-Width
*/
get_header(); ?>

Now you have to save this file as full-width.php in your laptop.

This code merely defines the identify of a template file and asks WordPress to fetch header template.

Subsequent, you’ll need the content material a part of the code. Connect with your web site utilizing an FTP shopper (or file supervisor in cPanel) after which go to /wp-content/themes/your-theme-folder/.

Now you have to find the file referred to as web page.php. That is your theme’s default web page template file.

Copy every little thing after the get_header() line and paste it in full-width.php file in your laptop.

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

1
<?php get_sidebar(); ?>

This line merely fetches the sidebar and shows it in your theme. Deleting it should cease your theme from exhibiting the sidebar when utilizing the full-width template.

You may even see this line seem greater than as soon as in your theme. In case your theme has a number of sidebars (footer widget areas are additionally referred to as sidebars), then you will notice every sidebar referenced as soon as within the code. You have to resolve which sidebars you need to maintain.

In case your theme doesn’t show sidebars on pages, then you could not discover this code in your file.

Right here is how our full-width.php code takes care of making the adjustments. Your code might look barely completely different relying in your theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
/*
*
Template Title: Full-Width
*/
get_header(); ?>
<div id="main" class="content-area">
    <fundamental id="fundamental" class="site-main" position="fundamental">
        <?php
        // Begin the loop.
        whereas ( have_posts() ) : the_post();
            // Embrace the web page content material template.
            get_template_part( 'template-parts/content material', 'web page' );
            // If feedback are open or we've at the least one remark, load up the remark template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
            // Finish of the loop.
        endwhile;
        ?>
    </fundamental><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Subsequent, you have to add the full-width.php file to your theme folder utilizing the FTP shopper.

You may have efficiently created and uploaded a customized full-width web page template to your theme. The subsequent step is to make use of this template to create a full-width web page.

Head over to the WordPress admin space and edit or create a brand new web page.

On the web page edit display screen, search for web page attributes meta field and click on on the drop down menu underneath ‘Template’ choice.

Select your full-width template

It is possible for you to to see your full-width template there. Go forward and choose it and save / replace the web page.

Now you’ll be able to go to your web site, and you will notice that sidebars have disappeared, and your web page seems as a single column. It might not be full-width but, however you at the moment are able to model it otherwise.

You will have to use Examine software to seek out out the CSS courses utilized by your theme to outline the content material space.

After which you can regulate it’s width to 100% utilizing CSS. We used following CSS code in our check website:

1
2
3
4
5
6
7
8
9
10
.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
.page-template-full-width .website {
margin:0px;
}

Right here is the way it seemed on our demo website utilizing Twenty Sixteen theme.

Full width page preview

Methodology 3: Create a Full Width Web page Utilizing Web page Builder Plugin

This technique is simpler and is really helpful for all customers. It permits you to simply edit your fullwidth web page and create completely different web page layouts to your web site.

For this technique you’ll need a WordPress web page builder plugin. For the sake of this tutorial, we can be utilizing Beaver Builder. It is without doubt one of the finest drag and drop web page builder plugins, and it permits you to simply create web page layoutswithout writing any code.

Very first thing you have to do is set up and activate the Beaver Builder plugin. For extra particulars, see our step-by-step information on the way to set up a WordPress plugin.

Upon activation, you have to edit an current web page or create a brand new one.

On the web page edit display screen, underneath the web page attributes part you have to choose the fullwidth template supplied by your WordPress theme.

Select fullwidth template

In case your theme doesn’t have a full width template, then you’ll be able to create one by following directions talked about within the second technique.

After choosing your web page template you have to click on on the save draft button to retailer your web page.

Now you might be prepared to make use of the web page builder plugin to create your structure. You’ll begin by clicking on the web page builder tab above the web page editor.

Launch page builder

It will launch the web page builder interface the place it is possible for you to to see a reside preview of your web page with web page builder choices.

Beaver Builder interface

You can begin by clicking on Templates button on the high. Beaver Builder comes with a number of ready-to-use and professionally designed templates that you need to use as an place to begin.

Select a template

You possibly can simply click on on a template to pick it and the web page builder will load it for you together with the structure, photos, and content material. You may also click on on the clean template to start out and not using a readymade template and create your individual structure.

Beaver Builder layouts are constructed with rows and modules. Every row can have a number of columns and inside every row you’ll be able to add content material modules and widgets.

To edit a row or a module within the structure, you simply must level and click on on it.

Point and click to edit an item

Beaver Builder will open the merchandise particulars in a popup the place you’ll be able to edit its settings. You possibly can change colours, fonts, add background picture, change textual content, and so on.

Editing an item in Beaver Builder

You possibly can add modules and widgets at any time to your structure. Beaver Builder comes with many fundamental and superior content material modules which you can simply drag and drop into your web page.

Add modules into your page layout

As soon as you might be completed modifying, you’ll be able to click on on the ‘Executed’ button on the high. It will present you a popup the place you have to click on on the save or publish button.

Save or publish your page

Now you can go to your web page to see it in motion.

We hope this text helped you learn to simply create a full width web page in WordPress. You may additionally need to see our information on the way to add a full display screen background picture in WordPress.

Download The WPSaviour App Now

Related posts
Beginner’s GuideBest WordPress PluginsBlog

9 Best Social Proof Plugins for WordPress & WooCommerce (2020)

Tips

How To Disable The WordPress User Admin Toolbar

Tips

WordPress Front Page vs Homepage

Tips

5 Things You Must Avoid Doing in WordPress

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro