Create complete-width web page in WordPress with simple steps

Do you need to create a complete-width web page in WordPress, so that you can stretch your content material throughout the screen?

Most WordPress issues already include an integrated complete width web page template that you could use. However in case, your subject matter doesn’t have one, then it’s smooth to feature it.

In this article, we can display you the way to without difficulty create a complete-width web page in WordPress or even create absolutely custom web page layouts with no code. Buy Premium WordPress themes from our website at discounts.

Here are Five methods to create a complete-width web page

If your subject matter already comes with a complete-width web page template, then it’s high-quality to genuinely use that. Almost all excellent WordPress themes issues do.

1. Use Your Theme’s Full-Width Template

Even the high-quality loose WordPress issues regularly include a complete width template, so there’s a terrific risk you have already got one.

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

In the proper hand ‘Document’ pane of the content material editor, you want to increase the ‘Page Attributes’ phase by clicking the downward arrow subsequent to it. You ought to then see a ‘Template’ dropdown.

If you've got got a complete width template on your subject matter, it is going to be indexed right here. It has to be known as something like ‘Full-Width Template’:

The alternatives you notice right here will vary in replying to your subject matter. Don’t fear in case your subject matter doesn’t have a complete-width web page template.

You can without difficulty upload one the use of the strategies below.

2. Create Full-Width Page Template Using a Plugin

This technique is simplest and works with all WordPress topics and web page builder plugins.

First, you want to put in and spark off the Fullwidth Templates plugin. If you’re now no longer certain the way to do that, take a look at our beginner’s manual to put in a WordPress plugin.

The Fullwidth Templates plugin will upload 3 new alternatives for your web page templates:

These alternatives are:

No Sidebar: gets rid of the sidebar out of your web page, however, leaves the whole lot else intact

Fullwidth: gets rid of the sidebar, title, and comments, and stretches the format to complete width

Fullwidth No Header Footer: gets rid of the whole lot that FW Fullwidth does, plus the header and footer

If you’re going to genuinely use the integrated WordPress editor, “FW No Sidebar” will in all likelihood be a great choice.

While this plugin helps you to create a complete-width web page template, you’ve constrained customization alternatives.

If you need to customize your complete-width template with no code, you then definitely want to apply a web page builder.

3. Design a Full-Width Page in WordPress with the use of a Page Builder Plugin

If your subject doesn’t have a complete width template, then that is the very best manner to create and customize a complete-width template.

It permits you to without problems edit your complete width web page and create exceptional web page layouts in your internet site with a drag & drop interface.

For this method, you may want a WordPress web page builder plugin. In this tutorial, we’ll be the use of Beaver Builder. It is one of the great drag and drops web page builder plugins, and it permits you to without problems create web page layouts without writing any code.

First, set up and prompt the Beaver Builder plugin. For greater details, see our grade-by-grade manual on a way to set up a WordPress plugin.

Once you’ve activated it, both edit a current web page or create a brand new one.

In the ‘Document’ pane at the right-hand aspect of your screen, cross to ‘Page Attributes’ and choose a complete width template from the dropdown.

Next, click on the ‘Launch Beaver Builder’ button withinside the middle of your screen.

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

A suitable manner to start is with the aid of using clicking on the Templates tab on the top. Select one of the pre-made templates to apply as the idea to your complete width web page.

Click on a template to pick it and the web page builder will load it. You then edit any of the elements, consisting of images, which you need to alternate.

Beaver Builder layouts are constructed with rows and modules. Each row could have more than one column and inner every row, you may upload content material modules and widgets.

To edit a row or a module withinside the layout, you simply want to click on it. In this case, we’re modifying the Heading module:

will open the object information in a popup wherein you may edit its settings. You can alternate the text, alternate fonts and colors, upload or alternate history images, and more.

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

A suitable manner to start is with the aid of using clicking on the Templates tab on the top. Select one of the pre-made templates to apply as the idea to your complete width web page.

Click on a template to pick it and the web page builder will load it. You can then edit any of the elements, consisting of images, which you need to alternate.

Beaver Builder layouts are constructed with rows and modules. Each row could have more than one column and inner every row, you may upload content material modules and widgets.

To edit a row or a module withinside the layout, you simply want to click on it. In this case, we’re modifying the Heading module:

will open the object information in a popup wherein you may edit its settings. You can alternate the text, alternate fonts and colors, upload or alternate history images, and more.

You can upload modules and widgets at any time for your layout. Beaver Builder comes with many fundamental and superior content material modules that you may simply drag and drop into your web page.

Once you're completed editing, click ‘Done’ on the pinnacle of the web page. You can then store your draft or put up it.

You can now go to your web page to peer your completed complete-width web page.

4. Create Completely Custom Full-Width Landing Pages with SeedProd

While Beaver Builder is a neat solution, it does have the ability to gradually down your website.

If you’re seeking to create a very custom touchdown web page wherein you need to customize the header, footer, and all regions of the web page, then we endorse the use of SeedProd.

It is the nice touchdown web page plugin for WordPress, and it comes with a completely clean to apply drag & drop web page builder interface.

First, you want to put in and set off the SeedProd plugin.

After activation, truly visit SeedProd » Pages to feature a brand new touchdown web page. You can truly choose from one in every of their many pre-constructed templates or create a custom touchdown web page from scratch.

The nice element approximately SeedProd is that it's miles extraordinarily fast, and it comes with integrated conversion functions for Subscriber management, electronic mail advertising and marketing carrier integration, and more.

5. Create Full-Width WordPress Page Template by Yourself

This technique is the ultimate in like if not one of the above strategies paintings for you. It calls for you to edit your WordPress subject matter files. You’ll want a few simple know-how of PHP, CSS, and HTML.

If you haven’t performed this before, then check our manual on a way to copy/paste code in WordPress.

Before going further, we advise which you to create a WordPress backup or at the least a backup of your cutting-edge subject matter. This will assist you effortlessly in repairing your web website online if something is going wrong.

Next, open a simple textual content editor like Notepad and paste the subsequent code in a clean report:

Save this report as full-width. Hypertext Preprocessor in your computer. You may also want to extrude the ‘Save as type’ to ‘All Files’ to keep away from saving it as a .txt report

This code truly defines the call of a template report and asks WordPress to fetch the header template.

Next, you may want the content material a part of the code. Connect for your internet site the usage of an FTP client (or your WordPress web website hosting report supervisor in cPanel) after which pass to /wp-content material/themes/your-theme-folder/.

Now you want to find the report web page. Hypertext Preprocessor. This is your theme’s default web page template report.

Open that report and replica the whole thing after the get_header() line and paste it into the full-width. Hypertext Preprocessor report in your computer.

In the full-width. Hypertext Preprocessor report, locate and delete this line of code:

This line fetches the sidebar and presentations it on your subject. Deleting it's going to prevent your subject from displaying the sidebar while the use of the whole-width template.

You can also additionally see this line greater than as soon as on your subject. If your subject has a couple of sidebars (footer widget regions also are referred to as sidebars), then you'll see every sidebar referenced as soon as withinside the code. Decide which sidebars you need to keep.

If your subject doesn’t show sidebars on pages, you can now no longer discover this code on your file.

Here is how the completion of our full-width. personal home page code seems after making the changes. Your code can also additionally appear barely exclusive replying on your subject.

Next, add the complete width personal home page record in your subject folder the usage of your FTP client.

You have now efficiently created and uploaded a custom complete width web page template in your subject. The subsequent step is to apply this template to create a complete-width web page.

Head in your WordPress admin place and edit or create a brand new web page withinside the WordPress block editor.

In the ‘Document’ pane at the right, appearance for ‘Page Attributes’ and click on the downward arrow to amplify that phase if necessary. You ought to see a ‘Template’ dropdown in which you could choose your new ‘Full Width’ template:

After deciding on that template, put up or replace the web page.

When you view the web page, you’ll see that the sidebars have disappeared, and your web page seems like an unmarried column. It might not be complete width yet, but you're now prepared to fashion it differently.

You will want to apply the Inspect device to discover the CSS instructions utilized by your topic to outline the content material area.

After that, you may alter its width to 100% after users of CSS. You can upload CSS code by going to Appearance » Customize and clicking ‘Additional CSS’ at the lowest of the screen.

If you need to apply the guide technique and need to make similar customization, then you may additionally use the CSS Hero plugin which helps you to alter CSS patterns with a point-and-click on the editor.

For maximum users, however, we advocate the use of your personal theme’s complete width template, or the use of a plugin to create one.

We desire this newsletter helped you discover ways to without difficulty create a complete-width web page in WordPress. You may need to look at our manual on the exceptional WordPress plugins to develop your website, and our evaluation of the exceptional WordPress LMS plugins to create & promote courses. Also check HTML WordPress Themes, article by VWTHEMES.

You get a complete package of WordPress themes on VWthemes named as WordPress theme bundle.

Back to blog