• home
  •  > 
  • Desktop, desktop
  •  > 
  • WordPress increase the width of the template, or stretch the side menu and articles section. How to create a full page width in WordPress How to expand a theme in WordPress

WordPress increase the width of the template, or stretch the side menu and articles section. How to create a full page width in WordPress How to expand a theme in WordPress

It often happens that the theme you like has a narrow area for entries and its settings do not allow for changing the width. In this case, it can be increased with minimal knowledge HTML And CSS. For example, we use the popular, free theme Patagonia. You can expand your theme using a great plugin Firefox— Firebug. First you need to install it by downloading it from here. Then turn it on plugin, as it shown on the picture - Tools Tab — Web development — Firebug — open Firebug:

After this, at the bottom of the screen, you need to move the cursor and click the mouse to select various elements. In this case, on the right side, it will be displayed CSS styles, and in the page area, one or another area will be highlighted - the main one, sidebar, header. We are now interested in the main area that we will end up in when we “enter” the tag

. A fragment of the file will be displayed on the right side style.css. And here you can see that the width of the main area is 580 pixels. And this is not enough for our needs.

Eg, increase the width main area from 550 pixels to 620. To do this, you need to make changes to the line width: 550px file style.css. If the theme is already installed, you can edit this file directly from the admin panel; if not, then you need to unpack the archive with the theme and make changes to the file using the editor. In our case, the theme is installed, so go to admin panel— Appearance — Editor— open the style.css file, search for the line width: 550px and change the width value 550px to 620px. Click Update file.

We go to the site and see that the area of ​​posts has expanded, but in some places it has overlapped the right column. In this case, we need to proportionally narrow this area. For this we will also use Firebug plugin, as in the previous case. Finding the tag

>. In file style.css, we see that the width of the sidebar is not set explicitly using the property width, and with the help margin: 0 0 0 580px;

We follow the same procedure with editing style.css as in the previous case with the main area, only now we edit the line margin: 0 0 0 580px; We change the indent value in it from 580px to 630px. Now everything is fine. The recording area has become wider and does not overlap the area sidebar. It also happens that styles are written not only in the style.css file, but also in the file screen.css.

A problem that often arises when choosing a WordPress template is the insufficient width of the blocks. Many people immediately want to change the width of the template. For those who are well versed in html or php, this will not create any special problems. But in order to write in detail about how to make changes to the dimensions of a WordPress template for an unprepared person, you will need a whole brochure.

The simplest thing is to order, but those who try to do it themselves gain knowledge. In the future, he will not have to contact specialists for every little detail. Knowing the “basis” it is quite possible to do this. Before making any changes, be sure to make a backup copy of all pages of your resource. In case of inaccurate work, you can easily restore the original appearance of the site.

There are an incredible variety of WordPress templates, they are all different and each changes in its own way. But such basic blocks as: the width of the main page, the header, the left and right columns, and the footer are all there. For work we will need:

  • Web browser Mozilla Firefox.
  • Firebug plugin installed on Firefox.

When everything you need is downloaded, installed and ready to go, open the selected template in Mozilla Firefox and launch Firebug by clicking the beetle icon.

Plugin panel

The plugin panel in which we will work opens at the bottom. All changes made will be immediately displayed at the top of the monitor. On the tab on the right we see the CSS style of the selected element, on the left the html code of the page. To increase or decrease the width of the template, first we need to know the current size of the base. Click on the cursor icon of our plugin.

Elements on the page will be highlighted in different colors, and you can highlight the structure of your site in detail by highlighting each element of the page. Once you receive the name, you will find out the exact dimensions. After the current width has been set, left-click on this value. Using the trial method, we create the most suitable width and test its display.

Feel free to experiment with any elements and values. Current changes cannot in any way affect your page on the server; they are active only in the plugin window (the current Mozilla cache). When updating, all settings are reset.

Editing style.css

Now all that remains is to save these changes for the WordPress template. Typically, the width of the template is specified in style.css. We enter the administrative panel of the website → appearance → editor → style.css → line 79, change the width value. Let's save.

You must be able to resize the template if you want to create a good website. By default, many themes offer awkward template frame sizes. Narrow topics are just as bad as too broad ones. You must have a “golden mean” that is just right for performing the functions on the site. This is the only way the content of your resource will be displayed correctly, and all widgets will fit into the sidebar. In this article you will learn what are the ways to correct the size of side columns.

Without a sidebar, the site looks useless. If you want to somehow visually dilute the content of the page, you should change the WordPress template by adding a sidebar of a certain size. Usually the sidebars are already installed by default. But the sidebar width is not always optimal for a particular project. Let's look at methods for changing the width and height of the side part of a WordPress site.

What should the sidebar size be?

You may not need to change anything. The side column should be changed only if it looks “crooked” and unnatural. First, make sure that the sidebar has a smaller width than the main part of the page containing the content. The sidebar is not a key part of the site, so it shouldn’t receive a lot of attention - it can occupy a maximum of 40% of the visible part of the page. Please note that if you have two sidebars (or several), their width should not exceed 50% of the width of the entire page. It’s better to use only one side column - it’s more effective that way.

There is a “golden rule” of designers for sites that use only one sidebar. This rule states that if there is only one sidebar on a page, it should not take up more than 38% of the site's width. Many eminent web designers (for example: Jarel Remick) talk about this mysterious figure.

As for the height, it is important that the sidebar does not stick out from the top of the site. Its height at the top should be similar to the main part of the page. But the lower limit can be changed so that the base part of the site is longer. There is no need to try to cram everything that is on the site into the sidebar - just the main things. And if there is really a lot of information, then make two side columns, but you don’t need to stretch the sidebar to the footer of the site.

How to resize a sidebar manually

Now let's talk about how to independently change the size of the side columns and the template frame itself without using any add-ons. This method involves changing the source code of the page. It is in the html tags that the template size parameter is contained. Please note that resizing may have negative consequences if you have uploaded a specially sized image as a background. Therefore, it is better to change the frame parameters at the site layout stage.

The sidebar parameters in the code are in the form of a block. To change the size of the entire frame, including the side columns, you will need to get into the code and alternately adjust the digital parameters of the width and height of each element. Namely:

  • header – responsible for the size of the site header;
  • bg is the main content, that is, the part of the page on which articles will be posted (it is in this part that the sidebar is located);
  • footer is the footer of the site, that is, its lower part.

To find out the dimensions of a specific block, you need to click on the wrapper item in “View page code”. On the side of the browser's CSS section, you'll see the pixel width of the element. To change the size of the entire frame, you need to edit the main element, and then make changes to other elements. It is recommended to do this on a local server so that your site does not “jump” in front of users. And, in general, it’s better to do this before launching an Internet project.

To change the size of the sidebar, find something like this:

This line is responsible for the parameters of the middle part of the page, that is, for the content block and the side columns. Do not touch the “main” line – this is the main part of the site. You need to find the “mainnav” tag - this is the side column. All you need is to change the width item in CSS, which is responsible for the width - enter a different size value. You can make your sidebar smaller or larger, but remember to follow the sizing tips above to ensure your site displays correctly.

In order for the changes made to be saved, they must be made on the server. That is, you can initially test the adjustments on local hosting, but then be sure to copy the edited style.css file and add it to the main server databases. Only then will the changes take effect.

Plugin for changing sidebar size

If you don't want to wade through the internals of Cascading Style Sheets and look for elements that need to be edited, then you can use the Visual Sidebar Editor for WordPress plugin. This is a special module that is specifically designed to generate side columns. It is part of the larger Visual Composer tool.

The Visual Composer plugin is a natural page builder for WordPress. With it you can create a ready-made template from scratch. The module works with shortcodes and is very easy to install. If resizing the sidebar is not the only thing you have to do, it is better to download the Visual Composer plugin, and add the Visual Sidebar Editor as an add-on. If the only problem is the size of the side of the page, then the Visual Sidebar Editor module will be sufficient.

The advantage of using a plugin to change your sidebar is that it does everything automatically. That is, you show what you want to change using the Drag & Drop system, and the module independently adjusts the element code based on your requests. If you want to try your hand at editing html tags, then the plugin will give you this opportunity. In addition, it has special shortcodes for adding additional functions to the site - more than 40 extensions.

Another advantage of using such a plugin for editing pages is that changes are saved, regardless of the engine version. Even if you update WordPress, the template will not change - it is controlled by the module. Therefore, you can switch to older versions or update WordPress - this will no longer harm the size of the sidebar. In addition, the plugin works with convenient import and export - that is, you can copy sidebars from some sites and transfer them to others. And, most importantly, the module works according to an extremely clear principle - even a beginner will quickly master it.

If you like the Visual Sidebar Editor, consider installing the full complement of the add-on, the Visual Composer module. Then it will be easy for you to edit any element on the portal pages.

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

Then let's get back to why we are here.


Method 1: Using the Built-in Width Template in a WordPress Theme

This method is recommended if your WordPress theme already comes with a full-width page template. If you don't have one, refer to the next choice and get one.

First, you must edit the page or create a new one by visiting " Pages > Add New page

In the page editing window, select Full Width as a template under the page attributes checkbox.

After choosing a model Full Width You must register your page. You can continue customizing the page to add more content, or click the preview button to see it in action.

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

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

Method 2: How to Create a Full Width Page Template

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

By the way, we also invite you to consult with

First, you need to open a text editor such as Notepad and paste the following code into an empty file:

This code simply specifies the file template name and asks WordPress to retrieve the header template.

Then you will need the content part of the code. Connect to your site using an FTP client ( or file manager in CPanel) then go to /wp-contents/themes/your-theme-directory/ .

Then you should find a file called " page.php" This is the default page template file for your theme.

Copy everything after the function " get_header() And paste it into the file Full width.php You created this on your computer.

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

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

You may see this line appear several times in your WordPress theme. If your WordPress theme has multiple, you will see each sidebar referenced once in the code. You must decide which sidebars you want to keep.

Your website is loading slowly, discover

If your theme doesn't 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 changes. Your code may vary slightly depending on your theme.

Then you need to download the file Full width.php In your WordPress theme folder using .

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

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

On the page edit screen, find the page attributes checkbox and click the drop-down menu under the Model option.

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

You can now visit your website and you will see that the sidebars have disappeared and your page appears as a single column page. It may not be full yet, but now you're ready to distribute it in a different way.

Make your site popular by discovering

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

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

.str-template full-width zone.content (width: 100%; margin: 0px; border: 0px; padding: 0px; ) .str-template full-width.Output (margin: 0px; )

This is what Twenty Seventeen would look like.

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

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

Also discover some premium WordPress plugins

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

We offer you several premium WordPress plugins that will help you do this.

1. Divi Builder

Divi Builder is a high quality page builder that is highly rated Elegant Themes Although it is commonly used as part of the WordPress Divi theme, Divi Builder is also a standalone plugin that can be used in other WordPress themes.

Divi Builder allows you to edit your content using a front-end visual interface as well as a server-side interface, although most users prefer the former interface.

Essentially, instead of sidebars, everything is in popups and floating buttons. It gives you access to 316 predefined templates distributed across 40 different presentation packages and also allows you to save your own designs as templates.

We invite you to open

One of the features of Divi has always been the control over the styles it gives you. With three different tabs, you can configure various settings, including adaptive controls, custom spacing, and more.

You can even add custom CSS because its CSS editor integrates basic validation and autocomplete.One of the criticisms of Divi Builder has always been that it is based on . This means that if you disable it once, you will be left with a bunch of shortcodes in your content. Although it's a little frustrating, there are fewer problems now with plugins like Shortcode Cleaner.

2. Builder

It's no surprise that Themify Builder is an offering from the Themify team. It integrates it into many of its WordPress themes to provide customers with easy customization options. But you can also buy it as a standalone plugin and use it with any WordPress theme.

Like Divi Builder and WPBakery Page Builder, Themify Builder allows you to create layouts in the frontend or backend.Another good thing is that this plugin allows you to customize your responsive breakpoints (but only on a site-wide level).

Discover creating an online store and easily sell your products online

An interesting feature of 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.

3. Fakir

Originally launched in 2016, the WordPress Elementor plugin is one of the youngest developers on this list. Despite its late launch, Elementor has quickly amassed over 1,000,000 active installations on WordPress.org, making it one of the most popular WordPress builders.

If you have any suggestions or comments, leave them in our section

From the author: Greetings, friends. In the next article on the topic of WordPress, we will look at the question of how to change a WordPress template. If you have never encountered the need to modify a WordPress template, then be sure to read this article, because sooner or later you will most likely have to deal with the issues of customizing and editing a WordPress template.

First, let's define the most frequently asked questions that users encounter when customizing a WordPress template for themselves. Here is an approximate list of them:

how to edit a wordpress template

change template width on WordPress

how to resize wordpress template

how to change wordpress template color

how to change font in wordpress template

And this is just a small list of problems that you may encounter or that you can help others solve, including for a fee, if you develop custom websites.

All the questions in the list above can be solved in two ways depending on the theme that is used for the site. Let's start with the simplest option, which does not require layout knowledge. This option is suitable if the template supports editing from the settings.

Let's go to the Appearance - Customize section and see the main page of the site and the available site settings on the left side of the page. These may include design settings.

As an example, let's try changing the color scheme of the site. Let's go to the Colors menu and change the background of the side and central parts of the site.

As you can see, this is quite convenient and changing the color of a WordPress template is quite simple - we see the result immediately and can evaluate it.

However, not every theme offers all the WordPress template settings we need. For example, there are unlikely to be settings that allow you to change the width of the template on WordPress, for example, even in the current theme there are no settings that allow you to change the font in the template, and so on. What to do in this case? This is where we will have to resort to the second option, and here some layout skills are already needed.

So, most often we only need to edit one file - the style.css file. It is located in your theme folder. Let's change the font color as an example. By the way, you can do this directly from the WordPress admin area. Just be careful and attentive so as not to accidentally “break” the site. It's best to back up your theme before changing anything to it. So, go to the Appearance - Editor menu and by default you should have the theme styles file open for editing.

If this is not the case, then select this file from the list on the right, it is called Style Sheet (style.css). Most often, the font color is set in the body, so let’s find the styles for this element and set red as the font color.

After saving the file, we can refresh the site and see the red color for the main font on the site.

As you can see, customizing a WordPress template for yourself is a fairly simple task. With just a little knowledge of CSS, you can modify your WordPress template and make any necessary template customizations. Using the same scheme, we can solve other similar problems. With this I say goodbye to you. Good luck and see you again!