In this article I will tell you how to beautifully design a group in contact. Agree, the more beautiful the group, the more pleasant it is to subscribe to it. At the same time, the group will have a convenient menu, which you just want to go to and view its contents.
Less talking, let's get started menu for a group in Vkontakte.
First, you need to actually create the group itself, I wrote in a previous article,.
And so, it all starts in Photoshop, we create a picture of the menu that you want. Basically - it's some kind of background with the names of the headings. A friend just asked me to make a beautiful group for his company aero-stomadent, he is engaged in industrial ventilation, so I'll do it.
I found a wonderful background of the nature of Alaska, in fact, I will do everything on it.
In the background, we write the menu itself. For example, I write what the firm does. These will be the buttons on which I will then make more pages. Each word will then be a menu button.
On the right, make this part the group's avatar in the future.
Now the picture mode for small images. Select the "Cutting" function from the menu, then right-click on the canvas and cut so that each word is separate.
It is desirable to be sliced \u200b\u200bapproximately like this.
After cutting, save the file, not just through "Save for Web and Devices ..." (or Alt + Shift + Ctrl + S), it will create a daddy with all the files already cut.
Now we are not going to the group yet, we still need to create the wiki markup. Or in other words, create a page.
How to create a Wiki page on Vkontakte?
Open a new browser tab and paste the following link there: http://vk.com/pages?oid\u003d-XXX&p\u003dPage_name where XXX is your group ID. For example, I had it like this.
http://vk.com/pages?oid\u003d-91934542&p\u003dmenu
Then press Fill with content... Here we see a very simple editor, select the camera function to add all our photos to the menu. It should turn out to be something like mine.
But there are spaces between the pictures to remove the spaces - we enter the wiki-markup mode (this is in the upper right corner of the quotation mark<>) add the following tag "option; nopadding;" before the dimensions of the photos. for instance []
And it all worked out together.
And so, it remains now to drive links into each button. Again, the wiki markup does everything. We drive in the previously prepared links of articles that you consider necessary.
Click save, see what happened, everything came together for me if you click it follows the links "https://vk.com/page-91934542_49969122"
Then I go to the group and before that I make a picture that will be displayed for people in the group.
And I just do the post. I insert a link to the menu and add the photo I just took. 5 votes
Good day, dear readers of my blog. With this article, I open a series of publications on the beautiful design of Vkontakte groups. Now we will work on creating the menu, then we will move on to creating a stylish single image, and at the end we will learn how to make images clickable.
You end up with a community like that. When you click on the jump button, an additional stylish page really opens.
The work is not so difficult, I will explain in detail how to proceed. The work will take no more than a couple of hours. Let's talk about everything in order.
1. Preparation for work. Essential tools
So, before I move on to the main question, and we begin to analyze how to make a menu in the Vkontakte group, let's talk about what you need.
1.1. Photoshop
Of course, you can do without Photoshop, watch this video, in which everything is described in detail. If you want to. However, if you do not have the skills, then I highly recommend getting confused and going through all three of my publications.
If you want a normal group, then you have no choice but to learn Photoshop. You can't go anywhere without high-quality pictures. I can recommend you course of Zinaida Lukyanova ... Quickly and not bored, you will get used to a new profession and can even earn money using the skills of a designer. Knowledge is enough!
So, let's get on with it. Do you have everything you need? Then you are ready to move on.
2. Work in Photoshop or do-it-yourself menu
Well, now you can proceed with the step-by-step instructions directly to create a menu. Open Photoshop, then the illustration with the menu. I hope that there will be no problems. In the upper right corner, select "File" and then "Open". We find the document on the computer. What's next?
The picture needs to be cut out. Select the "Cutting" tool. As you can see, it is hidden under the "Frame". Just click on it and hold the left mouse button for a few seconds until an additional menu appears.
Now on the picture itself, right-click and find "Divide Fragment".
In a specific case, I will divide the image into 4 parts. Why is it so? Any button on the Internet is a drawing that is assigned a certain code. You point the arrow at the desired fragment of the illustration and your browser transmits the information to the computer: "Boy, there are additional possibilities here."
Sometimes the whole image changes. For example, drowning buttons when pressed are just the second image, there is no animation there.
In my case, one picture needs to be divided into several parts and each of them must be assigned its own action. Somewhere there is a link to the list of products, somewhere there is a link to the site. There is also a part of the picture that is labeled as "Menu". On mouseover, nothing should happen.
In an amicable way, I had to select 5 parts in order to separate the buttons more evenly, but I justify myself by the fact that if a person misses, he will still do what he wanted, and if he clicks correctly, he will not know about anything.
It's not a problem to make more categories or arrange them in two columns. If you understand the basic information, you can handle everything else.
I moved the lines to make it smoother. It is not difficult, it is done using the cursor.
Make sure the images are saved as jpeg (top-most category on the right). Then click "Save".
That's it.
With this finished, now you can proceed to the group itself and work with the code.
3. Layout in VK for dummies
I used to think that wiki markup only applies to communities. I don't know if something has changed or it has always been like that, but now it does not matter at all whether you are creating a group or a public. Pages can be made both there and there.
Well, there is little left to do, layout. Open the "List of wiki pages".
And add a new one.
Give it a name. In our case, the menu.
And go to editing.
The first step is to add all the parts of our picture.
Loading.
Do this from a folder from the bottom up the list. From the very last (bottom, in my case "Write to admin") to the top ("Menu"), then everything will be right, although it is not so difficult to drag the fragments with the mouse. Whom it is more convenient.
Now you need to remove indents and make different fragments links, and in some places completely remove the ability to click. Go to code mode.
The "center" tags indicate that the photo and its fragments are centered. I will remove them to make it easier for you to perceive the information.
You can do the same if you like, but note that the illustration will slide to the right.
Let's go back to the code to remove the indents between the fragments of the picture.
To make the image unified again, after the size, put a semicolon and write the nopadding (; nopadding) tag.
It will look like this.
Naturally, there should be no indents after each fragment, and therefore the tags must be duplicated.
The illustration now looks uniform. If it didn’t work, check if you wrote the word correctly and if you put a semicolon, remove the spaces where necessary, so that it was like in my example. Every little thing matters to the result.
Now when you click on different parts of the image, they open in a new window.
To prevent this from happening, you need one more tag. Nolink. Don't forget the semicolon.
The transition will not be only in the first picture, but you can substitute your urls for the rest.
You can redirect readers to other wikis, posts, blogs, and other social networks. Now it is not difficult to do this, you all know how. It remains only to save.
This is how our menu looks like.
And here is the desired reference.
4. The final stage of registration
Finally, it's time to decide on a public page for you or a group. The further strategy depends on this.
If you do not know what you have, then go to the management section from the category "My groups".
If you want to do like mine and put on the menu, then go to the second part and we will continue to beautifully design the public. The result will be something like this.
I am not a supporter of making the menu just a picture in the status, but some people want this. I have no right to criticize anyone, and if you have a group, then you can fulfill your task.
5. Video instruction
Watch the video, we have already done all the main work with you, little remains to be done.
6. An alternative method for Dummies for 100 rubles.
If you have any difficulties in creating a menu yourself, feel free to go to this service - VkMenu.ru , where for a modest price of 100 rubles. (today such), you can make a menu through the online constructor.
In my opinion, a great alternative to manual work, and cursing everyone and everything, if nothing comes out with wiki markup.
On this I say goodbye, but not for long. Get some rest and move on to the next part.
Subscribe to my vkontakte group ... Enjoy your work and see you soon!
I was recently puzzled by the design of my VKontakte group. I saw a lot of beautifully designed bands and wanted to do something similar. After several hours of studying Wiki markup, I finally made a beautiful banner for myself and drop-down graphical menuleading directly to the pages of my site. In a nutshell, how it's done. First, two pictures are created in Photoshop at the same time, then one of them is cut into several parts. Further, a special code with external links is inserted on the VKontakte edit pages. Now let's talk about everything in order.
I design Vkontakte groups
High-quality design of VK groups and publics, pinned menu, drop-down menu, internal graphical menu, catalogs, internal navigation - prices and portfolio.
Attention!
In connection with the next update of VKontakte on 10/31/2016, this option for group design has become irrelevant. In part, a similar menu can be implemented on the Fresh news tab in the block under the status bar. But this will be a separate menu, not a single composition with an avatar.
Step 1.
Create a new document in Photoshop, about 850x700 pixels in size, fill it with white. In this example, I immediately overlaid 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 look through. First, select a 200x500 pixel rectangle and press Del. Then select a 510x309 rectangle 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 the 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 picture in place.
Step 2.
Now we place all our graphic design under this layer. In this case, I put a picture with the main background, then I wrote the text, and then in the left rectangle. 
Step 3.
Now we immediately save the right rectangle (avatar) as a separate 200x500 pixel picture. This is a ready-made picture for group decoration. It is loaded into the block in the upper right corner of the group, where it says "Update Photo". And the left picture must be cut into several pictures according to the number of menu items. In this case, these are 5 pictures 510 pixels wide. 
Step 4.
At this step, we need to upload our cut pictures to VKontakte. To do this, immediately under the group's description, select the "Fresh News" block, in my opinion that's what it is called in the original. I renamed it “Menu”. Click "Edit". Important! First, you must have an Open Group, not a Page. Since there is simply no such item on the Page. And second, in the menu Community Management\u003e Information\u003e Content should be selected "Public". 
Step 5.
So, in the "Editing" tab we click on the camera icon and load our five sliced \u200b\u200bmenu pictures. VKontakte will load 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 fix the code a little. 
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 links from each menu item. In this case, the first link leads to the internal page of VKontakte, and the other four links lead directly to the pages of my site. 
Below is the original working code of my menu. You can use it as a base. In it, you change the pictures to your own, substitute your sizes and write your links. And make sure that there are no spaces between square brackets in the code, and there is no new line, otherwise there will be spaces between the pictures in the graphic picture.
[][][]
Step 7.
I repeat once again, to open this menu you need to click on the inscription "Menu". And so it is always rolled up. Read the comments to the post, there are many questions sorted out. Well, join my VKontakte group.
A few tips on how to make the design of a Vkontakte group effective. Learn the principles of proper design of the elements of the commercial community so that it becomes a stable source of profit for your business.
You will learn how to correctly set tasks for the development of the design of the Vkontakte group in front of 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 customers.
Where to start working on a design?
Start developing the design of the Vkontakte group with the definition of the target audience, identifying their desires and needs. You must have a clear idea of \u200b\u200bwho and how you will sell a particular product or service.
Study your competitors. It is quite logical that competitors have already passed the stage of searching for the target audience. You need to analyze their sites and social media groups. This will help you determine the audience that the texts on your competitors' websites are targeting.
Identify the strengths and weaknesses of your proposal compared to those on the market. List 3-5 advantages your business has. These can be: free shipping, 5-year warranty, experienced specialists, a wide range, etc.
Create your sales 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 for any visitor. When drafting it, think about the client'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 passed 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 have decided on the content, now it's time to find out recommendations for the design of group elements. Let's analyze only the most necessary ones: an avatar and a thumbnail, a cover, a banner for a pinned post and a menu.
Avatar
Place your sales proposal on it in order to provoke visitors to take the targeted action. In addition, the avatar must contain contact information by which you can be contacted, a product image or a thematic illustration for services.
Use only high quality images and forget about cliparts from free photo stocks. The search for pictures for the effective design of the Vkontakte group should be done on the sites pinterest.com, freepik.com, flaticon.com or, in extreme cases, google.ru. But it is better to select images on paid photo stocks. Please enter your search terms only in English. If you have difficulties with English, then feel free to use Google translator.
And to make it easier for you to make the right decision, we give 500 rudders for menu design everyone who followed the specified link. To get a discount, just enter the code HWC1817-500-menu when sending an application.
Vkontakte pleases its users with a large number of interestingly designed groups. Many of them outwardly are not inferior to a full-fledged site. This effect provides a competent design of the group, in particular, the menu and avatars. Experienced users can easily cope with this task, but if you are a beginner, then the article will be useful to you.
How to beautifully design a group in VKontakte
Creating a banner
When viewing a group, the user first of all pays attention to the avatar and the menu. Below we will talk about how to create two pictures in Photoshop, cut one of them correctly and write a special code indicating
Stage 1
Open Photoshop, create a new document with dimensions 630x725 pixels. Fill it with white. Cut out two windows in the layer. The graphic design of the Contact will look through these windows. First, select a rectangular area of \u200b\u200b200x710 pixels, press the "Del" button. Next, select a rectangular area 382x442 pixels in size, align the resulting rectangles to the bottom and press the "Del" key.
Stage 2
Place the group's graphic design under the resulting layer. It is best to write the required text in advance on the picture with the main background, and in addition create the required number of menu items.
Stage 3
Next, the right rectangular area of \u200b\u200b200x710 pixels. save it as a separate image. The result is a completely finished drawing for the group's decoration. It needs to be loaded into the block located in the upper right corner of the page. To do this, click the "Upload Photo" button.
What is the left picture for? We cut it into several parts (depending on the number of menu items). For example, our menu has 5 items, which means that the output will be 5 images 382x50 pixels.
Stage 4
The five received pictures must be uploaded to the group's album. Next, go to the group's page and select the "News" block, rename it to "Group menu", and then click "Edit".
Stage 5
So we come to the final stage of the guide "How to beautifully design a group in VKontakte". Open the tab with the name "The original, which is in the lower window, must be copied and then pasted into the" Source code. "In the text of the code, replace photo with the file names and mark the file height (382 pixels). Now insert the addresses of the menu links. The file name is taken from the album.
Stage 6
For perfect alignment of pictures, several conditions must be met:
The group name must fit on one line;
The site address is also one line.
The description must be 10 lines long.
Vkontakte wiki markup
To understand how to design beautifully, you also need to familiarize yourself with the concept of Wiki markup.
What it is?
So Wiki markup is a system for editing pages similar to HTML. Before starting the design of the Vkontakte group, decide on its appearance. The design can be graphic and text.
Text menu decoration
The code for the menu will look like this:
The beginning and end of the code are indicated by tags. Each icon will look like [] followed by a description.
Graphical menu
The code for such a menu will be compiled according to the following principle:
! !! !!
Of course, this information only scratches the surface of Wiki markup. You can find out more about it by visiting the official Vkontakte group. There is a lot of useful information and video tutorials on how to decorate beautifully
