Do you need to create a full width web page in WordPress, so you’ll be able to stretch your content material throughout the display?

Most WordPress themes already include a built-in full-width web page template that you need to use. Nonetheless in case your theme doesn’t have one, then it’s simple so as to add it.

On this article, we are going to present you the way to simply create a full width web page in WordPress and even create totally customized web page layouts with none code.

How to create a full width page in WordPress

Technique 1. Use Your Theme’s Full Width Template

In case your theme already comes with a full width web page template, then it’s greatest to easily use that. Nearly all good WordPress themes do.

Even the greatest free WordPress themes typically include a full width template, so there’s a great probability you have already got one.

First, you might want to edit a web page or create a brand new one by going to Pages » Add New in your WordPress dashboard.

In the suitable hand ‘Doc’ pane of the content material editor, you might want to increase the ‘Web page Attributes’ part by clicking the downward arrow subsequent to it. You need to then see a ‘Template’ dropdown.

Viewing the 'Page Attributes' section in the 'Document' pane in WordPress

You probably have a full width template to your theme, it is going to be listed right here. It ought to be referred to as one thing like ‘Full Width Template’:

Select the full width template from the 'Template' dropdown

The choices you see right here will differ relying in your theme. Don’t fear in case your theme doesn’t have a full width web page template.

You’ll be able to simply add one utilizing the strategies beneath.

Technique 2. Create Full Width Web page Template Utilizing a Plugin

This technique is best and works with all WordPress themes and web page builder plugins.

First, you might want to set up and activate the Fullwidth Templates plugin. In case you’re undecided how to do this, take a look at our newbie’s information to putting in a WordPress plugin.

The Fullwidth Templates plugin will add three new choices to your web page templates:

The different options available for your page template using the Full Width plugin

These choices are:

  • FW No Sidebar: removes the sidebar out of your web page, however leaves every little thing else intact
  • FW Fullwidth: removes the sidebar, title, and feedback, and stretches the structure to full width
  • FW Fullwidth No Header Footer: removes every little thing that FW Fullwidth does, plus the header and footer

In case you’re going to easily use the built-in WordPress editor, “FW No Sidebar” will seemingly be the only option.

Whereas this plugin enables you to create full-width web page template, you’ve restricted customization choices.

If you wish to customise your full-width template with none code, then you might want to use a web page builder.

Technique 3: Design a Full Width Web page in WordPress utilizing a Web page Builder Plugin

In case your theme doesn’t have a full width template, then that is the best strategy to create and customise a full-width template.

It means that you can simply edit your full width web page and create completely different web page layouts to your web site with a drag & drop interface.

For this technique, you will have a WordPress web page builder plugin. On this tutorial, we’ll be utilizing Beaver Builder. It is likely one of the greatest drag and drop web page builder plugins, and it means that you can simply create web page layouts with out writing any code.

First, 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.

When you’ve activated it, both edit an present web page or create a brand new one.

Within the ‘Doc’ pane on the right-hand aspect of your display, go to ‘Web page Attributes’ and choose a full width template from the dropdown.

Subsequent, click on the ‘Launch Beaver Builder’ button within the heart of your display.

Using the Beaver Builder plugin to create your full width page

Now, use Beaver Builder’s drag and drop interface to create your web page.

The Beaver Builder drag and drop interface

A great way to start is by clicking on Templates tab on the prime. Choose one of many pre-made templates to make use of as the premise to your full width web page.

Select one of the Beaver Builder templates

Click on on a template to pick out it and the web page builder will load it. You’ll be able to then edit any of the weather, equivalent to photographs, that you just need to change.

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 have to click on on it. On this case, we’re modifying the Heading module:

Editing a heading using Beaver Builder

Beaver Builder will open the merchandise particulars in a popup the place you’ll be able to edit its settings. You’ll be able to change the textual content, change fonts and colours, add or change background photographs, and extra.

Editing the details of an item in Beaver Builder

You’ll be able to 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.

Adding a module in Beaver Builder

As soon as you’re completed modifying, click on ‘Completed’ on the prime of the web page. You’ll be able to then save your draft or publish it.

Saving or publishing your full width page in Beaver Builder

Now you can go to your web page to see your completed full width web page.

Technique 4. Create Utterly Customized Full-Width Touchdown Pages with SeedProd

Whereas Beaver Builder is a neat resolution, it does have the potential to decelerate your web site.

In case you’re seeking to create a very customized touchdown web page the place you need to customise the header, footer, and all areas of the web page, then we advocate utilizing SeedProd.

It’s the greatest touchdown web page plugin for WordPress, and it comes with an easy to make use of drag & drop web page builder interface.

SeedProd Page Builder

First, you might want to set up and activate the SeedProd plugin.

After activation, merely go to SeedProd » Pages so as to add a brand new touchdown web page. You’ll be able to merely choose from one among their many pre-built templates or create a customized touchdown web page from scratch.

One of the best half about SeedProd is that this can be very quick, and it comes with built-in conversion options for Subscriber administration, e mail advertising and marketing service integration, and extra.

Technique 5: Create Full Width WordPress Web page Template Manually

This technique is a final resort if not one of the above strategies give you the results you want. It requires you to edit your WordPress theme recordsdata. You’ll want some fundamental understanding of PHP, CSS, and HTML.

In case you haven’t carried out this earlier than, then check out our information on the way to copy / paste code in WordPress.

Earlier than going additional, we advocate that you just create a WordPress backup or a minimum of a backup of your present theme. This can make it easier to simply restore your website if one thing goes incorrect.

Subsequent, 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 Identify: Full-Width
*/
get_header(); ?>

Save this file as full-width.php in your laptop. Chances are you’ll want to alter the ‘Save as sort’ to ‘All Recordsdata’ to keep away from saving it as a .txt file:

Save the full-width template as a .php file

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

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

Now you might want to find the file web page.php. That is your theme’s default web page template file.

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

Within the full-width.php file, discover and delete this line of code:

1
<?php get_sidebar(); ?>

This line fetches the sidebar and shows it in your theme. Deleting it should cease your theme from displaying the sidebar when utilizing the complete width template.

You may even see this line 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. Resolve which sidebars you need to maintain.

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

Right here is how the entire of our full-width.php code takes care of making the modifications. 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
28
29
30
31
32
33
<?php
/*
*
Template Identify: 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();
            // Embody the web page content material template.
            get_template_part( 'template-parts/content material', 'web page' );
            // If feedback are open or we have now a minimum of one remark, load up the remark template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
            // Finish of the loop.
        endwhile;
        ?>
    </fundamental><!-- .site-main -->
    <?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_footer(); ?>

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

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

Head to your WordPress admin space and edit or create a brand new web page within the WordPress block editor.

Within the ‘Doc’ pane on the suitable, search for ‘Web page Attributes’ and click on the downward arrow to increase that part if essential. You need to see a ‘Template’ dropdown the place you’ll be able to choose your new ‘Full Width’ template:

Select the Full Width template you created from the Template dropdown

After choosing that template, publish or replace the web page.

If you view the web page, you’ll see that the sidebars have disappeared, and your web page seems as a single column. It will not be full width but, however you are actually able to model it in another way.

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

After which you can alter its width to 100% utilizing CSS. You’ll be able to add CSS code by going to Look » Customise and clicking ‘Further CSS’ on the backside of the display.

Adding CSS in the Theme Customizer

We used the next CSS code in our take a look at 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 the Twenty Sixteen theme.

Full width page preview

If you wish to use the guide technique and need to make additional customization, then you may also use the CSS Hero plugin which helps you to modify CSS kinds with a point-and-click editor.

For many customers, nonetheless, we advocate utilizing your personal theme’s full width template, or utilizing a plugin to create one.

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 greatest WordPress plugins to develop your web site, and our comparability of the most effective WordPress LMS plugins to create & promote programs.

You might also enjoy:

Leave A Comment

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