Horizontal group design in VK. Designing the VKontakte community: the most detailed guide in RuNet for a group or public page. Image for a group post

), make a menu.

Now I'll show you how to make a menu in a VKontakte group and design it correctly.

Making beautiful graphics

In the new design of the VKontakte website, the dimensions for graphics have been changed. Below you will find the current values.

Avatar for the group - 200x300 px
Banner in description - 510x271 px

Prepare images in the required sizes. I will take ready-made pictures to show you an example.

So let's do it beautiful design, dividing the overall picture into two parts. As a result, we will get a single design.

First, upload your avatar. Go to the group and click "To upload a photo".

You will see a form in which you need to select a file on your computer’s hard drive. Do it. As a result, we got the following.

Now let's add the second part of the image. To do this, you need to post a picture on the wall, and then record it with it, fix it in the upper area.

Let's go to the wall. Here on the block "Add a note", tap the Photo icon.

Upload the second prepared image. Be sure to select to post as a community. And then click "Submit".

Now the entry needs to be secured (see). We return to the new entry and expand the menu in the upper right corner. Here we click “Pin”.

Now refresh the page and see the result.

The only negative is that the pictures are at different levels. But this is due to the fact that they are not correct size. The avatar should be larger vertically. Then they will be on the same level.

How to create a menu in a VKontakte group

Let's go back to our example and imagine that we need to make a "More details" button. She's already in the picture. How can we make it a button, so that when clicked, a person will be taken to our main site? I will show you now.

To make active menu buttons, we must cut them out as separate images. For this we need Photoshop.

Open our picture in the editor and activate the “Cutting” tool.

Cutting off bottom part with a button. Hold down the left mouse button and drag horizontal line, cutting the picture into two parts.

Now press Alt+Ctrl+Shift+S to save the finished images.

Https://vk.com/pages?oid=-120208137&p=menu

Look, after the symbols "odi=- ", you need to insert the id of your group (see). And at the very end of the link, write the name for your menu page. In the example, we will leave “Menu” as is.

Here we click on the camera icon and upload the prepared images.

Now let's move on to creating a menu for the group on VK. It should look something similar.

Next we go to the section "Editing". Here, for each image, we need to remove the padding so that they merge into a single picture. To do this, add the following value in the code: “nopadding;” . And add a link to the desired page or site, entering the value “https://site.ru/page.html” (indicate your addresses!). In our example, the “More details” button should lead to the website. This is what should happen.

[] []

Save the page. Don't forget to copy her address from the address bar. It should look like:

https://vk.com/page-120208137_52523487

We return to the group wall and create a new entry. In it we insert a link to the page and attach the original image. We publish and pin.

This is the menu we ended up with.

How to make VKontakte group design effective? This is a question many community owners ask. From the article you will learn exactly how design influences customers, increasing profits, and what guarantees the manufacturer or administrator.

The design of the VKontakte group simplifies user interaction with information in the community and increases the percentage of achieving the target action. Visitors, once in a structured and well-designed community, will be able to more easily understand navigating through sections.

The thoughtful design of the VKontakte group inspires confidence in the buyer. The group begins to operate as a full-fledged website. True, there are several differences - these are less complex conditions of detention and it is easier to cope with management and promotion. This is a significant advantage.

So if you want to increase loyalty to your brand and attract a larger number of users, then you should order the design of a VKontakte group from designers who are well acquainted with marketing, including SMM. The guys in the link are just like that and this can be seen from the examples of their work.

Basic design elements of a VKontakte group

To design a group, you should know about the principles of designing elements such as cover, avatar, thumbnail and menu. Let's talk about each element separately and find out how to create a group in VK.

Cover

This is a fairly new introduction, so many people either don’t know or forget about the opportunity to improve the design of their VKontakte group. Against the backdrop of such sluggish competitors, proper use of this element can attract more visitors to you and even increase communication with customers and users. How? Due to the dynamic cover for the VKontakte group. If you are not familiar with this concept, then it is time to learn the necessary details to take advantage of it.

The dynamic cover for a VKontakte group looks the same as a regular one, but it can change depending on the automatic mode with different time intervals: from 1 minute to 1 day. This will help you effectively update information to your customers and maintain some communication with them.

You can place on it an updated date, exchange rates, display new subscribers, as well as other data at your discretion. Thus, the dynamic cover is an unusual and interesting solution to increase the effectiveness of the group.

Avatar

The VKontakte group avatar helps a lot in promotion and creates the necessary color design, which, with the right approach to the matter, will harmoniously combine with the menu and create a complete picture. But it is worth remembering that when using a cover, you will not be able to use a full-fledged avatar; instead, VK suggests using a miniature.

Miniature

Essentially, a thumbnail is a small, beautifully designed image that is attached next to the cover and is displayed in comments on behalf of the community, in correspondence with clients, etc.

The thumbnail has very important functions, since it is what contributes to the recognition of your company both in the news feed of your subscribers and in the internal search of VK.

If you have a corporate logo or symbol, then it is better to place it on the thumbnail and preserve it over time and changes in color and design variations. Interested parties will not lose access and will remember you.

Banner

This is a picture that leads to the main menu design. Usually it is fixed on top and creates a complete composition with the group’s avatar.

How to properly create a VKontakte group design?

To order a design competently, you need to know what exactly you want to achieve from it and understand the basics of search and color solutions, which we will talk about now.

Design is a complex system that consists of source codes. The source is an image that forms the basis of the design and remains in the final product after processing and necessary manipulations.

If you want to use interesting and new pictures, and not hackneyed options that flicker in a thousand groups, then use pinterest, freepik, flaticon or google to search. Requests should be made to English language. If you are not confident in your knowledge, then use any translator, entering keywords for the search.

You have the right to use the services of a professional photographer or artist, but this option will cost much more, although it will be original.

You can choose your preferred font and size. A beautifully written name and address of the public on one of the design elements will give the group a modern and neat look. But remember that a variety of fonts is not always good option, as well as too large a palette of colors. This creates an impression of untidiness and discourages customers.

Remember the rules of typography. A good designer will be able to place the text beautifully and make a coherent image out of nondescript letters that can be used profitably in marketing.

Typography- a tool for expressing the overall design concept. With its help, professionals are able to harmoniously combine text and visual material. This technique requires experience and a keen eye.

Design colors and their combinations can be seen from palettes that are easy to find on the Internet. For business companies, blue, light blue, white and other light colors are usually used. If you sell specialized products, you can also reflect its character using color.

So, you have learned about the main components of design and its impact on the behavior of community visitors. The correct design of a VKontakte group emphasizes your professionalism and sets you apart from other companies, showing responsibility and increasing sales.

Communicating with customers and making the experience easier for them is very important, and design can give you just that.

The decision to order VKontakte group design from professionals is an important acquisition that will help you achieve your goals.

Some tips on how to make VKontakte group design effective. Learn the principles of properly designing the elements of a commercial community so that it becomes a stable source of profit for your business.

You will learn how to correctly set tasks for developing the design of a VKontakte group for your employees or freelancers. You will be able to control the work process and evaluate the final result not only from an aesthetic point of view, but also taking into account the ability of the created design to convert visitors into clients.

Where to start working on design?

Start developing a VKontakte group design from defining the target audience, identifying their wants and needs. You must have clear ideas about who and how you will sell a certain product or service.

Study your competitors. It is logical that competitors have already passed the stage of searching for the target audience. You need to analyze their sites and groups in in social networks. This will help determine the audience that the texts on your competitors' websites are aimed at.

Identify weaknesses and strengths your proposal compared to those on the market. Write down 3-5 advantages that your business has. These could be: free shipping, 5-year warranty, experienced specialists, wide range, etc.

Make your trade proposal, based on research of the target audience and competitors’ sites. This is the title of the avatar or cover of the VKontakte group. It plays a huge role in deciding whether to further explore community content. Your proposal should clearly define the topic, be simple and understandable to any visitor. When drafting it, think about the customer's benefit, not the product.

People don't want to buy a product/service - they want a solution to their problems.

All these are preparatory stages that must be completed before starting work on the design of the VKontakte group. They are the ones who determine the content that needs to be placed on the design layout.

Important elements in the design of VKontakte groups

We’ve decided on the content, now it’s time to find out recommendations for designing group elements. We will analyze only the most necessary: an avatar and a thumbnail, a cover, a banner for a pinned post and a menu.

Avatar

Place your sales offer on it to provoke visitors to take a targeted action. In addition, the avatar should contain contact information where you can be contacted, an image of a product or a thematic illustration for services.

Use only high-quality images and forget about clipart from free stock photos. The search for images for effective VKontakte group design should be done on the sites pinterest.com, freepik.com, flaticon.com, or, as a last resort, google.ru. But it’s better to select images from paid photo stocks. Search queries Please enter in English only. If you have difficulties with English, then feel free to use Google translator.

To make it easier for you to make the right decision, we We’re giving away 500 rudds for menu design to everyone who follows the specified link. To receive a discount, simply enter the code HWC1817-500-menu when submitting an application.

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 make a beautiful menu for a VKontakte group and completely free. By the way, having learned to create such topics, you can earn a little money from this -))). Not a single commercial website operates without creating its own community on 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 necessary elements. The wiki markup itself allows you to insert code to display images, videos and other elements.

VK group closed menu

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 clicked on, 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 write 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 of the left vertical menu and select cutting.

Using the left mouse button, 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 we go to home page communities 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 upper right corner, we should see this code:

Advice: An important point after loading images is to remove the padding. 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:

https://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.

We paste the address of the page into the text field for a new post on the wall, after which it will be 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 clicked, 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 -))).

Hello everyone, dear readers of the blog site. I continue my topic about - in fact, not everything is as complicated as it seems, and there is nothing special to study here. Your professionalism depends entirely on practice. Well, okay, today we will talk about the beauty of your groups, the beauty of the menu in your groups and how to beautifully design the menu and the groups themselves, and with your own hands, i.e. for free!

Speaking of the simplicity of the SMM industry - even in there are more branches and tricks that you need to know in theory in order to achieve results. Well, okay, I also admit the fact that I may still be too weak in these areas, although I have clients in both.

Well then, Let's go create a menu for VKontakte groups?

How to design a menu in a VKontakte group yourself

Yes, exactly on your own, because after reading this article, you will not need the services of freelancers. Although this is not an expensive business, for 1500 you can make a menu on workzila (I wrote a detailed experience about working with this exchange).

So this is what we need to create a group on VK:

1. Layout (graphical arrangement of elements) - we must know where everything should be.

2. Basic knowledge of wiki markup. (we’ll talk about the most standard things below, but for a detailed study I recommend this group ).

3. Basic skills in working with Photoshop. You will need to cut out pieces of the layout to the required size.

Where can I get menu layouts?

Layouts for VKontakte menu design can be taken different ways, For example:

1. Freelancing or also Workzilla.

2. You can create it yourself if you have Photoshop skills. If not, I recommend Evgeniy Popov’s courses, here is one of them, just for Photoshop - click.

3. You can google and download ready-made ones. Believe me, there are quite a few of them.

Well, on the other hand... Why Google? Just subscribe to my site updates. And click on the buttons social networks below.

I have prepared an archive especially for you, in which more than 100 different designs for VKontakte groups!. When unpacked, the archive takes up about 2.5 gigabytes.

The main condition is to be a subscriber and follow the social buttons!

Thank you. Now you can download the archive from this link.
Don't forget to go through the rest of the social buttons.

Sizes of avatars and menus that are useful for designing VK groups

In order to properly design a group or public page, you need to know about the size of the pictures that you need to use. I ask you to pay attention to this picture.

As you can see, in the group the avatar needs a size of 200 in width and 500 pixels in height. And for the main menu image - 395 pixels wide and 289 pixels high.

That's basically all you need. There are layouts, there is an understanding of sizes.

The creative part is over - only a little work remains. We begin the technical part of the entire process of creating a menu for groups.

How to create a VKontakte group yourself, having layouts in hand

So we have the group design mockups. Now you need to cut out the necessary parts.

Of course, nothing is needed for the group avatar. We cut out the required part from the layout or picture and paste it into the group. I think you can insert it yourself? Well, I hope so. If not, write comments, I will add this section to the article.

Now the menu, it needs to be cut out. Not the menu itself, of course, but every part for the menu (buttons) definitely needs to be cut out.

First, a little education.

How is the group menu different from the public menu?

They differ in that the group menu is essentially a set of buttons. But this menu is always hidden! Always! And the public menu is always open and in fact is a pinned post link leading to a page with sections of the menu itself (buttons).

So, again: in a group - to see the menu, you need to click on the “Group Menu” button, by default this button is called “Latest News”.

And in the public (in a group, by the way, you can also) the menu is always open.

But this picture is one big and nice link, which leads to a larger separate menu. Here:

This picture-button on the menu is created through a pinned post. This is just a post in the group that we pin forever! This link post will take you to a separate page that we will gently pre-create.

How to create a separate page for the VKontakte menu

To create a page for the future menu (navigation) you need to send the following request to VK:

Http://vk.com/pages?oid=-XXX&p=YYY

where XXX is the group number, YYY is the page name (here all question marks and dashes are required).

Moreover, I recommend making the name normal, attractive and meaningful, because it will shine and people will form a certain impression about you and your group based on this name. For example, “Navigation” or “Group Menu” are normal names, but they seem banal. Use your imagination.

I entered the following query

http://vk.com/pages?oid=-97062010&p=navigation

And I immediately opened a created page with the ability to edit it.

This is where you will need to insert your code for the menu itself using wiki markup. But more on that later.

By the way, I’ll tell you a secret, if you have a group (and not a public one) - a standard menu that already exists by default - it is already a page in itself. So you can use it if you have problems creating additional pages.

How to make a pinned post in a group or public

Yes, and in any type of community, a pinned post is created the same way! Everything is done very simply.

And in the window that appears, click the “Pin” button - it’s simple!

Many groups, by the way, use pinned posts as announcements. If the relevance of this ad has passed, you simply click again on the publication date and the “Unpin” button.

In fact, everyone now uses this particular menu method.

Guess why?

So, we already know how to create pages and pin posts. Cool. Let's return to our ram layouts.

Cutting a layout for group or public design

So, for the avatar everything is clear, we are not cutting anything here. We created a picture of the required size and uploaded it to VK. All. We're done with the group avatar!

Now the menu.

For example, I took the menu from this group. I made it myself, and I still have access to it, so I can even show the code of the pages.

So, you already know how to make the main image for the menu - it’s just a pinned post.

Click on the menu and see the picture.

We need to highlight “clickable” zones.

those. select the buttons themselves. Let me highlight these areas for you with red lines.

How much do we get? 5 pictures. And not every picture will be a button!! As you can see, the top large picture is not a button, but itself...

So, we cut out pictures along these lines. Now you need to “upload” it to VK.

If you created a separate page for the menu, then click on the “Fill with content” button on the newly created page.

If you did not create this page, but used a ready-made page for the menu, then you will immediately see the page editor and you can immediately upload photos:

Filled in and you should see the following:

You may just have a code like the one in the picture below. If not, click the “Source Code” button, I highlighted this button in the top picture. And you will see the following:

Here we need to line up all the pictures so as not to get confused (well, that's what I do).

And, so that there are no paddings between the pictures, enter the “nopadding” tag, it should look like this:

[]

After that, you need to put links on the necessary pictures.

You already know how to create separate pages. Now you need to correctly enter these links.

I won't hurt you too much. Here's how I inserted links to pages in VK:

[]

this is page-58190479_45419120 - this is the address of the VKontakte page itself, you will find this identifier in the address bar of your browser.

That's all :) Isn't it difficult?

This is what I ended up with in my code. If you have something similar, then everything is in order.

If you have any problems with any of the points, please contact us. I'll be glad to help.

Taking this opportunity, I would like to remind you that there are wonderful services for any promotion and cheating, these are:

prospero | associate | socialtools

I may not have told all the secrets that needed to be told. I admit that I missed something, after all, the article was not short - write to me if you notice any obvious omissions. Thanks in advance.