Graphic menu for VKontakte group templates. Cover for a group in VK: goals, use, technical aspects

Hello my dears!

Today I will tell you in detail, how to make a menu for a VKontakte group. In my experience menu in the group in contact increases the number of calls and requests by 20%. It is important to take a responsible approach to creating a group menu. Therefore, I have prepared a menu PSD template for you to make your work easier.

Let me start with the fact that today there are two menu options:

Option 1: Closed group menu

Closed menu, opens when you click on the link. In the example below, the menu opens when you click on the “OPEN GROUP MENU!” link.



Option 2: Open group menu (pinned post)

An open menu is essentially a pinned post with an active link.



The second menu option appeared relatively recently, when it became possible to pin posts from the wall to the header of a group or public page. It is now the most effective.

Both options use wiki markup. Wiki markup makes it easy and quick to process appearance groups, creating graphic tables and spoilers, formatting text and working with images, links and anchors. I will not dwell on the markings in detail, because... VKontakte has a built-in visual editor, which automatically translates your content into wiki markup. Here I will give only the basic codes, without which it is impossible to create a menu.

How to make an open menu on VKontakte

We will analyze the process of creating a menu using the example of Option 2, i.e. open menu.

To make it easier for you to navigate, I have prepared for you PSD template menu: [Attention. The design of VKontakte has changed. New layout and other relevant information in ]

Group Menu Template PSD

To create an external menu, you need 2 pictures: an avatar (on the right) and a central one (action picture).

Avatar dimensions: 200 x 332 px

Dimensions of the central image: 395 x 282 px



Step 1.

Using the group menu PSD template downloaded above, make two pictures of the required sizes.

Step 2.

In your group, go to “Community Management” (on the right under the avatar). Find the “Materials” item (on the “Information” tab) and make them “Restricted”.



Step 3.

Now go back to home page of your group and click “Edit” in the “Materials” block that appears (I have already renamed it to Group Menu).



When editing the page, set the title, you can create sections or any other information using the toolbar. Click "Save Page" and "Return to Page"



Step 4.



In my example https://vk.com/page-42211349_47355854,

The first numbers 42211349 are your group id

The second digits 47355854 are the page id

Feature: create additional pages can be done manually. To do this, follow the link like:
https://vk.com/pages?oid=-хххххххх&p=pagename
Where,
xxxxxxxxxx is your group id
pagename – the name of your page

Step 5.



And publish the post.

Step 6.

Now upload the group avatar (picture on the right). A duplicate avatar picture will appear on the wall - delete it.

Step 7

Now attention. Click on POST PUBLICATION TIME (lower left corner of the post).



And click “Pin”. Close this window and refresh your group page (F5).



Step 8

We write the group status (use only 1 line) to align the pictures if the drawing on your avatar does not start from the very top (in my avatar template, option 2). And this is what we got:



RESULT.

The menu is ready! Now, when you click on the central image, your menu opens:



Here you can edit it, post photos, videos, create new sections, and post links.

You can also do this inside the main menu graphic menu(submenu). Its width should not exceed 600 px. The height is unlimited. Which allows you to create excellent VKontakte landing pages.



But I will talk about this in more detail in the following articles. Subscribe to blog updates to stay updated on new features. Like and share the article with your friends.

Post your questions or opinions in the comments below.

The beautiful design of the VKontakte community is not a whim, but important element, building user trust in you and your company. If a public page or group is designed unprofessionally, your potential clients may quite logically conclude that you are equally negligent in your work. To prevent this from happening, make sure that your VKontakte page is beautiful, neat and easy to use. How to do this? Read below.

Current sizes of VKontakte images

Some time ago, the developers of the social network VKontakte launched new design. This led to changes in the size and principles of image display. The memo, which will be given below, corresponds to all innovations and contains dimensions that are relevant to at the moment time.

Now let's go into more detail on each point.

VK avatar size

The minimum avatar size is 200 by 200 pixels. If you try to upload an image that is less than 200 pixels wide or long, you will see an error like this:

The maximum avatar size is 200 by 500 pixels. But, in principle, you can upload images and larger size– up to 7000 pixels on each side. The main thing is that the aspect ratio does not exceed 2 to 5.

I'll show you with an example.

I have an image. Its size: 200 by 800 pixels (ratio 2 to 8). There are no errors when loading. However, I still cannot use this image, because “Contact” does not allow me to select it completely.

Cover

The cover size for the full version of the site is 1590 by 400 pixels.

Please note: in mobile version and applications, not the full version of the cover is displayed, but only a part of it measuring 1196 by 400 pixels. See how it is cropped in the mobile app:

To prevent this from happening, position the main elements of your cover within 1196 by 400 pixels.

Attached images

In the updated design of Contact, the width of the news feed has become fixed. This means that the images attached to the post are no longer stretched, but remain as they are. Therefore, if you want your image to fill its entire space in the news feed, its width must be at least 510 pixels. It is best if it is a square or rectangle in landscape orientation.

It sounds a little confusing :) So I’ll show you with an example.

Let's say we have a square-shaped image with sides of 510 pixels. If we attach it to our post, it will look very good in the news feed on all devices:

And this is what a horizontal image looks like in landscape orientation (width 510 pixels):

As you can see, the narrower the image (in height), the smaller it looks in the smartphone feed. To see this, look at the picture below:

It is clear that the difference here is not particularly critical, and smartphone users will still look at your image, it’s just that in the second case they will be a little more comfortable.

Images for posts with links

All this data comes from the Open Graph markup code:

If Open Graph is not specified, the title is taken from the Title meta tag, and the image from the article. At the same time, you can easily change it - or select another image from the article using special arrows:

Or upload yours:

The minimum size of an image that you can use as an announcement for your article is 537 by 240 pixels. However, you can upload larger images as long as the proportions are maintained.

Image for an article created in the editor

The image size for the cover of an article created in the editor is 510 by 286 pixels. It is better if it is dark in color and more or less monochromatic, since the name of the article and community is lost on a light background.

Good example:

Not a very good example:

Photo and video size for stories

The size for photos is 1080 by 1920 pixels. The size for the video is 720 by 1280 pixels.

Technical specifications for video recordings:

• up to 15 seconds;
• no more than 5 MB;
• h.264 codec;
• AAC sound.

Stories must use vertical format photos and videos.

Please note: stories on behalf of communities can currently only be added by large communities for which the VKontakte developers have opened this function. And this is done with the help official application. This cannot be done from a computer.

Photo album cover size

Video picture size

1280 by 720 pixels.

Wiki page

The content area width of a wiki page is 607 pixels. If you upload a larger image, it will automatically upload at 400 pixels wide. Example: I have an image measuring 1366 by 768. If I add it to the wiki page, this is what it will look like:

To change the size of a picture, you need to click on it and set the desired values:

I’ll talk in detail about how to work with wiki pages below. Therefore, we will not dwell on this point here.

How to make sure that VKontakte images do not shrink? The influence of background and size on picture quality.

If you've ever tried to upload VKontakte images (it doesn't matter whether it was an avatar picture or just a photo from your trip), then you probably already know that they tend to shrink. This is especially noticeable on a dark (and especially red) background and when the picture is not very large size. Example:

How to make sure that the quality of the pictures does not deteriorate?

To prevent the image from shrinking (or rather, shrinking, but to a much lesser extent), it is necessary to make it 2-3 times larger than the desired size. For example, if we need to make an avatar measuring 200 by 500 pixels, we take a picture measuring 400 by 1000 pixels. If you need to make a menu with a size of 510 by 400 pixels, take 1020 by 800.

The image on a dark blue background, which I showed just above, has a size of 510 by 350. I made it twice as large (1020 by 700) and saved it. Here's what came out of it:

How to fix this? The answer is very simple - you need to choose a different background. The point is that on dark background pixels are visible better than in light mode. Therefore, if you want to achieve perfect quality(although the picture above already looks quite normal), then you need to slightly change the color scheme. For example, make the background white and the text blue:

How to design a page header

Your hat public page or groups - this is the first thing that users who come to visit you see. In most cases, a navigation menu based on public materials is placed in this place, some interesting posts or important announcements. Let's look at examples of how different companies are using this space.

Cover

Not long ago, VKontakte introduced an update - now you can upload large and beautiful covers(1590 by 400 pixels). To do this, go to settings and click the "Download" button.

On the cover you can place anything you want: from the name and motto of your company, to all kinds of promotions, offers and even competitions.

I recommend paying special attention to the possibilities of a dynamic cover. Read our article about how it works, for what purposes it can be used and with what services it can be installed.

Examples of dynamic covers:

Cover + community description + website link

Some companies specifically do not pin any posts in the header so that users have the opportunity to read basic information about the page and immediately go to the site.

Description with hashtags

Some companies add standard description page hashtags that characterize it. This is done so that the page has a clearer relevance, and due to this, it is higher in the search for relevant queries. Honestly, I don't know if this method works or not. I haven’t seen any cases on this topic, so if anyone knows, I’d be grateful if you could share the link.

Pinned post telling what the page is about

If you want to tell about your page in more detail (with photos, links and beautiful layout), then you can attach a wiki post or an article made in the editor to the header, with a bright picture on the announcement that will encourage users to click on it. An example of such a post:

And this is what the user sees after he clicks on the link:

Group menu is open

I call an open menu a menu that immediately shows what items it consists of. That is, the wiki post announcement picture completely duplicates its content. Thus, users immediately see what awaits them inside. I'll show you with an example.

This is what a pinned post looks like in the Flatro page header:

Group menu is closed

A closed menu is the same wiki post as in the previous paragraph, only the announcement contains a picture with no menu items. Usually they write on it: “Menu”, “Navigation menu” or “Navigation through public materials”.

And this is what we see when we click on it:

By the way, it is worth noting that these are far from the only options. Basically, you can write whatever you want on this picture. The main thing is that the user wants to click on it, and he understands what awaits him after that. Example:

Merged menu for a group

A merged menu is when the picture on the announcement of your menu forms one image with the avatar. Below I will tell you in detail how to make such a menu, but for now just look how beautiful it looks.

GIF and avatar in one image

But this design option for the hat really delighted me. The automatically played GIF merges with the avatar into a single composition and attracts the attention of users, even despite the fact that there is no information on it at all.

By the way, I spotted this example in the group of SMM marketer Sergei Shmakov. So, I express my gratitude to him for the find :)

Hidden menu

The hidden menu is only available for groups (pages do not have this functionality). To see it, you need to click on the appropriate link. The advantage of this design method is that users can see the main information of the community, and if they want to use the menu, they only need to make one click. However, there is a small disadvantage here - not all users know about the existence of this function, so your menu may receive less attention than if it were pinned at the top of the page.

Auto-playing video

At the end of November 2015, an interesting innovation appeared on the VKontakte social network - as soon as a user visits your page, the video attached to the header begins to play automatically. With this technique, you can attract even more attention from users (especially those who visited your page for the first time), and at the same time, do not irritate those who do not like having their content imposed on them, because the video plays without sound and practically does not interfere .

How to add such a video to the header of your page?

To do this, three conditions must be met:

• Attach a video to a post and pin this post to the top of the community.
• Apart from the video, nothing else should be attached to the recording. Only video and text optional.
• The video must be uploaded to VKontakte - third-party players are not supported.

A post that gets a lot of shares

Another way to productively use space in the header of your page is to pin one of your most successful posts to it - one that has already gained and continues to gain large number likes and shares. Why do this, I think everyone understands - the more reposts, the greater the reach, the more subscriptions the page receives.

Announcements of new videos, albums, events

Presentation of new products/services

Discounts and promotions

Cases, customer reviews

Application advertising

Draws

Community Rules

Links to other social networks

I have not listed all the header design options. Basically, you can put any kind of information on your cover page and pinned post: job openings, announcements, links to best-selling products, etc. So don't limit yourself to the examples above. Use your imagination and use the design of your community to achieve your goals.

What should an avatar be like?

An avatar is not only a beautiful image with your company’s logo, but a marketer’s working tool with which he achieves his goals. Let's look in detail at what it should be like in order to attract the attention of users and encourage them to perform the target action. Let's start with the miniature.

Avatar thumbnail

1. The text on your avatar thumbnail should be large enough to be read.







2. The text should not extend beyond the thumbnail.







3. Users should understand what is shown on the avatar.







4. If possible, it is better not to use stock images, as they often reduce the credibility of the company.




5. It is undesirable for the avatar thumbnail to be too faded and boring, otherwise it will be lost against the background of brighter avatars of competitors.



6. If you want your avatar to look modern, make it in a minimalist style: less text, shadows, gradients and elements that do not carry any semantic meaning. Your avatar should be as simple and neat as possible. This style is currently trending.







7. If your goal is to attract the attention of users and stand out from other avatars in the feed, you will have to use your imagination. Think about what you yourself pay attention to when you are looking for interesting communities? For example, I have repeatedly been attracted to avatars with a burning light, which usually indicates that a new message has arrived. This is a very old technique, but for some reason it still affects me - when I see such a light, I will definitely keep my gaze on it.

I'm not saying that this technique will work on your page. The point I want to get across is that there are many, many ways to stand out, you just have to ask yourself and be a little creative. For example, here's another one interesting idea, which I would hardly have thought of myself:

The avatar is a black circle: large and small. It would seem, why do this at all? But when you scroll through the list of communities, such avatars attract attention because they are very different from all the others.

What information can be placed on an avatar thumbnail?

Even though the avatar thumbnail is very small, it can (and should) be used to attract followers to your community. How to do this? Let's look at a few options:

Announcement of a new product/service/event

Advantages of the company/service/page

Company phone number

Favorable prices

Free shipping

By the way, very often information about what a company provides free shipping, are added to the group name itself so that users definitely pay attention to it.

Stock

Competitions

Vacancies

What should the avatar itself be like?

I looked at what the avatar thumbnail should be and what text could be placed on it. Now let's move on to the avatar itself. Full version The avatar will only be displayed in the community in which the cover is not installed. It is for such cases that I wrote this section. So, what should your community’s avatar be like so that users immediately understand that your company approached the creation of the page responsibly and professionally.

1. The avatar must be of high quality. I wrote about how to achieve this a little higher. For those who missed this part, I'll tell you briefly - the size of the avatar should be 2-3 times larger than what you planned.
2. It is desirable that the avatar be combined with the menu: it is the same color range, had the same fonts, elements, etc. This will make your page header look cleaner and more professional. Example:
3. The avatar itself and the avatar thumbnail may be different. For example, you can draw a circle on your avatar, design it the way you like, select that area as a thumbnail, and design the rest of the avatar in a different style.




Another option is to divide the avatar into two parts. One is for the miniature, and the second is for the rest of the avatar.




4. In order to encourage users to subscribe to your page or write a message to a company representative, you can place a corresponding call to action at the very bottom of the avatar and accompany it with an arrow pointing to the button.




5. Try not to put too much information on your avatar, otherwise it will look overloaded and untidy. Add only the most important points to it and be sure to make sure that there is “air” between them.

What information can be placed on an avatar?

Basically, you can put anything you want on your avatar. Unlike the miniature, there really is room to roam around here. The main thing is don't abuse it :)

Site domain

Phone/address/opening hours

Competitions/promotions

Most purchased products/new items

Delivery information

Mobile app advertising

The main advantages of the company/page/product, etc.

Assortment update/new creativity, etc.

Information that your community is official

Information about upcoming events

Addresses of accounts in other social networks

Extended page description

Brags

In general, you can place absolutely any information on your avatar. I've just included a few ideas so you can see what others are doing and get inspired. Well, keep the basic recommendations in mind: the avatar should be of high quality, the font should be large, and there should be more “air” between the elements.

How to create a seamless avatar and menu

In order to make a merged avatar and menu, you will need Adobe program Photoshop or its equivalent. I will explain the whole process using Photoshop as an example. So, let's go.

1. Download the Photoshop template that I specially prepared for this article. In normal size (menu – 510 pixels wide, avatar – 200) or enlarged (menu – 1020 pixels wide, avatar – 400).
2. Open the image you want to use as a base.
3. Copy it, paste it into the template and position it the way you would like to cut it.

1. Add effects, text, graphics, etc.

1. If you don't want to lose part of the image (in that 50px gap), move it to the right as shown in the following GIF:

1. Select the “Cutting” tool and click on the “Fragments along Guides” button.

1. Remove unnecessary fragments (right mouse click – “Delete fragment”) and edit existing ones (right mouse click – click in empty space– take the desired area and stretch it to the desired size).

1. Go to the "File" section and select the "Save for Web" command.

1. Go to the location where you saved the pictures (desktop or some specific directory) and find a folder called “Images”. This is where your images will go. Now all that remains is to fill them in on the page.

P.S. The height of the avatar can be changed at your discretion. I took maximum size– 500 pixels, but your value may be less. For example, as on the “Wiki Markup” page:

How to use widgets

Widgets are also part of the design of the VK community. Using them, the user can: place an order, subscribe to your newsletter, take part in a competition, read and leave reviews, open a search in the community, receive a gift, a discount coupon, etc.

Here are some examples of what widgets look like on the VKontakte page:

How to design images for posts

If you are involved in web design or have artistic taste and a sense of beauty, then it will not be difficult for you to come up with corporate identity for your images. However, it seems to me that such people will be in the minority in this article (I, by the way, am not one of them either). Therefore, let's take a closer look at how this is done, based on examples of successful companies.

By the way, please note that almost all well-known VKontakte companies brand their images, that is, they add a small logo, the address of their page or a watermark. This increases brand awareness and protects your images from being copied. Whether it is worth doing this is up to everyone to decide for themselves. The only thing I would like to advise is: if you decide to do this, try to make sure that your logo is not too bright and does not take up too much space, otherwise all the emphasis will go on it, and the image will lose its attractiveness.

Where can I get good images?

We have a good article on this topic on our blog - “”. They are all free, but some require registration. If you don't find anything suitable for yourself, try searching by keyword+ wallpaper (or, if in English, wallpaper). Typically, this type of request results in high-quality images. But here you need to be careful and check the type of license, otherwise, if you have a serious business, you can run into trouble.

What should those who do not know how to work in Photoshop do?

If you have never worked in Photoshop (or any other graphic editors) and are not yet ready to devote time to mastering it, you can use services that already have ready-made templates pictures for different social networks:

1. Fotor.com

After that, on the left side of the screen, select the template that interests us. Please note that only those templates that do not have a diamond icon are provided for free.

We insert it into the template, select it with the left mouse button, select the Layer command (sandwich icon) and click Move to bottom. This way our picture will go in the background, and all the inscriptions will be superimposed on top of it.

After that, we change the text, font, font size, position of the inscription, etc.

Then click on the floppy disk icon, select the name, image format, quality and click on the Sign in to download button.

2. Canva.com

Another service that will help you beautifully design your image. It works on the same principle as the previous one. Register in the service (you can use your Google account+ or email).

Choose your field of activity. We skip the step where you are asked to invite friends. We get to the main menu, where we select a Facebook post if we need a rectangular photo, or an Instagram post if it’s a square one.

Select a template (if the template is marked “FREE,” it means it’s free), change the text.

If necessary, upload your image, adjust the dimensions, change the text, font and position of the inscription. After that, click the “Download” button, select the image format and save it to your computer or any other device.

How to format articles in the editor

Recently, VKontakte has made it possible to type up articles in a special editor. To create an article, you need to click on the letter “T”:

How to use wiki markup

Well, here we come to the most interesting and at the same time difficult section. Perhaps there are people among the readers who do not know what wiki markup is and are hearing this term for the first time. Therefore, especially for you, I will give the definition that “Contact” itself gives.

Wiki markup is a markup language that is used to format text on websites (usually classified as wiki projects) and makes it easier to access features HTML language. On our website wiki pages - good alternative regular posts and text navigation. If you need to create big article with different text formatting ( bold type, underlining, headings, etc.) or add graphics to it, or simply create a colorful navigation menu for your community - a wiki is irreplaceable.

Just like Wordpress (or any other CMS) has an HTML editor with which you create articles, Contact has its own editor for creating and editing wiki pages. It looks like this:

Using this editor you can create navigation menus, as well as articles with pictures, videos and audio recordings. Below I will discuss in detail how to work in this editor, but first I ask you to bookmark two links. They will help you a lot in learning wiki markup.

This article will be a detailed manual and I will tell you how to make a menu for a VKontakte group. A beautifully designed VK group menu contributes to a real increase in visitors and sales growth on the site.

Hello my dear readers. Let me tell you today how to do beautiful menu for VKontakte group and completely free. By the way, having learned to create such topics, you can earn a little money from this -))). Already not a single commercial site works without creating its own community in social networks especially VK, which is guaranteed to help bring in new clients, as well as promote your business.

But if your community is not attractive and like everyone else, who will want to stay there? I think no one!!! So let's decorate our groups with high-quality design and learn how to do it very quickly. Before you start creating graphics and our future menu, you need to install the Photoshop program on your computer for further cutting of pictures. Many will ask why you need to cut pictures at all. The point here is that for each menu link we will have to create a separate strip from the general banner.

Today there are several types of created menus:

• Open with active items;
• Closed as a pinned post;
• With individual pictures or a common adjacent picture of the banner and menu.

The essence of creating both options is the same. The only main difference is in the additional elements and record types, and this will be discussed in more detail in this article.

To work with the menu it will help us wiki markup, which is built into the VKontakte text editor today. It differs from the usual one in that it will use standard commands to display a particular image and insert links to the necessary elements. The wiki markup itself allows you to insert code to display images, videos and other elements.

VK group closed menu

IN in this case we will see to the left of the main group avatar a hyperlink in the form of the inscription “group menu”, when we click on it, our menu with active items and images will open.

The menu will look like this:

Open group menu (pinned material)

The idea is to create already open menu items that will be displayed in the description of the group itself, where it is usually displayed for all conditions. Our picture will be attached to the description, which we will prepare in advance and link it to the page on which we will have active items. This menu has become very popular in lately and is in demand among customers. They look like this:

How to make a beautiful menu for a VKontakte group: step-by-step instructions

So, first of all, we will need to create the main avatar of the group, which we will place on the right, and the stub for our menu in the form of a banner.

• For an avatar 200x332 pixels;
• For the main menu banner, 395x282 pixels.

As you may have noticed, the height of the images is different and this is done so that the images do not move down in height and are at the same level since the height of the community name and status takes up about 50 px and we will need to remove this value from the height of the menu.

To make it clear, if the height of the main avatar of a group is 332, then we subtract 50 from it and get the height of the main menu equal to 282. If the dimensions do not matter, then the height can be set arbitrarily.

The next step after creating a community will be setting up materials, and here we need to prohibit participants from creating additional pages and blocks, but only writing on the wall. To do this, you will need to go to the section under the group avatar called “community management” where we need to make our materials “restricted” as shown below.

Now let's start creating the overall composition. You can, of course, simply insert a picture instead of an avatar and into the description, but let’s not be amateurs and will show you how to do it professionally so that it is one full-fledged picture, turning into one another.

Let's create a new canvas in Photoshop with dimensions of 600x350 pixels, which we will use as a stencil by cutting out openings in it for our pictures. To work, we need to convert the sizes of all elements and rulers into pixels and this is done along the following path: “Edit-installation-main” and here we set the pixels.

The next step in creating open menu It is necessary to make clippings for the banner and avatar, which we will then receive for downloading. To do this, go to the section on the left vertical menu and select cutting.

Using left button mouse, as if you were selecting an area, you need to select blocks of the sizes we need and after each selection, press the “Delete” button and select 50% gray. Such actions will lead to the blocks being of the required size and highlighted in a color different from the main background.

It should look like this:

Now we just select the eraser and use the “magic eraser” function to click on each gray block and get a stencil with cutouts. The next step is to select our main image and place it under the background and get ready-made pictures on which you can write text with the name of the menu or other advertising elements.

Great. After you have placed a picture of our design, we just have to select “save for Web” and as a result we get 2 of our pictures. Now we go back to our group and can fill in the main avatar (vertical). We will use the banner for the menu a little later when working with the wiki markup code.

Let's create the menu itself, with active items that will redirect the user to the necessary sections of a third-party site or to albums and catalogs in the group itself. We will use a new image for variety -))).

So, let's go back to Photoshop and create a new canvas with dimensions of 400x300 pixels. Then select in the section: file-place and select a picture for the menu background.

We place the buttons of our future menu on the picture and cut the picture as we did above by selecting the necessary blocks. After which we also select “save for web” and get a folder with our cuts. In my case, I got 4 pictures in a separate folder.

Now we need to upload the pictures downloaded from Photoshop into a separate album and hide them from prying eyes. After loading, each picture will receive its new name and unique id.

Please note that you must have:

• Materials are opened in “restricted” mode;
• Discussions included;
• The folder with photos is open to everyone.

Now all that remains is to configure our page where the menu will be displayed. To do this, go to the main page of the community and select fresh materials and edit and call “OUR MENU”.

Next, we need to insert the pictures that we received when cutting in Photoshop. Some people use markup codes, but in order not to overthink it, I suggest that you simply select inserting a picture by clicking on the camera icon and upload one after another.

Working in text editor if after loading the pictures, we click on the icon in the form of brackets in the right top corner then you should see this code:

Advice: An important point After loading images, the padding is removed. This can be solved by inserting “nopadding” before the image sizes.

For clarification, it is written below what comes from where, but considering that everything will be inserted automatically and there is no need to be clever, and open as some write each picture and take the id, then we simply download and save.

[]
where xxxxx is the id of your image
yyyyy - width in pixels (maximum 388)

It should end up looking like this:

Now our pictures are collected in a separate banner. And in order to add a link to each item, simply click on the image with markup disabled and in the link section paste the copied url.

And now we come to the most important and final point in creating our VKontakte menu. Now we need to save our page with pictures and copy its address. In my case it looks like this:

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

Remember, at the beginning of the article we made a stub menu, which will be a continuation of our main avatar, and we made a stencil for it. This is exactly what we need now.

Go to the main page and do the following:

Step #1.

Paste the page address into the text field to new entry on the wall, after which it is converted into a link.

Step #2.

We attach an image of our menu placeholder to the post and click send.

Step #3.

Now, after publishing the post, click on the creation time in the lower left part of the post and select “PIN”.

Great!!! Let's finish here. Now you know how to create cool menus and you can earn good money from it. I advise you to do everything in the following order:

• We come up with a structure and order the design of menu images;
• We resize and cut all images;
• Insert pictures into albums;
• We edit all the cuts in the editor and publish them on the main pages of the group.

As a result of our work, we will get this menu.

But the menu itself, when pressed, will pop up with active links. It’s worth playing with the sizes and adjusting them to fit your screen, but don’t forget about display on mobile devices.

IMPORTANT: After changing the VK design in 2016, new changes were made when creating images and requirements for pictures about which.

Download VK group menu template + all lesson sources

I hope the material was useful, and you now easily understand how to make a beautiful menu for a VKontakte group. Subscribe to blog updates and see you soon in new posts. If you have any questions, write them in the comments, and I will definitely help you.

I am attaching a video to reinforce what you read -))).

The better designed your group is, the more attention it can attract. If we are talking about working with the commercial community, then the design should be worked out thoroughly. The fact is that the beautiful design of the VKontakte group increases trust in the community from subscribers, and also increases the conversion rate of new members joining. In the article you can find out what it is. New members equal new orders and sales. More people- that's more money.

One example of how changing the design of a group has made it possible to increase the growth of subscribers is a public page dedicated to healthy eating - vk.com/goodiet. Various recipes are published here for people who play sports and watch their diet.

Currently the community has more than 360,000 subscribers. On initial stages its development, the group’s administration did not pay much attention to the design of its site.

The community developed through the publication of juicy photographs and correct articles, as well as through advertising in other public pages. Here is an example of deliciously designed content from their group.

vk.com/goodiet – These are delicious chicken cutlets made from cabbage. Healthy nutrition for sports.

The average cost per subscriber was probably 3-4 rubles. Upon reaching the first 50,000 participants, the administrators decided to change their design and ordered a cover and avatar from the designers.

Thanks to this, the percentage of conversion to subscribers has increased, and the price per participant has also decreased to 1.5 rubles.

Group registration

Before you start designing your community, you need to know what is included in the group design.

Cover

One of the main design elements. The cover creates the first impression of the band. Therefore, it is important to pay great attention to its creation.

Avatar design when creating a group

The second most important design element. In the new cover design, the avatar is almost invisible. But this does not mean that you should not bother creating it.

When you click on the ava, it opens in a new window in full size.

If you use the classic design style without a cover, then the avatar is displayed like this:

Menu design

Very useful tool to navigate through the public. Very often used in commercial groups or communities that need to separate content into categories. For example, the menu is very useful in book publics.

Product cards

Used in public pages selling goods or services.

Today, 90% of groups use the new format with cover art. If you also prefer this style, then pay great attention to creating a beautiful cover.

How to change the design of a VK group?

First of all, decide which elements you will change.

If you want to install new cover, then go to the community management menu.

In the “Basic Information” window, click on the “Download” button next to the “Community Cover” section.

After the cover is installed, let's move on to adding a new avatar. To do this, hover your mouse over the avatar area and click on the download button.

Select the desired photo from your PC.

To set an image for a product card, you first need to enable them in the community settings.

To do this, go to the management section and open the “Partitions” menu.

In the menu that opens, enable the products section.

Set the image.

Optimal sizes

Cover – 1590x400 pixels.

Avatar – 200x200 pixels.

Menu banner – 510x510 pixels.

The image for the product card is 834x 834 pixels.

Ready-made cover and avatar templates for designing VKontakte groups

If you don’t want to spend time creating a design and money on a designer, then you can download templates for the new design of VKontakte groups in psd format.

Let's look at the 5 most popular sites where you can find templates:

1. FreePSD. Public VK, the author of which posts group design templates for free download. Here you can download psd sources for most popular topics and change them to suit your style.

1. You –PS.ru. Website where they are posted free templates covers, avatars and menus for VKontakte. Also, here you can find detailed lessons on working with sources in Photoshop.

1. Erohovec.ru. A large selection of templates for the new VKontakte design for most popular topics.

1. All –For –Vkontakte. The site provides a huge selection of images for menus, avatars and banners.

1. Freepsd templates. Another public page on VKontakte, where templates for covers, banners, avatars and posts are published on a regular basis.

Editing templates

After the design templates have been downloaded, you need to understand how to edit them. For this we need Photoshop program, because it is she who works with the psd format.

Launch Photoshop, open the "File" menu and select "Open".

Open the desired source from your computer.

Since we are using a template, all we need to change are the text elements.

To do this, select the tool with the “T” icon and click on any of the text elements.

Enter your text.

An example of creating a banner.

After you have completely completed editing, save the result in png or jpg format.

To do this, open the “File” menu and click on “Save As...”.

In the window that opens, change the file type from psd to the one you need.

Possible problems

You may have difficulties while creating the design, so you need to consider possible problems when working with group design.

Poor image quality

A very common problem is when, when creating an avatar or cover, users use low-resolution images and stretch them to optimal sizes. Try to use photos with a resolution of 1280x 720 pixels or higher as your main background photo.

Lack of ideas

If you don’t know exactly how best to design a community, then look at a few examples of competitors. Try to get inspired and find interesting design solutions. The main thing is not to copy all their elements, because any design should be unique.

Bottom line

As a result, it is worth noting that the design of a VK group is the most important part of promotion. Beautiful design can increase conversion upon entry, as well as increase the trust of subscribers.

To create a high-quality cover, avatar or menu, it is not necessary to seek help from professional designer, you can always use free templates.