Wordpress how to make the page size wider. WordPress increase the width of the template, or stretch the side menu and articles section
Some WordPress templates are quite narrow in the side menu, the so-called sidebar, or, on the contrary, narrow in the articles section, and naturally some webmasters need to expand certain boundaries, for example, to accommodate banners. In this article I will tell you how change the size of the header, template, article section or side menu.
Why you may need to change the template size.
You may want to change the size of the template either at the very beginning, as soon as you installed it, or after you have written a number of articles and your first dozens of visitors have begun to appear. For example, I needed to expand the template after I wanted to try to earn the first couple of cents on advertising from my work - a blog. For these purposes, a banner advertising system from Google-AdSense. But in order to earn at least two unfortunate cents, you need to take into account two parameters:
- In order for someone to click on an advertisement, the banners that the system will issue must be in certain places. On the Internet they write that this is the left slider, we place a square banner there, and three times inside the article. At the very top, in the center, after some heading, and at the very end. This arrangement will be ideal for people to click on the banner. Of course, there are other options, for example in the pictures, but we are not considering them within the framework of this article.
- Google provides banners of certain sizes.
those. we need to combine the first and second points, namely, make sure that banners from Google or Yandex are placed in the designated places, the left sidebar and in articles. Since my template was too narrow for these purposes, and it makes no sense to hang small banners, because no one will click on them, there is only one thing left to do - expand the side menu and the articles section.
How to enlarge a template horizontally part 1, understand the numbers
To understand how much we need to increase the width of this or that element, we need not to estimate at a glance “a centimeter here is enough, and half a centimeter there,” but to find out these numbers exactly, in pixels. Almost any browser will help us with this, for example:
- Safari
- FireFox
- Google chrome
Personally, I will show Safari as an example, and you will use any browser convenient for you. The differences should only be in one button.
So, the base - our site size consists of 4 elements, the size of the template itself, the page size, the size of the article block and the left menu block. We will increase everything one by one, don’t worry, it’s not scary.
To change the width of the left menu.
In this case, you can change both the pixels, as we did in steps 3-5, and the percentage on the page. To do this, just change the parameter instead of pixels
1 | width: 31.8%; |
These values mean how many percent of the width can be occupied by one or another element. The main thing is that the sidebar and the article take up 100% in total, and not more, otherwise everything will float across the page.
That's all. Now we know what values we need to change so that everything fits. All that remains is to enter the necessary data into the style file.
How to increase the template horizontally part 2, change the width
After we understand the numbers and write them down somewhere on a piece of paper, let's now change them for everyone, and not just for ourselves. To do this:
- Login via FTP to the site
- Find and copy the file /wp-content/themes/Your theme/style.css to your computer
- Make a backup copy of this file, i.e. copy it to your documents folder. So that there are two copies of the file on the computer, one on which we will work, the second which we will not touch. The second serves in case we change something wrong and forget what.
- Open the file in a convenient editor. Now we are faced with a fairly simple task of changing the old values to new ones. There are two ways, the first is easy and the second is hard. First, we find the old value by searching and write a new one instead. The second way is to look for the name of the styles, look for the width inside the styles and change the value.
Personally, I chose the first, easy method for myself, since it allows you to make changes in just a couple of seconds. So, we are looking for the value 980. A search in the file returned only two parameters, which I need to change.
The first one is responsible for the width of the entire site:
1 2 3 4 5 6 7 8 | #page (min-height: 100px; clear: both; width: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: hidden; |
#page ( min-height: 100px; clear: both; width: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: hidden;
The second is for the width of two elements, the list of articles, and the left menu:
1 2 3 4 5 6 7 8 9 10 11 | . main- container ( width: 980px; margin: 0 auto; overflow: hidden; padding: 0 ; background: #fff; position: relative; - webkit- box- shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; - moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; |
Main-container ( width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #fff; position: relative; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17);
All we have to do is change the values from 980 to 1080 and load it back.
That's all, but if you still have any questions, write in the comments, or email me, I will be glad to help you.
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!
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 the 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.
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 shown in 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 For example, 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