How To Create A Full-Width Page In Wordpress

Do you need to make a full-width page in WordPress? That is a page with material that spans the entire width of your website, and there’s no sidebar to obstruct things? Unfortunately, not all WordPress themes have full-width layouts. That may be why you’re reading this.

But don’t be concerned. We’ll show you how to utilize a completely free plugin to create a full-width layout for any WordPress theme. There is no need for technical knowledge! Let’s get this issue fixed.

Why don’t specific themes provide full-width page templates?

Each page you visit has a unique template; some have footers, while others have substantial hero portions, and some feature hidden menus and a variety of different layouts. Most page layouts, however, may be divided into two types.

The first is with sidebars, and the second is without. You can’t remove the element from sidebar-only layouts. However, sidebars may be helpful in many situations. On the other hand, aOn the other hand, a particular design may not necessitate it. As a result, you’ll frequently feel trapped.

The majority of contemporary themes allow you to use full-width layouts on any of your sites. Some articles, however, may not provide the same amount of adaptability. It may be a deal-breaker. However, switching themes is frequently inconvenient.

Create or modify a WordPress page to see whether your theme already has a full-width template. Then, in the sidebar, expand the Template drop-down under Page Attributes. If your theme already has a full-width template, you may skip this step and take advantage of it.

Some themes, like the free Neve theme, additionally have extra page options to allow you to customize the width of your page:

Image Provide Full-Width Page Templates

Suppose your theme does not have built-in options for controlling page width. Continue reading to learn how to add this feature to any theme using a free full-width page WordPress plugin.

When Should You Use a Full-Width Page Layout?

A complete width layout may be an excellent way to display visuals if you create usually an appealing website. You may maximize their impact by presenting them in their whole, sans sidebars.

And additional components that clog up your website’s space. For example, suppose you have a text-heavy blog or a news website. A complete width layout requires your customers to read through lines of content that span the entire width of the page.

It puts strain on the eyes. Tabs might be an excellent answer to this problem. However, for visual material, a complete width layout is still the best option. Even if the website you’re seeing isn’t a graphics-heavy portfolio, a complete width layout may offer your website a more dynamic, modern appearance.

A conventional, box-layout design, on the other hand, conveys a more serious, professional tone depending on the nature of your business. You might not be able to use a full-width layout.

Method 1: Use the Full-Width Template from Your Theme.

Suppose your theme has a full-width page template. Then it’s best to utilize it. Almost every decent WordPress theme does. Even the finest free WordPress themes frequently have a full-width template; as a result, there’s a high possibility you already have one.

First, go to Pages > Add New in your WordPress dashboard and update an existing page or create a new one.

In the content editor’s right-hand ‘Document’ window, click the downward arrow next to the ‘Page Attributes’ section to enlarge it.

You should then see a drop-down menu labeled ‘Template.’

Wordpress Pages

Suppose your theme has a full-width template. You will include it here. It should call ‘Full-Width Template’:

Page Attributes

Depending on your theme, the options you see here will vary. Don’t be concerned if your theme lacks a full-width page template. You may easily add one by following the instructions above.

Method 2: Using a Plugin, Create a Full-Width Page Template

It is the simplest way, and it works with all WordPress themes and page builder plugins; for this, you must first install and activate the Full-Width Templates plugin.

The Full-Width Templates plugin will offer three additional page template options:

  • FW No Sidebar eliminates the sidebar from your page while keeping everything else in place.
  • FW Full Width: eliminates the sidebar, header, and comments and expands the layout to full wide.
  • Full-width FW There is no header. Footer: eliminates all of the effects of FW Full Width. in addition to the header and footer.

Suppose you’re only going to utilize the built-in WordPress editor. Then, “FW No Sidebar” is most likely the best option. This plugin, on the other hand, allows you to build full-width page templates.

Method 3: Using a Page Builder Plugin, create a full-width page in WordPress.

If your theme lacks a full-width template. Then this is the simplest method to make. In addition, you may personalize a full-width template. Finally, it makes it simple to edit your full-width page and, using a drag-and-drop interface, you may build several page layouts for your website.

A WordPress page builder plugin is required for this technique. Let’s use Beaver Builder in this lesson. It is one of the most effective drag-and-drop page builder plugins. It also allows you to build page layouts without having to write any code.

Install and activate the Beaver Builder plugin first. Then, once you’ve turned it on, create a new page or edit an existing one.

On the right-hand side of your screen, in the ‘Document’ window. Next, navigate to ‘Page Attributes’ and choose a full-width template from the drop-down menu. Then, in the center of your screen, click the ‘Launch Beaver Builder’ button.

Image Showing Launch Beaver Builder

Now, construct your page using Beaver Builder’s drag-and-drop interface. Image Showing Beaver Builder'S Drag-And-Drop Interface

An excellent place to start is by selecting the Templates option at the top. Next, choose one of the pre-made templates to serve as the foundation for your full-width page.

Image Showing Templates Option

To pick a template, click on it. And it will be loaded by the page builder. You may then make changes to any of the components. Images, for example, that you wish to alter.

Rows and modules are used to construct Beaver Builder layouts and each row may have several columns.

You may also insert content modules and widgets within each row. To edit a row or module in the layout, click on it. In this instance. We’re making changes to the Heading module:

Image Showing To Edit A Row Or Module In The Layout

Beaver Builder will display the item’s details in a popup window where you can modify its settings. For example, you can alter the text and fonts. And colors, as well as adding or changing background images, among other things.

Image Showing Heading Module

You can add modules and widgets to your layout at any time. Beaver Builder includes a plethora of basic and advanced content modules which you can drag and drop into your page.

Image Showing Add Modules

When you’re finished editing, click the ‘Done button at the top of the page. After that, you can save or publish your draft.

How To Create A Full-Width Page In Wordpress

You can now go to your page to see your finished full-width page.

Method 4: Use SeedProd to Create Completely Custom Full-Width Landing Pages

While Beaver Builder is a helpful tool, it has the potential to cause your website to load slowly.

Suppose you build a unique landing page to change the header, footer, and other page parts. Then we propose that you use SeedProd. It is the most fantastic WordPress landing page plugin. It also has a highly user-friendly drag-and-drop page builder interface.

Image Showing Seedprod

You must first install and activate the SeedProd plugin. Then go to SeedProd » Pages after activation to add a new landing page. Please choose from one of their numerous pre-built templates. Alternatively, you may design your landing page from the start.

The incredible thing about SeedProd is how quick it is. It also includes conversion capabilities such as Subscriber management, email marketing service integration, and more.

Method 5: Manually Create a Full-Width WordPress Page Template

If none of the other techniques works for you, that is your final option. It necessitates editing your WordPress theme files. It would be best if you had a basic grasp of PHP, CSS, and HTML.

We recommend that you build a WordPress backup before proceeding. Or, at the very least, a backup of your existing theme. Then, if something goes wrong, you’ll be able to recover your site.

Next, launch a plain text editor, such as Notepad. And then copy and paste the following code into a blank file:

  1. The <?php

2. /*

3. *

4. Template Name: Full-5. Width

6. */

7. get_header(); ?>

On your PC, save this file as full-width.php. To prevent storing it as an a.txt file, set the ‘Save as type’ to ‘All Files’:

Image Showing Full-Width.php

That code specifies the name of a template file. And the requests that WordPress retrieve the header template.

The code’s content will be required next. Connect to your website using FTP (or your WordPress host). And navigate to /wp-content/themes/your-theme-folder/.

It would be best if you now located the file page.php. It is the default page template file for your theme.

Copy everything following the get header() line. And paste it into your computer’s full-width.php file.

Find and remove the following line of code from the full-width.php file:

1. <?php get_sidebar(); ?>

That line retrieves and shows the sidebar in your theme. By removing it, your theme will no longer display the sidebar when the full-width template is used.

This line may appear more than once in your theme if your theme includes several sidebars (footer widget areas are also called sidebars).

Then you’ll see that each sidebar is only mentioned once in the code. Determine which sidebars to maintain.

Suppose your theme does not support page sidebars. This code may not be present in your file.

Here’s how our full-width.php code appears after we’ve made the modifications. Depending on your theme, your code may appear somewhat different.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) :
the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or have at least one word, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_footer(); ?>

Then, using your FTP client, upload the full-width.php file to your theme folder.

You have now created successfully. And added a full-width page template to your theme. The following step is to utilize this template to make a full-width page. First, navigate to your WordPress administration area and then use the WordPress block editor to update or create a new page.

Look for ‘Page Attributes’ in the ‘Document’ window on the right. And, if required, click the downward arrow to expand that area. Next, you should see a ‘Template’ option to pick your new ‘Full Width’ template. After you’ve chosen a template, publish or change the page.

Image Showing Full Width' Template

When you look at the page, you’ll notice that the sidebars have vanished. And your page is shown as a single column. This is because it may not yet have full width.

However, you are now prepared to style it differently. To determine the CSS classes used by your theme to create the content area, utilize the Inspect tool.

After that, you may use CSS to increase its width to 100%. By navigating to Appearance » Customize, you may add CSS code. And you then click the ‘Additional CSS’ button at the bottom of the screen.

Image Showing Appearance » Customize

In our test site, we utilized the CSS code:

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 .site {

margin:0px;

}

Here’s how it appeared on our demo site, which was built using the Twenty Sixteen theme.

Image Showing Full Width Page

Suppose you wish to utilize the manual technique and customize it more. You can also use the CSS Hero plugin. It allows you to change CSS styles using a point-and-click editor.

However, for the majority of customers, we recommend utilizing your own theme’s full-width template. Alternatively, you could use a plugin to generate one.

Why Should You Use a Full-Width Page?

The purpose of using a theme is to make your website appear fantastic. While also showing all pertinent facts because every website provides different material in various ways. It is critical to make your website’s theme seem as good as possible and may sometimes imply putting your page layout in full-width mode.

The full-width page layout has several advantages. One of the most prevalent causes is that it makes the page appear more prominent than when using a boxed form. In addition, you’ll note that the website’s sides are usually filled with a solid color or an image. Filling these vacant spots with advertisements or sidebars is even more prevalent.

Using the full-width page layout on your home page is an excellent decision.

CONCLUSION

If your theme does not support full-width pages, use a different piece. It does not imply that you must replace it. However, in most situations, it is a significant annoyance.

It’s also much easier to design a full-width template. You can use it in conjunction with your current theme.

In WordPress, you may make a full-width template in 5 ways:

  • First, use the Full-Width Template from Your Theme.
  • Using a Plugin, Create a Full-Width Page Template
  • Using a Page Builder Plugin, create a full-width page in WordPress.
  • Use SeedProd to Create Completely Custom Full-Width Landing Pages
  • Manually Create a Full-Width WordPress Page Template
Load More Related Articles
Load More By Susana Taylor
Load More In Wordpress

Leave a Reply

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