Menu sizes for VKontakte group new design. How to make a beautiful menu for a VKontakte group

I recently became puzzled by the design of my VKontakte group. I saw a lot of beautifully designed groups and wanted to do something similar. After several hours of studying Wiki markup, I finally made a beautiful banner for myself and drop-down graphic menu, leading directly to the pages of my site. In a nutshell, how it's done. First, two pictures are created simultaneously in Photoshop, then one of them is cut into several parts. Next, on the editing pages of VKontakte, a special code with external links is inserted. Well, now let's talk about everything in order.

I create VKontakte groups
High-quality design of VK groups and public pages, pinned menu, drop-down menu, internal graphic menu, catalogs, internal navigation - prices And portfolio.

Attention!
Due to the next VKontakte update dated October 31, 2016, this option for group design has become irrelevant. A somewhat similar menu can be implemented on the Latest News tab in the block under the status line. But this will be a separate menu, and not a single composition with an avatar.

Step 1.
Create a new document in Photoshop about 850x700 pixels in size and fill it with white. In this example, I immediately superimposed the VKontakte interface on top for clarity. Now we need to cut out two windows in the layer, through which the actual graphic design itself will be visible. First, select a rectangle measuring 200x500 pixels and press Del. Then select a rectangle of size 510x309 and also press Del.

Align the rectangles to the bottom edge, the distance between the shapes is 50 pixels. This design is designed for one line of group name, one line of status and three lines of description and technical information. If you have a different number of lines, then adjust the height of the left image according to the location.

Step 2.
Now under this layer we place all our graphic design. In this case, I put a picture with the main background, then wrote text, and then in the left rectangle.

Step 3.
Now we immediately save the right rectangle (avatar) as a separate picture measuring 200x500 pixels. This is a ready-made picture for group design. It is loaded into the block in the upper right corner of the group where it says “Update Photo”. And the left picture needs to be cut into several pictures according to the number of menu items. In this case, these are 5 images with a width of 510 pixels.

Step 4.
At this step we need to upload our cut VKontakte pictures. To do this, immediately below the group description, select the “Latest News” block, I think that’s what it’s called in the original. I renamed it “Menu”. Click “Edit”. Important! Firstly, you must have an Open Group, not a Page. Because there is simply no such item on the Page. And second, in the Community Management > Information > Materials menu, the “Open” item should be selected.

Step 5.
So, in the “Editing” tab we click on the camera icon and load our five cut menu pictures. VKontakte will upload them in its own way, reducing the size to 400 pixels in width and assigning the noborder tag to the image. In the next step we have to slightly correct the code.

Step 6.
Namely, we set the original image sizes and change the noborder tag to the nopadding tag. We also need to put down the URL of the links from each menu item. In this case, the first link leads to the internal VKontakte page, and the remaining four links lead directly to the pages of my website.

Below is the original working code for my menu. You can use it as a base. In it, you change the pictures to your own, substitute your sizes and add your links. And make sure that there are no spaces between the square brackets in the code, and also no line breaks, otherwise the graphic image will have spaces between the images.

[][][]

Step 7
I repeat once again, to open this menu you need to click on the “Menu” inscription. And so it is always folded. Read the comments to the post, there are many questions addressed there. Well, join my VKontakte group.

In order for your group to be popular among users, you need to regularly add new publications, upload photos, videos, etc. And so that people can navigate more easily by going to the group’s page, it is better to create a menu that will indicate the main points.

For example, you have your own company that offers a certain product or service. There is also a website on the Internet. Then the VKontakte group for this company will help attract new customers and increase sales. The menu may include the following items: Windows, Doors, Gates, Security systems, Additional materials, Promotions and discounts. We make links in such a way that by clicking on one of the items, a person goes to the corresponding section on the site.

The menu can be created without linking to third-party pages on the Internet. For example, your group is dedicated to music. In the paragraphs you can indicate genres: classical, rock, rap, from Indian films, for newborns, from cartoons. When a person clicks on one of the items, an album with the corresponding songs should open. In this case, the item is a link to a specific album in the group.

There are many examples for creating navigation in a group. Well, now let's move on to practice.

Creating a menu

Necessary settings in the group

Before you start creating the menu itself, you need to check some settings in the group. You must be the creator of the group, otherwise you simply may not have enough rights to create navigation.

On your VKontakte page, in the left column, click on “Groups” and select your group from the list. Then, under your avatar, click on the three vertical dots and select “Manage Community” from the list.

Now, in the menu on the right, go to the “Sections” tab and in the “Discussions” and “Materials” fields, select “Open” or “Restricted”. Click "Save".

Preparing images for menus and avatars in Photoshop

After you have checked and changed the settings in the group, you can start creating images for the avatar and menu. There may be several options here:

The menu can be a continuation of the image that appears on the avatar;

It can be made on a separate image or a plain background; the avatar will not be associated with it; for example, the company logo can be depicted on it.

We will consider the first option in detail. Our avatar and navigation will consist of one image, which needs to be correctly cut into parts.

Open Photoshop and create a new file in it – Ctrl+N. Set the width to 760 and height to 500 pixels.

Now, using the Slice Tool, you need to cut the sheet into several areas. Select the area on the right with the tool and double-click on it to open a window with a menu. Set the width to 200 and height to 500. This will be our group’s avatar.

Using the same tool, select another area to the left of the previous one. For it, the width is 50, the height is 500. This is the distance between future points and the avatar; we will not need this part of the image.

Select the area at the top left. For it, the width is 510, the height is 182. This area of our image corresponds in the group to the area in which the group name, status are written, and some tabs are shown. That is, we don’t need it either.

As a result, you should get the following - the image is divided into 4 areas. The area on the right is the group avatar, on the bottom left there will be menu items, and 2 more areas that will not be needed.

To make it completely clear. We cut a blank sheet. Then add the selected image to it. After we save it, we will have as many small images of the shape we need as we cut. Further on the page in the group we will insert certain parts of the image in the right places.

Next, open the image in Photoshop that you have chosen for your avatar and menu. Using the Move Tool, drag the image onto the previously cut sheet. You can move the picture so that the desired area is visible.

For example, my image size is larger than the one we chose for the white sheet. So I moved it so that the palm trees were a little visible and there wasn't so much sky up there.

After adding the image, take the Slice Tool again and cut the area on the lower left that we left for points into the desired number of pieces. As many points as you want to make, there will be as many parts.

Now we take the text tool and write menu items in each part.

That's it. Everything is ready. On the right is our avatar, on the bottom left are navigation points. The other two parts of the image will not be needed.

At this stage, you can add a company logo to the area on the right (avatar), or write its name beautifully.

Save the captured image: File – Save for Web & Devices, or use the keyboard shortcut Alt+Shift+Ctrl+S.

This is what I got: the “menu” folder on the Desktop. It contains selected images cut into pieces of the required size. The biggest one is the avatar, there are many small identical ones - menu items, and two unnecessary ones - delete them from the folder.

Now you need to upload the taken images that correspond to the points to your VKontakte page. Select “Photos” and create a new album, I called it “for the group menu”. Make the album private so that only you can view it – “Edit album”. Add images to the album that correspond to your menu items.

Then return to the main page of the group and select an avatar - “Upload photo”. This is one of those images that we just made in Photoshop.

So, at this stage, you should have created a closed album on the page with images of navigation items and uploaded an avatar for the group.

Creating a menu using wiki markup

Let's start creating the menu itself. Go to the group and go to the “Latest News” tab. Then click on the “Edit” button.

You can rename the name of the tab itself. I’ll write “MENU” like that. Now here you need to add images that correspond to the points. To do this, click on the camera icon.

Click on one of the images you just added to your profile.

After that, it will appear on the editing page.

Thus, add all the other images to get the desired menu image.

When all the items have been added, click on the two arrows in the upper right corner to switch to wiki markup mode.

Here remove all unnecessary tags like

, and remove spaces between all lines. Now look at the top screenshot - we have spaces between the added images. To remove them, write nopadding before the image size and put “;”.

After the image size and vertical stick values, insert a link to the page where the person will go by clicking on the corresponding menu item. As I already wrote, the link can be to some VKontakte page or to a third-party resource on the Internet.

This is what the code will look like after you add “nopadding;” and a link.

The result should be like this: the name of the tab (MENU) has been changed, spaces between lines have been removed, spaces between images have been removed (nopadding;), links have been added. Click “Save Page” and return to the main page in the group.

This completes the process of creating navigation for the VKontakte group. I did it like this. The avatar image and the menu are one. By going to the “MENU” tab, the user can select what interests him and follow the link I provided.

If you are worried that the menu in the group may not be visible, then attach a photo in which, for example, use arrows to indicate the presence of a tab. If you have questions, ask them in the comments.

To make the overall appearance of the community more aesthetically pleasing and make working with it more comfortable, the best solution would be to create a group menu. This way you can put all the important elements into one neat list, set each link with its own icon or image, and notify visitors about any changes quickly and clearly. The menu may include the following elements: various links to external sites, discussion bubbles, albums, music and other sections within the VKontakte site, images and simply the structure of your group. Following the instructions below, try to create your own menu for the VKontakte community.

How to create a simple menu in a VKontakte group

If you want each menu line to lead to a particular discussion topic, first of all, you need to create these same discussions and give them names. Leaving them closed or open for comments is a purely personal matter, since this option does not affect the display of the page in the menu.

Try to make a simple menu that will represent the structure of your group and contain all the most important sections.

Keep in mind that menus will appear slightly differently in groups and communities. Therefore, if you want to transfer a group to a community, click on the three dots icon next to the group name and select the line “Transfer to page”. Please note that you will not be able to turn the community back into a group.

Now go to the “Community Management” link in the same menu.
You will see a block with all the settings for your group, here you can change the name, contact information, privacy, and manage participants. Go to the “Sections” category.

In the “Materials” line, set the value to “Disabled” or “Restricted” so that group members cannot accidentally damage your files that are needed for registration. Don't forget to save your selection.

Go to the group and go to the “Latest News” window, this is where you will create the menu.

Click “Edit”.

First of all, you need to change the name “Latest News” to “Menu” or something else that will make it clear to participants that here they can quickly follow the necessary links.
Switch the entry editing mode to “edit Wiki markup” using the small arrow in the right corner.

Now create the structure:

It is important that you have discussions, materials or albums in the group whose name you will use in the menu.
Write all the names of the main sections on a line, framing them twice in square brackets.
To make the text appear as a list, put asterisks in front of the items.

From this screenshot, we can assume that the group has a material called “Section 1”, a discussion “Section 2” and an album “Section 3”. Click “Preview” or “Save Changes”.

Your section will change to “Menu”, and it will contain active links to the main categories of the group, neatly arranged in a list.

How to insert links into the VKontakte group menu

To speed up access to your official website, or sections directly within the group, it is better to insert active links.

Go back to editing the menu section. Copy the desired link and simply paste it into the window in Wiki markup mode. After saving it will become active.

This is what all the links that you can insert into your group menu look like.

How to create a VKontakte menu with images

If you want the menu to consist of beautiful icons that lead to a particular section, simply follow the instructions below.

To begin, create a special album in which only technical pictures for group design will be stored.

Upload images in jpeg format no larger than 500 pixels by 500.

Copy the URL of the uploaded image.

Now copy the link to the discussion, material, or other external site.

[[Link to image in your album | size in pixels; nopadding | Link to discussion or website]]

An example is shown in the screenshot.
Click “Save Page”.

Now a neat link will appear in your menu. You can set the pixel value as you see fit.
To add multiple images, simply enter new links on a new line.

Do you want to know how to create a group on VKontakte in 2018? And not just design it, but do it yourself correctly and beautifully! If your answer is “Yes,” then this article is especially for you!

The social network “VKontakte” is one of the most popular. Accordingly, here you can find more communication, like-minded people and just friends, as well as promote your services and products. Thanks to the created communities, you can quickly find everything about an event, product, service, etc. of interest.

On the management page, click “Upload” and select an image. It looks like this: group name, then avatar thumbnail, status.

Unfortunately, mobile does not yet support this function. But since this innovation happened not so long ago, it will be just as relevant for promotion as everything else.

For easier access to the proposed materials, you can create a menu. And we’ll tell you how to make it yourself next time.

Pinned post

Secrets of creating a VK group

As a bonus, we share the secrets of designing a VK group and our personal experience, which will allow you to complete the design immediately at an advanced level yourself. For example, you can set up such a beautiful block of various applications, which increases engagement several times!

Free apps. Go to community management and go to "Applications" to edit settings.

Here you can choose to add an application that will be an excellent addition to the functionality of the group. For example, in our group, which creates useful content for free, there is a “Support the Community” button, by clicking which you can donate for the benefit of the community any amount from 100 rubles. It could also be a product store, a questionnaire, tests, online chat, a newsletter subscription, etc.

Other useful widgets and applications:

questionnaires;
tests;
registration for services;
sending messages;
goods store;
and so on.

Discussions. Make several topics at once on the main issues that will be of interest to clients or subscribers. If this is a commercial community, then these are reviews, frequently asked questions, information about payment, guarantees and delivery. If the community is informational, then the main discussion threads should be devoted to topics that the group addresses.

Conclusion

If you want it to be successful, then be sure to take the time to design it correctly and beautifully. The more thoroughly you approach this issue and think through all the scenarios of user behavior after going to the group page, the higher the conversion to subscription, and subsequently to purchase, will be.

Greetings, dear friends and blog guests. Today we’ll talk about creating menus in VK and how to do it in the new design of the social network. There are really significant changes that you need to be aware of, because if the menu is made in the old design, which I wrote about, then the pictures may look askew.

VKontakte group menu- this is her face. This is what the user sees when he first enters the community, and how accessible and attractive everything is designed largely determines whether he will become a permanent member of the group.

IMPORTANT: After changing the general design in VK, the sizes of pictures for the menu on the social network also changed. Check your work and make changes in the groups discussed below.

Types of menus and their features

The first step when creating a community is to decide on its main goal. The future design of the menu and its functional features depend on this.
Depending on the goals of the group, the menu can be:

for an information platform;
;
for a training site.

The main part relates to information. These are communities where the user is provided with some kind of entertaining or educational content. For such a group, it is best to use a menu that displays the main topics. Thus, popular publics create sections: news, latest publications, popular publications, as well as sections specifically on the topic of the group.

The menus of trading and educational publics may be similar. The goal of both is to help its user navigate the range of goods or services. The menu for sales, as a rule, includes sections such as Product Catalog, Payment, Delivery, Promotions and discounts, and for training it may be limited to sections describing services, since the main thing here is that the user finds the training program or material he needs.

How to create a menu in a VKontakte group: step-by-step instructions

The whole process can be divided into 2 stages:

Working in Photoshop;
Adding sections and pictures in the group itself.

To accurately answer the question of how to create a menu in a VKontakte group, you should visually imagine the future design with all the sections, and then, in the process, you can add items that still come to mind.

At the first stage, a group avatar and images for the menu itself are created. A single image for both the avatar and the menu will look more harmonious.

The choice or creation of an avatar should be taken very seriously, since many users pay special attention to it. You can find a suitable picture on the Internet and add an inscription or some elements to it in Photoshop, or you can make an absolutely unique image yourself.

Since we also need to make a drop-down menu, we look for or create a picture that best suits the theme of the group or just take a beautiful background. Work with the image will take place in Adobe Photoshop, since the functionality of conventional photo editors is not enough for all the necessary operations. All sizes are set by the social network VKontakte itself, and significant deviations up or down will lead to the fact that the avatar will either not load at all or will not be one with the menu.

Algorithm of actions:

Open Photoshop and go to “file” - “create” and set the width and height: 760X500, respectively.

Select the “cutting” tool, and then “split fragment”. Divide the image into 3 parts horizontally. For a fragment from the left or right edge in the drop-down window (depending on which part you want to see on the avatar), write the width and height values – 200XX and Y) – 560 and 0. This will be the group’s avatar.

For the next fragment, set the width and height to 50X500, and write 510 and 0 in the coordinates. This is the space between the group avatar and the menu. This part will not be needed later.

Again, select “split fragment” and divide vertically into 2 parts. For the fragment on top we set the following values: width – 510, height – 182, coordinates – 0. This is the space above the menu. This part will also not be visible in the group.

Now we copy the selected or created image to the created and divided object. If the CTRL+V hotkeys don't work, simply open the location on your computer where the image is saved and drag it into Photoshop.

We divide the remaining space vertically into as many fragments as there are sections in the menu. You don't have to set values for them.
We write the name of each section.

The last step is saving the images. You need to save the pictures like this: file – save for the Web. This method is suitable for later versions of Photoshop. If there is no “save for Web” in the “file” section, then we proceed as follows:

Go to the “file” item, select “export” - “save for Web”. We leave all parameters as they are. Click “save” again.

Select a folder on your computer and save the images there. They should end up looking like this:

Now we proceed to the second stage to figure out exactly how to create a menu in the VKontakte group - directly adding the menu to the public. For this:

First of all, you need to connect Materials, since this is the only way to add any sections on the main page. To do this, go to Community Management and at the very bottom of the page select “Materials”, and then “open”. Save the changes.

We upload all the photos to the group, except for the avatar and those parts that are not needed. In order for the photos to be displayed on the main page, you need to go back to Community Management and click opposite the “photos” - “open” tab.
Uploading an avatar.
The next step is to enable wiki markup mode. You can do this by clicking the diamond icon on the right side of the page in the “edit” section.

Here we insert the markup code: [], where [] is a link to the section or page where you will go by clicking on the photo. You can add both links to sections on VKontakte itself and to external resources.
This code is duplicated as many times as there are sections in the menu, each time inserting links.
If desired, we also change the “latest news” tab, for example, to “menu.

Click “save page”, return to the main section of the group and update the page. The menu is closed by default, but the user, by clicking on the corresponding name, will be able to open its sections and navigate through them.

This completes the whole process, but you should definitely check whether the links work and whether the borders of the photo match.

Services for creating a group menu

If you still don’t understand how to create a menu in a VKontakte group and the step-by-step instructions didn’t help you, you can use special services that will create and even add beautifully
designed menu for the group.

One of the most popular services is MenuMake. After submitting an application, the order will be ready within 5 minutes, and then, if desired, the menu will be added to the group. At the same time, all the customer’s wishes regarding design and number of sections are taken into account.

Sincerely, Galiulin Ruslan.