Today I will continue my “Immersion in VK groups”. In the third part of the "series", I told and showed,. Today, let's talk about the design of the VKontakte group menu!
In the first article about creating a menu, there were a lot of questions in the comments, so before starting a new topic, I will answer frequently asked questions.
Question 1: The first and most common: "where is the code in the menu?" or "if there is no bookmark when editing "Source code" how to add an internal page?" or “I still don’t understand what to do if the code does not appear!”
Answer 1: VK has changed the editor, now it's just one click to switch between the visual editor and the code (upper right corner of the editor):
To check which editor you are in: move your mouse over this button, write some text and make it bold - if not ordinary characters appear, then this is code
Question 2: The second one is really problematic: how to remove spaces between images?»
Answer 2: I admit, I myself was frightened when for the first time the menu “went” for the client. Now I fix it quickly, but then it was not fun. See:
Add a nopadding tag; and everything will fall into place!
Space creeps in between the pictures and the menu looks broken. For the ignorant, maybe this is not normal, but for, it is at least not professional. So what's the deal here? Ah, it's very simple! Some updates are constantly taking place in VK, new algorithms are being introduced ... and even the editor is crooked ... sometimes, for no reason, important tags fall out of the code and then we see such a picture. To fix this, you need to look into the code and make the necessary adjustments. The format of the code should be like this:
Pattern: [] Example: []
Usually the menu pictures are moved apart because the code drops out no padding; - put it in place and everything is aligned. Before saving the result, click on the "Preview" button to make sure that everything is smooth.
Question 3: News. In October 2012, forcibly, Vkontakte cut off the authors of groups and publics. Now their size has a common standard of 200x500 pixels. So, if you had more avatar in your group, then make an update (update the avatar).
By the way, along with cropping, VK has introduced another innovation regarding group photos: now by clicking on the avatar, we, just like in the account, will be able to see all the albums of the community. It's comfortable! And out of this a new functionality is drawn in the communications of the group.
So-and-so, we're done with the questions ... now let's move on to the very creation of the menu!
Step 1. How to create a menu in a contact and make nested pages:
First of all, let's make sure that you know how to create a group menu in a contact and go through a small instruction:
How do you like my cheat sheet?
This is the cheat sheet I made! For greater clarity, I will write down each figure:
Do this operation with all nested pages and your menu will be ready.
Eat! The menu has been created, the internal pages have been made, filled in, now let's move on to creating a beautiful graphical menu.
Step 2. How to create a beautiful graphical menu in a contact and install it:
I won’t give you the whole theory of how wiki markup works in contact, we have other goals now. To create a visual menu in a VK group, you do not need to know the entire wiki markup. Let's move on to creating a visual menu!
First, I'll show you the code and the result of my menu:
I confess, I made it on purpose to write this article. All "hands did not reach", you know, like "a shoemaker without boots." But now I'm with a visual menu in the VK group!
I won’t tell you how to draw a picture for the menu, this is the business of designers, I draw myself, but not so professionally. , at the end of the article, I gave a video on how to draw a simple menu in Photoshop, check it out, maybe you can do it on your own. If not, order a menu picture from .
I'll show you the average menu setup option. The difference is in the number of elements. The menu, which is simply cut into strips, is the simplest implementation. The more clickable buttons in a row, the more difficult it is to execute. Although, knowing the feature, everything is simple! It's only a matter of time. So the image width should be:
370 px - if you have two or more objects in a row, like my social network buttons
And max 388 px - if we cut the picture in a simple way, only into lines, without dividing it into small objects. This is the feature that you need to know when cutting the menu into buttons. My image size of the entire menu turned out to be 370x456 px.
After the picture is cut into the required number of objects and saved in a separate album, we upload this album to VK. We upload to the account profile, not to the group! Since there is no longer an option to hide albums in group albums. A technical album in a corporate (for example) group is not needed at all, so we hide the menu items in the account album:
Technical album VK
Once you've set up "Only Me" privacy. We proceed to the installation of the menu itself. I will give you a code example that would be a template for you and analyze what it consists of:
[]
Where, photo7632142_296911699 is the address of the picture! We look at it in the address bar of the picture:
From the first picture, let's start inserting the menu into the VKontakte group
You need a short address of the picture, for this go to the album itself:
Go to the album itself to get the desired image address!
…and starting from the first picture, transfer them to the group menu.
Adding the image size to the menu code!
So, the address of the picture was added, the size was indicated, now we put the tag no padding;- it is needed so that our pictures fit snugly against each other. And the last step is to put a link to the page where the visitor will go after clicking on the picture.
Here's a little clarification! We write external links, links to VK albums and discussions in full, and links to internal pages in the format page-32734125_44298120. At the beginning and end of the line, do not forget to put two square quotes and no spaces.
Clarification 2: when we link to internal pages without images, we put single square quotes for discussions, albums and external links.
Lines in which you have two or more elements are inserted into the code without spaces. Insert each line of the picture one after the other. Because if you press Enter after the line with the picture, the picture will jump to a new line and the menu will move. We need the menu to be displayed as a whole, so we don’t need any extra spaces and “irters”!
After you have transferred all the pictures to the menu and designed them (size, link), save the result and admire your work! All! Ready!
The topic of this article is the new design of VKontakte. Changed again, now you can set a horizontal cover in a group. Making your VK community with such a header is much more interesting. Frankly, no Photoshop knowledge is required here. And you can make a beautiful picture without special skills even in PowerPoint, Fotor, Canva, Pixlr Editor.
Going to the group, you will notice that in those groups the buttons “Pinned entry”, “Information” and “Press menu” have become visible. Before, they were hidden. Naturally, all the design of the groups immediately went.
Downloading a new cover
And now let's figure out how to enable the ability to set a horizontal header. Let's click on the "Manage" button.
Then we click on the last one, and upload a new cover of the VKontakte group. This is where you can understand that the download file can be of any size! But no less than 1590×400 px. We create a cover prototype in any editor. Next, we can select and save the area that meets the requirements of the VC. Here's a hint on where to find the cover image, which editor to use to
What is interesting about the new design of VKontakte?
The main thing: there is more space for information. Now here you can write the name of the group, the purpose of its creation, a call to action, and so on. This design will be logically complete and more functional. But you can leave the old design, it's a matter of taste for everyone.
When you design a horizontal cover, you will notice that the internal menu now somehow falls out of the general context. I think it would be better to pin the picture to go to the menu. And use it to host wiki pages in a group.
At the same time, I would like the developers to add some other possibility for setting a beautiful transition to the Wiki page.
I would like to note that since 2016, the developers of the social network Vkontakte have been actively trying to set up this network to promote business. Make it more business friendly. From my point of view, this is very good and very much in demand among many Internet entrepreneurs.
But most importantly, in my opinion, they need to carefully consider the “Bans” system so that entrepreneurs can work calmly without interfering with those users who come to have fun on the social network.
How to make a Vkontakte group cover online
Turn on your creativity and choose what you like the horizontal cover or the already familiar Vkontakte design. Creating online and installing a new cover is visually, step by step, presented in the video below the article.
P.S. I hope this information is useful to you.
P.S.S. Turn on your creativity and good luck in all your endeavors!
The successful design of the Vkontakte group should be not only beautiful, but also functional and convenient. Make design solve your marketing problems so that the group will attract a paying and buying audience to the brand and stay with it forever.
5 steps how to register a group in Vkontakte
Cover
The community cover today is an important tool for designing a group in Brand Contact and promoting it. You can download it in the "Community Management" section by going to the "Settings" tab. A high-quality horizontal image in the community header itself plays the role of the company's main promotional banner on the social network. It sets the mood, informs, enhances the image, calls for targeted actions, and sells at the same time.
1. Use high quality illustrations
The cover of the VKontakte community should be 1590x400 pixels in size, but it is better to upload a photo 2-3 times larger in .png format. This way you can avoid poor quality display.
2. Adapt the image for different devices
Keep in mind that this image may appear differently on different devices – the edges will be cut off on mobile devices, so it’s best to place all the most important information closer to the center.
3. Place a slogan and USP
Let the client see your philosophy and benefits from the first screen.
4. Display a product / service, process or result of its use
So a potential customer will immediately know what you specialize in and will be involved in the product.
5. Help customers contact you immediately
Write on the banner phone, e-mail, as well as other contacts of the company. If the geographical location is important for your business, for example, you represent the catering industry or horeca, the address will also be useful.
6. Announce Events
Promoting concerts, expecting a new collection or product launch, hosting a festival/conference/client day? Tell everyone who enters the community about it.
7. Present promotions and discounts
Where, if not on the main platform, can you tell the audience that right now they can order from you at 2 times cheaper? Most importantly, don't forget to change the illustration after the offer expires.
8. Offer to take a targeted action
When uploading a community cover, two buttons are placed horizontally in the lower right corner - Write a message and Join the group. Point the arrow at them to further attract the attention of the audience. So if the banner shows a product, you can immediately offer to order it in messages. And if it contains a digest of the latest news, subscribe to always receive fresh information.
Upload an avatar and select a thumbnail
Some brands still do not adopt the cover, preferring the old look of the first screen of the group, using a combination of an avatar with a pinned post as the so-called “header”. In this case, one picture is a continuation of another. It looks most impressive when the photo ends on the same level as the avatar.
When using the maximum avatar size of 200x500 pixels, the size of the picture in the pinned post must be made 510x308 pixels in size. An excellent engaging technique is the fixing of a video uploaded through the player of the social network, which stylistically continues the avatar.
If you use a cover as a header, then the avatar will always be displayed as a thumbnail.
Rules for designing a VK community avatar thumbnail
The thumbnail is a small circular image that is cropped from the large avatar and is displayed in the group search, in each user's community list, and on the left under the cover, if there is one. Here are some design tips.
1. The thumbnail must be understandable to the audience
Do not post a piece of strange illustration. Visualize what the target audience will later associate with the brand, for example, a logo, an icon for a product / service, or maybe the main marketing character of the brand.
2. Use only high-quality photos
It is better to upload the source 2-3 times larger than the required size, so you can forget about the terrible pixel "squares" that make you look bad.
3. Design your own illustrations
Standard stock images will look cheap and unprofessional, and users will become synonymous with distrust of the brand. Make unique drawings in the same concept and colors as the rest of the design.
4. Contrasting background images are what you need
When making VK thumbnails so catchy, the “round” will stand out in the feed among other groups and will not merge with the background of the page.
5. Place contacts or USP of the company
Depending on the goal set for the thumbnail, place a contact phone number or website address, information about free shipping, an indication of the lowest price in the segment, or a share on it.
6. Make text large and readable
It is better not to use serif fonts or italics - they are too “noisy” when viewed from PC screens, mobile devices and smartphones, littering the view. Make sure that the text does not go beyond the borders of the cropped thumbnail. This will allow you to correctly and effectively convey the message to the user.
7. Use custom shapes
For example, in the desired round pattern, enter a polygon or other geometric figure on a white background. Create an unread notification effect or an online graphic icon.
Design a menu
The menu is an important element in the design of a group in Vkontakte, which makes it easier for users to navigate through the group - it will be more convenient for people to find the information they need. Each element and page is created in a special programming language - Wiki markup. With it, you can make images clickable and create convenient pages within the social network as if it were a website page.
You can use both the open type menu and the closed one. In the first case, the user immediately sees the sections that are included in it, in the second, they are preceded by a preview image with the inscription “Menu”. The menu can also visually become an extension of the avatar if you use the old community design.
Design a product showcase
When listing items in the community storefront, remember that the first 3 items are always visible to users. Place the most popular and most ordered ones in them by uploading a presentation image in the same style. Post uniform icons or photos of the products themselves here. Services can be placed in products. In the design, show the process of providing the service or its result. The size of such a picture will be square - 400x400 pixels.
Posting
1. Make full use of available image sizes
The maximum width of an image in the feed is 510 pixels. Square images of 510x510 pixels and rectangular images of 510x300 pixels look most impressive.
2. Develop a custom post style
To make posts look individual, come up with a unified style, font, and color scheme.
3. Put short text on the picture
For example, you can divide an image into 2 parts - text and graphics, or write text while darkening the background. To make the text visible without a darkened background, write it on an underlay (contrasting picture block of a uniform color) or add a shadow to the text. Framed photos look good.
4. Make multiple templates for different purposes
For example, for quotes, use one template for the presentation of visual information, for the announcement of materials from the site - another, and for contests - a third.
Use these 100% tricks and your company will be presented on Vkontakte in the best possible way, and it will be convenient for customers to interact with it. But do not forget that everything needs a measure! See even more fresh ideas for decorating the VK community on the Tesla Target agency services page.
), make a menu.
Now I'll show you how to make a menu in a VKontakte group, and arrange 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.
- Group avatar — 200×300 pix
- Description banner — 510×271 pixels
Prepare the images in the right sizes. I will take ready-made pictures to show you on their example.
So, let's make a beautiful design by 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 put the picture on the wall, and then record with it, fix it in the upper area.
I'm going to the wall. Here in the block "Add a note", click the Photo icon .
Upload the second prepared image. Be sure to choose to post on behalf of the community. And then click Submit.
Now the record needs to be fixed (see). We return to the new entry, and expand the menu in the upper right corner. Here we click "Fix".
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 the 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 "Details" button. She's already in the picture. How can we make it a button so that when clicked, a person gets to our main site? I will show you now.
To make menu buttons active, we need to cut them out as separate pictures. For this we need Photoshop.
Open our picture in the editor, and activate the tool "Cutting".
Cut off the lower part with the button. Hold down the left mouse button and draw a 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
See, after the characters "odi=- " , you need to insert your group id (see ). And at the very end of the link, write a title for your menu page. In the example, we will leave "Menu".
Here we click on the camera icon, and upload the prepared images.
Now we go directly to creating a menu for a group in VK. It should turn out something similar.
Next, go to the section "Editing". Here, for each image, we need to remove the padding so that they merge into a single image. To do this, in the code, add the following value "nopadding;" . And add a link to the desired page or site by entering the value "https://site.ru/page.html" (specify your addresses!). In our example, the button "Details", should lead to the site site. Here's what should happen.
[] []
We save the page. Don't forget to copy its address from the address bar. It should be of the form:
https://vk.com/page-120208137_52523487
We return to the wall of the group, and create a new post. In it we insert a link to the page, and attach the original image. Publish and fix.
This is the menu we ended up with.
Today, every organization, and most users, has its own group on the Vkontakte social network. And among the large number of groups you can find truly beautifully designed ones. So how do the design of the Vkontakte group? Immediately, we note that in order to design a group, it is necessary to study the wiki markup.
Note that around the twentieth of October, Vkontakte administrators cropped group avatars, making them 200 * 500 pixels. Based on this, tweak the lesson a little. Or just make a low menu: 382*232 and 200*500.
Making a Vkontakte group
In Photoshop, create a new white document 630 * 725 pixels. In the layer we cut out two windows through which the graphic design will be visible, namely the rectangle 200 * 710 and press Del and the rectangle 382 * 442, we connect the rectangles below and press Del again.
Under this layer we will place our graphic design. We put the picture, then the text, in the left rectangle we create five points (the number depends on how much you need). 
The right rectangle is saved as a separate picture 200*710. Here is the first picture ready for decoration. It must be uploaded to the block located in the upper right corner of the "Upload Photo" group. We cut the left picture by the number of points. We get 5 pictures 50 * 382. 
We upload all five pictures to the main album of the group page (“My photos” - “My albums” - “Add photos”). We go to the page of the group and under the description we see the block "News" (you can rename it) - "Edit". 
So there have been some changes in Vkontakte, after the previous paragraph, go to the "Edit" tab and click on the button on the right "Wiki markup mode". In the window that opens, put the following code: 
Go to the "Source code" tab and paste the following code there (it's better not to use the visual editor, it knocks down the settings):
[]
[]
[]
[]
[]
Do not forget to change the word photo in the code to the name of your files and specify the height of the file (the width is already set), as well as set the url of the menu links.
In order for the pictures to be combined, the name of the group must fit on one line, the description of the group on 10 lines, and the url of the website on 1. Click on the picture to see how it works.
If you found this article helpful or enjoyable, don't forget to put your like, this will help other users find it faster. And I can find out what interests you the most in order to prepare and write even more interesting and useful articles! Sincerely, Vyacheslav.
